شخصی سازی استایل صفحه ورود و عضویت وردپرس بدون افزونه
کد تخفیف در جریان tabestan97 %15 تا آخر تابستان 97

برخی از سایت های وردپرسی که به کاربران اجازه عضویت می دهند، از افزونه های مخصوصی برای ایجاد صفحات عضویت و ورود استفاده می کنند. افزونه ها با کاربردهای مختلف وجود دارند و علاوه بر ایجاد یک صفحه عضویت و ورود خارج از آدرس domain.ltd/wp-login.php امکانات بیشتری همانند افزودن فیلدهای بیشتر برای پروفایل کاربران در اختیار ما قرار می دهند.

اما اکثر سایت های وردپرسی از صفحه عضویت و ورود خود وردپرس ( همان wp-login.php ) استفاده می کنند که علاوه بر شیک بودن آن ، امنیت آن وابسته به امنیت خود وردپرس می باشد و نیازی نیست نگران وجود کدهای مخرب باشیم که راهی برای نفوذ هکران به سایتمان باز کنند!

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

کاری که می خواهیم انجام دهیم این است که :

  1. ابتدا یک فایل CSS در پوشه قالبمان ایجاد کنیم
  2. فایل ایجاد شده را توسط فایل functions.php به وردپرس معرفی کنیم
  3. و در آخر استایل های مورد نظرمان را در آن فایل قرار دهیم و در صفحه ورود و عضویت وردپرس اعمال کنیم.

 

مراحل انجام کار

1 . ایجاد فایل CSS

در اولین مرحله ، شما باید وارد پوشه قالب در حال استفاده شوید ، و در روت همان پوشه ، یک فایل CSS به نام دلخواه ایجاد کنید. ما در این آموزش فایلی به نام wp-login.css را ایجاد می کنیم (به عنوان مثال).

 

2 . معرفی فایل به وردپرس

پس از ساختن فایل استایل ، اکنون باید آن را به وردپرس معرفی کنیم تا محتویات داخل آن فایل را در صفحه ورود و عضویت اعمال نماید. پس کد زیر را در فایل functions.php قالبمان قرار می دهیم و آدرس دقیق فایلی که ایجاد کرده ایم را در داخل کد معرفی می کنیم. در کد زیر فرض شده که نام فایلی که ساخته ایم wp-login.css و این فایل در روت پوشه قالبمان قرار دارد :

function devme_login_css() {
  echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/wp-login.css"/>';
}
add_action('login_head', 'devme_login_css');

تنظیمات:

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

 

3 . آغاز استایل دهی

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

 

مخفی کردن لوگوی وردپرس در صفحه ورود

.login h1 a {display: none;}

 

تغییر رنگ پس زمینه

.login body {background: #607D8B !important;}

 

و بدین ترتیب هر تغییر دیگری که می خواهید را می توانید درون فایل جدید اعمال کنید!

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

هنوز دیدگاهی ارسال نشده! نظر شما چیست؟

دیدگاه شما درباره این صفحه چیست؟