آموزش ساخت فرم ورود و ثبت‌نام در المنتور

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

ساخت فرم لاگین با پاپ آپ

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

برای این کار مطابق تصویر زیر وارد پنل وردپرس خود شوید و از منو کناری وارد قسمت قالب‌ها و روی پاپ‌آپ (Popups) کلیک کنید. در صفحه باز شده از بالای صفحه روی دکمه افزودن قالب جدید کلیک کنید و در نهایت در پنجره باز شده نوع قالب را روی پاپ‌آپ و در فیلد دوم یک نام دلخواه وارد کنید.

در این مرحله ما وارد زیباسازی و جلوه‌های گرافیکی کار نمی‌شویم و آن را به خود شما می‌سپاریم. برای ساخت فرم ورود، المنتور پرو کار ما را راحت کرده است کافی‌ست در بین ویجت‌ها دنبال ویجت ورود یا Login بگردید و آن را در هرجایی که می‌خواهید فرم لاگین قرار گیرد بگذارید. اگر این ویجت را در بین ویجت‌ها پیدا نکردید مراحل زیر را دنبال کنید. اما قبل از آن حتماً مطمئن شوید از آخرین نسخه المنتور پرو استفاده می‌کنید.

برای دریافت المنتور پرو وارد کانال پلاگین های استاد سئو شوید.

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

حال با انتخاب و قراردادن ویجت لاگین در صفحه به‌سادگی آب‌خوردن فرم ورود ما ساخته شد. طبق تصویر زیر از قسمت تنظیمات ویجت می‌توانید سفارشی‌سازی‌های لازم را انجام دهید. برای فرم لاگین ۳ سرفصل کاستومایز داریم:

• Form Fields
• Button
• Additional Options

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

شاید این آموزش مفید باشد: انتقال اطلاعات از یک سایت به سایت دیگر

اتصال دکمه به فرم

در این مرحله مطابق تصویر کافی‌ست به تنظیمات ویجت دکمه خود برویم و از قسمت پیوند روی آیکن پیوند‌های پویا کلیک کنیم و دنبال گزینه popup بگردیم.

بعد از انتخاب پاپ‌آپ باید بگوییم که دکمه ما کدام پاپ‌آپ را باز کند اگر خاطرتان باشد موقع ساخت پا‌پ‌آپ یک نام اختیاری برای آن گذاشتیم که همین‌جا به ما نمایش داده می‌شود. می‌توانید از تصویر زیر برای انجام کار کمک بگیرید.

شاید برای شما مفید باشد: آموزش ساخت ایمیل info

ساخت فرم ثبت نام در المنتور

برخلاف فرم لاگین فرم ثبت نام به‌صورت آماده در المنتور وجود ندارد و ما باید آن را به‌صورت دستی بسازیم. برای این کار نیاز به یک قطعه کد و ویجت فرم المنتور داریم و کمی دقت. در این مرحله نام‌هایی که برای فرم و لیبل‌ها و ID می‌گذاریم بسیار مهم است و باید دقیقاً برابر با مواردی باشد که در قسمت بعد می‌بینید.

قبل از شروع ساخت فرم ثبت نام اگر می‌خواهید یک دکمه ورود و ثبت‌نام حرفه ای داشته باشید آموزش شرط گذاری در المنتور را ببینید.

برای ساخت فرم ثبت نام ابتدا هر کجایی که می‌خواهید فرم نمایش داده شود یک ویجت فرم قرار دهید فرم شما باید به ترتیب شامل فیلدهای زیر باشد:

• نام
• نام خانوادگی
• ایمیل
• رمز عبور

حال باید مطابق تصویر موارد را پر کنید.

علاوه بر قسمت قبل وارد تب Advanced هر input شوید و مطابق تصویر زیر موارد را پُر‌کنید. دقت کنید حروف کوچک و بزرگ مهم و حساس هستند.

شاید برای شما مفید باشد: سایت ساز رایگان گوگل Google sites

با توجه به تصویر بالا مقادیر زیر را برای ID قرار دهید:

• نام: first_name
• نام خانوادگی: last_name
• ایمیل: email
• رمز عبور: password

در این مرحله باید قطعه کدی را در وردپرس خود به‌عنوان افزونه وارد کنیم. برای انجام این کار ابتدا کد زیر را کپی و در یک فایل با پسوند php قرار دهید. نام این فایل باید Elementor-Form-Create-New-User باشد و در نهایت باید آن را zip کنید. دقت کنید حتماً فایل را zip کنید و rar نباشد؛ چراکه فایل rar در وردپرس بارگیری نمی‌شود.

<?php /** * Plugin Name: register Ostad seo * Description: Create a new user using elementor pro form * Author: Amir Saadi * Author URI: https://ostadseo.com * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Version: 1.0.0 */ add_action( 'elementor_pro/forms/new_record', 'alfa_elementor_form_create_new_user' , 10, 2 ); function alfa_elementor_form_create_new_user($record,$ajax_handler) // creating function { $form_name = $record->get_form_settings('form_name');
    
    //در این بخش به جای Sign Up باید نام فرم در المنتور را وارد کنید
    if ('Sign Up' !== $form_name) {
        return;
    }
    
    $form_data  = $record->get_formatted_data();
 
    $username   = $form_data['Email'];
    $email      = $form_data['Email']; 
    $password   = $form_data['Password']; 

    
    $user = wp_create_user($username,$password,$email); 

    if (is_wp_error($user)){ 
        $ajax_handler->add_error_message("مشکلی در ثبت نام به وجود آمده است : ".$user->get_error_message()); 
        $ajax_handler->is_success = false;
        return;
    }

    // اطلاعات ضروری برای ثبت نام و تکمیل پروفایل
    $first_name   =$form_data["First Name"]; 
    $last_name    =$form_data["Last Name"];
    wp_update_user(array("ID"=>$user,"first_name"=>$first_name,"last_name"=>$last_name)); 

    // فیلد های اضافی برای بخش ثبت نام
    $user_phone   =$form_data["Phone"]; 
    $user_bio     =$form_data["Bio"];
    update_user_meta($user, 'user_phone', $user_phone);    
    update_user_meta($user, 'user_bio', $user_bio); 

    /* به صورت خودکار بعد از ثبت نام به صفحه اصلی هدایت و وارد سایت می شود */
    $creds= array(
        "user_login"=>$username,
        "user_password"=>$password,
        "remember"=>true
    );
    
    $signon = wp_signon($creds); 
    
    if ($signon) {
        $ajax_handler->add_response_data( 'redirect_url', get_home_url() );
    }
}

اگر اجرای مراحل بالا برای شما سخت است من برای شما فایل را آماده کردم کافیست آن‌را به عنوان افزونه در وردپرس خود بارگذاری و فعال کنید. لینک فایل آماده کد بالا

اگر نیازمند یک سایت المنتوری و وردپرسی هستید و خودتان وقت یا دانش کافی ندارید می‌توانید از خدمات طراحی سایت وردپرس استاد سئو استفاده کنید.

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