آموزش ساخت حلقه در قالب وردپرس

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

دوستان عزیز در ابتدا باید بدانیم که اصلا حلقه در قالب وردپرس چیست و به چه دردی میخورد.حلقه ها در وب سایت وردپرس برای نمایش نوشته های وب سایت و در حالت کلی برای نمایش تمامی موارد در وب سایت است که بدون ان در حالت کلی وب سایت شما به درستی نمایش داده نمیشود

خب برای شروع ابتدا فایل index.php قالب وردپرس خود را گشوده و سپس کد زیر را در آن قرار دهید:

<?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('post-img');
	}
	?>
    </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>

خب دوستان عزیز حال که این کد را قرار دادید باید توضیحاتی نیز در مورد ان بدانید:
در کد فوق در خط اول با کد فایل هدر را فراخوانی کردیم حال در خط بعدی هم کد html های مورد نیاز آن است که دیگر نیازی به توضیح ندارد و در این اموزش فقط کدهای php را توضیح میدهم. کد که با استفاده از این کد حلقه در قالب وردپرس که تعریف کردیم شروع به کار میکند و در واقع شرطی برای وجود نوشته در وب سایت وردپرسی است .پس اگر شرط بالا درست باشد به سراغ ادامه کد میروید

حال در ادامه کد<?php if (has_post_thumbnail()){ وجود دارد که این کد نیز بررسی می کند که تصویر شاخص برای نوشته ست شده است یاخیر.تصویر شاخص هم که کاملا بدیهی است و نیازی به توضیحات خاصی ندارد. حال در صورتی که برای نوشته وب سایت تصویر شاخص گذاشته باشیم با کد the_post_thumbnail(‘full’); تصویر شاخص را فراخوانی میکنیم تا نمایش داده شود.

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

دوستان عزیز در بسیاری از وب سایت ها نیز توضیحات متا را نیز در نوشته ها قرار میدهند که این نیز امری بدیهی و موجود است اما چگونه و کجا قرار دادن آن را در ادامه توضیح خواهم داد البته توضیحات متا همان نام و نام خانوادگی و اطلاعاتی از این قبیل است توابع این متا ها به صورت زیر است:

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

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

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

.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;
}

سخن آخر

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

ممنونم از همراهی شما دوستان عزیز و همراهان ارجمند
موفق و پیروز و سربلند باشید

منبع: بیگ تم ارائه دهنده قالب وردپرس ، افزونه وردپرس قالب وردپرس شخصی و قالب وردپرس بازی و قالب وردپرس املاک و قالب وردپرس پزشکی و قالب وردپرس ماشین