سلام.
چند وقت پیش در یکی از سایتهای خارجی با یک کد خوب مواجه شدم که حسابی به درد دوستای وردپرسی کاری میخوره که به دنبال ویرایش صفحه ی ورود و خروج سایتشون (بدون استفاده از پلاگین) هستن.
به همین خاطر با یک سری ویرایش، تصحیح و زیبا سازی، اون کد رو امروز براتون آماده کردم. 🙂
برای شروع کار ابتدا باید یک فایل 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 سایتتون، تغییرات داده شده رو مشاهده کنید.
اگه با مشکلی مواجه شدید یا سؤالی داشتید میتونید در بخش نظرات همین پست اعلام کنید تا بهش رسیدگی کنم. 🙂
دانلود فایل از پیش اماده شده ی [دانلود یافت نشد]
سلام و تشکر دوست عزیز
www.dlbook.net/wp-login.phpببخشید من این کارو انجام دادم ولی لینک های پایین رنگشون رو می خوام تغییر بدم نمیشه باید کدوم قسمت از فایل تو وردپرس یا … تغییر بدم با تشکر
توسط لیلا
سلام،
جهت استایل دهی به لینک ها میتونید از سلکتورهای زیر استفاده کنید:
body.login div#login p#backtoblog abody.login div#login p#nav a
* نکته: غیر از این پست،استایل های دیگه ای معرفی شدند که میتونید از اونها هم دیدن کنید. همچنین، افزونه Blue Login Style هم هست که با چندین طرح زیبا، کار شما رو بسیار راحت میکنه:
http://wordpress.org/plugins/blue-login-styleتوسط علی میرزائی
تشکر
عالی بود.
یا علی
توسط علیرضا
پینگ: طرح چوبین در فرم ورود وردپرس | دنیای وردپرس و برنامه نویسی
واقعا خوب بود
توسط armin
سلام دستتون درد نکنه تست کردم 100% کار کرد
توسط کیوان
دوست عزیزم ممنونم که جواب سوالمو دادی اما متاسفانه نتونستم درستش کنم هر قسمت از functions.php که گذاشتمش درست نشد 🙁
توسط صادق دهقان
والا من این دستور رو در لوکال تست کردم و مشکلی نداشت!!!
توسط علی میرزائی
اگه از افزونه تقویم جلالی استفاده میکنید ، کد زیر رو طبق خواسته خودتون ویرایش کنید که برای سایت من میشه:
/* 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لوگوی خودتون رو با همین نام بزارید
یاعلی
توسط پســـــرونه
ممنونم دوست عزیز،
البته این هم درسته ولی یه مقدار روش استاندارد و شیکی محسوب نمیشه 😉
بهترین راه استفاده از addfilter هست که در دیدگاه های بالایی توضیحاتش رو داده بودم. فقط تنها نکته ای که ننوشته بودم این بود که باید در Addfilter ها اولویت رو بیشتر از 999 داد.
به عنوان نمونه:
add_filter( 'login_headerurl', 'change_login_page_url', 9999);توسط علی میرزائی
از پاسخگوییه سریعت ممنونم دوست عزیز کاری رو که گفتی انجام دادم درست شد ازت خیلی ممنونم الان دوتا سوال دیگه برام پیش اومد که ازت میخوام کمکم کنی : اول اینکه چطور لینگ و تایتل لوگو رو باید تغییر داد به طور پیشفرض آدرس (wp-persian.com) و تایتل(با نیرو گرفته از وردپرس فارسی )برای لوگو وجود داره چطور تغییرش بدم و دوم اینه که میشه توی این صفحه ای که برای ورود ساختیم از اکانت های شبکه اجتماعی برای ورود استفاده کنیم؟؟؟
توسط صادق دهقان
سلام،
خواهش میکنم، باعث خوشحالیه که تونستم کمکی کرده باشم.
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- احتمالا افزونه هایی برای این مورد وجود داشته باشن! در مخزن وردپرس جستجو کنید…
توسط علی میرزائی
داداش دیگه این حرف و نزنــــا…
گفتم که شما جوون بخواه,
اینم لوگوی جدید
http://xgraphic.ir/upload/alimir-logo2.pngاگه بازم چیزی خواستی بگو.
*** از دوستان هم کسی لوگو خواست بگه, واسش میزنم 😉
توسط ایکس گرافیک
یعنی داغونم کردی… 🙂
توسط علی میرزائی
داداش این چه حرفیه شما جوون بخواه 🙂
این لوگو امیدوارم خوشت بیاد, اگه خواستی تغییراتی دیگه ای بدی بهم بگو:
http://xgraphic.ir/upload/alimir-logo.pngراستی آی دی من رو داشته باش, لازم میشه 🙂
My ID: RahilComputer
توسط Reza Alizadeh
ای وای من، داداش شرمنده کردی! جدا انتظاری نداشتم… 🙂
خیلی خیلی قشنگه 🙂
فقط اگه به حساب پر رویی نذاری، امکانش هست از متن “دنیای وردپرس” یا کاملتر از اون “دنیای وردپرس و برنامه نویسی” استفاده کنی که بعدها در قالب و اسکریپت ها هم بتونم ازش استفاده کنم؟
همچنین، اگه به جای اون دخمله از این شخصیت زردها استفاده کنی که دیگه آخرشی… 😉
بله حتما، اددت کردم.
بازم ازت ممنونم.
توسط علی میرزائی
داداش بالاخره موفق شدم 🙂
یه نگاه بنداز ببین چطوره:
http://www.xgraphic.ir/wp-login.phpروزگار به کام
توسط Reza Alizadeh
عالی ی ی ی 🙂
چه لوگوی قشنگی هم گذاشتی، تونستی واسه منم از اینا درست کن 😉
توسط علی میرزائی
بازم سلام داداش 🙂
طبق دستوری که دادی, تمام کار ها رو انجام دادم و تا حدودی هم جواب گرفتم.
واسه یکی از سایت هام ساختم که فعلاً شد این:
http://www.axirani.com/wp-login.phpاما واسه سایت گرافیکم همه کار ها رو انجام میدم. کد رو میزارم, هیچ اروری نمیده اما عوض هم نمیشه 😀
الان تو این آدرس تمام کارهایی که گفتی مو به مو انجام شده:
http://www.xgraphic.ir/wp-login.phpاما هیچ تغییری داده نشده 🙂
توسط ایکس گرافیک
سلام،
اگه دقت کنی تو سورس لینک اول، شیوه نامه ی custom-login فراخوانی شده.
اما تو سورس لینک دوم، هیچ استایل جدیدی وجود نداره.
احتمالا آدرس دهی تابع (function) رو رعایت نکردی!!!
توسط علی میرزائی
دوست عزیزم از آموزش خوبت تشکر میکنم تونستم پیادش کنم خیلی جالب بود ازش لذت بردم فقط یک مشکل کوچک باهاش دارم اونم اینه که در صفحه wp-login.php بعد از ورود ، کاربر به محیط مدیریت هدایت میشه نه به صفحه Home سایت ، چطور میتونم این مشکل رو برطرف کنم ؟ به کمک شما دوست عزیز نیاز دارم
توسط صدق دهقان
سلام،
این حالت پیشفرض خود وردپرسه، برای تغییرش میتونید از یک add_filter در فانکشن قالب استفاده کنید.
برای مشاهده ی نمونه کد به لینک زیر مراجعه کنید:
http://codex.wordpress.org/Plugin_API/Filter_Reference/login_redirectتوسط علی میرزائی
ممنون دوست عزیزم از پاسخ گوییت ، مطلب رو خوندم اما متاسفانه سر در نیاوردم ازش میشه برام یه توضیح ساده بدی قول میدم زود متوجه بشم
توسط صادق دهقان
خواهش میکنم،
آخرین کد اون صفحه، یعنی:
add_filter( 'login_redirect', create_function( '$url,$query,$user', 'return home_url();' ), 10, 3 );
رو در فایل function.php قالبتون بذارید
توسط علی میرزائی
سلام داداش
2 تا سوال ؟
اول اینکه فایل css که ساختیم رو باید توی پوشه قالب سوار کرد ؟
و دوم اینکه اگه css تو پوشه قالب باشه, صفحه ورود ارور میده.
لطفاً راهنمایی کن
مرسی
توسط Reza Alizadeh
سلام،
آره، باید تو پوشه ی قالب فعال سایتتون بارگذاریش کنید.
نه، مشکلتون احتمالا به خاطر کد فانکشن باشه.
این کد رو یا آخر تمامی کدهای فایل function.php قرار بدید، یا اینکه کد رو بدون
و?>در یکی از خطوط کدهای فانکش بطوری که با بقیه ی کدها تداخل نکنه جاگذاریش کنید.توسط علی میرزائی
سلام بنده این کار را انجام دادم اما توی تمام صفحات سایتم حتی خود سایت نوشته 2 3 4 5 6 7 8
میتونید مشاهده کنید
web-baz.irتوسط سوته دل
احتمالا این مشکل به محل قرار دادن کد مربوط به فایل فانکشن بر میگرده!
توسط علی میرزائی
داداش دستت طلا
توسط مهدی
جانم علی آقای مودب 😀 😀
و همچنین جانم اولین بشر . خیلی منتظر اون روز هستم . حتی خواستید یه کپی رایت بزنید از سایت خودتون در اون فایل بنده با کمال میل قرار میدم . سایت بنده در اوایل راه خودشه و بعد از سپری شدن 1 ماه بدون هیچ گونه تبلیغات به رتبه ی 1 میلیون الکسا رسیدیم .
امیدوارم بتونم با کمک شما سایتم رو زیبا تر کنم و به نحوی از شما حمایت کنم .
و بازم جانم آقا علی خودمون 😀
موفق باشید 😉
توسط marjan
ممنون، تو کدوم فایل؟!؟!
آورین، ایشالا رتبه های بالاتر… 😉
توسط علی میرزائی
توی فایل فرم عضویت و ورود که قرار بود دیروز قرار بدین متاسفان هنوز خبری نشده !!!!
توسط marjan
سلام داداش علی 😀
این تغییرات خوبه اما یک سری مدل هست که سایت تمپ ها معرفی کرده ، و خیلی قشنگه . میگم اگه شما بتونید اون رو برای وردپرس آماده کنی که خیلی گل کاشتی 😀
چون همه دنبال راهی هستند تا بتونند فرم عضویت و ورود وردپرس رو تغییر بدن اما نمیشه .
لینک زیر رو ببینید که فقط css و جیکوئری و ایناست اما برای این که بشه در وردپرس استفاده کرد باید ویرایش اساسی بشه .
میگهم شما که میتونید اینکارو بکنید هم محبوبیت سایتتون افزوده میشه هم یه کمکی هم به ماها تازه کارا میکنید 😀
توسط marjan
سلام.
اوکی، ایده ی خوبیه، حتما در اسرع وقت روش یه وقتی میذارم.
اما به زودی افزونه ای رو معرفی میکنم که با کمک اون دیگه نیازی به صفحه wp-login و فرم ناقص عضویت وردپرس نخواهید داشت.
منتظر باشید… 😉
*پانوشت: لینک سایت تمپها به دلیل به هم ریختن فرم نظرات و احتمال ایجاد حفره اسپم پاک شد! 🙂
توسط علی میرزائی
ممنون .
هرچه زودتر میخوام یه کار متفاوت و جدید در بین سایت های ایرانی از شما ببینم ! 🙂
اون لینک رو هم داشته باشید و از اون استفاده کنید . مدل های مختلفی داره و خیلی زیبا .
همچنین افزونه قبلا استفاده میکردم اما بعدا مشکلاتی به وجود میاوردند . اگه بتونید همین پنجره هایی که لینک دادم رو درست کنید کمک بزرگی کردین که تاحالا هیچ بشری نکرده 😀
موفق باشید 😉
توسط marjan
29 اسفند ساعت 6 عصر حتما یه سری به این ورا بزن…
باشه، سعی خویش را میکنم اولین بشری باشم که این کار را کرده است 😉
توسط علی میرزائی
سلام
من موبه مو همه چیز رو ساختم ولی نشد این ارور رو میده
Parse error: syntax error, unexpected ‘<' in /home/u674866386/public_html/wordp/wp-content/themes/twentyeleven/functions.php on line 615
توسط علیرضا
سلام.
این یک ایراد گرامریه، احتمالا تو اون کدی که باید در توابع پوسته (function.php) میذاشتید یه دستور جا افتاده.
دوباره چک کنید و ببینید تگ های php از قلم نیفتاده باشن.
توسط علی میرزائی
عالیه
توسط علی
قشنگ بود
توسط علی
ممنون 🙂
توسط علی میرزائی