ساخت بخش نمونه کار در وردپرس قسمت (2)

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

در جلسه قبل Post Type ساختیم و متاباکس ایجاد کردیم و برای آن استایل هم اضافه کردیم که مواردی دیگر باقیست که در ادامه به آنها خواهیم پرداخت.

خب قصد داریم توابعی جهت نمایش دادن و همچنین اعال تغییرات در تصاویر برگه نمونه را معرفی و شما را با آنها آشنا کنیم

تابع زیر جهت برگرداندن آی دی تصاویر می باشد:

function get_images_ids($thumbnail = false, $id = false){
global $post;
$the_id = ($id) ? $id : $post->ID;

$list_images = list_my_images_slots( get_post_type( $id ) );

$a = array();
foreach ($list_images as $key => $img) {
if($i = get_post_meta($the_id,$img,true))
$a[$key] = $i;
}
if($thumbnail){
$thumb_id = get_post_thumbnail_id($the_id);
if(!empty($thumb_id)) array_unshift($a, get_post_thumbnail_id($the_id));
}
return $a;
}

تابع بعدی برای نمایش یک تصویر می باشد که به شکل زیر است.

function get_images_src($size = 'medium',$thumbnail = false, $id = false){
if($id)
$images = $thumbnail ? get_images_ids(true,$id) : get_images_ids(false,$id);
else
$images = $thumbnail ? get_images_ids(true) : get_images_ids();

foreach($images as $k => $i)
$o= wp_get_attachment_image_src($i, $size);
return $o;
}

و تابع آخری جهت نمایش دادن همه ی تصاویر نمونه کار می باشد که به شکل زیر است.

function get_multi_images_src($small = 'thumbnail',$large = 'full',$medium = 'medium',$thumbnail = false, $id = false){
if($id)
$images = $thumbnail ? get_images_ids(true,$id) : get_images_ids(false,$id);
else
$images = $thumbnail ? get_images_ids(true) : get_images_ids();
$o = array();
foreach($images as $k => $i) {
$pic = wp_get_attachment_image_src($i,$large);
echo '<div class="col-md-4 gallery"><div class="pgallery-item"><a rel="prettyPhoto[elnaz]" href="'.$pic[0].'">';
echo '<img src="'.$pic[0].'" width="'.$pic[1].'" height="'.$pic[2].'" />';
echo '<span>'.get_the_title($i).'</span>';
echo '</a></div></div>';
}
return '';
}

کاربران گرامی هر آنچه که در بالا قرار دادیم می تواند مورد استفاده شما قرار گیرد و شما می توانید با استفاده از آنها تصاویر نمونه کار ها را سفارشی سازی کنید.

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

برای شروع ساخت قالب برگه نمونه کارها ابتدا باید فایلی با نام portfolio.php بسازید و کد زیر را به آن اضافه کنید.

<?php
/* Template Name: نمونه کارها */


get_header();

query_posts('post_type=portfolio&posts_per_page=9');
?>
<div class="entry-content">
<section class="portfolio">
<div id="portfolio" class="group">

<div class="container">
<div class="row">

<div class="gridportfolio isotope" id="portfolio-items">

<?php if (have_posts()) : while (have_posts()) : the_post();

$title= str_ireplace('"', '', trim(get_the_title()));
$desc= str_ireplace('"', '', trim(get_the_content()));
?>

<?php
$pclass="";
$term_list = wp_get_post_terms($post->ID, 'project-type');
foreach ( $term_list as $term ) {

$termid = $term->term_id;
$pclass.= " ".$termid;
}

?>
<div class="<?php echo $pclass; ?> col-md-4 col-sm-6 col-xs-12 portfolio-item isotope-item gallery">
<article class="portfolio-grid">
<div class="portfolio-img">
<?php $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'full' );
echo '<a title="'.$title.'" href="'.get_permalink().'"><img src="' . $image_src[0] . '" width="100%" height="250" /></a>';?>
<div class="portfolio-hover">
<div class="hover-icon">
<a class="swing" href="<?php echo get_permalink();?>"><i class="fa-link"></i></a>
<a class="swing" rel="prettyPhoto[گالری]" href="<?php echo $image_src[0];?>"><i class="fa-expand"></i></a>
</div>
</div>
</div>
<div class="portfolio-cap">
<h3><?=$title?></h3>
<span><?php echo $term->name; ?></span>

</div>
</article>
</div>

<?php endwhile; endif; ?>
</div>
</div>
</div>
</div>
</section>
</div>
<?php get_footer(); ?>

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

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

امید وارم مورد استفاده شما عزیزان قرار گرفته باشد.

آموزش ساخت بخش نمونه کار در وردپرس قسمت (1)

منبع: آپتم  مرجع: آموزش وردپرس | قالب وردپرس شرکتی | قالب وردپرس هاستینگ | قالب وردپرس نمونه کار