آموزش طراحی صفحه ورود و عضویت وردپرس بدون افزونه


آموزش طراحی صفحه ورود و عضویت وردپرس بدون افزونه

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

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

قدم اول ساخت فرم خالی قبل از اینکه بخواهیم وردپرس کار کنیم باید با html و css کار کنیم ، یا با استفاده از دانش و تجربه خودتان و یا با استفاده از دانش و تجربه دیگران که به رایگان درون وب سایت های مختلف به اشتراک گذاشته اند ، منظور همان قالب های آماده صفحه ورود و یا صفحه ثبت نام که تعداد کثیری در فضای مجازی موجود است را انتخاب و مراحل بعدی را پیش می گیریم .

به طور مثال ما برای شما این صفحه و استایل را در نظر گرفته ایم

 می توانید این فایل را از اینجا با لینک مستقیم دانلود کنید . دمو صفحه

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

<?php
/*
Template Name: صفحه کاربری
*/
?>

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

مرحله سوم اضافه کردن کد لاگین و استایل به قالب صفحه ایست که ایجاد کرده ایم . برای این کار کد دانلود شده را در ادامه کد بالا قرار می دهیم .

به دلیل طولانی بودن کد مد نظر تنها قسمتی که باید ویرایش شود را عنوان می کنیم .

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

	   <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>

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

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

در اینجا مشاهده میکنیم که کلمه box داخل “” قرار گرفته آی دی و یا شناسه استایل ما در css است و box cun محتواییست که قرار است این شکل را به خود بگیرد و طبق قانون html  هر کدی ک شروع می شود پایانی دارد و آن پایان درون </> قرار می گیرد . تمام .

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

<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’ ) ); ?>

توجه داشته باشید که این کد ها را به صورت  action=”cod” به فرم اضافه کنید.

نمونه تمام شده :

<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>

امیدوارم مورد استفاده واقع شده باشد. با تشکر از همراهی شما – شاد باشید.

2 پاسخ به آموزش طراحی صفحه ورود و عضویت وردپرس بدون افزونه

  1. اسماعیل گفت:

    با سلام
    برای شخصی سازی و تغییر متن های فارسی صفحه ورود در ووکامرس (مثلا متن داخل فیلدها که نوشته شده [نام کاربری خود را وارد کنید]) باید به چه فایلی مراجعه کنم؟

    1. با سلام و احترام برای اینکار میتونید از جی کوئری استفاده کنید و یا فانکشن.
      مثال جی کوئری :


      jQuery(document).ready(function(){
      jQuery('#user_login').attr('placeholder', 'User Name');
      jQuery('#user_email').attr('placeholder', 'User Email');
      jQuery('#user_pass').attr('placeholder', 'User Password');
      });

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


      add_filter('woocommerce_default_address_fields', 'override_default_address_checkout_fields', 20, 1);
      function override_default_address_checkout_fields( $address_fields ) {
      $address_fields['first_name']['placeholder'] = 'Fornavn';
      $address_fields['last_name']['placeholder'] = 'Efternavn';
      $address_fields['address_1']['placeholder'] = 'Adresse';
      $address_fields['state']['placeholder'] = 'Stat';
      $address_fields['postcode']['placeholder'] = 'Postnummer';
      $address_fields['city']['placeholder'] = 'By';
      return $address_fields;
      }

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

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

Solve : *
11 + 18 =


قالب وردپرس و افزونه وردپرس حرفه ای