در وردپرس، اگر برای یک نوشته یا برگه تصویر شاخص تعیین نشود، هیچ تصویر جایگزینی (جانگهدار یا placeholder) نمایش داده نمیشود. این موضوع میتواند ظاهر سایت را ناهماهنگ نشان دهد. در این مقاله یاد میگیرید چگونه با چند خط کد ساده، یک تصویر شاخص پیشفرض در وردپرس تنظیم کنید تا این مشکل بهصورت اصولی برطرف شود.
فهرست مطالب
روش اول: استفاده از یک تصویر اختصاصی
تصویر زیر، نوشتهای با عنوان «راهنمای نصب قالب» را نشان میدهد که تصویر شاخص ندارد (بالا سمت راست که با علامت قرمز مشخص شده).
افزودن کد برای تنظیم تصویر شاخص پیشفرض در وردپرس
کدهای زیر را به قالب خود یا اگر توسعهدهنده قالب نیستید، به فایل functions.php قالب فرزند (child theme) خود اضافه کنید. در این صورت، اگر کاربر برای یک نوشته یا صفحه تصویر شاخص تعیین نکند، یک تصویر شاخص پیشفرض تنظیم میشود. اگر نمیدانید چگونه یک قالب فرزند برای قالب وردپرسی خود ایجاد کنید یا چگونه فایل functions.php را در قالبهای وردپرس ویرایش کنید، روی لینک هر کدام کلیک نمایید تا مقاله مورد نظر برای کمک به شما باز شود.
/**
* Setup a default post featured image
*
* @param string $html The post thumbnail HTML.
*/
function alvandwp_filter_post_thumbnail_html( $html ) {
// If there is no post thumbnail, return a default image.
if ( '' === $html ) {
return '<img src="' . get_stylesheet_directory_uri() . '/assets/images/default-post-thumbnail.webp" alt="متن جایگزین تصویر شاخص پیشفرض" />';
}
// Else, return the post thumbnail.
return $html;
}
add_filter( 'post_thumbnail_html', 'alvandwp_filter_post_thumbnail_html' );تغییرات مورد نیاز در کدهای تصویر شاخص پیشفرض در وردپرس
شما باید در نظر بگیرید که تصویر شاخص پیشفرض در کجا ذخیره میشود.
من تصویری با نام default-post-thumbnail.webp در پوشه ریشه قالب یا قالب فرزند > images < assets ذخیره و از آن استفاده کردم. این یک مسیر نسبی است. میتوانید پوشهها را ایجاد کنید (اگر وجود ندارند) و یک فایل با نام و پسوند مشخص شده (webp) را در مکان صحیح قرار دهید (لینک دانلود تصویر شاخص پیشفرضی که از آن استفاده کردم).
همچنین میتوانید مسیر، نام فایل و پسوند را به دلخواه تغییر دهید. در این مورد، مراقب باشید که چیزی را اشتباه تایپ نکنید. یک حرف، نقطه و علامت نقل قول بیشتر یا کمتر، میتواند باعث شود کد کار نکند.
همچنین میتوانید متن جایگزین (alt text) را از متن جایگزین تصویر شاخص پیشفرض به هر متنی که میخواهید تغییر دهید.
نتیجه را در ظاهر (frontend) وبسایت خود ببینید
در نهایت، تصویر زیر از همان وبسایتی است که در بالا مشاهده میکنید. نوشته با عنوان «راهنمای نصب قالب» اکنون یک تصویر شاخص پیشفرض دارد.
روش دوم: استفاده از اولین تصویر موجود در پست
در وردپرس ۶.۵ و بالاتر، یک روش بومی برای استفاده از اولین تصویر درون محتوای نوشته به عنوان تصویر شاخص پیشفرض وجود دارد. این کار از طریق یک ویژگی بلوک به نام useFirstImageFromPost انجام میشود. وقتی روی true تنظیم شود، سیستم به طور خودکار از اولین تصویر در نوشته استفاده میکند (اگر هیچ تصویر شاخصی اختصاص داده نشده باشد). در زیر توضیح دقیقی از نحوه کار و نحوه اعمال صحیح آن آمده است.
این ویژگی چه کاری انجام میدهد؟
ویژگی useFirstImageFromPost برای بلوک تصویر شاخص نوشته در قالبهای بلوکی اعمال میشود.
چه زمانی:
- یک تصویر برجسته به صورت دستی تنظیم شده: وردپرس از آن استفاده میکند.
- هیچ تصویر برجستهای تنظیم نشده: وردپرس از اولین تصویر موجود در محتوای نوشته استفاده میکند.
- هیچ تصویری در محتوا وجود ندارد: چیزی نمایش داده نمیشود.
موارد موردنیاز:
- وردپرس ۶.۵ یا جدیدتر
- یک قالب بلوکی
- استفاده از بلوک core/post-featured-image
این ویژگی در قالبهای کلاسیک کار نمیکند.
تنظیم تصویر شاخص پیشفرض در وردپرس با فیلتر render_block_data
اگر میخواهید تصویر شاخص پیشفرض را به صورت سراسری و بدون ویرایش دستی قالبها اعمال کنید، میتوانید render_block_data را فیلتر کنید. این کد را به functions.php قالب (یا قالب فرزند، اگر قالب را دانلود یا خریداری کردید) اضافه کنید. اگر نمیدانید چگونه یک قالب فرزند برای قالب وردپرسی خود ایجاد کنید یا چگونه فایل functions.php را در قالبهای وردپرس ویرایش کنید، روی لینک هر کدام کلیک نمایید تا مقاله مورد نظر برای کمک به شما باز شود.
/**
* Set the first image from the post as the featured image if nothing is selected.
*
* @param array $parsed_block The parsed block data.
* @return array The modified block data.
*/
add_filter(
'render_block_data',
function ( $parsed_block ) {
if ( ( 'core/post-featured-image' === $parsed_block['blockName'] ) && empty( $parsed_block['attrs']['useFirstImageFromPost'] ) ) {
$parsed_block['attrs']['useFirstImageFromPost'] = true;
}
return $parsed_block;
}
);نتیجهگیری
با تنظیم تصویر شاخص پیشفرض در وردپرس، ظاهر نوشتهها منظمتر میشود و تجربه کاربری بهتری ایجاد میگردد. این روش بدون نیاز به افزونه و تنها با ویرایش فایل قالب انجام میشود. اگر به سفارشیسازی بیشتر وردپرس علاقه دارید، مطالعه مقالات مرتبط با ویرایش قالب و توابع وردپرس نیز میتواند برای شما مفید باشد.
دیدگاهتان را بنویسید