نویسنده: علی باقری نیا
تاریخ: ۱۰,اسفند,۱۳۹۲
آخرین ویرایش: ۰۱ مهر ۱۳۹۶
بدون دیدگاه
1416 بازديد

تگ نمایش تصویر شاخص یک پست وردپرس

توضیحات تصویر شاخصی را که در صفحه نگارش و ویرایش نوشته ...

امتیاز دهید :

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
  • یکی از نیاز های اساسی یک وبسایت وردپرسی استفاده از تصاویر شاخص برای ارائه بهتر مطالب و زیبایی هرچه بیشتر سایت است در مقاله زیر قصد داریم تا شما را با نحوه فعال سازی ،آموزش کار و کد های گلچین نمایش تصویر شاخص آشنا کنیم پس با ما همراه باشید

    توضیحات

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

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

     

    برای بررسی اینکه آیا پست مورد نظر وردپرس دارای تصویر شاخص است یا خیر از تگ has_post_thumbnail و جهت تعیین اندازه های تصویر شاخص از تگ set_post_thumbnail_size استفاده نمایید.

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

    ۱
    add_theme_support(‘post-thumbnails’);

     نحوه استفاده

    ۱
    <?php the_post_thumbnail( $size, $attr ); ?>

    پارامترها

    size : این پارامتر اندازه تصویر شاخص را جهت نمایش تعیین خواهد کرد . این اندازه می تواند به صورت یک عبارت رزرو شده مانند (thumbnail, medium, large, full) یا به صورت اندازه سفارشی تعیین شده توسط تابع add_image_size و یا به صورت یک آرایه تک بعدی با ۲ پارامتر به شکل array(32,32) باشد که این پارامترهای بر حسب پیکسل به ترتیب عرض و ارتفاع تصویر شاخص را تعیین خواهد کرد . در حالت پیش فرض post-thumbnail جایگذاری خواهد شد که اندازه استاندارد تصویر شاخص تنظیم شده برای پوسته فعال وردپرس خواهد بود.

    attr : آرایه ای حاوی مشخصات و المان ها نمایش دهنده تصویر مورد نظر خواهد بود . جهت دستیابی به جزییات این المان ها به تگ wp_get_attachment_image مراجعه نمایید .

    به عنون مثال :

    ۱
    ۲
    ۳
    ۴
    ۵
    $default_attr = array(
        ‘src’    => $src,
        ‘class’    => “attachment-$size”,
        ‘alt’    => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt )),
    );

    مثال ها

    ۱
    ۲
    ۳
    ۴
    ۵
    ۶
    <?php
    if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
      the_post_thumbnail();
    }
    ?>
    <?php the_content(); ?>

    نکته : جهت دریافت تصویر شاخص به جای نمایش آن می بایست از تگ get_the_post_thumbnail استفاده نمایید.

    اندازه های تصویر شاخص

    اندازه های استاندارد برای تصاویری که از طریق بارگذاری کننده رسانه ها و کتابخانه رسانه دانلود می شوند عبارتند از : تصویر بند انگشتی ، میانه،بزرگ و تصویر کامل  جهت بازخوانی تصاویر در این سایزهای استاندارد به شکل زیر عمل نمایید :

    ۱
    ۲
    ۳
    ۴
    ۵
    ۶
    ۷
    ۸
    the_post_thumbnail();                  //بدون پارامتر که تصویر بند انگشتی را نمایش خواهد دارد
    the_post_thumbnail(‘thumbnail’);       // تصویر بند انگشتی (default 150px x 150px max)
    the_post_thumbnail(‘medium’);          // میانه (default 300px x 300px max)
    the_post_thumbnail(‘large’);           // بزرگ (default 640px x 640px max)
    the_post_thumbnail(‘full’);            // کامل (original size uploaded)
    the_post_thumbnail( array(100,100) );  // اندازه دلخواه

    جهت تعیین اندازه جدید تصویر از تگ add_image_size و برای تغییر اندازههای استاندارد از تگ set_post_thumbnail_size استفاده نمایید.

    تصویر شاخص به همراه لینک به پیوند یکتای نوشته

    جهت لینک تصویر شاخص به پیوند یکتای یک نوشته در حلقه نوشته ها کد زیر را وارد نمایید :

    ۱
    ۲
    ۳
    ۴
    ۵
    <?php if ( has_post_thumbnail()) : ?>
       <a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>” >
       <?php the_post_thumbnail(); ?>
       </a>
    <?php endif; ?>

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

    ۱
    ۲
    ۳
    ۴
    ۵
    ۶
    add_filter( ‘post_thumbnail_html’, ‘my_post_image_html’, 10, 3 );
    function my_post_image_html( $html, $post_id, $post_image_id ) {
      $html = ‘<a href=”‘ . get_permalink( $post_id ) . ‘” title=”‘ . esc_attr( get_the_title( $post_id ) ) . ‘”>’ . $html . ‘</a>’;
      return $html;

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

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

    ۱
    ۲
    ۳
    ۴
    ۵
    ۶
    ۷
    ۸
    <?php
    if ( has_post_thumbnail()) {
       $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘large’);
       echo ‘<a href=”‘ . $large_image_url[0] . ‘” title=”‘ . the_title_attribute(‘echo=0’) . ‘” >’;
       the_post_thumbnail(‘thumbnail’);
       echo ‘</a>’;
    }
    ?>

     قالب بندی تصاویر شاخص جهت نمایش در پست ها

    تصاویر شاخص در هنگام جایگذاری در صفحات و نوشته ها کلاس wp-post-image را به خود اختصاص می دهند البته این تصاویر شاخص بسته به اندازه آن ها یکی از کلاس ها زیر را نیز به خود اختصاص خواهند داد که با افزودن این کلاس به شیوه نامه پوسته می توانید نحوه نمایش تصاویر شاخص را ویرایش نمایید:

    ۱
    ۲
    ۳
    ۴
    ۵
    img.wp-post-image
    img.attachment-thumbnail
    img.attachment-medium
    img.attachment-large
    img.attachment-full

    همچنین می توانید کلاس های سفارشی را به تصاویر شاخص اختصاص دهید :

    ۱
    <?php the_post_thumbnail(‘thumbnail’, array(‘class’ => ‘alignleft’)); ?>

     فایل منبع

    تگ the_post_thumbnail در آدرس wp-includes/post-thumbnail-template.php جایگذاری شده است.

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