افزودن کلاس دلخواه به تصاویر وردپرس
اگر یک توسعه دهنده وردپرس هستید و می‌خواهید یک قالب یا یک افزونه وردپرس طراحی کنید یا حتی اگر یک طراح سایت وردپرس هستید و می‌خواهید یک وب سایت طراحی کنید، ممکن است که بخواهید یک کلاس خاص به تصاویر وردپرس بدهید، تا در نهایت استایل‌های مورد نیاز خود را به آن کلاس و در آخر به آن تصویر اعمال کنید، اما اگر کمی با وردپرس آشنا باشید حتما می‌دانید که تصاویر در وردپرس هیچ کلاس خاصی ندارند و برای اینکه بتوانید به تصاویر در وردپرس یک کلاس خاص بدهید باید خودتان دست به کد شده و از توابع مختلف وردپرس استفاده کنید و این مورد را انجام دهید.
در این مقاله از سری مقالات آموزش وردپرس می‌خواهیم با استفاده از یک قطعه کد به شما آموزش دهیم که چگونه می‌توانید هر کلاس دلخواهی را به تصاویر در سایت وردپرسی خود اضافه کنید، البته دقت کنید که کدی که در این بخش با آن کار خواهیم کرد، attachment ID تصویر یا همان شناسه پیوست را به هر تصویر در وردپرس به صورت منحصر به فرد اضافه می‌کند که البته شما با کمی خلاقیت و آشنایی با کدهای PHP می‌توانید کلاس دلخواه خود را نیز به آن اضافه کنید.
راهنمای مطالعه:
افزودن شناسه پیوست به کلاس تصاویر وردپرس
گاهی اوقات ما این امکان را نداریم که شناسه پیوست تصاویری که با آنها کار می‌کنیم را بدانیم. به‌عنوان‌مثال، ما فقط کد HTML صفحه را داریم، اما نمی‌توانیم به‌راحتی تصاویر را با یک کلاس خاص هدف قرار دهیم. ممکن است بخواهیم تصاویر رابا اضافه کردن استایل‌های سفارشی از طریق CSS دست‌کاری کنیم. در چنین مواردی، اگر تگ‌های <img> ما دارای شناسه‌ای باشد که از شناسه پیوست ایجادشده باشد، کار بسیار راحت‌تر خواهد بود. البته راهی مانند یافتن شناسه تصویر بر اساس URL آن وجود دارد اما این روش بسیار کندتر و نیازمند منابع بیشتری است.
وردپرس به صورت پیشفرض این قابلیت را دارد، اما به‌طور مداوم کار نمی‌کند. اگر تصویری را از Media Library یا همان بخش رسانه وردپرس وارد کنیم (با استفاده از ویرایشگر در ساخت یک برگه یا پست)، تگ img ایجادشده دارای کلاس wp-image-xx خواهد بود. در اینجا xx به معنای شناسه پیوست تصویر است. بااین‌حال، زمانی که از کد PHP برای ایجاد تگ‌های تصویری به‌صورت برنامه‌نویسی استفاده می‌کنیم، کلاس شناسه پیوست تصویر از بین می‌رود.
دلیل حذف شناسه پیوست در این حالت چیست؟
برای درک این موضوع و اینکه چگونه این اتفاق می‌افتد، اجازه دهید نگاهی به کدهای وردپرس بیندازیم. هنگام درج یک تصویر از کتابخانه رسانه در محتوا، وردپرس تابع get_image_send_to_editor() (منبع) را برای ایجاد کد فراخوانی می‌کند. این تابع از تابع get_image_tag() (منبع) برای تولید تگ تصویر خود ازجمله این کلاس استفاده می‌کند.
وقتی تگ‌های تصویر را به‌صورت برنامه نویسی تولید می‌کنیم، تابع wp_get_attachment_image() (منبع) را فراخوانی می کنیم. متأسفانه، این تابع کلاس را به تصاویر اضافه نمی‌کند. عملکردهای مختلف خروجی‌های متفاوتی تولید می‌کنند. من ایده پشت این تابع را نمی‌دانم، اما باید با آن کنار آمد و دنبال راه‌حل بود!
خب پس حالا شاید شما با خودتان فکر کنید خوب پس تمامی تصاویری که از طریق ویرایشگر وردپرس قرار می‌گیرند مشکلی ندارند و شناسه پیوست را به صورت کلاس دارند، اما خب دقیقا این‌طور نیست! چون شما به احتمال زیاد در سایت خود از یکی از صفحه سازها مثل ویژوال کامپوزر یا المنتور استفاده می‌کنید در این صورت تصاویری که در محتوا استفاده می‌کنید کلاس شناسه پیوست را ندارند یا قالب سایت‌تان به صورتی کدنویسی شده است که این کلاس را حذف می‌کند.
راه حل برای افزودن شناسه پیوست به تصاویر وردپرس
خوشبختانه ما می‌توانیم خیلی سریع این مشکل را برطرف کنیم، برای این کار از فیلتر wp_get_attachment_image_attributes (منبع) استفاده می‌کنیم، با استفاده از قطعه کد زیر می‌توانید به سادگی شناسه پیوست را به صورت کلاس به تصاویر وردپرس اضافه کنید. بعد از افزودن این تابع به سایت تصاویر سایت کلاس wp-image-xx را می‌گیرند که xx همان شناسه پیوست تصویر است.
/**
* Add attachment ID class to images By Webkima.com
*
* @param array $attr Array of attributes.
* @param object $attachment Attachment Post object, instance of WP_Post class.
* @return array Image attributes array.
*/
function webkima_attachment_id_class( $attr, $attachment ) {
$class_attr = isset( $attr['class'] ) ? $attr['class'] : '';
$has_class = preg_match(
'/wp\-image\-[0-9]+/',
$class_attr,
$matches
);
// Check if the image is missing the class
if ( !$has_class ) {
$class_attr .= sprintf( ' wp-image-%d', $attachment->ID );
// Use ltrim to to remove leading space if necessary
$attr['class'] = ltrim( $class_attr );
}
return $attr;
}
add_filter(
'wp_get_attachment_image_attributes', 'webkima_attachment_id_class', 10, 2
);نحوه استفاده از کد
برای استفاده از قطعه کد بالا، آن را با دقت کپی کنید و در فایل functions.php چایلدتم وردپرس پیس کنید، یا اگر سایت‌تان پلاگین اختصاصی دارد، می‌توانید این قطعه کد را در انتهای فایل اصلی پلاگین خود قرار دهید. اگر با فایل functions.php آشنایی ندارید مقاله functions.php چیست را مطالعه کنید و اگر با چایلدتم آشنایی ندارید، مقاله چایلد تم چیست را مطالعه کنید.
نکته مهم: قبل از هر گونه تغییراتی در کدهای سایت خود حتما از آن بک‌آپ بگیرید تا اگر بخشی از کار را اشتباه انجام دادید، بتوانید از نسخه بک‌آپ استفاده کنید و سایت را به حالت قبل بازگردانید.
جمع بندی
در انتها امیدواریم که این مطلب برای شما مفید واقع شده باشد، دقت کنید که این مقاله بیشتر به درد توسعه دهندگان وردپرس و دانشجویان دوره طراحی قالب وردپرس وبکیما می‌خورد، بنابراین اگر از کدها و نحوه کارکرد و استفاده از آن سر در نمی‌آورید سعی کنید از یک متخصص برای استفاده از آن کمک بگیرید. همچنین اگر سوالی در رابطه با این آموزش دارید در بخش کامنت‌ها مطرح کنید تا تیم پشتیبانی وبکیما پاسخگوی شما عزیزان باشد.
دیدگاه و پرسش