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

حتما با تصاویر بندانگشتی وردپرس آشنا هستید، بخشی که با فراخوانی تابع 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;
}