انتخاب اولین عکس به عنوان تصویر شاخص

دسته‌ها : وردپرس علی میرزائی 20 دیدگاه‌ها

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

حتما با تصاویر بندانگشتی وردپرس آشنا هستید، بخشی که با فراخوانی تابع the_post_thumbnail تصاویر شاخص هر پست را به نمایش می گذارد. برخی از وبمستران به دلیل فرم قالب، شاید هیچ وقت نیازی به این بخش پیدا نکنند! اما قالبهای زیادی هم وجود دارند که این بخش را به صورت پیشفرض پشتیبانی می کنند. (مثلا قالبهای بلاگی)
در حالت عادی، تصاویر توسط تابع معرفی شده، از هاست واکشی می شوند اما در صورتی که برای پست ها تصویر شاخصی را مشخص نکرده باشید عملا این تابع به درد شما نخواهد خورد.
به همین خاطر، امروز آموزشی را آماده کرده ایم که با کمک آن اولین تصویر هر پست را به صورت شاخص در آورده و از آن در قالب خود استفاده کنید.

برای این منظور، کافیست تا یک هک ساده برای آن بنویسیم. پس به شکل زیر عمل می کنیم: (محتوای این تابع را در فایل توابع پوسته function.php قرار دهید.)

* در این اسکریپت یک شرط وجود دارد تا در صورت یافت نشدن تصویر در یک پست، از یک عکس پیشفرض در مطالب استفاده شود.

PHP:

function get_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

در مرحله بعد، کافی است تا تابع زیر را در مکانی که میخواهیم تصویر شاخص به  نمایش در بیاید فراخوانی کنیم: (مثلا در حلقه فایل index)

<?php echo get_image() ?>

در آخر، به عنوان نمونه، یک کلاس ساده را به همراه استایلی آماده کردیم که می توانید از آن در قالب خود استفاده کنید.

HTML:

<div class="thumbnail-post">
   <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> 
<img src="<?php echo get_image() ?>" alt="<?php the_title_attribute();  ?>" title="" /> 
</a>
</div>

CSS:

.thumbnail-post img{ 
   float:right; width:140px; 
   height:140px; 
   border: 8px solid #f8f7f2; 
   box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3); 
   -moz-box-shadow:3px 6px 8px 1px rgba(0, 0, 0, 0.3); 
   -webkit-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3);
   margin-left: 23px; 
   margin-bottom: 17px;
   margin-top: 7px;
}
راستی اگه این آموزش رو مفید دیدید، لایک فراموشتون نشه :)

دیدگاه کاربران در مورد این نوشته

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

    توسط محمد پاسخ

  2. بسیار عالی بود، ممنون و متشکرم

    توسط دانلود یو پاسخ

  3. سلام علی آقای گل
    عزیز یه سوال دیگه : چطوری میتونم یه زمینه دلخواه بسازم که متن رو داخل خودش اونجوی که می نویسم نشون بده ؟
    الان یکی ساختم وقتی متن رو مینویسی مثلا متن:
    سلام
    سلام
    سلام
    اینجوری نشون میده : سلام سلام سلام
    باید حتما از تگ استفاده بشه تا درست بشه یا بدون هم میشه ؟

    توسط محمدحسین پاسخ

    1. سلام.
      میتونی تابع پی اچ پی nl2br رو در مقدار خروجی تست کنی.

      توسط علی میرزائی پاسخ

  4. مهندس من چیزی نفهمیدم از این آموزش اخه من خیلی ابتداییم به گرد بای شمام نمیرسم 😀
    میشه توضیح بدین html رو کجا بزارم؟ اخه تا اون قسمت رفتم عکس رو نیاورد . میخام تمام نوشته هام تصویر شاخص داشته باشند(اونایی که ندارند پیش فرض عکس بزارم” ازتون خواهش میکنم کمکم کنید

    توسط سامی پاسخ

    1. سلام، این آموزش برای زمانیه که شما هیچ تصویر شاخصی رو تعیین نکردید و به این وسیله میتونید اولین عکسی که در متن پیوست شده رو به صورت شاخص نمایش بدید.
      اما در خصوص نمایش تصویر پیشفرض، شما میتونید با بررسی یک شرط این کار رو به سادگی انجام بدید. توضیحات بیشتر رو در لینک زیر مطالعه کنید:
      http://tiny.alimir.ir/Lbr

      توسط علی میرزائی پاسخ

  5. سلام
    وقتی از این کد استفاده کردم
    تصویر به همراه لینک تصویر اومد
    http://0up.ir/up8/guest/Capture_ee1c2.jpg

    توسط علی پاسخ

    1. سلام، کدهای بخش html رو درست پیاده سازی کردید؟ (اگه لینک بدید، میتونم بررسی کنم)

      توسط علی میرزائی پاسخ

  6. سلام
    وقتی من این کد رو میذارم سایتم این ارور میاد و قالب بالا نمیاد
    function get_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('//i', $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = "/images/default.jpg"; } return $first_img; }
    میشه بگید باید چیکار کنم؟

    توسط ميثم خانبابايی پاسخ

    1. سلام،
      با چه پیغام خطایی مواجه شدید؟!؟

      توسط علی میرزائی پاسخ

      1. ممنون مشکلم حل شد، کد رو توی تگ php نذاشته بودم
        الان توی ارسال پست قسمت تصویر شاخص حذف شده
        من به اون گزینه نیاز دارم، میشه کاری کرد که دوباره برگرده؟

        توسط ميثم خانبابايی پاسخ

        1. بله، باید تابع زیر رو در بخش توابع پوسته (function.php) قرار بدید:
          add_theme_support('post-thumbnails');

          توسط علی میرزائی پاسخ

  7. سلام. اموزش کاربردی ای بود . ممنون .
    یه سوال ؟ میشه با همین کد ، کاری کرد که اون اولین عکس پست رو که تبدیل به تصویر شاخس کرده . به سایز دلخواه کانورت کنه (کوچکتر) و در جای دلخواه فراخوانی کنه ؟

    موفق باشید .

    توسط مجید پاسخ

    1. سلام،
      برای تغییر سایت تصاویر، میتونید از اسکریپت timthumb استفاده کنید.
      http://tiny.alimir.ir/nm

      توسط علی میرزائی پاسخ

  8. سلام ممنون از آموزش مفیدت ولی من نمیدونم اینو کجا بزارم یه فایل هست INDEX و یکی دیگه هست LOOP میشه بگید دقیقاً کجا قرارش بدم ممنون

    توسط amir پاسخ

    1. اگه شما میخواید از تصاویر شاخص تنها در صفحه اصلی استفاده کنید باید دنبال حلقه while ای باشید که در index کار میکنه، این حلقه معمولا در همون فایل index قرار داره، اما برخی قالب ها ساختار پیچیده تری دارند، مثلا حلقه در فایل دیگه ای قرار گرفته و سپس در index فراخوانی شده!
      بنابراین شما باید به دنبال حلقه اصلی فایل index باشید و کد رو در اونجا به کار ببرید.

      توسط علی میرزائی پاسخ

  9. سلام من برای این کار از افزونه auto thumbnail photo استفاده میکردم ولی با این آموزش از این به بعد همین کارو میکنم
    واقعا دستتون درد نکنه

    توسط اس ام اس عاشقانه پاسخ

    1. خوشحالم که این آموزش به دردتون خورده {گل}

      توسط علی میرزائی پاسخ

  10. سلام مجدد من این دقیقا سوالم بود و برای قالب فنومه این مشکلو داشتم
    ممنون
    فقط اونجایی که نوشتیم html تو فایل ایندکس بزنیم؟

    توسط programmer پاسخ

    1. سلام،
      بله میتونید در ایندکس، صفحات آرشیو، تک نوشته ها و… ازش استفاده کنید. فقط یادتون باشه که حتما باید داخل دستور حلقه قرار بگیره.

      توسط علی میرزائی پاسخ

دیدگاه خود را بیان کنید