ساخت تصاویر شاخص وردپرس با استفاده از timthumb

قرار دادن تصویر شاخص در مطالب سایت‌های وردپرسی یک موضوع بسیار مهم است که متأسفانه بسیاری از مدیران وب‌سایت‌ها از اهمیت آن بی‌خبر هستند و یا آن را نادیده می‌گیرند. امروز قصد داریم در این مقاله به شما پیش‌زمینه‌ای در رابطه با تصاویر شاخص و چگونگی قرار دادن تصویر شاخص مطالب وردپرس با timthumb در اختیار شما قرار دهیم.

تصویر شاخص وردپرس چیست

یکی از شاخصه‌های تصاویر شاخص اندازه‌ی آن‌ها است. این تصاویر اندازه‌ی کوچک‌تری به نسبت تصاویر اصلی مقاله دارند. این تصاویر یک ذهنیت کلی نسبت به مطلبی که در سایت ارائه کردید به کاربر خواهد داد.

قرار دادن تصویر شاخص باعث می‌شود مطلب سایت شما جذابیت بیشتری داشته باشد و ظاهر زیباتری به سایت شمامی‌دهد. البته به این نکته هم توجه داشته باشید که قرار دادن تصویر شاخص در سئو سایت شما نیز تأثیر زیادی دارد. تصاویر شاخص دید کاربر را نسبت‌به مطلبی که قرار است بخواند بازخواهد کرد.

حالا برای شما یک مثال خواهیم گفت که بهتر مفهوم آن را درک کنید. به‌عنوان مثال شما زمانی که وارد سایت میهن وردپرس می‌شوید در سمت چپ سایت می‌توانید آخرین مطالب سایت را مشاهده کنید، در کنار این مطالب می‌توانید تصاویر مربوط به هر پست را با ابعاد بسیار کوچک مشاهده کنید که به این تصاویر، تصویر شاخص گفته می‌شود.

توجه داشته باشید ابعاد این تصاویر به‌دلخواه شما خواهد بود و شما می‌توانید هراندازه‌ای که بخواهید برای این تصاویر در نظر بگیرید، البته خود وردپرس به‌صورت پیش‌فرض 5 ابعاد مختلف را در اختیار شما قرار خواهد داد.

نکته: دقت داشته باشید که برخی از قالب‌ها از تصاویر شاخص پشتیبانی نمی‌کنند. هنگام انتخاب قالب وردپرسی برای سایت خود دقت کنید که مشکلی برای قرار دادن تصاویر شاخص در سایت خود نداشته باشید.

ساخت تصاویر شاخص وردپرس با timthumb

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

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

به‌عنوان مثال در سایت میهن وردپرس همان‌طور که مشاهده می‌کنید در چندین جای مختلف قالب سایتتان از تصویر شاخص با چند سایز مختلف استفاده کنید این کار ازنظر فضای هاست برای شما مشکل‌ساز خواهد شد.

خصوصاً زمانی که بخواهید مثل میهن وردپرس در چندین جای مختلف قالب سایتتان از تصویر شاخص با چند سایز مختلف استفاده کنید این کار ازنظر فضای هاست برای شما مشکل‌ساز خواهد شد.

خب حالا در اینجا می‌خواهیم برای شما آموزشی قرار دهیم تا بدون هیچ مشکلی بتوانید تصاویر شاخص را نمایش دربیاورید درواقع با استفاده از این روش می‌توانید بدون نیاز به اشغال فضای هاست و با استفاده از php سایزهای مختلفی از تصاویر شاخص را در سایت خود به‌نمایش دربیاورید. این‌کار درواقع توسط تکنولوژی timthumb انجام خواهد شد.

timthumb چیست

خب حالا بریم سراغ اینکه timthumb چیست و چگونه باید آن‌را در وردپرس قرار دهیم. درواقع timthumb یک کد php است که تصویری را به آن می‌دهید و آن‌را در سایزهای مختلف برای شما برش داده و به شما نمایش می‌دهد. به همین راحتی!

نحوه قرار دادن timthumb در وردپرس

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

بعدازآن فایل را ذخیره کنید. ((جهت اطلاع) با کلیدهای ترکیبی ctrl+s)

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

سپس کد زیر را در فایل functions.php ذخیره کنید.

function get_image_url(){
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,'full');
$image_url = $image_url[0];
echo $image_url;
}

خب حالا باید کد زیر را در جایی که می‌خواهید تصویر شاخص در سایت نمایش داده شود قرار دهید.

<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php get_image_url(); ?>&h=200&w=200&zc=1" title="<?php the_title(); ?>" />

خب همان‌طور که در بالا به آن اشاره کردیم شما این امکان را دارید که هراندازه‌ای را برای تصویر شاخص در نظر بگیرید. در کد بالا عددهایی برای شما قابل‌مشاهده است که شما باید برای تغییر سایز تصویرنمایشی به‌اندازه دلخواهتان عدد ۲۰۰ جلوی h و w را تغییر دهید. w به‌معنای width پهنای تصویر را نمایش می‌دهد و h به‌معنای height ارتفاع تصویر را تعیین می‌کند.

موفق و پیروز باشید. 🙂

رضا راد

میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره...