آموزش تغییر آیکون های پیشخوان وردپرس

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

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

آموزش تغییر آیکون های پیشخوان وردپرس

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

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

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

روش های تغییر آیکون‌های داشبورد وردپرس

1-تغییر آیکن های پنل پیشخوان با افزونه

برای این بخش از افزونه admin menu editor استفاده می کنیم. این افزونه رایگان را می توانید از طریق مخزن وردپرس نصب کنید.

بعد از نصب و فعالسازی این پلاگین، وارد بخش تنظیمات یا setting  این افزونه شوید:

کنار هر یک از آیتم های پنل مدیریتی وردپرس دربخش تنظیمات افزونه admin menu editor یک دستگیره وجود دارد؛ با کلیک روی این دستگیره ها مواردی مثل عنوان منو، صفحه یا url که بعد از کلیک روی آیتم به آن هدایت می شوید و همچنین کاربرانی که می توانند از این آیتم استفاده کنند را می بینید.

در انتهای تنظیمات هر آیتم لینکی با عنوان show advanced options وجود دارد که با کلیک روی آن تنظیمات پیشرفته برای تغییر آیکون ها امکانپذیر می شود. در این بخش علاوه بر آیکن های dashicons امکان آپلود آیکن جدید و دلخواه نیز وجود دارد. البته پیشنهاد می کنیم که ابعاد آیکون را 32*32 پیکسل و با فرمت png درنظر بگیرید.

ممکن است برایتان جالب باشد که بدانید؛ با استفاده از این افزونه علاوه بر تغییر آیکن های پیشخوان میتوانید آیتم جدید با آدرس url دلخواه نیز به پنل مدیریتی وردپرس اضافه کنید.

2-تغییر آیکون های پیشخوان وردپرس با کدنویسی و بدون افزونه

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

جایگزینی یکی از آیکون های Dashicons به جای آیکن فعلی با کدنویسی:

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

بعد از این توضیحات نوبت اجرا می رسد که برای این منظور به آدرس URL آیتم پنل پیشخوان وردپرس و نام آیکون مورد نظر احتیاج دارید.

جهت یافتن URL آیتم منو فقط کافیست اشاره گر ماوس را روی لینک قرار دهید و به status bar یا نوار وضعیت مرورگر نگاه کنید. مثلا در تصویر زیر آدرس URL صفحه نوشته های وردپرس را در نوار وضعیت مشاهده می کنید.

قدم بعدی ورود به سایت Dashicons و انتخاب آیکن به دلخواه است. هر نمادی که انتخاب شماست روی آن کلیک کنید و slug یا همان نام آیکون را کپی کنید چون در مرحله بعد به آن احتیاج دارد.

حالا به یک پلاگین احتیاج دارید که قطعه کد خود را به سایت اضافه کنید. افزونه WP code برای این منظور مناسب است و می توانید نسخه رایگان آن را از مخزن وردپرس دانلود و نصب کنید. حالا به سادگی با قرار دادن ماوس در باکس Add Your Custom Code دکمه برای افزودن تکه کد سفارشی فعال می شود.

در مرحله بعد باید php snippet را انتخاب کنید. نام مناسبی برای تکه کد php درنظر بگیرید و کدهای زیر را در ویرایشگر کد قرار دهید:

به جای edit.php در کد بالا می توانید بخش آخر url صفحه دلخواه از پنل پیشخوان وردپرس که قصد تغییر آیکون آن را دارید جایگزین کنید.

حالا فقط باید تکه کد ایجاد شده را فعال کنید و محل اجرای آن را مشخص نمایید:

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

استفاده از آیکن های Font Awesome برای تغییر آیتم منو در قسمت مدیریت وردپرس

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

با این حال، شما برای این کار مجبور هستید کتابخانه  Font Awesome را هم لود کنید، که ممکن است سرعت لود پنل مدیریت وردپرس شما را کم کند (البته در حد چند میلی ثانیه).

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

https://fontawesome.com/icons

در صورت مشکل با آیکون های این سایت رفع مشکل عدم نمایش فونت Awesome را ببنید.

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

در این مرحله مجدد باید به افزونه wp code مراجعه کنید و همانند روش قبلی یک code snippet جدید برای درج کد php آماده کنید. کد زیر را باید در ویرایشگر کد قرار دهید:

				
					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 '<style>.custom-post-menu-class .wp-menu-image:before{font-family:"Font Awesome 5 Free"!important;content:"\f015";font-weight:900}</style>';
}
add_action('admin_head', 'custom_admin_menu_icon');

				
			

بعد از قراردادن کد باید اسنیپت را فعال کنید و همانند روش قبل مشخص کنید که در پنل مدیریت یا “admin only” اجرا شود.

در نهایت در این روش هم اینجا کار تغییر آیکن برای آیتم مورد نظر شما در پنل مدیریت وردپرس تمام می شود.

جمع بندی

در این آموزش راه حل ویرایش آیکون پیشخوان وردپرس را با کمک افزونه و کدنویسی را مرور کردیم. دیدید که برای تغییر آیکن ها علاوه بر Dashicons می توان از کتابخانه جذاب Font Awesome هم استفاده کرد. امیدواریم از این آموزش برای جذاب ترشدن پنل پیشخوان وردپرس خود با آیکن های دلخواه استفاده کنید.