ابتدا فایل index.php را در ویرایشگر کد و قالب را در مرورگر باز کنید :
خب شروع می کنیم :
قسمت پست ها مقداری با بقیه قسمت ها فرق دارد، در ایجاد پست از حلقه ی های شرطی if (اگر) و while (تا زمانی که) استفاده می کنیم و با این دستورات چک می کنیم که مطلبی برای نمایش وجود دارد یا خیر…
به دلیل اینکه ما قسمت پست را از قبل ایجاد کردیم ، بهتر است ابتدا آن را پاک کنید (فقط کدهای html آن را پاک کنید) تا بهتر متوجه شوید این قسمت چگونه ساخته می شود، (دوباره ساختار پست را به شکل قبل خواهیم نوشت)
سپس کد زیر در فایل index.php در قسمت content قرار دهید :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
|
<!– Start Content –>
<div id=“content”>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
<!– End Content –>
|
ابتدا حلقه را ایجاد کردیم، اگر بخواهیم کد فوق را ترجمه کنیم می شود :
“”اگر پستی وجود داشت، تا زمانی که پستی وجود دارد آن را نمایش بده.”” این کد تمامی مطالبی که منتشر شده اند را نمایش خواهد داد. اما اگر مرورگر را ریفرش کنید مطلبی نمایش داده نشده است! دلیل این اتفاق این است که تایین نکردیم که چه اطلاعاتی از پست (مثلا عنوان پست، متن پست و …) نمایش داده شود. برای همین هنوز قسمت content خالی است. ابتدا به بخش مدیریت وردپرس بروید و چند پست جدید ایجاد کنید.
خب حال به وردپرس می گوییم اگر پستی در دیتابیس پیدا شد، ابتدا برای آن یک div با کلاس post ایجاد کن
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
|
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div>
</div>
<?php endwhile; ?>
<?php endif; ?>
|
در وردپرس هر پست دارای یک id متفاوت هست، که با استفاده از تابع the_ID قابل چاپ است، ما نیز برای اینکه به هر پست یک id متفاوت بدهیم از این تابع استفاده خواهیم کرد. :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
|
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class=“post” id=“post-<?php the_ID(); ?>“>
</div>
<?php endwhile; ?>
<?php endif; ?>
|
حال اگر مرورگر را ریفرش کرده و سورس را نگاه کنید احتمالا با نتیجه زیر مواجه خواهید شد
می بینید که به تعداد پست هایمان (من دو پست ایجاد کردم) div با کلاس post ایجاد شده، و به هر یک از divها یک id داده شده است. خب ادامه می دهیم، حال باید عنوان پست ها را چاپ کنیم (با توجه ساختار قبلی که برای پست ها ایجاد کرده بودیم) پس کد را به شکل زیر توسعه می دهیم :
|
۱
۲
۳
۴
۵
|
<div class=“post” id=“post-<?php the_ID(); ?>“>
<a href=“<?php the_permalink() ?>“><h4 class=“post-title”><?php the_title(); ?></h4></a>
</div>
|
تابع the_permalink لینک مطلب را چاپ می کند که ما آن را در مقدار href استفاده کرده ایم، تابع the_title نیز عنوان مطلب را چاپ می کند.
حال اگر قالب را در مرورگر ریفرش کنید، باید عناوین پست ها چاپ شده باشند :
اگر بر روی عناوین کلیک کنید نیز، به صفحه ی مطلب خواهید رفت، اما به دلیل اینکه هنوز فایل single را ایجاد نکرده ایم، مطلب را نخواهیم دید، خب به این قسمت کاری نداریم و به توسعه قسمت پست می پردازیم :
بعد از عنوان مطلب ، ساختار زیر را برای نمایش مطلب و تصویر بند انگشتی داشتیم :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
|
<div id=“post-<?php the_ID(); ?>“>
<a href=“<?php the_permalink() ?>“><h4 class=“post-title”><?php the_title(); ?></h4></a>
<div class=“thumb-text”>
<img class=“post-thumb” src=“<?php bloginfo(‘template_url’); ?>/images/thumb.png” width=“150” height=“150” alt=“تصویر بند انگشتی” title=“تصویر بند انگشتی”/>
<div class=“post-content”>
<p>متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد…</p>
</div>
</div>
<br style=“clear: both;” />
<a class=“read-more” href=“#”>ادامه مطلب</a>
</div>
|
ابتدا تگ p و متنش را حذف کنید تا متن مطلب را با تابع وردپرس بگیریم.
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
|
<div class=“thumb-text”>
<img class=“post-thumb” src=“<?php bloginfo(‘template_url’); ?>/images/thumb.png” width=“150” height=“150” alt=“تصویر بند انگشتی” title=“تصویر بند انگشتی”/>
<div class=“post-content”>
<?php the_content(); ?>
</div>
</div>
|
بعد از قرار دادن تابع the_content اگر مرورگر را ریفرش کنید می بینید که کل متن پست چاپ شده است :
در صورتی که ما فقط چند خط اول پست یا همان خلاصه را می خواهیم چاپ کنیم. تابع the_excerpt در وردپرس این کار را برای ما انجام خواهد داد و فقط تقریبا ۲۵۰ کاراکتر ابتدای متن پست را برایمان چاپ خواهد کرد. پس تابع the_excerept(); را جایگزین تابع the_content(); کنید.
نتیجه :
(من متن پست “سلام دنیا” را برای بهتر دیدن نتیجه طولانی کردم)
اگر سورس را نگاه کنید خود وردپرس به صورت پیشفرض متن را قالب بندی نیز کرده و متن خلاصه را درون تگ p قرار داده است.
خب حال نوبت به تصویر بند انگشتی می رسد در حالت عادی پوسته ما از تصاویر بند انگشتی پشتیبانی نمی کند. و تصویر همه مطالب همین تصویر پیشفرض خواهد بود. برای فعال کردن این قابلیت ابتدا باید کد زیر را درون فایل functions.php و قبل از تگ ?> قرار دهید :
|
۱
۲
۳
|
// Add Thumbnail Theme Support
add_theme_support(‘post-thumbnails’);
|
حال اگر یک پست جدید ایجاد کنید، می بینید که قسمت تصویر شاخص فعال شده است، یک پست ایجاد کنید و برای آن یک تصویر شاخص نیز انتخاب کنید.
سپس به کدهای فایل index بر گردید و کد تصویر بند انگشتی را در حلقه نیز قرار دهید :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
|
<a href=“<?php the_permalink() ?>“><h4 class=“post-title”><?php the_title(); ?></h4></a>
<div>
<?php if ( has_post_thumbnail()) : ?>
<?php the_post_thumbnail();?>
<?php else: ?>
<img class=“post-thumb” src=“<?php bloginfo(‘template_url’); ?>/images/thumb.png” width=“150” height=“150” alt=“تصویر بند انگشتی” title=“تصویر بند انگشتی”/>
<?php endif; ?>
<div class=“post-content”>
<?php the_excerpt(); ?>
</div>
</div>
|
در حلقه فوق شرط گذاشتیم که اگر مطلب دارای تصویر شاخص بود آن را نمایش بده در غیر اینصورت همان تصویر پیشفرض “بدون تصویر بند انگشتی” را نمایش بده، اگر مرورگر را ریفرش کنید خواهید دید که تصویر بند اگشتی مورد نظرمان نمایش داده شده است، اما! تصویر در اندازه ی واقعی خود نمایش داده شده است در صورتی که تصویر باید در اندازه ی ۱۵۰ * ۱۵۰ نمایش داده شود تا بهم ریختگی ایجاد نکند. برای اینکه تصویر بند انگشتی را به این اندازه تغییر دهیم دوباره به فایل functions.php رفته و کد فعال سازی قابلیت تصویر شاخص را به شکل زیر توسعه دهید :
|
۱
۲
۳
۴
۵
|
// Add Thumbnail Theme Support
add_theme_support(‘post-thumbnails’);
add_image_size(‘thumb-size’, 150, 150, true);
|
سپس به فایل index.php برگردید و کد تصویر شاخص را به کل زیر تغییر دهید :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
|
<?php if ( has_post_thumbnail()) : ?>
<?php the_post_thumbnail(‘thumb-size’);?>
<?php else: ?>
<img class=“post-thumb” src=“<?php bloginfo(‘template_url’); ?>/images/thumb.png” width=“150” height=“150” alt=“تصویر بند انگشتی” title=“تصویر بند انگشتی”/>
<?php endif; ?>
|
در کد فوق تایین کردیم که اندازه ی تصویر شاخص اندازه ای باشد که thumb-size در فایل functions.php دارد که همان ۱۵۰ * ۱۵۰ است.
حال اگر مرورگر را ریفرش کنید، می بینید که تصویر ما به اندازه ی ۱۵۰ * ۱۵۰ در آمده است با اینکه اندازه ی واقعی آن بیشتر یا کمتر از این مقدار است…
اما هنوز این قسمت مشکل دارد! تصویر شاخصی که ما قرار داده ایم، دارای کلاس post-thumb و استایل مخصوص به خود است اما این تصویر شاخص فاقد این کلاس است (اگر سورس را ببنید متوجه می شوید) پس چگونه همان استایل post-thumb را به آن اختصاص داده و آن را در مکان مناسب قرار دهیم؟!
ابتدا سورس صفحه را نگاه کنید، تگ img که وردپرس برای تصویر شاخص ایجاد می کند دارای کلاس هایی نیز هست :
ما نیز از این کلاس ها برای استایل دادن به تصویر شاخص استفاده می کنیم.
برای اینکار فایل style.css را باز کنید و کد زیر را پیدا کنید :
|
۱
۲
۳
۴
۵
۶
۷
|
#content .post .post-thumb {
margin: 0 10px;
float: right;
}
|
سپس آن را به شکل زیر تغییر دهید :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
|
#content .post .post-thumb,
#content .post .attachment-thumb-size {
margin: 0 10px;
float: right;
border-radius: 3px;
}
|
حال دیگر کارمان با تصویر شاخص نیز تمام شد، و نوبت ادامه مطلب می رسد. به فایل index.php بر گردید و کد ادامه مطلب را به شکل زیر تغییر دهید :
|
۱
|
<a class=“read-more” href=“<?php the_permalink() ?>“>ادامه مطلب</a>
|
همانطور که قبلا هم گفتیم تابع the_permalink لینک نوشته را چاپ می کند.
بعد از انجام اینکار کدهای اطلاعات پست را می نویسیم.
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
|
<div class=“post-meta”>
<div class=“author”>
<img src=“<?php bloginfo(‘template_url’); ?>/images/auther.png” />
<a href=“#”>نام نویسنده </a>
</div>
<div class=“date”>
<img src=“<?php bloginfo(‘template_url’); ?>/images/date.png” />
<span>31 اردیبهشت ۱۳۹۲</span>
</div>
<div class=“comments”>
<img src=“<?php bloginfo(‘template_url’); ?>/images/comments.png” />
<a href=“#”>20 نظر</a>
</div>
</div>
|
کدهای فوق را بعد از کد ادامه مطلب قرار دهید. حال باید نام نویسنده مطلب را از دیتابیس بگیریم.
این کار با استفاده از تابع the_author انجام می شود. پس فقط کافیست این تابع را جایگزین کلمه ی نام نویسنده کنید :
|
۱
۲
۳
۴
۵
۶
۷
|
<div class=“author”>
<img src=“<?php bloginfo(‘template_url’); ?>/images/auther.png” />
<a href=“#”>نویسنده : <?php the_author(); ?></a>
</div>
|
برای صفت href نیز باید لینک مطالب این نویسنده را قرار داد، برای اینکار نیز از تابع زیر استفاده می کنیم :
|
۱
۲
۳
۴
۵
۶
۷
|
<div class=“author”>
<img src=“<?php bloginfo(‘template_url’); ?>/images/auther.png” />
<a href=“<?php the_author_link(); ?>“>نویسنده : <?php the_author(); ?></a>
</div>
|
کار بعدی گرفتن تاریخ انتشار نوشته است، برای این کار از تابع the_date استفاده می کنیم :
|
۱
۲
۳
۴
۵
۶
۷
|
<div class=“date”>
<img src=“<?php bloginfo(‘template_url’); ?>/images/date.png” />
<span><?php the_date(); ?></span>
</div>
|
با اینکه اینکار تاریخ انتشار نوشته را چاپ خواهد اما فرمت تاریخ میلادی است در صورتی که تاریخی که ما میخواهیم شمسی است، برای اینکه فرمت زمان را به شمسی چاپ کنیم نیازمند افزونه ی wp_jalali داریم، این افزونه به صورت پیشفرض همراه با وردپرس فارسی منتشر می شود. و فقط کافیست آن را فعال کنید. برای فعال کردن افزونه ، در بخش مدیریت وردپرس مسیر افزونه ها > افزونه های نصب شده، بر روی لینک فعال کردن زیر نام wp-jalali کلیک تا افزونه فعال شود :
حال اگر قالب را ریفرش کنید، می بینید که ساعت انتشار مطلب چاپ شده است؟!! پس باید تغییراتی در تابع the_date بدهیم. برای اینکار آن را به شکل زیر تغییر دهید تا تاریخ را چاپ کند.
|
۱
۲
۳
۴
۵
۶
۷
|
<div class=“date”>
<img src=“<?php bloginfo(‘template_url’); ?>/images/date.png” />
<span><?php the_date(‘j F Y’); ?></span>
</div>
|
حال باید تاریخ مطلب به صورت صحیح نمایش داده شود.
کار بعدی تعداد نظرات مطلب است که فقط کافیست تابع زیر را جایگزین تگ a کنید
|
۱
۲
۳
۴
۵
۶
۷
|
<div class=“comments”>
<img src=“<?php bloginfo(‘template_url’); ?>/images/comments.png” />
<?php comments_popup_link(); ?>
</div>
|
حال اگر قالب را ریفرش کنید تعداد نظرات هر مطلب نمایش داده خواهد شد. اما کلمه مورد نظر ما “نظر” هست اما وردپرس به صورت پیشفرض کلمه دیدگاه را چاپ می کند برای تغییر آن تابع را به شکل زیر توسعه می دهیم :
|
۱
|
<?php comments_popup_link(‘بدون نظر’ , ‘۱ نظر’ , ‘% نظر’); ?>
|
تابع فوق در اصل سه مقدار می گیرد، مقدار اول اگر نوشته بدون نظر بود که ما نوشتیم بنویسد “بدون نظر” مقدار دوم اگر نوشته دارای ۱ نظر بود که ما نوشتیم بنویسد ۱نظر، و مقدار سوم اگر نوشته دارای بیش از ۱نظر بود که ما نوشتیم عدد تعداد نظرات و کلمه نظر.
