سه شنبه ۳۱ اردیبهشت ۱۳۹۸

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

خانه / وردپرس / آموزش وردپرس / سفارشی سازی صفحه ورود با کد
سفارشی سازی صفحه ورود با کد

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

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

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

صفحه ورود به وردپرس به صورت ساده و پیشفرض می باشد که میتوانید یا با افزونه صفحه ورود را سفارشی کنید و یا با استفاده از کد .

سفارشی سازی صفحه ورود با دستکاری فایل های قالب

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

شما در ابتدا باید یک پوشه به نام login در پوشه ی قالب بسازید. از این پوشه برای نگهداری تصاویر و استایل ها استفاده می شود . ما کد ها را باید در انتهای فایل functions.php قالب وارد کنیم هر تغییری که در این فایل انجام شود در آن قالب نمایش داده می شود .

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

تغییر لوگوی صفحه ورود وردپرس

مهم ترین تصویری که در صفحه ی ورود به چشم می خورد لوگوی سایت شما می باشد شما می توانید لوگوی خود را جایگزین کرده ، اندازه پیش فرض برای این لوگو ۸۰×۸۰ پیکسل است ولی نیازی نیست حتما به این اندازه باشد ولی باید حتما به صورت مربع در نظر گرفته شود . فرمت لوگو PNG در نظر گرفته و آن را در پوشه ی login  که در مرحله ی قبل ساخته ایم ، قرار دهید .

در این باید فایل functions.php را باز کرده و کد زیر را در آن قرار دهید

<br data-mce-bogus="1"> function my_loginlogo() { echo '&lt;style type="text/css"&gt; h1 a { background-image: url(' . get_template_directory_uri() . '/login/logo.png) !important; } &lt;/style&gt;'; } add_action('login_head', 'my_loginlogo'); 

 

در کد بالا از login_head برای اضافه کردن کدهای CSS به قسمت <head> صفحه ورود استفاده شده است و حتما باید از !important استفاده کنیم تا لوگوی جدید جایگزین لوگو قبلی شود .

تغییر لینک لوگو در صفحه ورود

لوگوی صفحه ورود وردپرس فارسی به wp-persian.com لینک شده است که ما می توانیم به راحتی این لینک را تغییر دهیم برای این کار باید کد زیر را به functions.php اضافه کنید :

<br data-mce-bogus="1">

function my_loginURL() {
 return 'https://digiwp.com';
 }
 add_filter('login_headerurl', 'my_loginURL');

 

در کد بالا از login_headerurl برای تغییر لینک لوگو استفاده شده است و شما باید به جای nik-web.ir لینک دلخواه خود را قرار دهید .

از طرف دیگر شما می توانید متن برچسب مربوط به tooltip که مخصوص زمانی است که کاربر ماوس را بر روی لوگو قرار می دهد ، را نیز تغییر دهید این متن در وردپرس فارسی به طور پیش فرض «قدرت گرفته از وردپرس فارسی» می باشد که برای تغییر این متن می توان از کد زیر استفاده نمود . در کد زیر به جای متن دیجی وردپرس باید متن دلخواه خود را قرار دهید .

<br data-mce-bogus="1"> function my_loginURLtext() { return 'دیجی وردپرس'; } add_filter('login_headertitle', 'my_loginURLtext'); 

 

افزودن CSS دلخواه

اگر بخواهید تغییراتی را از جمله کوچک کردن اندازه لوگو یا رنگ پس زمینه و … که به بهتر شدن صفحه ورود کمک می کند را انجام دهید باید به افزودن کد های CSS دست زنید .

پس درون پوشه یک فایل به نام login_styles.css بسازید  و آن را با یک ویرایشگر باز کنید . در این جا شما میتوانید لیست کاملی از آی دی ها و کلاس های مربوط به صفحه ورود وردپرس را مشاهده نمایید . به کد های زیر و استایل که در زیر گذاشته شده است دقت کنید .

<br data-mce-bogus="1">

body {
 background: #ffe7e2;
 }
 .login h1 a {
 background-image: url(logo.png);
 width: 90px;
 height: 90px;
 background-size: 90px 90px;
 }
 .login label {
 color: #2600ffff;
 display: block;
 margin-bottom: 1em;
 font-weight: bold;
 }
 .login form .input {
 font-weight: normal;
 }
 .login #backtoblog a, .login #nav a {
 color: #ff896f;
 }
 .wp-core-ui .button-primary {
 background: #ff896f;
 }

 

مطلب پیشنهادی  نحوه رفع مشکل پیوند یکتا در وردپرس

در این جا طول و عرض لوگو را ۹۰ داده ایم که شما می توانید هر اندازه ای را که مایل هستید را در این جا وارد کنید . تغییراتی که ما با استفاده از کد ها داده ایم را باید enqueue کنیم و یا به اصطلاح به آن بشناسونیم . توجه داشته باشید شما با استفاده از  برای این کار کد زیر را به functions.php اضافه کنید.

<br data-mce-bogus="1">

function my_logincustomCSSfile() {
 wp_enqueue_style('login-styles', get_template_directory_uri() . '/login/login_styles.css');
 }
 add_action('login_enqueue_scripts', 'my_logincustomCSSfile');

 

افزودن لینک های دلخواه به صفحه ورود وردپرس

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

<br data-mce-bogus="1">

function my_loginfooter() { ?&gt;
 &lt;p style="text-align: center; margin-top: 1em;"&gt;
 &lt;a style="color: #ff896f; text-decoration: none;" href="http://nik-web.ir"&gt;برای مشاهده دیجی وردپرس کلیک کنید
 &lt;/a&gt;
 &lt;/p&gt;
 &lt;?php }
 add_action('login_footer','my_loginfooter');

 

تغییر مسیر (ریدایرکت) کاربر پس از ورود

به طور پیش فرض کاربر پس از ورود به صفحه پیشخوان وردپرس می رود ولی اگر شما ثبت نام را باز گذاشته باشید و یا بخواهید کاربر بعد از ورود به صفحه ی خاصی برود می توانید از کد های زیر بهره بگیرید در این کد ها در ابتدا نقش کاربر بررسی می شود اگر مدیر بود به پیشخوان هدایت میشود (admin_url)، اگر مدیر نبود به صفحه خانگی (site_url) و اگر هیچ شرطی درست نبود باز به صفحه خانگی هدایت خواهد شد .

<br data-mce-bogus="1">

function my_loginredrect( $redirect_to, $request, $user ) {
 if ( isset( $user-&gt;roles ) &amp;&amp; is_array( $user-&gt;roles ) ) {
 if( in_array('administrator', $user-&gt;roles)) {
 return admin_url();
 } else {
 return site_url();
 }
 } else {
 return site_url();
 }
 }

add_filter('login_redirect', 'my_loginredrect', 10, 3);

 

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


site_url( '/contact/')

طراحی صفحه ورود اختصاصی برای وردپرس

برای اینکه بتوانید یک صفحه ورود مطابق با میل خود طراحی کنید کافیست تا ابتدا به صورت html,css طراحی کنید یا اینکه از قالب های آماده استفاده کنید پس از آنکه فایل html , css را طراحی یا آماده کردید مرحله بعدی افزودن به قالب وردپرس می باشد برای اینکار یک پوشه در قالب خود با نام دلخواه ایجاد کنید برای مثال login یا هر نام دلخواه دیگر و داخل آن پوشه یک فایل با نام login.php ایجاد کنید توجه داشته باشید که نام این فایل نیز دلخواه است و باید فقط با فرمت php باشدسپس کد زیر را داخل فایل ایجاد شده قرار دهید.


<div id="crayon-5a66345ca925a426748323-1" class="crayon-line"><span class="crayon-ta"><?php</span></div>


<div id="crayon-5a66345ca925a426748323-2" class="crayon-line crayon-striped-line"><span class="crayon-c">/*</span></div>


<div id="crayon-5a66345ca925a426748323-3" class="crayon-line"><span class="crayon-c">Template Name: صفحه کاربری</span></div>


<div id="crayon-5a66345ca925a426748323-4" class="crayon-line crayon-striped-line"><span class="crayon-c">*/</span></div>


<div id="crayon-5a66345ca925a426748323-5" class="crayon-line"><span class="crayon-ta">?></span></div>


<div>
این عملیات یک قالب صفحه جدید به وردپرس اضافه میکند به طوری که میتوانید در زمان ایجاد برگه قالب صفحه کاربری را انتخاب کنید.
ما در اصل یک صفحه طراحی میکنیم و بعد به وردپرس تبدیل و آن را به عنوان قالب برگه قرار میدهیم سپس یک برگه با نام ورود میسازیم و در آخر لینک ورود را به صفحه ساخته شده تغییر میدهیم . پس از اینکه اینکار را انجام دادیم نوبت به کپی کدیست که طراحی یا آماده کرده ایم توجه کنید که برای نمایش و فراخوانی استایل های صفحه ی ساخته شده شما یا باید به صورت مستقیم آدرس را فراخوانی کنید که پوشه ساخته شده نیز درون آن است و یا اینکه از تابع مخصوص فراخوانی پوسته فعال در وردپرس استفاده کنید و بعد نام پوشه و بعد هم فایل های استایل طراحی شده .
صفحه ورود یا ثبت نام یک فرم برای اجرای فیلد ها دارد که با نام form رار داده میشوند این قسمت را پیدا میکنیم و بررسی میکنیم اگر در ای دی ( شناسه ) آن از کلمه login استفاده شده بود این مربوط به قسمت ورود می باشد چنانچه خود طراح این صفحه هستید نیازی به اینکار نیست .
مانند کد زیر عمل میکنیم .
</div>


<div>

<div id="crayon-5a66345ca9263226925562-1" class="crayon-line"><span class="crayon-o"><</span><span class="crayon-e">div </span><span class="crayon-t">class</span><span class="crayon-o">=</span><span class="crayon-s">"box"</span><span class="crayon-o">></span></div>


<div id="crayon-5a66345ca9263226925562-2" class="crayon-line crayon-striped-line"></div>


<div id="crayon-5a66345ca9263226925562-3" class="crayon-line"><span class="crayon-h">       </span><span class="crayon-o"><</span><span class="crayon-e">div </span><span class="crayon-t">class</span><span class="crayon-o">=</span><span class="crayon-s">"title"</span><span class="crayon-o">></span><span class="crayon-v">LOGIN</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">div</span><span class="crayon-o">></span></div>


<div id="crayon-5a66345ca9263226925562-4" class="crayon-line crayon-striped-line"></div>


<div id="crayon-5a66345ca9263226925562-5" class="crayon-line"><span class="crayon-h">       </span><span class="crayon-o"><</span><span class="crayon-e">div </span><span class="crayon-t">class</span><span class="crayon-o">=</span><span class="crayon-s">"input"</span><span class="crayon-o">></span></div>


<div id="crayon-5a66345ca9263226925562-6" class="crayon-line crayon-striped-line"><span class="crayon-h">          </span><span class="crayon-o"><</span><span class="crayon-e">label </span><span class="crayon-st">for</span><span class="crayon-o">=</span><span class="crayon-s">"name"</span><span class="crayon-o">></span><span class="crayon-v">Username</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">label</span><span class="crayon-o">></span></div>


<div id="crayon-5a66345ca9263226925562-7" class="crayon-line"><span class="crayon-h">          </span><span class="crayon-o"><</span><span class="crayon-e">input </span><span class="crayon-v">type</span><span class="crayon-o">=</span><span class="crayon-s">"text"</span> <span class="crayon-v">name</span><span class="crayon-o">=</span><span class="crayon-s">"name"</span> <span class="crayon-v">id</span><span class="crayon-o">=</span><span class="crayon-s">"name"</span><span class="crayon-o">></span></div>


<div id="crayon-5a66345ca9263226925562-8" class="crayon-line crayon-striped-line"><span class="crayon-h">          </span><span class="crayon-o"><</span><span class="crayon-e">span </span><span class="crayon-t">class</span><span class="crayon-o">=</span><span class="crayon-s">"spin"</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">span</span><span class="crayon-o">></span></div>


<div id="crayon-5a66345ca9263226925562-9" class="crayon-line"><span class="crayon-h">       </span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">div</span><span class="crayon-o">></span></div>


<div id="crayon-5a66345ca9263226925562-10" class="crayon-line crayon-striped-line"></div>


<div id="crayon-5a66345ca9263226925562-11" class="crayon-line"><span class="crayon-h">       </span><span class="crayon-o"><</span><span class="crayon-e">div </span><span class="crayon-t">class</span><span class="crayon-o">=</span><span class="crayon-s">"input"</span><span class="crayon-o">></span></div>


<div id="crayon-5a66345ca9263226925562-12" class="crayon-line crayon-striped-line"><span class="crayon-h">          </span><span class="crayon-o"><</span><span class="crayon-e">label </span><span class="crayon-st">for</span><span class="crayon-o">=</span><span class="crayon-s">"pass"</span><span class="crayon-o">></span><span class="crayon-v">Password</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">label</span><span class="crayon-o">></span></div>


<div id="crayon-5a66345ca9263226925562-13" class="crayon-line"><span class="crayon-h">          </span><span class="crayon-o"><</span><span class="crayon-e">input </span><span class="crayon-v">type</span><span class="crayon-o">=</span><span class="crayon-s">"password"</span> <span class="crayon-v">name</span><span class="crayon-o">=</span><span class="crayon-s">"pass"</span> <span class="crayon-v">id</span><span class="crayon-o">=</span><span class="crayon-s">"pass"</span><span class="crayon-o">></span></div>


<div id="crayon-5a66345ca9263226925562-14" class="crayon-line crayon-striped-line"><span class="crayon-h">          </span><span class="crayon-o"><</span><span class="crayon-e">span </span><span class="crayon-t">class</span><span class="crayon-o">=</span><span class="crayon-s">"spin"</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">span</span><span class="crayon-o">></span></div>


<div id="crayon-5a66345ca9263226925562-15" class="crayon-line"><span class="crayon-h">       </span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">div</span><span class="crayon-o">></span></div>


<div id="crayon-5a66345ca9263226925562-16" class="crayon-line crayon-striped-line"></div>


<div id="crayon-5a66345ca9263226925562-17" class="crayon-line"><span class="crayon-h">       </span><span class="crayon-o"><</span><span class="crayon-e">div </span><span class="crayon-t">class</span><span class="crayon-o">=</span><span class="crayon-s">"button login"</span><span class="crayon-o">></span></div>


<div id="crayon-5a66345ca9263226925562-18" class="crayon-line crayon-striped-line"><span class="crayon-h">          </span><span class="crayon-o"><</span><span class="crayon-v">button</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-v">span</span><span class="crayon-o">></span><span class="crayon-v">GO</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">span</span><span class="crayon-o">></span> <span class="crayon-o"><</span><span class="crayon-i">i</span> <span class="crayon-t">class</span><span class="crayon-o">=</span><span class="crayon-s">"fa fa-check"</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">i</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">button</span><span class="crayon-o">></span></div>


<div id="crayon-5a66345ca9263226925562-19" class="crayon-line"><span class="crayon-h">       </span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">div</span><span class="crayon-o">></span></div>


<div id="crayon-5a66345ca9263226925562-20" class="crayon-line crayon-striped-line"></div>


<div id="crayon-5a66345ca9263226925562-21" class="crayon-line"><span class="crayon-h">       </span><span class="crayon-o"><</span><span class="crayon-i">a</span> <span class="crayon-v">href</span><span class="crayon-o">=</span><span class="crayon-s">""</span> <span class="crayon-t">class</span><span class="crayon-o">=</span><span class="crayon-s">"pass-forgot"</span><span class="crayon-o">></span><span class="crayon-e">Forgot </span><span class="crayon-e">your </span><span class="crayon-v">password</span><span class="crayon-sy">?</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">a</span><span class="crayon-o">></span></div>


<div id="crayon-5a66345ca9263226925562-22" class="crayon-line crayon-striped-line"></div>


<div id="crayon-5a66345ca9263226925562-23" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">div</span><span class="crayon-o">></span></div>

</div>

اگر دقت کنید متوجه نوع فیلد ها خواهید شد برای مثال نام کاربری همان Username است این کد ها در قسمت یا یک div قرار داده میشوند که به صورت زیر تعریف می شود.



<div class=”box”>  box cun </div >

با استفاده از این کد میتوانیم برای کلاس box در فایل style.css یا فایل استایل دیگر خاصیت تعریف کنیم .

مطلب پیشنهادی  ایجاد حمل و نقل رایگان در ووکامرس

کد بالا یک مثال بدون فرم می باشد اگر چنین بود به صورت زیر یک فرم با دستور اجرایی ایجاد میکنیم به صورت زیر .



<form name="loginform" id="loginform" action="<?php echo esc_url( site_url( 'wp-login.php', 'login_post' ) ); ?>
" method="post">


<div class="box">


<div class="title">LOGIN</div>



<div class="input">
<label for="name">Username</label>
<input type="text" name="name" id="name">
<span class="spin"></span>
</div>



<div class="input">
<label for="pass">Password</label>
<input type="password" name="pass" id="pass">
<span class="spin"></span>
</div>



<div class="button login">
<button><span>GO</span> <i class="fa fa-check"></i></button>
</div>


<a href="" class="pass-forgot">Forgot your password?</a>

</div>

</form>


ما در این قسمت فرم را ایجاد کردیم و کافیست تا طبق توضیح زیر ادامه کار را انجام دهیم به این ترتیب برای هر فیلد باید یک نام تعریف کنیم و در قسمت name وارد میکنیم . نام های هر فیلد در وردپرس به صورت زیر می باشد.

  • برای نام کاربری name=”log”
  • برای رمز عبور name=”pwd”
  • برای ایمیل name=”user_email”
  • برای دکمه ورود name=”wp-submit”

قسمت ورود ساخته شد و مانند کد زیر می باشد برای قسمت فراموشی رمز عبور و ثبت نام هم به همین صورت عمل میکنیم و تنها در قسمت دستور فرم یا action متفاوت عمل میکنیم و کد های زیر را جایگزین میکنیم .


برای ورود <?php echo esc_url( site_url( ‘wp-login.php’, ‘login_post’ ) ); ?>
برای ثبت نام <?php echo esc_url( site_url( ‘wp-login.php?action=register’, ‘login_post’ ) ); ?>
برای بازیابی رمز عبور <?php echo esc_url( network_site_url( ‘wp-login.php?action=lostpassword’, ‘login_post’ ) ); ?>

برای نمونه یک کد کامل شده را قرار میدهیم .



<form name="loginform" id="loginform" action="<?php echo esc_url( site_url( 'wp-login.php', 'login_post' ) ); ?>
" method="post">


<div class="box">


<div class="title">LOGIN</div>



<div class="input">
<label for="name">Username</label>
<input type="text" name="log" id="name">
<span class="spin"></span>
</div>



<div class="input">
<label for="pass">Password</label>
<input type="password" name="pwd" id="pass">
<span class="spin"></span>
</div>



<div class="button login">
<button name="wp-submit"><span>GO</span> <i class="fa fa-check"></i></button>
</div>


<a href="" class="pass-forgot">Forgot your password?</a>

</div>

</form>


و در مرحله بعد از طراحی کافیست تا یک برگه ایجاد کنیم و نام صفحه ورود برای آن انتخاب کنیم سپس انتشار دهیم ( حتما در قسمت قالب برگه قالب صفحه ورود را انتخاب کنید ) و بعد با استفاده از تابع زیر صفحه ورود پیشفرض وردپرس را که wp-admin است به صفحه ای که طراحی کرده ایم تغییر میدهیم .

کد زیر را درون فایل htaccess  قرار دهید .


<div class="crayon-pre">

<div id="crayon-5a664766b6939196248207-1" class="crayon-line"><span class="crayon-i">RewriteRule</span> <span class="crayon-o">^</span><span class="crayon-i">login</span><span class="crayon-sy">$</span> <span class="crayon-i">http</span><span class="crayon-o">:</span><span class="crayon-c">//yoursite.com/wp-login.php [NC,L]</span></div>

</div>

ضمن اینکه برای تغییر آدرس ورود میتوانید از افزونه HC Custom WP-Admin URL نیز استفاده کنید.

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

یک روش دیگر برای سفارشی سازی صفحه ورود وجود دارد و آن ویرایش مستقیم فایل wp-login.php می باشد که پیشنهاد نمیشود دقت کنید که اگر در این فایل تغییراتی ایجاد کنید با بروزرسانی وردپرس  تغییرات شما از بین خواهد رفت چرا که فایل ها جایگزین میشود.

 

اصلا خوب نبودمیتونه بهتر باشهقابل قبولهخوب بودعالی بود (شما اولین نفر باشید!)

  • دیدگاهتان فقط و فقط در رابطه با همین مطلب باشد.
  • لطفا از تایپ فینگلیش بپرهیزید. در غیر اینصورت دیدگاه شما بررسی نخواهد شد.
  • هدفتان از ارسال دیدگاه تبلیغ یا بک لینک نباشد. در غیر اینصورت دیدگاه حذف می شود.
  • به دیگر توهین و اهانت نکنید.

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

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