آموزشی افزونه وردپرس وردپرس

سفارشی سازی صفحه ورود وردپرس

سفارشی سازی صفحه ورود وردپرس
نوشته شده توسط نیک وب

سلام 🙂

عیدتون مبارک؛ عباداتتون قبول 🙂

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

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

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

سفارشی سازی صفحه ورود وردپرس با دستکاری فایل های قالب

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

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

سفارشی سازی صفحه ورود وردپرس

فال functions.php قالب رو با یک ویرایشگر باز کنید. کدها رو به انتهای این فایل اضافه می کنیم. هر تغییری که در این فایل داده بشه فقط توی همون قالب نمایش داده میشه.

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

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

همچنین پیشنهاد می کنم فرمت لوگو PNG باشه. بعد از اینکه فایل لوگو رو تو پوشه login گذاشتید، این کد رو به functions.php اضافه کنید:

از login_head برای اضافه کردن کمی CSS به قسمت <head> صفحه ورود استفاده کردیم. پس زمینه تگ h1 رو به لوگوی دلخواه خودمون تغییر می دیم. لازم به ذکره که حتما باید از !important استفاده کنید تا لوگوی شما جایگزین لوگوی قبلی بشه.

customize_wp_login2_WWW.NIK-WEB.IR

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

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

به طور پیش فرض لوگوی صفحه ورود وردپرس فارسی به wp-persian.com لینک شده. شما می تونید این لینک رو به دلخواه تغییر بدید. برای این کار باید کد زیر رو به functions.php اضافه کنید:

این بار از login_headerurl برای تغییر لینک لوگوی صفحه ورود استفاده کردیم. یادتون نره که nik-web.ir رو با لینک دلخواه تون جایگزین کنید.

سفارشی سازی صفحه ورود وردپرس

همچنین می تونید متن برچسب مربوط به tooltip (هنگامی که کاربر ماوس رو روی لوگو می بره) رو تغییر بدید. این متن در وردپرس فارسی به طور پیش فرض «قدرت گرفته از وردپرس فارسی» هستش. برای تغییر این متن از کد زیر استفاده کنید:

«نیک وب» رو با متن دلخواه خودتون جایگزین کنید.

افزودن CSS دلخواه

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

توی پوشه login یک فایل به نام login_styles.css بسازید و با یک ویرایشگر بازش کنید. لیست کامل آی دی ها و کلاس های مربوط به صفحه ورود وردپرس رو می تونید در اینجا مشاهده کنید. استایلی که من اضافه کردم رو ببینید:

دقت کنید که طول و عرض لوگو رو هم در اینجا از 80 به 90 تغییر دادم. چون لوگوی خودم طول و عرضش 90 بود.

برای اینکه تغییراتی که دادیم اعمال بشه باید این فایل CSS رو که ساختیم با استفاده از login_enqueue_scripts به اصطلاح enqueue کنیم یعنی بهش بشناسونیم و در اولویت قرار بدیمش. برای این کار کد زیر رو به functions.php اضافه کنید.

سفارشی سازی صفحه ورود وردپرس

تغییرات زیادی می تونید توی صفحه ورود وردپرس با استفاده از CSS های دلخواه بدید.

افزودن لینک های دلخواه به صفحه ورود وردپرس

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

برای افزودن لینک به این صفحه از login_footer استفاده می کنیم. این کد رو به functions.php اضافه کنید:

سفارشی سازی صفحه ورود وردپرس

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

تغییر مسیر (ریدایرکت) کاربر پس از ورود

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

در کد بالا، اول نقش کاربر بررسی میشه. اگر مدیر بود به پیشخوان هدایت میشه(admin_url)، اگر مدیر نبود به صفحه خانگی (site_url) و اگر هیچ شرطی درست نبود باز به صفحه خانگی هدایت میشه. شما می تونید با استفاده از این صفحه، آدرسی که کاربر به اون صفحه هدایت میشه رو تغییر بدید.

مثلا من می خوام به صفحه تماس هدایت بشه:

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

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

افزونه Custom Login

سفارشی سازی صفحه ورود وردپرس

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

افزونه Uber Login Logo

سفارشی سازی صفحه ورود وردپرس

Uber Login Logo لوگوی دلخواه شما رو جایگزین لوگوی پیش فرض وردپرس می کنه. دقت کنید که ابعاد لوگوی شما باید مطابق با لوگوی پیش فرض باشه (80×80).

افزونه Sky Login Redirect

سفارشی سازی صفحه ورود وردپرس

افزونه Sky Login Redirect کاری می کنه که کاربری که در حال خوندن یک صفحه از سایت شماست و بعد وارد سایت شما میشه، پس از ورود دوباره به همون صفحه ای که می خونه هدایت بشه. به درد خیلی ها ممکنه بخوره 🙂

برگرفته از: elegantthemes.com

تخفیف‌های نیک‌وب رو از دست ندید!

مشترک خبرنامه نیک‌وب شوید تا مطالب و تخفیف‌های نیک‌وب رو در ایمیل‌تون دریافت کنید 😉
ایمیل شما
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (1 رتبه، میانگین: 5٫00 از 5)
Loading...

درباره نویسنده

نیک وب

دیدگاه