آخرین بازبینی: ۱۴۰۴/۱۰/۰۶

تعریف تصویر برای دسته‌ها در وردپرس

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

این محدودیت زمانی بیشتر به چشم می‌آید که:

بخواهید یک صفحه دسته‌بندی حرفه‌ای طراحی کنید
در فروشگاه‌های ووکامرسی، دسته‌ها را به‌صورت گرافیکی نمایش دهید
یا بخواهید تجربه کاربری (UX) و حتی سئوی صفحات آرشیو را بهبود بدهید

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

استفاده از افزونه Categories Images برای افزودن تصویر به دسته‌ها

افزونه Categories Images یکی از ساده‌ترین و قدیمی‌ترین پلاگین‌ها برای افزودن تصویر به دسته‌ها و سایر taxonomyها در وردپرس است.

این افزونه چه کاری انجام می‌دهد؟

امکان ثبت تصویر برای دسته‌ها، برچسب‌ها و تاکسونومی‌های سفارشی
استفاده از کتابخانه رسانه وردپرس
دریافت خروجی تصویر به‌صورت URL یا HTML
پشتیبانی از سایزهای مختلف تصویر
قابلیت استفاده در قالب، حلقه‌ها و حتی با شورت‌کد

نصب و فعال‌سازی افزونه

روش اول: از مخزن وردپرس

در پنل مدیریت وردپرس به بخش افزونه‌ها ← افزودن بروید.
عبارت Categories Images را جستجو کنید تا این افزونه پیدا شود.
افزونه را نصب کنید و پس از پایان نصب، آن را فعال کنید.

روش دوم: نصب دستی افزونه

فایل zip افزونه را از مخزن وردپرس دانلود کنید و محتویات آن در مسیر زیر روی سایتتان استخراج کنید

wp-content/plugins/

1	wp-content/plugins/

سپس به بخش افزونه‌ها در سایت بروید و افزونه‌ی جدید را فعال کنید.

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

درج تصویر برای دسته‌ها در وردپرس

بعد از تعریف تصویر برای هر دسته، نوبت به نمایش آن در قالب سایت می‌رسد.

برای این کار، باید فایل‌هایی که دسته یا taxonomy را نمایش می‌دهند (مثل category.php، archive.php یا قالب سفارشی taxonomy) ویرایش شوند.

دریافت آدرس تصویر دسته

اگر فقط به URL تصویر نیاز دارید (برای کنترل کامل روی HTML)، از تابع زیر استفاده کنید:

<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>

1	<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>

ایجاد خروجی به شکل دلخواه

برای نمایش تصویر انتخاب شده به شکل زیر می‌توانید عمل کنید:

<img src="<?php echo z_taxonomy_image_url(); ?>" alt="<?php single_cat_title(); ?>">

1	<img src="<?php echo z_taxonomy_image_url(); ?>" alt="<?php single_cat_title(); ?>">

این روش برای زمانی عالی است که:

می‌خواهید کلاس‌ها، lazy-load یا ساختار HTML خاص خودتان را داشته باشید
می‌خواهید سایتتان را برای سئو به طور تخصصی بهینه کنید و کنترل کاملی روی خروجی نیاز دارید.

نمایش مستقیم تصویر دسته (روش سریع‌تر)

اگر ترجیح می‌دهید افزونه خودش تگ <img> را بسازد، از این تابع استفاده کنید:

<?php if (function_exists('z_taxonomy_image')) z_taxonomy_image(); ?>

1	<?php if (function_exists('z_taxonomy_image')) z_taxonomy_image(); ?>

این روش:

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

تفاوت z_taxonomy_image_url و z_taxonomy_image

تابع	خروجی	مناسب برای
`z_taxonomy_image_url()`	فقط آدرس تصویر	طراحی سفارشی، کنترل کامل
`z_taxonomy_image()`	HTML کامل `<img>`	استفاده سریع و ساده

استفاده از تصویر دسته در حلقه‌ها

نمایش تصویر همه دسته‌ها

<?php foreach (get_categories() as $cat) : ?>
    <li>
        <img src="<?php echo z_taxonomy_image_url($cat->term_id); ?>">
        <a href="<?php echo get_category_link($cat->term_id); ?>">
            <?php echo $cat->cat_name; ?>
        </a>
    </li>
<?php endforeach; ?>

<?php foreach (get_categories() as $cat) : ?>

<li>

<?php echo $cat->cat_name; ?>

</a>

</li>

<?php endforeach; ?>

نمایش تصویر دسته‌های یک نوشته

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

<?php foreach (get_the_category() as $cat) : ?>
    <img src="<?php echo z_taxonomy_image_url($cat->term_id); ?>">
<?php endforeach; ?>

<?php foreach (get_the_category() as $cat) : ?>

<?php endforeach; ?>

تغییر اندازه تصویر دسته

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

<img src="<?php echo z_taxonomy_image_url(NULL, 'thumbnail'); ?>">

1	<img src="<?php echo z_taxonomy_image_url(NULL, 'thumbnail'); ?>">

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

<img src="<?php echo z_taxonomy_image_url(NULL, array(300,250)); ?>">

1	<img src="<?php echo z_taxonomy_image_url(NULL, array(300,250)); ?>">

اصول بهینه‌سازی سایت

برای بهبود سرعت سایت و Core Web Vitals، هرگز از سایز full زمانی که به آن نیاز نیست استفاده نکنید.

تنظیم ویژگی‌های تصویر (alt، class، width و …)

<?php
$attr = array(
    'class' => 'category-image',
    'alt'   => 'تصویر دسته‌بندی',
    'width' => 300,
    'height'=> 200,
    'title' => 'Category Image'
);
z_taxonomy_image(NULL, 'medium', $attr);
?>

<?php

$attr = array(

'class' => 'category-image',

'alt' => 'تصویر دسته‌بندی',

'width' => 300,

'height'=> 200,

'title' => 'Category Image'

);

z_taxonomy_image(NULL, 'medium', $attr);

انجام تنظیمات به این شکل مزیت‌های مختلفی برای شما دارد که از آن جمله می‌توان به بهبود تنظیمات سئو، بهبود ویژگی‌های دسترس‌پذیری یا Accessibility و داشتن یک خروجی مدرن و تمیز و بهینه مفید است.