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

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

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

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');

بعد از وارد کردن کد بالا در فایل گفته شده می توانید مسیر فایل ها را به آدرس مورد نظر خود تغییر دهید و بعد نوبت به معرفی دو تابع در همین فایل می رسد که این 2 تابع شامل:

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');
<div class="line number1 index0 alt2"></div>

خب نوبت به استایل دهی صفحه ورود در وردپرس می باشد برای این کار می بایست کد زیر را در فایل 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;}

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

$(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);

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

منبع: آپ تم  مرجع: آموزش وردپرس ، امنیت وردپرس