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

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

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

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

نحوه ساخت حلقه ها در قالب وردپرس

برای این کار ابتدا وارد فایل های اصلی در قالب وردپرس شوید و فایل 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>

در درجه بعد استایل زیر را در فایل Style.css اضافه کنید.لازم به ذکر است که می توانید این استایل ها را سفارشی کنید.

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

خب کار به پایان رسید امید واریم توانسته باشیم به صورت کوتاه و مفید این آموزش کاربردی و هک وردپرس را ارائه کنیم.

منبع: آپ تم  مرجع: آموزش وردپرس