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

دسته‌ها : آموزش, هک ها و کدها, وردپرس علی میرزائی 47 دیدگاه‌ها

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

سلام.
چند وقت پیش در یکی از سایتهای خارجی با یک کد خوب مواجه شدم که حسابی به درد دوستای وردپرسی کاری میخوره که به دنبال ویرایش صفحه ی ورود و خروج سایتشون (بدون استفاده از پلاگین) هستن.
به همین خاطر با یک سری ویرایش، تصحیح و زیبا سازی، اون کد رو امروز براتون آماده کردم. :-)
برای شروع کار ابتدا باید یک فایل css با نام custom-login.css بسازید. (این کار رو میتونید در Notepad انجام بدید.)
و در ادامه، کد زیر رو در اون فایل کپی کرده و تغییرات رو ذخیره کنید.

/* By Alimir & WPCookies*/

/* ویرایش تصویر پس زمینه */
body.login, html {
	background: url(images/backgroung-image.png) repeat;
	margin: auto;
	font-weight:bold;
}

/* ویرایش لوگوی وردپرس */
body.login #login h1 a {
	background: url(images/logo-image.png) 0px 0 no-repeat transparent;
	width:250px;
	height:133px;
	margin-right:35px;
	margin-bottom:35px;
	margin-top:-50px;
	-webkit-transition:All 1s ease;
	-moz-transition:All 1s ease;
	-o-transition:All 1s ease;

 }

 body.login #login h1 a:hover {
	margin-bottom:5px;
	-webkit-transform: rotate(360deg) skew(0deg) translate(0px);
	-moz-transform: rotate(360deg) skew(0deg) translate(0px);
	-o-transform: rotate(360deg) skew(0deg) translate(0px);
 }

/* ویرایش دکمه ی ورود */
#wp-submit {
	background: #bc3d1d;
	border: #f24643;
}

/* ویرایش لینک بازیابی رمز عبور */
.login #nav a:hover {
	color: #!important;;
	margin-right:10px;
}

/* ویرایش لینک برگشت به صفحه ی اصلی سایت */
.login #backtoblog a:hover {
	color: #bc3d1d!important;;
	margin-right:10px;
}

در واقع، توسط کد بالا، ویرایش استایل wp-login انجام میشه.

قبل از هرگونه تغییرات، به پوشه “images” قالبتون برید و بک گراند و لوگوی مورد نظرتون رو آپلود و به ترتیب نام و پسوندشون رو با backgroung-image.png و logo-image.png جایگزین کنید.

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

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

* پس از تعویض لوگوی وردپرس با لوگوی مورد نظرتون حتما از طریق width و height سایز لوگوتون رو با فایل css هماهنگ کنید. همینطور با استفاده از margin-botton , margin-top , margin-right میتونید به ترتیب، فاصله ی تصویر رو از راست، و بالا و پایین تنظیم کنید.

خوب، حالا باید به file-manager هاستتون وارد شید و در wp-content وارد پوشه ی Themes بشید و در اونجا هم به فولدر قالب فعلیتون برید و فایل ساخته شده رو در اونجا آپلود کنید…

کار تقریبا تمومه، :-)

آخرین کاری که باید بکنید اینه که به functions.php قالبتون مراجعه و کد زیر رو در انتهای کدهای موجود قرار بدید.

و دیگر هیچ…

<?php
function custom_login() { 
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login.css" />'; 

}
add_action('login_head', 'custom_login');

?>

حالا میتونید با مراجعه به wp-login سایتتون، تغییرات داده شده رو مشاهده کنید.
اگه با مشکلی مواجه شدید یا سؤالی داشتید میتونید در بخش نظرات همین پست اعلام کنید تا بهش رسیدگی کنم. :-)
دانلود فایل از پیش اماده شده ی custom-login (586)

دیدگاه کاربران در مورد این نوشته

  1. سلام و تشکر دوست عزیز
    www.dlbook.net/wp-login.php
    ببخشید من این کارو انجام دادم ولی لینک های پایین رنگشون رو می خوام تغییر بدم نمیشه باید کدوم قسمت از فایل تو وردپرس یا … تغییر بدم با تشکر

    توسط لیلا پاسخ

    1. سلام،
      جهت استایل دهی به لینک ها میتونید از سلکتورهای زیر استفاده کنید:
      body.login div#login p#backtoblog a
      body.login div#login p#nav a

      * نکته: غیر از این پست،استایل های دیگه ای معرفی شدند که میتونید از اونها هم دیدن کنید. همچنین، افزونه Blue Login Style هم هست که با چندین طرح زیبا، کار شما رو بسیار راحت میکنه:
      http://wordpress.org/plugins/blue-login-style

      توسط علی میرزائی پاسخ

  2. تشکر
    عالی بود.
    یا علی

    توسط علیرضا پاسخ

  3. pingback
  4. واقعا خوب بود

    توسط armin پاسخ

  5. سلام دستتون درد نکنه تست کردم 100% کار کرد

    توسط کیوان پاسخ

  6. دوست عزیزم ممنونم که جواب سوالمو دادی اما متاسفانه نتونستم درستش کنم هر قسمت از functions.php که گذاشتمش درست نشد :(

    توسط صادق دهقان پاسخ

    1. والا من این دستور رو در لوکال تست کردم و مشکلی نداشت!!!

      توسط علی میرزائی پاسخ

    2. اگه از افزونه تقویم جلالی استفاده میکنید ، کد زیر رو طبق خواسته خودتون ویرایش کنید که برای سایت من میشه:
      /* Login Form Functions */
      function login_url() {
      return 'http://pesaroone.zgig.ir';
      }
      function login_text() {
      return 'پسرونه';
      }
      function login_img() {
      echo '#login h1 a {background: transparent url(wp-content/plugins/wp-jalali/images/wp-fa-logo.png) no-repeat scroll center top}';
      }

      که هم تایتل لوگو عوض میشه، هم لینکش و هم لوگوتون.
      برای تغییر لوگو هم کافیه به جای عکس wp-fa-logo.png توی مسیر زیر
      wp-content/plugins/wp-jalali/images/wp-fa-logo.png
      لوگوی خودتون رو با همین نام بزارید
      یاعلی

      توسط پســـــرونه پاسخ

      1. ممنونم دوست عزیز،
        البته این هم درسته ولی یه مقدار روش استاندارد و شیکی محسوب نمیشه 😉
        بهترین راه استفاده از addfilter هست که در دیدگاه های بالایی توضیحاتش رو داده بودم. فقط تنها نکته ای که ننوشته بودم این بود که باید در Addfilter ها اولویت رو بیشتر از 999 داد.
        به عنوان نمونه:
        add_filter( 'login_headerurl', 'change_login_page_url', 9999);

        توسط علی میرزائی پاسخ

  7. از پاسخگوییه سریعت ممنونم دوست عزیز کاری رو که گفتی انجام دادم درست شد ازت خیلی ممنونم الان دوتا سوال دیگه برام پیش اومد که ازت میخوام کمکم کنی : اول اینکه چطور لینگ و تایتل لوگو رو باید تغییر داد به طور پیشفرض آدرس (wp-persian.com) و تایتل(با نیرو گرفته از وردپرس فارسی )برای لوگو وجود داره چطور تغییرش بدم و دوم اینه که میشه توی این صفحه ای که برای ورود ساختیم از اکانت های شبکه اجتماعی برای ورود استفاده کنیم؟؟؟

    توسط صادق دهقان پاسخ

    1. سلام،
      خواهش میکنم، باعث خوشحالیه که تونستم کمکی کرده باشم.
      1- توابع زیر رو به همراه add_filter ها در فایل توابع پوسته (function.php) قرار بدید:
      function change_login_page_url( $url ) {
      return get_bloginfo( 'url' );
      }
      add_filter( 'login_headerurl', 'change_login_page_url' );
      function change_login_page_title() {
      return get_bloginfo( 'name' );
      }
      add_filter( 'login_headertitle', 'change_login_page_title' );

      2- احتمالا افزونه هایی برای این مورد وجود داشته باشن! در مخزن وردپرس جستجو کنید…

      توسط علی میرزائی پاسخ

  8. داداش دیگه این حرف و نزنــــا…
    گفتم که شما جوون بخواه,
    اینم لوگوی جدید
    http://xgraphic.ir/upload/alimir-logo2.png
    اگه بازم چیزی خواستی بگو.
    *** از دوستان هم کسی لوگو خواست بگه, واسش میزنم 😉

    توسط ایکس گرافیک پاسخ

    1. یعنی داغونم کردی… :)

      توسط علی میرزائی پاسخ

  9. داداش این چه حرفیه شما جوون بخواه :)
    این لوگو امیدوارم خوشت بیاد, اگه خواستی تغییراتی دیگه ای بدی بهم بگو:
    http://xgraphic.ir/upload/alimir-logo.png
    راستی آی دی من رو داشته باش, لازم میشه :)
    My ID: RahilComputer

    توسط Reza Alizadeh پاسخ

    1. ای وای من، داداش شرمنده کردی! جدا انتظاری نداشتم… :)
      خیلی خیلی قشنگه :)
      فقط اگه به حساب پر رویی نذاری، امکانش هست از متن “دنیای وردپرس” یا کاملتر از اون “دنیای وردپرس و برنامه نویسی” استفاده کنی که بعدها در قالب و اسکریپت ها هم بتونم ازش استفاده کنم؟
      همچنین، اگه به جای اون دخمله از این شخصیت زردها استفاده کنی که دیگه آخرشی… 😉
      بله حتما، اددت کردم.
      بازم ازت ممنونم.

      توسط علی میرزائی پاسخ

  10. داداش بالاخره موفق شدم :)
    یه نگاه بنداز ببین چطوره:
    http://www.xgraphic.ir/wp-login.php
    روزگار به کام

    توسط Reza Alizadeh پاسخ

    1. عالی ی ی ی :)
      چه لوگوی قشنگی هم گذاشتی، تونستی واسه منم از اینا درست کن 😉

      توسط علی میرزائی پاسخ

  11. بازم سلام داداش :)
    طبق دستوری که دادی, تمام کار ها رو انجام دادم و تا حدودی هم جواب گرفتم.
    واسه یکی از سایت هام ساختم که فعلاً شد این:
    http://www.axirani.com/wp-login.php
    اما واسه سایت گرافیکم همه کار ها رو انجام میدم. کد رو میزارم, هیچ اروری نمیده اما عوض هم نمیشه 😀
    الان تو این آدرس تمام کارهایی که گفتی مو به مو انجام شده:
    http://www.xgraphic.ir/wp-login.php
    اما هیچ تغییری داده نشده :)

    توسط ایکس گرافیک پاسخ

    1. سلام،
      اگه دقت کنی تو سورس لینک اول، شیوه نامه ی custom-login فراخوانی شده.
      اما تو سورس لینک دوم، هیچ استایل جدیدی وجود نداره.
      احتمالا آدرس دهی تابع (function) رو رعایت نکردی!!!

      توسط علی میرزائی پاسخ

  12. دوست عزیزم از آموزش خوبت تشکر میکنم تونستم پیادش کنم خیلی جالب بود ازش لذت بردم فقط یک مشکل کوچک باهاش دارم اونم اینه که در صفحه wp-login.php بعد از ورود ، کاربر به محیط مدیریت هدایت میشه نه به صفحه Home سایت ، چطور میتونم این مشکل رو برطرف کنم ؟ به کمک شما دوست عزیز نیاز دارم

    توسط صدق دهقان پاسخ

    1. سلام،
      این حالت پیشفرض خود وردپرسه، برای تغییرش میتونید از یک add_filter در فانکشن قالب استفاده کنید.
      برای مشاهده ی نمونه کد به لینک زیر مراجعه کنید:
      http://codex.wordpress.org/Plugin_API/Filter_Reference/login_redirect

      توسط علی میرزائی پاسخ

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

        توسط صادق دهقان پاسخ

        1. خواهش میکنم،
          آخرین کد اون صفحه، یعنی:
          add_filter( 'login_redirect', create_function( '$url,$query,$user', 'return home_url();' ), 10, 3 );

          رو در فایل function.php قالبتون بذارید

          توسط علی میرزائی پاسخ

  13. سلام داداش

    2 تا سوال ؟

    اول اینکه فایل css که ساختیم رو باید توی پوشه قالب سوار کرد ؟

    و دوم اینکه اگه css تو پوشه قالب باشه, صفحه ورود ارور میده.

    لطفاً راهنمایی کن
    مرسی

    توسط Reza Alizadeh پاسخ

    1. سلام،
      آره، باید تو پوشه ی قالب فعال سایتتون بارگذاریش کنید.
      نه، مشکلتون احتمالا به خاطر کد فانکشن باشه.
      این کد رو یا آخر تمامی کدهای فایل function.php قرار بدید، یا اینکه کد رو بدون < ?php و ?> در یکی از خطوط کدهای فانکش بطوری که با بقیه ی کدها تداخل نکنه جاگذاریش کنید.

      توسط علی میرزائی پاسخ

  14. سلام بنده این کار را انجام دادم اما توی تمام صفحات سایتم حتی خود سایت نوشته 2 3 4 5 6 7 8
    میتونید مشاهده کنید
    web-baz.ir

    توسط سوته دل پاسخ

    1. احتمالا این مشکل به محل قرار دادن کد مربوط به فایل فانکشن بر میگرده!

      توسط علی میرزائی پاسخ

  15. داداش دستت طلا

    توسط مهدی پاسخ

  16. جانم علی آقای مودب 😀 😀

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

    امیدوارم بتونم با کمک شما سایتم رو زیبا تر کنم و به نحوی از شما حمایت کنم .

    و بازم جانم آقا علی خودمون 😀

    موفق باشید 😉

    توسط marjan پاسخ

    1. ممنون، تو کدوم فایل؟!؟!
      آورین، ایشالا رتبه های بالاتر… 😉

      توسط علی میرزائی پاسخ

      1. توی فایل فرم عضویت و ورود که قرار بود دیروز قرار بدین متاسفان هنوز خبری نشده !!!!

        توسط marjan پاسخ

  17. سلام داداش علی 😀
    این تغییرات خوبه اما یک سری مدل هست که سایت تمپ ها معرفی کرده ، و خیلی قشنگه . میگم اگه شما بتونید اون رو برای وردپرس آماده کنی که خیلی گل کاشتی 😀
    چون همه دنبال راهی هستند تا بتونند فرم عضویت و ورود وردپرس رو تغییر بدن اما نمیشه .
    لینک زیر رو ببینید که فقط css و جیکوئری و ایناست اما برای این که بشه در وردپرس استفاده کرد باید ویرایش اساسی بشه .
    میگهم شما که میتونید اینکارو بکنید هم محبوبیت سایتتون افزوده میشه هم یه کمکی هم به ماها تازه کارا میکنید 😀

    توسط marjan پاسخ

    1. سلام.
      اوکی، ایده ی خوبیه، حتما در اسرع وقت روش یه وقتی میذارم.
      اما به زودی افزونه ای رو معرفی میکنم که با کمک اون دیگه نیازی به صفحه wp-login و فرم ناقص عضویت وردپرس نخواهید داشت.
      منتظر باشید… 😉

      *پانوشت: لینک سایت تمپها به دلیل به هم ریختن فرم نظرات و احتمال ایجاد حفره اسپم پاک شد! :)

      توسط علی میرزائی پاسخ

      1. ممنون .

        هرچه زودتر میخوام یه کار متفاوت و جدید در بین سایت های ایرانی از شما ببینم ! :)

        اون لینک رو هم داشته باشید و از اون استفاده کنید . مدل های مختلفی داره و خیلی زیبا .

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

        موفق باشید 😉

        توسط marjan پاسخ

        1. 29 اسفند ساعت 6 عصر حتما یه سری به این ورا بزن…
          باشه، سعی خویش را میکنم اولین بشری باشم که این کار را کرده است 😉

          توسط علی میرزائی پاسخ

  18. سلام
    من موبه مو همه چیز رو ساختم ولی نشد این ارور رو میده
    Parse error: syntax error, unexpected ‘<' in /home/u674866386/public_html/wordp/wp-content/themes/twentyeleven/functions.php on line 615

    توسط علیرضا پاسخ

    1. سلام.
      این یک ایراد گرامریه، احتمالا تو اون کدی که باید در توابع پوسته (function.php) میذاشتید یه دستور جا افتاده.
      دوباره چک کنید و ببینید تگ های php از قلم نیفتاده باشن.

      توسط علی میرزائی پاسخ

  19. عالیه

    توسط علی پاسخ

  20. قشنگ بود

    توسط علی پاسخ

    1. ممنون :-)

      توسط علی میرزائی پاسخ

دیدگاه خود را بیان کنید