ارزدیجیتال
حراجی دامنه های ویژهمشاهده





پلتفرم رپورتاژ آگهی و بک لینک تسمینو
تبلیغات
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

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

آموزش ها , مقالات,آموزش,ترفند , وردپرس

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

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


برای شروع کار ابتدا باید یک فایل css با نام custom-login.css بسازید. (این کار رو میتونید در Notepad انجام بدید.)
و در ادامه، کد زیر رو در اون فایل کپی کرده و تغییرات رو ذخیره کنید.

/* By 20script & 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 (270)

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

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

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

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

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 4 آموزش ها , مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=7739
کلمات کلیدی پست :
مطالب مرتبط
11,561آموزش تغییر ساختار آدرس دسته بندی های وردپرس تاریخ : 2017/07/22
28,941دانلود قالب وردپرس استار فیلم ( دانلودها ) تاریخ : 2014/08/17
7,208ساخت دانشنامه در وردپرس با این ۵ افزونه کاربردی تاریخ : 2019/12/7
16,889آموزش ساخت صفحه ورود حرفه ای وردپرس تاریخ : 2013/12/12
10,189۱۰ تابع برجسته ی ناشناس در وردپرس تاریخ : 2013/12/22
10,240ورود و عضویت پیشرفته در وردپرس با افزونه WP Frontend Auth تاریخ : 2018/11/9
8,116غیرفعال کردن ذخیره آدرس آی پی در نظرات وردپرس تاریخ : 2018/04/30
23,409دانلود قالب داده باران برای وردپرس تاریخ : 2016/01/4
6,900نمایش پست‌های آپدیت شده در وردپرس تاریخ : 2018/08/24
20,831پوسته مجله خبری وردپرس Bimber نسخه 6.0 تاریخ : 2018/07/26
19,688افزودن زیر عنوان برای مطالب وردپرس تاریخ : 2017/07/12
6,700آموزش افزودن دکمه گوگل پلاس به وردپرس تاریخ : 2019/10/2
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file