تغییر لوگو صفحه ورود وردپرس بدون افزونه

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

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

تغییر لوگو صفحه ورود وردپرس بدون افزونه چطور انجام می‌شه؟

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

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

قبل از شروع به چه چیزهایی نیاز دارید؟

آماده‌کردن فایل لوگو با فرمت و اندازه مناسب

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

فقط پسوند فایل رو عوض نکنید. مثلاً تغییر نام یک فایل PNG به logo.webp، اون رو به WebP تبدیل نمی‌کنه. فایل رو با ابزار مناسب در فرمت دلخواهتون خروجی بگیرید و مطمئن بشید فرمت واقعی فایل با پسوندش یکیه.

یک اندازه مشخص برای همه لوگوها مناسب نیست. نسبت طول به عرض لوگوتون تعیین می‌کنه چه ابعادی بهتر دیده می‌شه. برای شروع می‌تونید فایلی با عرض حدود ۳۲۰ پیکسل آماده کنید و بعد اندازه نمایشش رو داخل کد تغییر بدید. بهتره یک نام کوتاه و انگلیسی هم برای فایل انتخاب کنید؛ مثلاً login-logo.webp.

گرفتن نسخه پشتیبان از سایت

قبل از ویرایش functions.php از فایل‌های سایت و پایگاه داده نسخه پشتیبان بگیرید. حتی یک پرانتز یا علامت اشتباه داخل این فایل می‌تونه خطای PHP بسازه و دسترسی به سایت رو به مشکل بندازه. اگه نسخه پشتیبان داشته باشید، می‌تونید فایل سالم رو سریع برگردونید.

قبل از شروع، مطمئن بشید جدا از پیشخوان وردپرس به File Manager هاست یا حساب FTP دسترسی دارید. اگه کد باعث خطای جدی بشه، از همین راه می‌تونید فایل functions.php رو ویرایش کنید یا نسخه سالم اون رو برگردونید.

استفاده از چایلدتم برای ماندگار موندن تغییرها

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

برای دیدن قالب فعال، در پیشخوان وردپرس به «نمایش ← پوسته» برید. قالبی که برچسب فعال داره باید چایلدتم شما باشه. بعد از فعال‌کردن چایلدتم، مسیر پوشه اون معمولاً چیزی شبیه wp-content/themes/your-child-theme هست. عبارت your-child-theme توی این مثال باید با نام واقعی پوشه چایلدتم خودتون عوض بشه.

روش پیشنهادی تغییر لوگو صفحه ورود وردپرس بدون افزونه

توی این روش، فایل لوگو داخل چایلدتم قرار می‌گیره و کد آدرس اون رو از همون‌جا پیدا می‌کنه. برای ویرایش فایل‌ها می‌تونید از File Manager هاست یا FTP کمک بگیرید. FTP روشی برای دسترسی به فایل‌های سایت با استفاده از یک نرم‌افزار روی کامپیوتره.

مرحله اول: لوگو رو داخل پوشه چایلدتم قرار بدید

وارد مدیریت فایل‌های هاست بشید و پوشه چایلدتم فعال رو باز کنید. داخل اون یک پوشه به نام assets بسازید. بعد داخل assets پوشه دیگه‌ای با نام images بسازید. در پایان، فایل لوگو رو با نام login-logo.webp داخل این مسیر قرار بدید:

wp-content/themes/your-child-theme/assets/images/login-logo.webp

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

مرحله دوم: کد تغییر لوگو رو به فایل functions.php اضافه کنید

حالا فایل functions.php چایلدتم رو باز کنید. اگه این فایل از قبل ساخته شده و ابتدای اون عبارت <?php رو می‌بینید، کدی رو که در بخش «کد کامل تغییر لوگوی صفحه ورود وردپرس» اومده، بدون اضافه‌کردن دوباره <?php به انتهای فایل بذارید.

اگه فایل functions.php وجود نداره، داخل پوشه اصلی چایلدتم فایلی دقیقاً با همین نام بسازید. فایل خالی باید در خط اول با <?php شروع بشه. بعد کد کامل آموزش رو از خط بعدی اضافه کنید. بدون این تگ شروع، PHP کد داخل فایل جدید رو اجرا نمی‌کنه.

<?php// کد کامل آموزش رو از این خط به بعد قرار بدید.

بعد از ذخیره فایل، سایت و صفحه ورود رو باز کنید تا مطمئن بشید خطایی پیش نیومده. اگه با خطای جدی روبه‌رو شدید، از File Manager یا FTP وارد پوشه چایلدتم بشید و نسخه سالم فایل رو برگردونید.

مرحله سوم: اندازه و جای لوگو رو تنظیم کنید

داخل کد، ویژگی‌های width و height اندازه کادر لوگو رو مشخص می‌کنن. ویژگی background-size: contain هم تصویر رو بدون بریدن داخل همین کادر جا می‌ده. اگه لوگوتون خیلی کشیده یا تقریباً مربعه، عرض و ارتفاع رو متناسب با شکل اون تغییر بدید.

ویژگی background-position: center لوگو رو وسط کادر نگه می‌داره. background-repeat: no-repeat هم نمی‌ذاره تصویر چند بار تکرار بشه. بعد از هر تغییر، فایل رو ذخیره کنید و صفحه ورود رو دوباره باز کنید.

مرحله چهارم: نتیجه رو در صفحه ورود بررسی کنید

فعلاً از حساب وردپرس خارج نشید. صفحه ورود رو در یک پنجره ناشناس مرورگر باز کنید تا اگه مشکلی پیش اومد، نشست فعلی پیشخوانتون رو از دست ندید. البته این نشست جای دسترسی به File Manager یا FTP رو نمی‌گیره. آدرس ورود در نصب معمولی وردپرس اغلب با /wp-login.php باز می‌شه، مگر اینکه قبلاً اون رو با یک ابزار امنیتی تغییر داده باشید.

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

کد کامل تغییر لوگوی صفحه ورود وردپرس

کد زیر لوگو، مقصد لینک و متن قابل‌دسترسی لینک اون رو تغییر می‌ده. کد رو داخل فایل functions.php چایلدتم بذارید. اگه همین حالا فایل رو از صفر ساختید، یادتون نره قبل از این کد، تگ <?php رو در اولین خط فایل بنویسید:

function mihanwp_custom_login_logo() {    $logo_url = esc_url( get_theme_file_uri( '/assets/images/login-logo.webp' ) );    ?>    <style>        #login h1 a,        .login h1 a {            background-image: url('<?php echo $logo_url; ?>');            background-position: center;            background-repeat: no-repeat;            background-size: contain;            width: 240px;            height: 80px;        }        @media (max-width: 480px) {            #login h1 a,            .login h1 a {                width: 200px;                height: 70px;            }        }    </style>    <?php}add_action( 'login_enqueue_scripts', 'mihanwp_custom_login_logo' );function mihanwp_custom_login_logo_url() {    return home_url( '/' );}add_filter( 'login_headerurl', 'mihanwp_custom_login_logo_url' );function mihanwp_custom_login_logo_text() {    return get_bloginfo( 'name' );}add_filter( 'login_headertext', 'mihanwp_custom_login_logo_text' );

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

• get_theme_file_uri() آدرس فایل لوگو رو از قالب فعال پیدا می‌کنه و با چایلدتم هم سازگاره.
• esc_url() آدرس تصویر رو قبل از قرارگرفتن داخل CSS پاک‌سازی می‌کنه.
• login_enqueue_scripts استایل رو فقط در صفحه ورود اجرا می‌کنه.
• login_headerurl مقصد کلیک روی لوگو رو به صفحه اصلی سایتتون تغییر می‌ده.
• login_headertext نام سایتتون رو به‌عنوان متن لینک لوگو قرار می‌ده تا هدف لینک برای کاربر روشن‌تر باشه.

اگه بعد از اضافه‌کردن کد خطایی با عبارت Cannot redeclare دیدید، معمولاً یعنی تابعی با همین نام از قبل داخل سایت تعریف شده. در این حالت، نام هر سه تابع و نام همون تابع‌ها در خط‌های add_action و add_filter رو به نام‌های یکتا تغییر بدید.

چطور مسیر و نام فایل لوگو رو تغییر بدید؟

این قسمت از کد مسیر لوگو رو مشخص می‌کنه:

get_theme_file_uri( '/assets/images/login-logo.webp' )

اگه فایل شما brand.png نام داره و داخل پوشه images چایلدتم گذاشته شده، مسیر رو به شکل زیر تغییر بدید:

get_theme_file_uri( '/images/brand.png' )

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

تغییر لینک لوگوی صفحه ورود

فیلتر login_headerurl مقصد لینک لوگو رو مشخص می‌کنه. در کد کامل، تابع home_url( '/' ) آدرس صفحه اصلی سایتتون رو برمی‌گردونه. پس کاربر با کلیک روی لوگو به صفحه اصلی می‌ره.

اگه می‌خواید لوگو به صفحه مشخصی از سایت خودتون وصل بشه، می‌تونید آدرسی رو که تابع برمی‌گردونه تغییر بدید. مثلاً کد زیر لوگو رو به برگه‌ای با مسیر /about-us/ وصل می‌کنه. این مسیر فقط یک مثاله و باید اون رو با نشانی واقعی یکی از برگه‌های سایت خودتون عوض کنید:

function mihanwp_custom_login_logo_url() {    return home_url( '/about-us/' );}

تغییر متن لینک لوگوی صفحه ورود

لوگو در این روش با ویژگی background-image در CSS نمایش داده می‌شه، پس مثل یک تگ تصویر معمولی ویژگی alt نداره. فیلتر رسمی login_headertext متن لینک لوگو رو تغییر می‌ده. این متن کمک می‌کنه هدف لینک برای کاربران و ابزارهای کمکی روشن‌تر باشه.

کد کامل از همون نامی استفاده می‌کنه که در تنظیمات عمومی وردپرس برای سایت ثبت کردید:

function mihanwp_custom_login_logo_text() {    return get_bloginfo( 'name' );}add_filter( 'login_headertext', 'mihanwp_custom_login_logo_text' );

اگه متن مشخصی مدنظرتونه، متنی رو که تابع برمی‌گردونه با عبارت دلخواهتون عوض کنید. مثلاً:

return 'ورود به مدیریت سایت من';

چطور اندازه لوگو رو برای موبایل و دسکتاپ تنظیم کنید؟

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

بخش @media داخل کد، اندازه لوگو رو برای صفحه‌هایی با عرض ۴۸۰ پیکسل یا کمتر عوض می‌کنه. اگه لوگو روی موبایل بیش‌ازحد بزرگه، مقدارهای این بخش رو کمتر کنید:

@media (max-width: 480px) {    #login h1 a,    .login h1 a {        width: 180px;        height: 60px;    }}

برای اینکه کیفیت تصویر پایین نیاد، فایل لوگو رو کمی بزرگ‌تر از اندازه نمایشش آماده کنید، ولی حواستون به حجم فایل هم باشه. اگه تصویر کشیده دیده می‌شه، نسبت عرض و ارتفاع کادر رو با خود لوگو هماهنگ کنید و background-size: contain رو نگه دارید.

چرا لوگوی جدید نمایش داده نمی‌شه؟

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

اول مطمئن بشید فایل دقیقاً داخل مسیری قرار گرفته که در کد نوشتید. نام فایل، پسوند و حروف بزرگ یا کوچک هم باید کاملاً یکی باشن. مثلاً login-logo.webp و Login-Logo.webp در بعضی سرورها دو فایل متفاوت حساب می‌شن.

برای یک آزمایش سریع، آدرس مستقیم فایل لوگو رو در مرورگر باز کنید. اگه تصویر باز نشد یا خطای 404 دیدید، احتمالاً مسیر فایل یا نام اون اشتباهه. برای مسیر نمونه این آموزش، آدرس تصویر باید چیزی شبیه https://example.com/wp-content/themes/your-child-theme/assets/images/login-logo.webp باشه. بخش دامنه و نام چایلدتم رو با اطلاعات سایت خودتون عوض کنید.

پاک نشدن کش مرورگر یا سایت

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

اضافه‌شدن کد به قالب والد به‌جای چایلدتم

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

وجود خطا در فایل functions.php

یک پرانتز، کوتیشن یا نقطه‌ویرگول اشتباه می‌تونه اجرای کد رو متوقف کنه. کد خودتون رو با نسخه همین آموزش مقایسه کنید. اگه فایل رو از صفر ساختید، وجود <?php در خط اول رو هم بررسی کنید. اگه بعد از ذخیره فایل با خطای جدی روبه‌رو شدید، از File Manager یا FTP نسخه سالم functions.php رو برگردونید.

تداخل استایل قالب یا ابزارهای امنیتی

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

برگردوندن لوگوی پیش‌فرض وردپرس

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

اگه مقصد و متن لوگو رو هم تغییر دادید، دو تابع مربوط به login_headerurl و login_headertext رو هم پاک کنید. فایل تصویر می‌تونه روی هاست بمونه، ولی چون دیگه کد اون رو فراخوانی نمی‌کنه، نمایش داده نمی‌شه.

تغییر لوگو با کد بهتره یا افزونه؟

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

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

جمع‌بندی

برای تغییر لوگو صفحه ورود وردپرس بدون افزونه، فایل لوگو رو داخل چایلدتم می‌ذارید و کد رو به functions.php همون چایلدتم اضافه می‌کنید. این کد با هوک مخصوص صفحه ورود اجرا می‌شه و کاری به فایل‌های اصلی وردپرس نداره.

اگه فایل functions.php رو از صفر می‌سازید، حتماً اون رو با <?php شروع کنید. قبل از ویرایش هم دسترسی به File Manager یا FTP رو آزمایش کنید. اگه لوگو نمایش داده نشد، آدرس مستقیم تصویر، نام فایل، مسیر اون و کش سایت رو بررسی کنید.

سؤال‌های متداول

تیم تولید محتوا

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