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

اگر خواسته باشید نمای پیشخوان وردپرس را تغییر دهید، یکی از کارهایی که می‌توان انجام داد، تغییر فونت پیشخوان وردپرس است. اگر با طریقهٔ افزودن یک فونت به یک صفحهٔ وب آشنا باشید، خواهید دید که این کار چندان سخت نیست. فقط باید فایل CSS ای که حاوی کدهای استایل پیشخوان وردپرس می‌باشد را پیدا کنید و اصلاحش نمایید. این سند معمولاً common.css در مسیر /wp-admin/css/ است.

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

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

تغییر فونت پیشخوان با سند functions.php پوسته وردپرس

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

برای هر قالب یک سند اجباری با نام functions.php وجود دارد که میزبان تمامی توابعی است که می‌بایستی روی وردپرس اجرا شوند. پس می‌توان این سند را باز کرد و در انتهای آن کد زیر را قرار داده و طبق توضیحاتی که در ادامه آمده است، آن را باب میل خود اصلاح نمایید.

// WordPress Custom Font @ Admin

function custom_admin_open_sans_font() {

echo '<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">' . PHP_EOL;

echo '<style>body, #wpadminbar *:not([class="ab-icon"]), .wp-core-ui, .media-menu, .media-frame *, .media-modal *{font-family:"Open Sans",sans-serif !important;}</style>' . PHP_EOL;
}

add_action( 'admin_head', 'custom_admin_open_sans_font' );

// WordPress Custom Font @ Admin Frontend Toolbar

function custom_admin_open_sans_font_frontend_toolbar() {

if(current_user_can('administrator')) {

echo '<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">' . PHP_EOL;

echo '<style>#wpadminbar *:not([class="ab-icon"]){font-family:"Open Sans",sans-serif !important;}</style>' . PHP_EOL;

}

}

add_action( 'wp_head', 'custom_admin_open_sans_font_frontend_toolbar' );

// WordPress Custom Font @ Admin Login

function custom_admin_open_sans_font_login_page() {

if(stripos($_SERVER["SCRIPT_NAME"], strrchr(wp_login_url(), '/')) !== false) {

echo '<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">' . PHP_EOL;

echo '<style>body{font-family:"Open Sans",sans-serif !important;}</style>' . PHP_EOL;

}

}

add_action( 'login_head', 'custom_admin_open_sans_font_login_page' );

این کد از سه تکه تشکیل شده که هر تکه با یک توضیح بعد از // شروع شده است. هر تکه فونت یک قسمت از پیشخوان وردپرس را تغییر می‌دهد. خط کدهایی که در قسمت WordPress Custom Font @ Admin قرار گرفته‌اند، برای تغییر فونت کل بخش پیشخوان وردپرس هستند. کدهایی که در قسمت WordPress Custom Font @ Admin Frontend Toolbar وجود دارند، مخصوص تغییر فونت نوار ابزار مدیریت، زمانی که مدیر یا نویسنده وارد یکی از صفحات سایت می‌شوند. اگر دیده باشید، یک نوار مدیریت در مواقعی که از سایت بازدید می‌کنید، در بالای تمامی صفحات وجو دارد. که حاوی پیوندهایی برای رفتن به قسمت‌های مختلف پیشخوان است. فونت این نوار از طریق کدهای این بخش تغییر می‌کند.

در آخر هم کدهای بخش WordPress Custom Font @ Admin Login فونت صفحهٔ ورود به پیشخوان وردپرس را تغییر می‌دهد. البته شاید نخواسته باشید دستی در فونت صفحهٔ ورود وردپرس ببرید. پس این قسمت از کدها را می‌توانید حذف نمایید.

حالا که فهمدیم که این سه تکه کد، فونت‌های کدام قسمت از وردپرس را برای ما تغییر می‌دهند، حالا به سراغ کدهای یک تکه رفته و توضیحاتی پیرامون آن به شما می‌دهد. بقیهٔ تکه‌ها هم به همین شیوه کار می‌کنند.

تکهٔ اول را در نظر بگیرید که فونت بخش Admin یا کل پیشخوان را تغییر می‌دهد. یک تابع داریم که با کلمهٔ کلیدی function شروع می‌شود (تابع جدید ساخته شده) و نامش custom_admin_open_sans_font است. این تابع شامل دو دستور echo برای چاپ کردن مقداری است. این مقدار چیزی نیست جز؛ یک خط برچسب link که یک برچسب HTML است و کارش اتصال یک فونت به صفحه است. یک خط هم برچسب style است که کدهای CSS برای تغییر فونت صفحه را در خود جای داده است. شما باید ویرایش دلخواه خود برای استفاده از فونت خاص را در این قسمت انجام دهید.

پس به طور کلی فونت شما که به صورت یک سند است را در جایی از قالب یا سایت بارگذاری می‌کنید و نشانی آن را به برچسب Link می‌دهید. سپس نام آن را در برچسب style ویرایش می‌کنید. برای انجام این کار باید دانش مقدماتی HTML و CSS را داشته باشید.

در خط انتخایی این تکه کد هم می‌بینید تابعی که در بالا ساخته شده را به قلاب admin_head وردپرس می‌دهیم. این کار توسط تابع add_action وردپرس انجام می‌شود. در اصل add_action همان قلاب وردپرس است. امیدوارم حداقل‌های برنامه نویسی وردپرس را یاد داشته باشید! چون در این آموزش امکان ارائهٔ آموزش PHP و برنامه نویسی وردپرس نیست.

دقیقاً همین توضیحاتی که داده شد، برای سه تکهٔ این کد هم صدق می‌کند. با این تفاوت که اگر خوب دقت کنید، در داخل تابعی که ساخته شده، یک عبارت شرطی که گذاشته شده. اولین عبارت شرطی برای این است که مطمئن شود که مدیر کل وارد حساب خودش شده است. دومین عبارت شرطی هم که در تکهٔ سوم کدها وجود دارد، برای این است که مطمئن شود که کاربر درون صفحهٔ ورود به پیشخوان است.

با این توضیحات فکر نکنم که کار سختی باید که با چند خط کد PHP درون سند توابع پوستهٔ خود، فونت دلخواه خود را به پیشخوان وردپرس اضافه نمایید.

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

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

به مسیر نصب افزونه‌های وردپرس یعنی wp-content/plugins/ از طریق File Manager بروید و یک پوشهٔ خالی با نام admin-custom-font بسازید. سپس درون این پوشه سندی با نام admin-custom-font.php ایجاد کنید. حالا کدهای زیر را کپی کرده و درون این سند جاگذاری کنید.

<?php
/*
Plugin Name: Admin Custom Font
Plugin URI: https://tehnoblog.org/how-to-change-font-in-wordpress-admin-dashboard/
Description: Simple plugin to replace font(s) in WordPress Admin Dashboard with Open Sans.
Author: TehnoBlog.org
Author URI: https://tehnoblog.org/
Version: 0.0.1
*/

if ( !defined('ABSPATH') ) {

exit;

}
// WordPress Custom Font @ Admin
function admin_custom_font() {

echo '<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">' . PHP_EOL;

echo '<style>body, #wpadminbar *:not([class="ab-icon"]), .wp-core-ui, .media-menu, .media-frame *, .media-modal *{font-family:"Open Sans",sans-serif !important;}</style>' . PHP_EOL;

}

add_action( 'admin_head', 'admin_custom_font' );

// WordPress Custom Font @ Admin Frontend Toolbar

function admin_custom_font_frontend_toolbar() {

if(current_user_can('administrator')) {

echo '<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">' . PHP_EOL;

echo '<style>#wpadminbar *:not([class="ab-icon"]){font-family:"Open Sans",sans-serif !important;}</style>' . PHP_EOL;

}

}

add_action( 'wp_head', 'admin_custom_font_frontend_toolbar' );

// WordPress Custom Font @ Admin Login

function admin_custom_font_login_page() {

if(stripos($_SERVER["SCRIPT_NAME"], strrchr(wp_login_url(), '/')) !== false) {

echo '<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">' . PHP_EOL;

echo '<style>body{font-family:"Open Sans",sans-serif !important;}</style>' . PHP_EOL;

}

}

add_action( 'login_head', 'admin_custom_font_login_page' );

?>

حال به پیشخوان وردپرس رفته و از آنجا به صفحهٔ افزونه‌های نصب شده بروید و افزونه‌ای که اخیراً آن را ایجاد کردید را خواهید دید. فعالش کنید. خواهید دید که طبق نوع برنامه نویسی‌ای که در سند افزونه انجام شده، تغییرات روی پیشخوان اعمال می‌گردد. طبق توضیحاتی که در روش قبلی خدمت شما داده شد، باید اصلاحیه‌هایی را روی آن انجام داده و نهایتاً سند admin-custom-font.php را ذخیره کنید.

جمع بندی

امیدوارم که با این آموزش ساده، توانسته باشید فونت پیشخوان وردپرس خود را به سادگی تغییر دهید و آن را مطابق با نیاز خود کنید. هر چند که برای تغییر فونت پیشخوان وردپرس ممکن است افزونه‌های آماده ای از قبل درون مخزن وردپرس موجود باشند. اما اگر دنبال یک روش سبک‌تر می‌گردید، این آموزش حتماً به کمک شما خواهد آمد. با دیگر آموزش‌های هک وردپرس سایت WPTutorial.ir همراه ما باشید.