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

اتصال وردپرس به گوگل شیت

اتصال وردپرس به گوگل شیت

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

در نظر داشته باشید که در این مقاله، از هیچ پلاگینی استفاده نخواهیم کرد. بنابراین، باید دانش اندکی در خصوص html (برای ساخت فرم)، php (برای ارسال post request و ساخت shortcode) و اندکی هم جاوااسکریپت داشته باشید. ثبت اطلاعات فرم‌های ورپرس در گوگل شیت، در دو بخش انجام می‌شود. بخش اول، فعال کردن اسکریپت در گوگل شیت بوده و بخش دوم هم ساخت فرم در وردپرس و ارسال داده‌ها.

اپ اسکریپت گوگل شیت

ارسال کامل اطلاعات فرم های وردپرسی به گوگل شیت (بدون پلاگین)
    برای شروع تولید فهرست مطالب ، یک هدر اضافه کنید

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

    فعال کردن اپ اسکریپت در گوگل شیت

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

    ایجاد اسکریپت در گوگل شیت

    فانکشن doPost در گوگل شیت

    در اپ اسکریپت، شما می‌توانید هر فانکشنی که خواستید را بنویسید، اما برای اینکه گوگل شیت شما به درخواست‌های مدل POST یا همان http post requestها پاسخ دهد، باید فانکنشی با نام doPost را ایجاد نمایید. در این صورت، شیت شما در هر لحظه، منتظر پست ریکوئست‌ها بوده تا آن‌ها را تحلیل نماید.

    بنابراین، متوجه شدید که به سادگی و با استفاده از یک فانکنشن با نام مشخص، شیت خود را برای پست ریکوئست‌ها باز کرده‌اید. باقی کار، هنر و مهارت شما است. فراموش نکنید که هر پست ریکوئست، دارای متغیرهایی است که باید دریافت شود. پس در فانکشن خود، حتما متغیرها را با نام دلخواه (معمولا e یا همان ایونت) دریافت نمایید.

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

    ساخت فرم دلخواه در وردپرس

    اگر با html کار کرده باشید، به سادگی یک فرم دلخواه را برای خود ایجاد نمایید. در اینجا، من فرم ساده‌ای شامل نام و نام خانوادگی، شماره موبایل و نهایتا ایمیل را میسازم.

    				
    					<form action="#" method="POST" style="display: flex; flex-direction: column; gap: 10px;">
        <input type="text" name="name" placeholder="نام خود را وارد نمایید.">
        <input type="text" name="surname" placeholder="نام خانوادگی خود را وارد نمایید.">
        <input type="text" name="email" placeholder="ایمیل خود را وارد نمایید">
        <input type="text" name="phone" placeholder="شماره موبایل خود را وارد نمایید.">
        <button type="submit">ثبت اطلاعات</button>
    </form>
    				
    			

    فرم html ایجاد شده توسط کدهای قبلی:

    دقت داشته باشید که در فرم بالا، هیچگونه اعتبارسنجی یا همان validationی انجام نشده و از ساده‌ترین css استفاده شده. اعتبارسنجی و css را خودتون باید اضافه نمایید. فرم را به دلخواه خود ایجاد نمایید، فیلدها را کم و زیاد کنید و در نهایت، اتریبیوت name را فراموش نکنید.

    اندپوینت action در فرم وردپرسی

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

    بنابراین، در قسمت Action باید از ساختار مورد تایید وردپرس برای ارسال پست ریکوئست استفاده کنیم. طبق راهنمای استاندارد وردپرس (این لینک)، اندپوینت ما باید ساختار زیر را داشته باشد و یک اسم دلخواه و صد البته یونیک، برای بخش نهایی آن انتخاب شود.

    				
    					action="/wp-admin/admin-ajax.php?action=uniquename"
    				
    			

    در قسمت اکشن، آدرس با / شروع شده که به معنای اضافه شدن به انتهای دامنه‌ی اصلی است. پس از آن، ساختار استاندارد دریافت درخواست پست ریکوئست آمده (/wp-admin/admin-ajax.php?action) و بعد از آن نیز نام اختصاصی اکشن ما باید به آن اضافه شود. در این آموزش، نام اکشن را wptogsheet قرار می‌دهد. بنابراین، فرم نهایی ما به شکل زیر خواهد بود.

    				
    					<form action="/wp-admin/admin-ajax.php?action=wptogsheet" method="POST" style="display: flex; flex-direction: column; gap: 10px;">
        <input type="text" name="name" placeholder="نام خود را وارد نمایید.">
        <input type="text" name="surname" placeholder="نام خانوادگی خود را وارد نمایید.">
        <input type="text" name="email" placeholder="ایمیل خود را وارد نمایید">
        <input type="text" name="phone" placeholder="شماره موبایل خود را وارد نمایید.">
        <button type="submit">ثبت اطلاعات</button>
    </form>
    				
    			

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

    خب، حالا به مرحله‌ای رسیدیم که باید اطلاعات را در بک اند وردپرس پردازش کنیم. برای این کار، روش‌های مختلفی از جمله اضافه کردن پلاگین، اضافه کردن پلاگین الزامی (mu-plugin) و یا در نهایت، ادیت کردن فایل functions.php وجود دارد. برای سهولت کار، من، فایل‌ها را به functions.php استفاده میکنم تا این مقاله طولانی نشود. برای این کار، باید به پوشه wp-contents در هاست رفته و از لیست پوشه‌ها، پوشه templates را انتخاب کنید. در این پوشه، لیست تمپلیت‌ها یا همان قالب‌های شما وجود دارد.

    به پوشه‌ی قالب فعال خود رفته و فایل functions.php را باز کنید. به بعد از آخرین خط رفته و کدهای زیر را در آنجا اضافه کنید.

    استفاده از add_action برای دریافت اطلاعات فرانت در بک اند

    				
    					        add_action('wp_ajax_wptogsheet', 'wp_to_google_sheet');
            add_action('wp_ajax_nopriv_wptogsheet', 'wp_to_google_sheet');
    				
    			

    دو دستور بالا، هر دو به وردپرس اطلاع می‌دهند که هنگام دریافت پست ریکوئست با نام اکشن wptogsheet، فانکشنی به نام wp_to_google_sheet را اجرا نماید. تفاوت خط اول با دوم، در موضوع لاگین بودن کاربر یا نبودن آن است. وردپرس، پست ریکوئست‌ها را به دو بخش کاربران لاگین کرده و لاگین نشده، تقسیم می‌کند. بنابراین، برای دریافت فرم از تمام کاربران، باید هر دو خط را اضافه نماییم.

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

    				
    					add_action('wp_ajax_wptogsheet', 'wp_to_google_sheet');
    add_action('wp_ajax_nopriv_wptogsheet', 'wp_to_google_sheet');
    
    function wp_to_google_sheet(){
    
        //دریافت متغیرها از پست ریکوئست
        $name       = $_POST['name'];
        $surname    = $_POST['surname'];
        $email      = $_POST['email'];
        $phone      = $_POST['phone'];
    
        //اعتبارسنجی داده‌ها فراموش نشود
    
        //ارسال کدها به گوگل شیت
    }
    				
    			

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

    دریافت اطلاعات وردپرس در اپ اسکریپت گوگل شیت

    برای استفاده از اپ اسکریپت و دریافت پست ریکوئست در آن، باید مراحل زیر را انجام دهیم:

    1. تعریف متغیرهای ارسال شده
    2. انتخاب شیت
    3. اضافه کردن داده‌ی دریافتی به سطر و ستون مد نظر

    دریافت اطلاعات وردپرس در اپ اسکریپت گوگل شیت

    همانطور که پیشتر مطرح شد، اپ اسکریپت از جاوااسکریپت پشتیبانی کرده و بنابراین، برای دریافت متغیرهای ارسالی، به شکل زیر عمل میکنیم:

    				
    					function doPost(e) {
    
      const name = e.parameter.name         //متغیر ارسالی با نام name
      const surname = e.parameter.surname   //متغیر ارسالی با نام surname
      const email = e.parameter.email       //متغیر ارسالی با نام email
      const phone = e.parameter.phone       //متغیر ارسالی با نام phone
    
    }
    				
    			

    انتخاب شیت برای ثبت داده‌ها

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

    نام شیت برای ثبت داده های وردپرس
    				
    					const gsheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("wpgsheet");
    				
    			

    ثبت داده‌ی ارسالی در سطر و ستون مناسب

    اطلاعاتی که در قالب پست ریکوئست ارسال شده، در متغیرها (البته constها)ی name، surname، email و نهایتا phone ذخیره شده‌اند. در این مرحله، باید این مقادیر در سلول‌های مد نظر ما، ثبت شوند. در این آموزش، از دستوری برای اضافه کردن یک ردیف پس از سطر دوم گوگل شیت استفاده میکنم تا همواره جدیدترین داده‌ها، در سطر دوم قرار گرفته و داده‌های قبلی، به یک خط پایین‌تر، منتقل شوند.

    حالا، پس از هر بار پست ریکوئست، اطلاعات دریافتی را در سطر دوم و ستون‌های مربوطه (از ستون اول تا چهارم)، ثبت خواهیم کرد:

    				
    					gsheet.insertRowBefore(2)
    
    gsheet.getRange(2, 1, 1, 1).setValue(name);
    gsheet.getRange(2, 2, 1, 1).setValue(surname);
    gsheet.getRange(2, 3, 1, 1).setValue(phone);
    gsheet.getRange(2, 4, 1, 1).setValue(email);
    				
    			

    در کدهای بالا، gsheet همان شیتی است که پیشتر به عنوان شیت مد نظر معرفی شده بود. دستور getRange، سلول مد نظر ما را (سطر دوم، ستون اول، یک سطر، یک ستون) انتخاب نموده و سپس دستور setValue، مقدار این سلول را با مقداری که در متغیر name، ذخیره شده بود، پر خواهد کرد.

    بدین ترتیب، اطلاعات ارسالی که پیشتر در متغیرها ذخیره شده بود، به سلول‌های مد نظر در ردیف دوم، منتقل خواهند شد. فانکنشن doPost در نهایتا، به شکل زیر، تکمیل خواهد شد:

    				
    					function doPost(e) {
    
    const name = e.parameter.name         //متغیر ارسالی با نام name
    const surname = e.parameter.surname   //متغیر ارسالی با نام surname
    const email = e.parameter.email       //متغیر ارسالی با نام email
    const phone = e.parameter.phone       //متغیر ارسالی با نام phone
    
    const gsheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("wpgsheet");
    
    gsheet.insertRowBefore(2)
      
    gsheet.getRange(2, 1, 1, 1).setValue(name);
    gsheet.getRange(2, 2, 1, 1).setValue(surname);
    gsheet.getRange(2, 3, 1, 1).setValue(phone);
    gsheet.getRange(2, 4, 1, 1).setValue(email);
    
    }
    				
    			

    دپلوی کردن اسکریپت گوگل شیت

    حالا نوبت به نهایی کردن اسکریپت است. برروی دکمه آبی رنگ بالای صفحه، کلیک نمایید و گزینه New doplyment را بزنید.

    صفحه‌ی تنظیمات این اپ اسکریپت به شما نمایش داده شده که باید ابتدا مدل فعالیت آن را انتخاب نمایید. در این صفحه، برروی علامت چرخ دنده (یا همان تنظیمات) کلیک نموده و گزینه Web app را انتخاب نمایید (مشابه تصویر زیر):

    تنظیمات اپ اسکریپت برای اتصال وردپرس به گوگل شیت

    در بخش Configuration، ابتدا نام دلخواه یا همان دسکریپشن را وارد نمایید، تنظیمات Web app در حالت پیش فرض (همان Me( باشد و در نهایت نیز گزینه Access را برروی Anyone قرار دهید. در نهایت نیز دکمه Deploy را کلیک نمایید.

    حال باید دسترسی‌های لازمه برای فعالیت اپ اسکریپت تحت اکانت جیمیل شما، صادر شود. برای این کار، باید دکمه Authorize access را کلیک نمایید.

    در پاپ آپ باز شده، جیمیل مد نظر خود را انتخاب نموده و دکمه allow را کلیک نمایید. بعد از این مرحله، آدرسی که اپ اسکریپت شما به درخواست‌های پست ریکوئست، پاسخ میدهد، نمایش داده می‌شود.

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

    ارسال post request در وردپرس

    حالا که کار ما در گوگل شیت به پایان رسیده، باید کدهایی که پیشتر در بک اند وردپرس نوشته بودیم (فایل functions.php) را تکمیل نماییم. در مرحله‌ی نهایی کار، باید پس از دریافت اطلاعات در بک اند، آن‌ها را با یک پست ریکوئست، به گوگل شیت منتقل نماییم.

    				
    					    //ارسال کدها به گوگل شیت
        $gsheetEndpoint = "https://script.google.com/macros/s/AKfycbze"
        //آدرس اسکریپت خود را در بالا قرار دهید
    
        wp_remote_post( $gsheetEndpoint, array(
                'method'    => 'POST',
                'timeout'   => 45,
                'redirection' => 5,
    	        'httpversion' => '1.0',
                'blocking'    => true,
                'body'  => array(
                    'name'      => esc_html($_POST['name']),
                    'surname'   => esc_html($_POST['surname']),
                    'email'     => esc_html($_POST['email']),
                    'phone'     => esc_html($_POST['phone']),
                ),
                'headers'     => array(
                    'Content-Type' => 'application/x-www-form-urlencoded',
                ),
                'sslverify'   => false,
            ) );
    				
    			

    برای متغیر gsheetEndpoint، آدرسی که پیشتر کپی کرده بودید را وارد نمایید (بین دو “”). با اضافه کردن این بخش، تمام اطلاعات دریافت شده توسط بک اند، به گوگل شیت ارسال می‌شوند.

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

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

    				
    					function doPost(e) {
    
    const name = e.parameter.name         //متغیر ارسالی با نام name
    const surname = e.parameter.surname   //متغیر ارسالی با نام surname
    const email = e.parameter.email       //متغیر ارسالی با نام email
    const phone = e.parameter.phone       //متغیر ارسالی با نام phone
    
    const gsheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("wpgsheet");
    
    gsheet.insertRowBefore(2)
      
    gsheet.getRange(2, 1, 1, 1).setValue(name);
    gsheet.getRange(2, 2, 1, 1).setValue(surname);
    gsheet.getRange(2, 3, 1, 1).setValue(phone);
    gsheet.getRange(2, 4, 1, 1).setValue(email);
    
    }
    				
    			

    بخش دوم نیز شامل یک فرم html و اضافه کردن فانکشن‌ها به فایل functions.php در پوشه‌ی قالب فعال وردپرس است. فرم html ما به شرح زیر است:

    				
    					<form action="/wp-admin/admin-ajax.php?action=wptogsheet" method="POST" style="display: flex; flex-direction: column; gap: 10px;">
        <input type="text" name="name" placeholder="نام خود را وارد نمایید.">
        <input type="text" name="surname" placeholder="نام خانوادگی خود را وارد نمایید.">
        <input type="text" name="email" placeholder="ایمیل خود را وارد نمایید">
        <input type="text" name="phone" placeholder="شماره موبایل خود را وارد نمایید.">
        <button type="submit">ثبت اطلاعات</button>
    </form>
    				
    			

    کدهایی که باید به فایل functions.php اضافه شود نیز به شرح زیر است:

    				
    					add_action('wp_ajax_wptogsheet', 'wp_to_google_sheet');
    add_action('wp_ajax_nopriv_wptogsheet', 'wp_to_google_sheet');
    
    function wp_to_google_sheet(){
    
        //دریافت متغیرها از پست ریکوئست
        $name       = $_POST['name'];
        $surname    = $_POST['surname'];
        $email      = $_POST['email'];
        $phone      = $_POST['phone'];
    
        //اعتبارسنجی داده‌ها فراموش نشود
    
        //ارسال کدها به گوگل شیت
        $gsheetEndpoint = "https://script.google.com/macros/s/AKfycbze"
        //آدرس اسکریپت خود را در بالا قرار دهید
    
        wp_remote_post( $gsheetEndpoint, array(
                'method'    => 'POST',
                'timeout'   => 45,
                'redirection' => 5,
    	        'httpversion' => '1.0',
                'blocking'    => true,
                'body'  => array(
                    'name'      => esc_html($_POST['name']),
                    'surname'   => esc_html($_POST['surname']),
                    'email'     => esc_html($_POST['email']),
                    'phone'     => esc_html($_POST['phone']),
                ),
                'headers'     => array(
                    'Content-Type' => 'application/x-www-form-urlencoded',
                ),
                'sslverify'   => false,
            ) );
    }
    				
    			

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

    در انتها، برای عملکرد صحیح این کدها، دقت نمایید که فرم html باید به فرانت سایت اضافه شود. در صورتیکه از المنتور استفاده می‌کنید، کافی است از المان html code استفاده کنید و کدهای مربوط به فرم را اضافه کنید. کدهای php یا همان بک اند باید در قسمت functions.php اضافه شود. کدهای php مسئول دریافت متغیرهای ارسال شده از html فرم بوده و آن‌ها را به گوگل شیت ارسال می‌کنند.

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

    بله. برای این کار، کافی است یک فرم در وردپرس ایجاد کنید (با استفاده از html ساده) و اطلاعات آن را با استفاده از اد_اکشن های وردپرس دریافت نموده و برای گوگل شیت ارسال نمایید. در گوگل شیت نیز از فانکشن doPost استفاده نموده تا داده‌های ارسالی را توسط اپ اسکریپت دریافت کرده و ثبت نمایید.

    بله. داده‌ها به صورت real-time و پس از اجرا شدن اد_ادکشن وردپرس ارسال شده و توسط شیت پردازش و ثبت می‌شوند.

    به این نوشته امتیاز دهید
    آیا این مطلب را می پسندید؟
    برچسب ها:

    نظرات

    0 نظر در مورد ارسال کامل اطلاعات فرم های وردپرسی به گوگل شیت (بدون پلاگین)

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

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

    هیچ دیدگاهی نوشته نشده است.

    wootel chatbox