نحوه اضافه کردن یا تغییر آیکون های مدیریت وردپرس (2 روش آسان)

نحوه اضافه کردن یا تغییر آیکون های مدیریت وردپرس (2 روش آسان)

شخصی سازی داشبورد وردپرس می تواند تجربه کاربری را بهبود بخشد. یکی از راه های آسان برای انجام این کار، اضافه کردن یا تغییر آیکون های مدیریت است.

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

در این مقاله نحوه افزودن یا تغییر آیکون های مدیریت وردپرس را به شما نشان خواهیم داد. ما شما را از طریق این فرآیند گام به گام راهنمایی می کنیم. در پایان، داشبورد وردپرس شما تازه و منحصر به فرد به نظر می رسد.

تغییر آیکون های منو در قسمت مدیریت وردپرستغییر آیکون های منو در قسمت مدیریت وردپرس

آیکون های مدیریت در وردپرس چیست؟

آیکون های مدیریت، تصاویر کوچکی هستند که در پنل ناوبری ناحیه مدیریت وردپرس مشاهده می کنید. آنها در کنار هر آیتم منو ظاهر می شوند.

آیکون های منو در قسمت مدیریت وردپرسآیکون های منو در قسمت مدیریت وردپرس

این تصاویر از Dashicons، یک فونت آیکون ساخته شده برای وردپرس استفاده می کنند. اولین بار در سال 2013 معرفی شد و از آن زمان تاکنون تغییری نکرده است.

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

اگر برای مشتریانی که با وردپرس آشنایی ندارند وب سایتی می سازید، استفاده از آیکون های سفارشی می تواند به آنها کمک کند تا به راحتی در داشبورد مدیریت حرکت کنند.

اکنون، بیایید ببینیم چگونه می توانید آیکون های مدیریت را به راحتی تغییر دهید. ما دو راه را برای انجام این کار به شما نشان خواهیم داد، و شما می توانید بهترین راه را برای شما انتخاب کنید:

روش 1: تغییر آیکون های مدیریت در مدیریت وردپرس با استفاده از یک افزونه

برای این روش از افزونه Admin Menu Editor استفاده خواهیم کرد. همانطور که از نام آن پیداست، به شما این امکان را می دهد که منوهای مدیریت وردپرس را به راحتی شخصی سازی کنید.

ابتدا باید افزونه Admin Menu Editor را نصب و فعال کنید. برای جزئیات بیشتر، به آموزش ما در مورد نحوه نصب افزونه وردپرس مراجعه کنید.

بعد از اینکه افزونه را فعال کردید به قسمت زیر بروید تنظیمات » ویرایشگر منو صفحه در اینجا، منوی مدیریت وردپرس خود را در یک رابط کاربری منظم (UI) خواهید دید که می توانید آن را سفارشی کنید.

رابط کاربری دارای یک نوار ابزار در بالا است که به شما امکان می دهد آیتم های منو اضافه یا حذف کنید، جداکننده ها را اضافه کنید، موارد را کپی و جایگذاری کنید و موارد دیگر.

ویرایشگر منو ویرایشگر منو

در زیر آن، می‌توانید روی یک آیتم منو کلیک کنید تا تنظیمات آن را باز کنید و مشاهده کنید. در اینجا، ما آیتم منوی پست ها را گسترش داده ایم.

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

برای افزودن، جایگزینی یا حذف نماد منو، روی پیوند «نمایش گزینه‌های پیشرفته» در پایین کلیک کنید.

نماد منو را انتخاب کنید نماد منو را انتخاب کنید

اکنون، روی دکمه کنار فیلد «آیکون URL» کلیک کنید.

این یک پنجره بازشو نشان می دهد که در آن می توانید تمام Dashicon های موجود را ببینید. همچنین، می‌توانید روی دکمه «کتابخانه رسانه» کلیک کنید تا نماد تصویر خود را آپلود کنید.

نماد فونت را انتخاب کنیدنماد فونت را انتخاب کنید

اگر می خواهید نماد تصویر خود را آپلود کنید، توصیه می کنیم از یک تصویر 32×32، ترجیحاً با فرمت شفاف PNG استفاده کنید.

پس از انتخاب نماد خود، روی دکمه “ذخیره تغییرات” کلیک کنید تا تنظیمات شما ذخیره شود.

اکنون نماد منوی سفارشی خود را که در منوی مدیریت استفاده شده است، مشاهده خواهید کرد.

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

این روش بعدی از شما می‌خواهد تا مقداری کد سفارشی برای تغییر آیکون‌ها اضافه کنید.

اگر قبلا این کار را انجام نداده اید، توصیه می کنیم نگاهی گذرا به آموزش اضافه کردن کد سفارشی در وردپرس بیندازید.

ساده ترین و ایمن ترین راه برای افزودن کد سفارشی در وردپرس استفاده از WPCode است. این بهترین افزونه قطعه کد وردپرس است. این به شما اجازه می دهد تا با خیال راحت کدهای سفارشی، CSS و HTML را به سایت وردپرس خود اضافه کنید بدون اینکه تصادفاً چیزی شکسته شود.

توجه: این افزونه همچنین دارای یک نسخه رایگان به نام WPCode Lite است که کار را انجام می دهد. با این حال، نسخه حرفه ای ویژگی های اضافی را به شما می دهد که ممکن است مفید باشد.

مثال 1. جایگزین کردن یک نماد با استفاده از داشیکون های پیش فرض

برای این مثال، ما از Dashicon های پیش فرض برای جایگزینی یک نماد از مجموعه آیکون های موجود استفاده خواهیم کرد.

توجه به این نکته مهم است که وردپرس قبلاً Dashicon ها را بارگیری می کند که برای عملکرد بسیار بهینه شده اند. بنابراین، استفاده از آنها بر سرعت بارگذاری صفحه تأثیر نمی گذارد.

گفتنی است، قبل از اجرای کد، باید موارد زیر را یادداشت کنید:

  1. نشانی وب مورد منوی مورد نظر برای تغییر
  2. نام نمادی که می خواهید استفاده کنید

ابتدا باید URL صفحه را برای آیتم منویی که می خواهید سفارشی کنید پیدا کنید. برای مثال، فرض کنید می‌خواهید نماد منوی «پست‌ها» را تغییر دهید.

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

آدرس صفحه را پیدا کنیدآدرس صفحه را پیدا کنید

سپس به وب سایت Dashicons بروید و روی نمادی که می خواهید استفاده کنید کلیک کنید.

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

داشیکون های نماد را انتخاب کنیدداشیکون های نماد را انتخاب کنید

هنگامی که این کار را انجام دادید، به قطعه کد » + افزودن قطعه صفحه و ماوس خود را روی کادر “Add Your Custom Code (New Snippet)” قرار دهید.

سپس، به سادگی روی دکمه «+ Add Custom Snippet» که ظاهر می شود کلیک کنید.

قطعه کد سفارشی جدید اضافه کنیدقطعه کد سفارشی جدید اضافه کنید

در صفحه بعد، یک عنوان برای قطعه خود قرار دهید و در زیر گزینه Code Type، PHP Snippet را انتخاب کنید.

پس از آن می توانید کد زیر را کپی و در کادر ویرایشگر کد قرار دهید:

function change_post_menu_icon() {
    global $menu;
    
    // Loop through the menu items
    foreach ($menu as $key => $menu_item) {
        // Find the "Posts" menu item (default URL is 'edit.php')
        if (isset($menu_item(2)) && $menu_item(2) == 'edit.php') {
            // Change the icon to a different Dashicon class
            $menu($key)(6) = 'dashicons-format-aside'; // Change this to your preferred Dashicon slug
        }
    }
}
add_action('admin_menu', 'change_post_menu_icon');

فراموش نکنید که تغییر دهید dashicons-format-aside به حلزونی که قبلا کپی کردی

کد شما به صورت زیر در ویرایشگر ظاهر می شود:

کد آیکون منو را اضافه کنیدکد آیکون منو را اضافه کنید

در مرحله بعد، باید به وردپرس بگویید این کد را کجا اجرا کند.

آیکون های منوی مدیریت در داخل قسمت مدیریت وردپرس ظاهر می شوند. در همان صفحه به قسمت Insertion رفته و در قسمت Location گزینه Admin Only را انتخاب کنید.

محل کد بارگذاریمحل کد بارگذاری

در نهایت، قطعه خود را به Active تغییر دهید و برای ذخیره تغییرات روی دکمه «ذخیره قطعه» کلیک کنید.

اکنون وردپرس شروع به استفاده از نمادی می کند که برای صفحه پست ها انتخاب کرده اید.

روش کد آیکون سفارشیروش کد آیکون سفارشی

مثال 2. از نماد فونت عالی برای یک آیتم منو در قسمت مدیریت وردپرس استفاده کنید

کتابخانه پیش‌فرض Dashicon دارای مجموعه محدودی از نمادها است. خبر خوب این است که می توانید از یک کتابخانه فونت و نماد مانند Font Awesome استفاده کنید که مجموعه ای بسیار بزرگتر از آیکون ها دارد.

با این حال، این بدان معنی است که شما باید فونت عالی را بارگیری کنید، که ممکن است ناحیه مدیریت وردپرس شما را کمی کند کند (فقط چند میلی ثانیه).

قبل از اینکه هر کدی را اضافه کنید، ابتدا باید نمادی را که می خواهید استفاده کنید پیدا کنید. به وب سایت Font Awesome بروید و به کتابخانه رایگان بروید.

فونت وب سایت عالیفونت وب سایت عالی

تمام آیکون های موجود را به صورت رایگان مشاهده خواهید کرد.

روی نمادی که می خواهید استفاده کنید کلیک کنید، در یک پنجره باز می شود. از اینجا، باید مقدار یونیکد آیکون را کپی کنید.

یونیکد را برای نمادی که می خواهید استفاده کنید پیدا کنیدیونیکد را برای نمادی که می خواهید استفاده کنید پیدا کنید

پس از آن، به قطعه کد » + افزودن قطعه صفحه در داشبورد وردپرس شما.

ادامه دهید و روی دکمه «+ افزودن قطعه سفارشی» در کادر «افزودن کد سفارشی شما (قطعه جدید)» کلیک کنید.

قطعه کد سفارشی جدید اضافه کنیدقطعه کد سفارشی جدید اضافه کنید

در صفحه بعد، یک عنوان برای قطعه خود ارائه دهید و PHP Snippet را به عنوان گزینه Code Type انتخاب کنید.

پس از آن می توانید کد زیر را کپی و در کادر ویرایشگر کد قرار دهید:

// Enqueue Font Awesome in the admin area
function enqueue_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome');

// Add custom class to the Posts menu item
function add_custom_post_menu_class() {
    global $menu;

    foreach ($menu as $key => $menu_item) {
        if (isset($menu_item(2)) && $menu_item(2) == 'edit.php') {
            $menu($key)(4) .= ' custom-post-menu-class';
        }
    }
}
add_action('admin_menu', 'add_custom_post_menu_class');

// Add custom CSS to change the icon to a Font Awesome icon
function custom_admin_menu_icon() {
    echo '';
}
add_action('admin_head', 'custom_admin_menu_icon');

تعویض را فراموش نکنید \f015 با مقدار یونیکدی که قبلاً کپی کردید.

کد شما به صورت زیر در ویرایشگر ظاهر می شود:

افزودن کد عالی فونت برای یک آیتم منوافزودن کد عالی فونت برای یک آیتم منو

در مرحله بعد، باید به وردپرس بگویید این کد را کجا اجرا کند.

آیکون‌های منوی مدیریت در داخل قسمت مدیریت وردپرس ظاهر می‌شوند، بنابراین می‌توانید به بخش Insertion رفته و گزینه «Admin Only» را به عنوان گزینه Location انتخاب کنید.

محل کد بارگذاریمحل کد بارگذاری

در نهایت، قطعه خود را به Active تغییر دهید و روی دکمه «ذخیره قطعه» کلیک کنید تا تغییرات شما ذخیره شود.

اکنون وردپرس شروع به استفاده از نمادی می کند که برای صفحه پست ها انتخاب کرده اید.

نماد منوی سفارشی با استفاده از Font Awesomeنماد منوی سفارشی با استفاده از Font Awesome

پاداش: اضافه کردن آیکون برای انواع پست سفارشی در وردپرس

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

اگر از یک نوع پست سفارشی در وب سایت وردپرس خود استفاده می کنید، ممکن است بخواهید نماد آن را تغییر دهید تا بتوانید به راحتی آن را شناسایی کنید.

تغییر آیکون منو برای نوع پست سفارشی در وردپرستغییر آیکون منو برای نوع پست سفارشی در وردپرس

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

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

اگر این مقاله را دوست داشتید، لطفاً در کانال یوتیوب ما برای آموزش های ویدیویی وردپرس مشترک شوید. شما همچنین می توانید ما را در پیدا کنید توییتر و فیس بوک