قطعه کد تغییر لوگوی صفحه ورود وردپرس

اولین صفحه‌ای که مدیر سایت هر روز می‌بیند، صفحهٔ ورود است؛ ولی عجیب است که در اکثر پروژه‌هایی که بازبینی کرده‌ام، این صفحه دقیقاً همان شکلی است که وردپرس بیست سال پیش طراحی کرده — لوگوی وردپرس، لینک به wordpress.org، رنگ‌های خاکستری خنثی. اگر سایت شما برند مشخصی دارد، این صفحه مثل یک اتاق مهمان است که با وسایل اجاره‌ای چیده شده: کاربر را می‌پذیرد ولی هویت صاحب‌خانه را نشان نمی‌دهد. تغییر این صفحه با یک قطعه کد تغییر لوگوی صفحه ورود وردپرس نه‌تنها ظاهر را بهبود می‌دهد، بلکه تجربهٔ روزانهٔ تیم شما را انسانی‌تر می‌کند و در برخی موارد حتی نشانهٔ حرفه‌ای‌بودن سایت مشتری است. در این مقاله، مسیر عملی این تغییر را از ساده‌ترین روش تا کامل‌ترین سناریو مرور می‌کنیم؛ تمرکزم بر نمونه‌های واقعی است، نه تئوری. اگر با مفهوم پایهٔ اسنیپت آشنا نیستید، پیش از ادامه قطعه کد وردپرس چیست و چگونه از آن استفاده کنیم نقطهٔ شروع بهتری است.

چرا صفحهٔ ورود، فراتر از یک صفحهٔ ساده است

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

نقش اول: امنیت. صفحهٔ ورود، حساس‌ترین نقطهٔ هر سایت وردپرسی است. بیشتر حملات Brute Force از همین صفحه شروع می‌شود و بیشتر تلاش‌های نفوذ، روی همان فرم ساده متمرکز است. تغییر ظاهر این صفحه، اگر همراه با درک امنیتی باشد، می‌تواند بخشی از استراتژی دفاعی باشد. مقالهٔ امن‌سازی لاگین ادمین در وردپرس این بخش را با جزئیات باز می‌کند.

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

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

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

آناتومی صفحهٔ ورود: چه چیزهایی قابل تغییرند

پیش از هر تغییری، ارزش دارد بدانید صفحهٔ ورود وردپرس از چه اجزایی ساخته شده. این شناخت، شما را از آزمون و خطا نجات می‌دهد. صفحهٔ ورود شامل هفت بخش اصلی است:

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

هوک login_enqueue_scripts: نقطهٔ شروع همهٔ تغییرات

هوک login_enqueue_scripts همان نقطهٔ اتصالی است که همهٔ تغییرات ظاهری صفحهٔ ورود از آن شروع می‌شود. اسمش گمراه‌کننده است؛ در واقع این هوک هم برای بارگذاری CSS و JS و هم برای تزریق کد سفارشی در head صفحهٔ ورود استفاده می‌شود. الگوی پایه:

add_action( ''login_enqueue_scripts'', ''wphk_custom_login_style'' );  function wphk_custom_login_style() {     ?>     <style>         /* استایل‌های سفارشی این‌جا */     </style>     <?php }

سه نکتهٔ مهم در این ساختار ساده: اول، این هوک Action است نه Filter؛ بنابراین مقدار بازگشتی ندارد و خروجی HTML مستقیم تولید می‌کند. تفاوت دقیق این دو در تفاوت Action و Filter در وردپرس چیست با مثال توضیح داده شده است. دوم، برخلاف wp_enqueue_scripts که در همهٔ صفحات اجرا می‌شود، این هوک فقط در صفحهٔ ورود فعال است و بنابراین نیازی به شرط is_admin یا مشابه ندارد. سوم، تزریق CSS مستقیم در این هوک، ساده‌ترین راه است؛ ولی برای پروژه‌های بزرگ‌تر، بارگذاری یک فایل CSS مستقل با wp_enqueue_style نگهداری آسان‌تری دارد.

تغییر لوگو با CSS: ساده‌ترین و سریع‌ترین مسیر

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

add_action( ''login_enqueue_scripts'', ''wphk_custom_login_logo'' );  function wphk_custom_login_logo() {     ?>     <style type="text/css">         #login h1 a,         .login h1 a {             background-image: url(''https://example.com/assets/logo.svg'');             background-size: contain;             background-position: center;             background-repeat: no-repeat;             width: 100%;             max-width: 240px;             height: 90px;             padding-bottom: 0;         }     </style>     <?php }

سه نکتهٔ کلیدی در این نمونه: اول، انتخابگر را برای هر دو حالت #login و .login نوشته‌ام؛ چون در نسخه‌های مختلف وردپرس و در نسخهٔ موبایل، کلاس ممکن است متفاوت باشد. دوم، استفاده از background-size: contain که تصویر را در هر ابعادی بدون اعوجاج نگه می‌دارد. سوم، تنظیم width روی 100% با max-width که در صفحات کوچک، لوگو را واکنش‌گرا نگه می‌دارد.

نکتهٔ مهم در انتخاب فایل لوگو: SVG انتخاب اول من است، چون در هر ابعادی بدون افت کیفیت نمایش داده می‌شود و حجم کمی دارد. اگر لوگوی شما فقط PNG یا JPG دارد، حداقل از نسخهٔ شفاف و بهینه‌سازی‌شده استفاده کنید. اثر این انتخاب روی سرعت، مخصوصاً در اتصالات کند، در بهترین فرمت تصویر برای وب کدام است با جزئیات آمده است.

در پروژه‌ای که برای یک تیم چند‌نفره کار می‌کردم، لوگو در سایز موبایل خیلی کوچک به نظر می‌رسید. مشکل از این بود که در قالب پیش‌فرض وردپرس، ابعاد لوگو روی مقدار ثابتی تنظیم شده. با تغییر max-width و استفاده از background-size: contain، مشکل حل شد و لوگو در همهٔ ابعاد متناسب نمایش داده می‌شد. الگوی مشابه در قطعه کد تغییر لوگوی صفحه ورود وردپرس با نمونه‌های بیشتر آمده است.

تغییر لینک و متن لوگو با دو فیلتر

در کنار ظاهر، دو تغییر کوچک وجود دارد که تجربه را انسانی‌تر می‌کند: تغییر لینک لوگو و متن راهنمای آن. به‌طور پیش‌فرض، لوگو به wordpress.org لینک می‌دهد و متن tooltip آن نیز به وردپرس اشاره می‌کند. این یعنی وقتی کاربر روی لوگوی صفحهٔ ورود شما کلیک می‌کند، از سایت شما خارج می‌شود. تغییر این رفتار، با دو فیلتر انجام می‌شود:

add_filter( ''login_headerurl'', ''wphk_login_logo_url'' );  function wphk_login_logo_url() {     return home_url( ''/'' ); }  add_filter( ''login_headertext'', ''wphk_login_logo_title'' );  function wphk_login_logo_title() {     return get_bloginfo( ''name'' ); }

سه نکتهٔ کلیدی: اول، home_url( '/' ) کاربر را به صفحهٔ اصلی سایت شما می‌برد، نه به یک لینک بیرونی. دوم، get_bloginfo( 'name' ) نام سایت را به‌عنوان متن راهنمای لوگو تنظیم می‌کند که در هر سایتی درست کار می‌کند. سوم، در هر دو تابع، مقدار بازگشتی وجود دارد چون Filter هستند و بازگشت مقدار در آن‌ها الزامی است. غفلت از این نکته، محتوای آن بخش از صفحه را خالی می‌کند. توضیح دقیق‌تر این رفتار در نحوه استفاده از add_filter در وردپرس آمده است.

افزودن پیام سفارشی به صفحهٔ ورود

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

• پیام خوش‌آمدگویی: «به پنل مدیریت [نام سایت] خوش آمدید».
• پیام راهنما: «برای بازیابی رمز عبور، روی لینک زیر کلیک کنید» یا راهنمای فارسی برای بازیابی از هاست.
• پیام اطلاع‌رسانی موقت: «امشب ساعت ۲۳ تا ۲۴ سایت آپدیت می‌شود».

نمونهٔ کد برای افزودن پیام خوش‌آمدگویی:

add_filter( ''login_message'', ''wphk_login_welcome_message'' );  function wphk_login_welcome_message( $message ) {     if ( ''#login_error'' === $message ) {         return $message;     }     $welcome = ''<div class="message wphk-welcome">''              . ''<p>به پنل مدیریت خوش آمدید.</p>''              . ''</div>'';     return $welcome . $message; }

نکتهٔ ظریف در این کد: بررسی '#login_error' === $message. این شرط از تکراری‌شدن پیام در حالت خطای ورود جلوگیری می‌کند، چون وردپرس در آن حالت پیام خودش را می‌فرستد. بدون این شرط، در صفحهٔ خطای ورود، پیام خوش‌آمدگویی هم نمایش داده می‌شود که گیج‌کننده است. الگوهای مشابه برای سایر فیلترهای صفحهٔ ورود در مهم‌ترین Filter Hook های وردپرس آمده است.

جایگزینی کامل قالب صفحهٔ ورود

اگر می‌خواهید کاملاً از ساختار پیش‌فرض وردپرس خارج شوید و صفحهٔ ورود اختصاصی بسازید، این کار با هوک login_form_{action} و login_form_defaults ممکن است؛ ولی این مسیر را با احتیاط پیشنهاد می‌کنم. سه دلیل که چرا در پروژه‌های خودم هرگز بدون نیاز جدی به سراغ این مسیر نمی‌روم:

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

دوم، امنیت. صفحهٔ ورود وردپرس با مکانیزم‌های امنیتی داخلی مثل nonce، محدودسازی و چک‌های دسترسی همراه است. هر جایگزینی که این لایه‌ها را درست پوشش ندهد، یک شکاف امنیتی تازه ایجاد می‌کند. مبانی این لایه‌ها در هوک‌های وردپرس و افزایش امنیت کد به‌تفصیل آمده است.

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

اگر هدف تغییر ظاهر است، CSS و چند فیلتر کافی است. جایگزینی کامل قالب ورود، ابزاری برای پروژه‌های خاص است، نه برای همه.

یک قطعه کد کامل و آماده برای شروع

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

<?php /**  * Snippet: Customize WordPress login page branding.  *  * @since 2026-09-16  * @author WordPressKar  *  * Purpose: Replace default WP logo, link, tooltip and add a welcome message.  * Location: mu-plugins directory or child theme functions.php.  * Notes: Does not affect security layers or nonce handling of login.  */  // 1. تغییر لوگو با CSS add_action( ''login_enqueue_scripts'', ''wphk_login_brand_styles'' );  function wphk_login_brand_styles() {     ?>     <style type="text/css">         #login h1 a,         .login h1 a {             background-image: url(''https://example.com/assets/login-logo.svg'');             background-size: contain;             background-position: center;             background-repeat: no-repeat;             width: 100%;             max-width: 240px;             height: 90px;             padding-bottom: 0;         }         body.login {             background: #f7f8fa;         }         .login form {             border-radius: 8px;             box-shadow: 0 4px 20px rgba(0,0,0,0.06);         }     </style>     <?php }  // 2. تغییر لینک لوگو add_filter( ''login_headerurl'', function() {     return home_url( ''/'' ); } );  // 3. تغییر متن راهنمای لوگو add_filter( ''login_headertext'', function() {     return get_bloginfo( ''name'' ); } );  // 4. افزودن پیام خوش‌آمدگویی add_filter( ''login_message'', ''wphk_login_welcome_message'' );  function wphk_login_welcome_message( $message ) {     if ( ''#login_error'' === $message ) {         return $message;     }     return ''<div class="message wphk-welcome"><p>'' .            ''به پنل مدیریت '' . esc_html( get_bloginfo( ''name'' ) ) . '' خوش آمدید.'' .            ''</p></div>'' . $message; }

سه نکتهٔ مهم در این قطعه: اول، استفاده از توابع ناشناس برای فیلترهای کوتاه، و توابع نام‌دار برای موارد بلندتر. این تصمیم، کد را خوانا نگه می‌دارد. دوم، esc_html روی نام سایت در پیام، برای جلوگیری از تزریق HTML. سوم، هدر توضیحات در ابتدای قطعه که هدف و محل قرارگیری را روشن می‌کند — همان اصولی که در قطعه کد وردپرس چیست و چگونه از آن استفاده کنیم به‌عنوان بخشی از ساختار حرفه‌ای توصیه کرده‌ام.

امنیت صفحهٔ ورود: لایه‌ای که نباید فراموش شود

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

لایهٔ اول: احراز هویت دو مرحله‌ای

2FA برای مدیران، امروز یک ضرورت است. فعال‌سازی این لایه، تجربهٔ کاربری مدیران را کمی پیچیده‌تر می‌کند ولی ایمنی را چند برابر. راهنمای عملی در فعال‌سازی 2FA برای کاربران وردپرس و تأثیر احراز هویت دو مرحله‌ای بر امنیت آمده است.

لایهٔ دوم: محدودسازی تلاش‌های ورود

اگر روی صفحهٔ ورود شما محدودیت تعداد تلاش وجود نداشته باشد، یک حملهٔ Brute Force ساده می‌تواند در چند ساعت رمز را بشکند. راه‌حل‌های عملی در جلوگیری از حملات Brute Force در وردپرس و افزونه‌های امنیت ورود وردپرس آورده شده است.

لایهٔ سوم: تغییر نشانی پیش‌فرض ورود با احتیاط

تغییر نشانی ورود از wp-login.php به یک مسیر سفارشی، یکی از رایج‌ترین توصیه‌های امنیتی است. ولی این تغییر باید با احتیاط انجام شود، چون می‌تواند با افزونه‌های دیگر و ابزارهای بازیابی تداخل کند. اگر می‌خواهید این کار را انجام دهید، ابتدا در محیط استجینگ تست کنید و مطمئن شوید که مسیر جدید در حافظهٔ تیم مکتوب شده است. راهنمای امنیت مقدماتی در راهنمای امنیت وردپرس برای مبتدیان نکات بیشتری دارد.

محل درست این اسنیپت: چایلد تم یا افزونهٔ اختصاصی

مانند همهٔ اسنیپت‌ها، محل قرارگیری این کد هم تصمیم مهمی است. سه گزینه پیش روی شماست:

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

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

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

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

اشتباهات رایج در تغییر صفحهٔ ورود

در بازبینی ده‌ها سایت با صفحهٔ ورود سفارشی، این شش اشتباه بیشترین تکرار را داشته‌اند:

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

مسیر پیشنهادی و نتیجهٔ عملی

تغییر لوگوی صفحهٔ ورود با یک قطعه کد، نه‌تنها ساده است، بلکه در پروژه‌های واقعی سریع‌ترین بردِ ظاهری در برابر زمان را می‌سازد. سه گام: اول، انتخاب فایل لوگو با فرمت مناسب و ابعاد واکنش‌گرا؛ دوم، افزودن اسنیپت با هوک login_enqueue_scripts برای ظاهر و دو فیلتر برای لینک و متن؛ سوم، افزودن پیام خوش‌آمدگویی با شرط جلوگیری از تکرار در حالت خطا. تغییر ظاهر، لایه‌ای روی امنیت است؛ باید همراه با 2FA، محدودسازی تلاش‌های ورود و مدیریت دقیق نشانی ورود اعمال شود تا صفحهٔ ورود هم زیبا و هم امن باشد.

گام بعدی عملی: در همین امروز، یک لوگوی شفاف و بهینه‌شده از برند خود آماده کنید (ترجیحاً SVG) و همین اسنیپت را در محیط لوکال یا استجینگ اجرا کنید. تفاوت ظاهری را با چشم خودتان ببینید و اگر مرورگر یا دستگاه قدیمی‌ای در تیم دارید، روی آن‌ها هم تست کنید تا اطمینان پیدا کنید که لوگو در همهٔ ابعاد درست نمایش داده می‌شود. اگر تجربه‌ای از سفارشی‌سازی صفحهٔ ورود دارید — به‌ویژه اگر روش تمیزی برای مدیریت لوگو در چند سایت پیدا کرده‌اید یا اگر در ترکیب آن با افزونه‌های امنیتی به نکته‌ای برخورده‌اید — برای من جالب است بدانم چطور حلش کردید. تجربهٔ خودتان را در دیدگاه‌ها بنویسید؛ به‌ویژه اگر اسنیپت مکمل دیگری برای سفارشی‌سازی صفحهٔ ورود می‌شناسید که برای خواننده‌های بعدی مفید است. 🔐