واحد فروش و پشتیبانی :‌ ۰۳۱۳۳۴۵۶۱۸۷
تغییر قالب صفحه ورود وردپرس
تغییر قالب صفحه ورود وردپرس

تغییر قالب صفحه ورود وردپرس

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

 

۱-قدم اول:

معرفی یک تابع در فایل 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’);

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

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 قرار دهید:

بیشتر بخوانید :   افزونه تشکر از نویسندگان نظرات
* {
webkittransition: all ۰.۳s ease;
moztransition: all ۰.۳s ease;
mstransition: all ۰.۳s ease;
transition: all ۰.۳s ease;
webkitfontsmoothing: antialiased;
}
:focus {
outline: ۰!important;
}
#loginform input {
webkitboxshadow: none;
mozboxshadow: none;
oboxshadow: none;
msboxshadow: none;
boxshadow: 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 #۹۸bdaa;
fontfamily: tahoma;
lineheight: ۱.۵;
}
body.login div#login {
padding: ۶۰px ۰ ۰;
}
body.login h1 a {
background: url(‘../images/logo (1).png’) center center norepeat transparent;
backgroundsize: ۱۸۸px ۱۸۹px;
width: ۱۸۸px;
height: ۱۸۹px;
margin: ۰ auto ۳۰px;
opacity: ۰.۷;
padding: ۰;
}
body.login h1 a:hover {opacity: ۱;}
body.login form#loginform {
background: #f1eee7;
border: ۴px double #dcdbd7;
webkitborderradius: ۸px;
mozborderradius: ۸px;
oborderradius: ۸px;
msborderradius: ۸px;
borderradius: ۸px;
webkitboxshadow: none;
mozboxshadow: none;
oboxshadow: none;
msboxshadow: none;
boxshadow: 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”] {
fontfamily: “brandon-grotesque”, “Helvetica Neue”, Helvetica, Arial, sansserif;
background: #e6e4dd;
opacity: ۰.۶;
verticalalign: baseline;
border: ۰;
borderbottom: ۲px solid #d2d2d0;
padding: ۱۰px ۱۰px ۴px;
color: #۱۱۱!important;
}
form#loginform input[type=”text”]:focus, form#loginform input[type=”password”]:focus {
borderbottom: ۲px solid #d2d2d0;
opacity: ۱;
}
form#loginform p.forgetmenot label {
position: relative;
backgroundimage: url(‘../images/checkbox.png’);
backgroundposition: ۰ ۰;
backgroundrepeat: norepeat;
padding: ۲px ۰ ۰ ۲۴px;
height: ۱۸px;
display: inlineblock;
webkittransition: none;
moztransition: none;
mstransition: 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: ۰;
borderbottom: ۲px solid #d2d2d0;
fontweight: ۴۰۰;
color: #۴۴۴;
textshadow: none;
texttransform: uppercase;
webkitborderradius: ۵px;
mozborderradius: ۵px;
oborderradius: ۵px;
msborderradius: ۵px;
borderradius: ۵px;
}
form#loginform p.submit input[type=”submit”]:hover {
color: #۱۱۱;
}
p#nav {text-align: center; text-shadow: none!important;}
p#backtoblog {display: none;}
html[datauseragent*=“AppleWebKit”] #loginform input {font-weight: 400;}

 

بیشتر بخوانید :   آموزش حذف نمایش نسخه وردپرس در آقای وردپرس

قدم سوم:

حال نوبت به این رسیده است که جی کوئری های صفحه را نیز قرار دهید. استفاده از این ویژگی دلخواهی است و تنها به صفحه شما افکت خواهد داد. اما نکته ای که وجود دارد این است که وجود این جی کوئری ها در قسمت “مرا به خاطر بسپار” می تواند مفید باشد. کد زیر را داخل فایل 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 === ۳;
}).remove();
$(‘#loginform label[for=”user_pass”]’).contents().filter(function() {
return this.nodeType === ۳;
}).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 قرار دهید.

 

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

موفق باشید.

در حال ارسال
نظر کاربر
۲ (۱ رای)
امتیازات نظرات ۰ (۰ بررسی ها)
دریافت فایل

سید حامد حسینی

بنده سید حامد حسینی هستم ، میدیریت سایت آقای وردپرس و ووکامرس فارسی ، دوست وردپرسی شما ، تیم آقای وردپرس

پاسخی بگذارید

در حال ارسال

بستن منو
Nullam dictum mattis Donec libero ante.
×

سبد خرید