سفارشی سازی صفحه ورود وردپرس - خدمات وردپرس وب نما | خدمات وردپرس وب نما

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

بازگشت

به جایی که از آن میآیید
Want create site? Find Free WordPress Themes and plugins.

12356545525

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

خب حالا شروع می کنیم:

اولین قدم در این کار، معرفی یک تابع در فایل functions.php است[wysija_form id=”1″]. با کد زیر شما تمامی استایل ها و جی کوئری های مورد نیاز برای طراحی صفحه ورود را معرفی خواهید کرد.

function custom_login() {
$files = '<link rel="stylesheet" href="'.get_bloginfo('template_directory').'/css/login.css" />
<script src="http://use.typekit.com/pgf3epu.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<script src="'.get_bloginfo('template_directory').'/js/jquery.min.js"></script>
<script src="'.get_bloginfo('template_directory').'/js/login.js"></script>';
echo $files;}
add_action('login_head', 'custom_login');

در کد بالا، می توانید مسیر فایل ها را تغییر دهید. حال نیاز به معرفی ۲ تابع دیگر در این فایل است. این ۲ تابع عبارتند از:

function custom_login_url() {
echo bloginfo('url');}
add_filter('login_headerurl', 'custom_login_url');
function custom_login_title() {
echo get_option('blogname');}
add_filter('login_headertitle', 'custom_login_title');

تابع اول آدرس url سایت را به لوگو برمیگرداند، تابع دوم عنوان سایت را به لوگو بر می گرداند.

قدم بعدی در انجام این کار، استایل دهی به صفحه ورود است. پس برای این کار کافیست کد استایلی که در زیر معرفی کرده ام را در فایل login.css قرار دهید:

* {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-font-smoothing: antialiased;
}
:focus {
outline: 0!important;
}
#loginform input {
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
-ms-box-shadow: none;
box-shadow: none;
}
body.login #login a {text-decoration: none; color: #444!important;}
body.login #login a:hover {color: #111!important;}
body.login {
background: url('../images/bg.jpg') center top repeat #98bdaa;
font-family: tahoma;
line-height: 1.5;
}
body.login div#login {
padding: 60px 0 0;
}
body.login h1 a {
background: url('../images/logo (1).png') center center no-repeat transparent;
background-size: 188px 189px;
width: 188px;
height: 189px;
margin: 0 auto 30px;
opacity: 0.7;
padding: 0;
}
body.login h1 a:hover {opacity: 1;}
body.login form#loginform {
background: #f1eee7;
border: 4px double #dcdbd7;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
-ms-box-shadow: none;
box-shadow: none;
}
form#loginform label br {display: none;}
form#loginform p:nth-child(3) {margin: 0 0 10px;}
form#loginform p:nth-child(3) br {display: none;}
form#loginform p:nth-child(3) a {text-decoration: underline;}
form#loginform input[type="text"], form#loginform input[type="password"] {
font-family: "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #e6e4dd;
opacity: 0.6;
vertical-align: baseline;
border: 0;
border-bottom: 2px solid #d2d2d0;
padding: 10px 10px 4px;
color: #111!important;
}
form#loginform input[type="text"]:focus, form#loginform input[type="password"]:focus {
border-bottom: 2px solid #d2d2d0;
opacity: 1;
}
form#loginform p.forgetmenot label {
position: relative;
background-image: url('../images/checkbox.png');
background-position: 0 0;
background-repeat: no-repeat;
padding: 2px 0 0 24px;
height: 18px;
display: inline-block;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
transition: none;
}
form#loginform p.forgetmenot label input[type="checkbox"] {position: absolute; left: 0; opacity: 0; width: 20px; height:20px; display: block; cursor: pointer;}
form#loginform p.submit input[type="submit"] {
background: #fff;
border: 0;
border-bottom: 2px solid #d2d2d0;
font-weight: 400;
color: #444;
text-shadow: none;
text-transform: uppercase;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
form#loginform p.submit input[type="submit"]:hover {
color: #111;
}
p#nav {text-align: center; text-shadow: none!important;}
p#backtoblog {display: none;}
html[data-useragent*="AppleWebKit"] #loginform input {font-weight: 400;}

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

login-page

حال نوبت به این رسیده است که جی کوئری های صفحه را نیز قرار دهید. استفاده از این ویژگی دلخواهی است و تنها به صفحه شما افکت خواهد داد. اما نکته ای که وجود دارد این است که وجود این جی کوئری ها در قسمت “مرا به خاطر بسپار” می تواند مفید باشد. کد زیر را داخل فایل login.js بگذارید:

$(document).ready(function() {
$('#loginform input[type="text"]').attr('placeholder', 'Username');
$('#loginform input[type="password"]').attr('placeholder', 'Password');
$('#loginform label[for="user_login"]').contents().filter(function() {
return this.nodeType === 3;
}).remove();
$('#loginform label[for="user_pass"]').contents().filter(function() {
return this.nodeType === 3;
}).remove();
$(document.documentElement).addClass('js');
$('input[type="checkbox"]').click(function() {
$(this+':checked').parent('label').css("background-position","0px -20px")
$(this).not(':checked').parent('label').css("background-position","0px 0px")
});
});
var usr = document.documentElement;
usr.setAttribute('data-useragent', navigator.userAgent);

همچنین فایل jquery.min.js را نیز از سایت جی کوئری دانلود کرده و داخل پوشه js قرار دهید.

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

لینک دانلود

دانلود تصاویر و کد ها

آموزش امروز هم به اتمام رسید. موفق باشید

 
Did you find apk for android? You can find new Free Android Games and apps.

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

همین حالا عضو میشم

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *