مرکز آموزش

چک‌لیست راه‌اندازی حساب کاربری با المنتور پرو

مرحله 1: ایجاد برگه‌ها

1. برگه ورود به حساب کاربری

   • نام برگه: ورود به حساب کاربری

   • URL پیشنهادی: /حساب-کاربری/

   • این برگه مخصوص فرم ورود کاربران است.

2. برگه ثبت نام

   • نام برگه: ثبت نام

   • URL پیشنهادی: /ثبت-نام/

   • این برگه مخصوص فرم ثبت نام کاربران است.

3. برگه داشبورد حساب کاربری

   • نام برگه: داشبورد

   • URL پیشنهادی: /my-account/

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

مرحله 2: طراحی فرم‌ها با المنتور پرو

2.1 فرم ورود با المان HTML

• وارد برگه “ورود به حساب کاربری” شوید.

• المان HTML را روی صفحه قرار دهید.

• کد فرم ورود حرفه‌ای وردپرس را داخل آن بگذارید:

<!-- Login Widget حرفه‌ای -->
<div class="login-widget" dir="rtl">
  <form class="login-form" method="post" action="/wp-login.php" autocomplete="on" novalidate>
    <h3 class="login-title">ورود به حساب کاربری</h3>

    <label class="login-label" for="login-username">نام کاربری یا ایمیل</label>
    <input id="login-username" name="log" type="text" required placeholder="example@email.com">

    <label class="login-label" for="login-password">رمز عبور</label>
    <div class="password-wrap">
      <input id="login-password" name="pwd" type="password" required placeholder="••••••••">
      <button class="toggle-pass" type="button" aria-label="نمایش/مخفی‌کردن رمز">????️</button>
    </div>

    <div class="login-row">
      <label class="remember">
        <input type="checkbox" name="rememberme" value="forever"> مرا به خاطر بسپار
      </label>

      <a class="forgot" href="/wp-login.php?action=lostpassword">بازیابی رمز عبور</a>
    </div>

    <button class="login-submit" type="submit" name="wp-submit" value="Log In">ورود</button>

    <!-- تغییر مسیر بعد از ورود -->
<!-- تغییر مسیر بعد از ورود -->
<input type="hidden" name="redirect_to" value="https://elinacosmeticsshop.ir/my-account/">
   <!-- تست کوکی وردپرس -->
    <input type="hidden" name="testcookie" value="1">

    <div class="login-alt">
      حساب ندارید؟
<a class="register-link" href="https://elinacosmeticsshop.ir/ثبت-نام/">ثبت‌نام کنید</a>
    </div>
  </form>
</div>

<style>
.login-widget{max-width:400px;margin:0 auto}
.login-form{
  background:#fff;border:1px solid #D43474;border-radius:14px;
  padding:20px 18px;box-shadow:0 6px 18px rgba(212,52,116,.15)
}
.login-title{margin:0 0 12px 0;text-align:center;color:#D43474;font-size:18px;font-weight:bold}
.login-label{display:block;margin:10px 0 6px 0;font-size:13px;color:#444}
.login-form input[type="text"],
.login-form input[type="password"]{
  width:100%;padding:10px 12px;border:1px solid #d7d7d7;border-radius:10px;
  outline:none;transition:border .2s, box-shadow .2s;font-size:14px;background:#fff
}
.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus{
  border-color:#D43474;box-shadow:0 0 0 3px rgba(212,52,116,.15)
}
.password-wrap{position:relative}
.toggle-pass{
  position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;font-size:16px;line-height:1;opacity:.7
}
.toggle-pass:hover{opacity:1}
.login-row{
  margin:10px 0 14px;display:flex;align-items:center;justify-content:space-between;gap:10px
}
.remember{display:flex;align-items:center;gap:8px;font-size:13px;color:#444}
.forgot{font-size:13px;color:#D43474;text-decoration:none}
.forgot:hover{text-decoration:underline}
.login-submit{
  width:100%;padding:11px 14px;border-radius:30px;border:2px solid #D43474;
  background:linear-gradient(145deg,#D43474,#FDE6F0);color:#fff;font-weight:700;
  cursor:pointer;transition:transform .2s, box-shadow .2s, background .2s
}
.login-submit:hover{
  transform:translateY(-2px);box-shadow:0 10px 18px rgba(212,52,116,.35);
  background:linear-gradient(145deg,#FDE6F0,#D43474);color:#fff;
  border-color:#D43474;
}
.login-alt{margin-top:12px;text-align:center;font-size:13px;color:#555}
.register-link{color:#D43474;text-decoration:none;font-weight:700}
.register-link:hover{text-decoration:underline; color:#fff; background:#D43474; padding:2px 8px; border-radius:8px}

/* موبایل */
@media (max-width:768px){
  .login-widget{max-width:92%}
  .login-form{padding:16px}
}
</style>

<script>
/* تست کوکی وردپرس */
document.cookie = "wordpress_test_cookie=WP%20Cookie%20check; path=/";

/* نمایش/مخفی کردن رمز */
(function(){
  var btn = document.querySelector('.toggle-pass');
  var input = document.getElementById('login-password');
  if(btn && input){
    btn.addEventListener('click', function(){
      input.type = (input.type === 'password') ? 'text' : 'password';
      btn.textContent = (input.type === 'password') ? '????️' : '????';
    });
  }
})();
</script>

•  

  • این فرم شامل فیلدهای نام کاربری/ایمیل و رمز عبور و ثبت نام و دکمه ورود است.

  • حتماً مقدار redirect_to را روی /my-account/ تنظیم کنید تا پس از ورود کاربر به داشبورد هدایت شود.

2.2 فرم ثبت نام با المان HTML

• وارد برگه “ثبت نام” شوید.

• المان HTML را قرار دهید.

• کد ثبت نام حرفه‌ای وردپرس را داخل آن بگذارید:

  • شامل فیلدهای نام کاربری، ایمیل، رمز عبور، تایید رمز عبور و دکمه ثبت نام.

  • پس از ثبت نام موفق، می‌توانید کاربر را به /my-account/ هدایت کنید.

مرحله 3: افزودن دکمه ورود/ثبت نام در هدر

1. در هدر سایت (از طریق المنتور پرو یا قالب چایلد) یک المان HTML اضافه کنید.

2. کد شورت‌کد را داخل آن قرار دهید.

3. شورت‌کد باید در فایل functions.php چایلد قالب تعریف شده باشد.

function shoosh_header_buttons_shortcode() {
    ob_start();
    ?>
    <div id="header-buttons" style="display:flex; gap:10px; align-items:center;">
    <?php if ( is_user_logged_in() ) : 
        $current_user = wp_get_current_user(); 
        $account_url = home_url('/my-account/'); // داشبورد کاربر
        $logout_url = wp_logout_url(home_url('/حساب-کاربری/')); // خروج و بازگشت به صفحه ورود/ثبت‌نام
    ?>
        <!-- نام کاربری -->
        <a href="<?php echo esc_url($account_url); ?>" 
           style="padding:8px 20px; border-radius:30px; border:2px solid #D43474; background:#D43474; color:#fff; font-weight:bold; font-size:15px; display:inline-block; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.1); text-decoration:none;">
            <?php echo esc_html( $current_user->user_login ); ?>
        </a>

        <!-- دکمه خروج -->
        <a href="<?php echo esc_url($logout_url); ?>" 
           style="padding:8px 20px; border-radius:30px; border:2px solid #D43474; background:#fff; color:#D43474; text-decoration:none; font-weight:bold; font-size:15px; display:inline-block; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.1); transition: all 0.3s ease;">
            خروج
        </a>
    <?php else: 
        // وقتی کاربر وارد نشده است، لینک ورود/ثبت نام به فرم ورود وردپرس با ریدایرکت به داشبورد
        $register_login_url = wp_login_url(home_url('/my-account/'));
    ?>
        <!-- دکمه ورود / ثبت نام -->
        <a href="<?php echo esc_url($register_login_url); ?>" 
           style="padding:8px 22px; border-radius:30px; border:2px solid #D43474; background:#D43474; color:#fff; 
                  text-decoration:none; font-weight:bold; font-size:15px; transition: all 0.3s ease; display:inline-block; text-align:center; box-shadow: 0 2px 6px rgba(0,0,0,0.1);">
           ورود / ثبت نام
        </a>
    <?php endif; ?>
    </div>

    <style>
    #header-buttons a:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(212,52,116,0.5);
      background: #fff;
      color: #D43474;
      border-color: #D43474;
    }
    @media (max-width:768px) {
      #header-buttons {
        gap:5px;
      }
      #header-buttons a {
        padding:6px 16px;
        font-size:14px;
      }
    }
    </style>
    <?php
    return ob_get_clean();
}
add_shortcode('shoosh_header_buttons', 'shoosh_header_buttons_shortcode');

نمونه شورت‌کد برای دکمه‌ها:

[shoosh_header_buttons]