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

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

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
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 '';
}

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

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
<?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(); ?>

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

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

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