آموزش طراحی قالب وردپرس – حلقه ها

سلام دوستای عزیز. در جلسه قبل یاد گرفتیم که چطوری بخش هدر سایت رو بسازیم و همینطور چطوری با روش سریع و آسان بتونم پنل تنظیمات رو بسازیم

حالا من میخوام برم سراغ حلقه ها در وردپرس

حتما میگید حلقه ها چی هستند؟ حلقه ها در واقع همون نوشته های صفحه هستش که نشون داده میشه

پس در این قسمت از آموزش طراحی قالب وردپرس بهتون میگم که چطوری نوشته ها رو با شکل خوشگلی نشون بدید

فیلم آموزشی طراحی قالب وردپرس – بخش حلقه ها

حلقه ها در آموزش طراحی قالب وردپرس

در ابتدا باید ویژگی تصویر شاخص رو برای سایت فعال کنیم. پس فایل functions.php رو باز کنید و کد زیر رو اضافه کنید:

add_theme_support('post-thumbnails');

حالا فایل ایندکس رو در حالت ادیت باز کنید و کد زیر را در آن قرار دهید:

<?php get_header();?>
<div class="main-content">
 <div class="container">
  <div class="posts col-md-9 col-sm-12 col-xs-12 pull-right">
   <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   <div class="post-list">
    <div class="post-image">
    <?php if (has_post_thumbnail()){
		the_post_thumbnail('full');
	}
	?>
    </div>
    <div class="post-content">
    <h2 class="post-title"><a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?></a></h2>
    <div class="clearfix"></div>
    <div class="post-meta">
    <span><i class="fa fa-user"></i> <?php the_author();?></span>
    <span><i class="fa fa-calculator"></i><?php the_time('M j, Y');?> </span>
    <span><i class="fa fa-comments"></i> <?php comments_number( 'بدون دیدگاه', 'یک دیدگاه', '% دیدگاه' ); ?></span>
    </div>
    <p> <?php the_excerpt();?> </p>
   </div>
   </div>
   <?php endwhile; else : ?>
	<p><?php _e( 'چیزی پیدا نشد' ); ?></p>
<?php endif; ?>
  </div>
  
  <div class="sidebar col-md-3 col-sm-12 col-xs-12 pull-left">
  
  </div>
 </div>
</div>
<?php get_footer();?>

خب در خط اول با کد <?php get_header();?> فایل هدر را فراخوان کردیم

خط بعدی هم کد  html هستش و من توضیح نمیدم

فقط کدهای php رو توضیح میدم

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>   : با این کد حلقه ما شروع میشه و در واقع شرطی برای وجود نوشته هستش . میگه که اگر نوشته یا نوشته هایی وجود دارد

پس اگر شرط بالا درست میره میره سراغ بعدی

<?php if (has_post_thumbnail()){  : این هم بررسی می کنه که تصویر شاخص برای نوشته ست شده یا نه. با تصویر شاخص که آشنایی دارید دیگه؟

خب پس اگر واسه نوشته تصویر شاخص گذاشته باشیم با کد the_post_thumbnail(‘full’); تصویر شاخص رو فراخوان میکنیم تا نشون داده بشه.

خب حالا می خوام عنوان نوشته رو نشون بده پس تابع <?php the_title();?> عنوان مطالب رو بر می گردونه.

حالا نوبت به این میرسه که عنوان رو به آدرس نوشته لینک بدیم برای این کار هم تابع <?php the_permalink();?> رو استفاده می کنیم.

حتما توی خیلی از سایت های وبلاگ دیدیم که متا های نوشته رو هم قرار می دهند مثل: نام نویسنده، تعداد دیدگاه ها، تاریخ نوشته و …. خب ما هم این قسمت رو به تم اضافه کردیم حالا توضیح میدم که کجا و چطوری

تابع <?php the_author();?> : نام نویسنده رو بر میگردونه

تابع <?php the_time(‘M j, Y’);?> : تاریخ ارسال نوشته رو بر میگردونه

تابع <?php comments_number( ‘بدون دیدگاه’, ‘دیدگاه’, ‘% دیدگاه’ ); ?> : این تابع هم تعداد دیدگاه های هر نوشته رو بر میگردونه خب این هم از این

حالا من می خوام توی صفحه اصلی وبلاگم یه تیکه از متن نوشته رو نشون بده. پس از تابع <?php the_excerpt();?> استفاده می کنم.

در انتها می بینیم با این کد حلقه بسته میشه

<?php endwhile; else : ?>

<?php _e( ‘چیزی پیدا نشد’ ); ?> این متن هم هنگامی که نوشته ای پیدا نشه نشون میده و با کد <?php endif; ?> حلقه به طور کامل بسته میشه

خب کارمون تا اینجا تموم شد حالا نوبت به استایل دهی هستش

حالا این کدهارو به فایل استایلتون اضافه کنید

/************ Posts *****************/

.posts{
margin: 20px 0;
background: #fff;
padding-left: 0 !important;
padding-right: 0 !important;
}

.post-list {
padding-bottom: 40px;
border-bottom: 10px solid #F1F1F1;
}

.post-image img {
width:100%;
height:auto;
}

.post-content {
padding: 0 20px;
}

.post-title a {
color: #333;
font-size: 25px;
}

.post-meta span {
margin-left: 30px;
display: inline-block;
float: right;
}

.post-meta {
display:block;
width:100%;
float:right;
border-bottom:1px solid #F1F1F1;
padding-bottom:10px;
margin-bottom:20px;
font-size: 12px;
}

.post-meta span i {
color:#e74c3c;
margin-left:5px;
}

البته اینم بگم که شما استایل ها رو هر شکلی که بخواهید می تونید بزارید

این قسمت از آموزش طراحی قالب وردپرس هم به پایان رسید. امیدوارم که این آموزش لذت بخش بوده باشه. هر سوالی که داشتید در بخش دیدگاه ها بپرسید حتما پاسخ میدم

موفق باشید

آموزش طراحی قالب وردپرس – قدم اول : دانلود نرم افزار های مورد نیاز

آموزش طراحی قالب وردپرس – قدم دوم: راه اندازه لوکاه هاست و نصب وردپرس

آموزش طراحی قالب وردپرس – قدم سوم: ساخت فایل header.php – بخش اول

آموزش طراحی قالب وردپرس – قدم سوم: ساخت فایل header.php – بخش دوم

آموزش طراحی قالب وردپرس – قدم پنجم: طراحی سایدبار

آموزش طراحی قالب وردپرس – قدم ششم : فرم جستجو

آموزش طراحی قالب وردپرس – قدم هفتم بخش 1: ساخت فایل single.php

آموزش طراحی قالب وردپرس – قدم هفتم بخش 2: ساخت باکس درباره نویسنده

آموزش طراحی قالب وردپرس – قدم هفتم بخش 3: ساخت بخش دیدگاه ها