ساخت فرم تماس با ما در وردپرس

در این آموزش قصد داریم تا یک فرم ساده تماس با ما را در سیستم مدیریت محتوای وردپرس بسازیم. در این آموزش، ما از html و angularjs برای این کار استفاده می‌کنیم.

آشنایی با angularJS

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

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

آموزش ساخت فرم تماس با ما در وردپرس

در این آموزش شما با angularjs یک فرم ساده می‌سازید. روند آموزش مرحله به مرحله است و در آخر شما یک افزونه وردپرس خواهید ساخت.
پیش نیازها: وردپرس (متوسط) ، html و css (پیشرفته) ، php (متوسط) و جاوا اسکریپت (متوسط)

1. ساخت فایل افزونه

ابتدا پوشه افزونه را در /wp-content/plugins ایجاد کرده، یک پوشه به نام my-contact بسازید و در آن فایلی با نام my-contact.php بسازید.

1.1 دانلود AngularJS

فایل‌های Angularjs را از سایت آن دانلود کنید، نسخه‌ای که در این آموزش ما با آن کار می‌کنیم؛ 1.2 به بالا و 1.3 به پایین است.

سپس فایل‌های angular.min.js و angular.min.js.map را در یک فولدر جدید به اسم assets در همان پوشه افزونه بریزید.

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

این دو فایل هسته angular هستند، بقیه فایل‌ها مربوط به امکانات فرعی angular هستند.

در واقع ساختار پوشه my-contact باید چنین باشد:

.
assets/
-> angular.min.js
-> angular.min.js.map
my-contact.php

1.2 شناخت روند

روند ساخت پلاگین ما به شرح زیر است:

1. شناساندن اسکریپت‌های مورد نیاز به وردپرس و به کار بری آن در برگه موردنظر
2. ثبت یک shortcode برای نمایش صحیح فرم
3. ساخت یک API برای تبادل اطلاعات

2. آماده‌سازی پلاگین برای فرم

فایل my-contact.php را با یک ادیتور باز کنید. ابتدا نیاز است تا هدر پلاگین خود را قرار دهیم تا در لیست افزونه ها قابل مشاهده باشد.

<?php
/**
* Plugin Name: My Contact
* Description: Simple contact form, powered by AngularJS
* Version: 1.0-development
* Plugin URI: https://zarinhost.com
* Author: Ehsaan
* Author URI: https://zarinhost.com
*/

یک کلاس با نام my_contact hs[hn ایجاد کنید. (نماد … در کدها به معنای کدهای قبلی است)

...
class My_Contact {
// class codes will set here
}

نوشتن چندین class و namespace بهتر از چندین فانکشن متعدد است.

2.1 ثبت اسکریپت‌ها

متاسفانه در بسیاری از افزونه‌های ایرانی برای استفاده از فایل جاوا اسکریپت در برگه، از echo ساده استفاده می‌کنند، در حالی که از نظر xhtml و از نظر اصول برنامه نویسی غلط است.

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

...
class My_Contact {
public function __construct() {
add_action( 'wp_enqueue_scripts', array( $this, 'register_scripts' ) );
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) );
}
public function register_scripts() {
// Register Javascript scripts
}
public function enqueue() {
// Enqueue scripts on a certain page
}
}

ما دو فانکشن به تگ wp_enqueue_scripts اضافه کردیم، اولی برای ثبت اسکریپت‌ها در وردپرس و دومی برای فراخوانی آنها در برگه موردنظر.
کار را با نکمیل register_scripts ادامه می‌دهیم. وردپرس یک فانکشن به نام wp_register_script دارد. ما دو فایل جاوا اسکریپت برای ثبت کردن داریم: angularjs و فایل اپ برای کنترل، ابتدا angularjs را ثبت می‌کنیم:

...
public function register_scripts() {
wp_register_script( 'angularjs', plugins_url( 'my-contact/assets/angular.min.js' ) );
}
...

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

...
public function register_scripts() {
wp_register_script( 'angularjs', plugins_url( 'my-contact/assets/angular.min.js' ) );
wp_register_script( 'contact-app', plugins_url( 'my-contact/assets/app.js' ), array( 'angularjs' ) );
}
...

آرگومنت آخر دومین wp_register_script در واقع نلم handle اسکریپت‌هایی است که contact-app روی آن حساب می‌کنند.

2.2 به کار بردن اسکریپت

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

...
public function enqueue() {
if ( is_page( 'sample-page' ) )
wp_enqueue_script( 'contact-app' );
}

با این کار برای تغییر برگه، به سادگی slug یا نامک برگه را به جای sample-page وارد کنید و یا کلا شرط را حذف تا فرم در همه جای سایت در دسترس باشد.

3. ساخت shortcode

برای ثبت sortcode از فانکشن add_shortcode وردپرس استفاده می‌کنیم. برای این کار از این فانکشن در فانکشن construct__ کلاس که قبلا در آن هوک کردیم، استفاده می‌کنیم.

public function __construct() {
...
add_shortcode( 'my-contact', array( $this, 'render' ) );
}

با این کد، در هرنوشته هربرگه می‌توانید از شورت کد [my_contact] استفاده نمایید. در واقع add_shortcode آرگومنت اول، مربوط به نام shortcode است که بین براکت قرار می‌گیرد و آرگومنت دوم، به فانکشنی است که قرار است shortcode را به html ترجمه کند.

3.2 رندر فرم

یک فانکشن به نام render به کلاس اضافه می‌کنیم که shortcode را به html ترجمه کند:

...
public function render() {
ob_start();
?>
<form method="POST" name="contact-form" ng-app="FormApp" ng-controller="Form as form" ng-submit="form.doSubmit()">
<p class="sending-info" ng-show="form.sending == true">در حال ارسال . . .</p>
<p class="completed-info" ng-show="form.sent == true">ممنون، اطلاعات ارسال شد!</p>
<p class="error-info" ng-show="form.errored == true">شرمنده، فرم ارسال نشد، اینترنته دیگه.</p>
<p class="comment-form-author">
<label for="name">نام شما <span class="required">*</span></label>
<input id="name" ng-model="form.formData.name" name="name" size="30" aria-required="true" type="text" required>
</p>
<p class="comment-form-email">
<label for="email">ایمیل شما <span class="required">*</span></label>
<input id="email" ng-model="form.formData.email" name="email" size="30" aria-required="true" type="email" required>
</p>
<p class="comment-form-comment">
<label for="comment">چی میخواید بگید؟ <span class="required">*</span></label>
<textarea id="comment" ng-model="form.formData.comment" name="comment" cols="45" rows="8" required aria-required="true"></textarea>
</p>
<p class="form-submit">
<button type="submit" name="submit" id="submit">ارسال</button>
</p>
</form>
<?php
return ob_get_contents();
ob_end_flush();
}
...

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

4. اسکریپت app.js

در فولدر assets یک فایل به نام app.js بسازید. app.js در واقع فرم ما را کنترل می‌کند و بعد هر submit، اطلاعات را به api که در مرحله بعد می‌سازیم ارسال می‌کند و در صورت موفق بودن، پیام مناسب را که در فرم نوشتیم نمایش می‌دهد.
فایل app.js:

(function() {
var app = angular.module( 'FormApp', [] );
app.controller( 'Form', ['$http', function( $http ) {
this.formData = {};
this.sent = false;
this.sending = false;
this.errored = false;
var ctrl = this;
this.doSubmit = function() {
this.sending = true;
$http({
url: '?sent=ok',
method: 'POST',
data: this.formData
}).success( function( data ) {
ctrl.sending = false;
if ( data.status == 200 ) {
ctrl.sent = true;
ctrl.formData = {};
} else {
ctrl.errored = true;
}
}).error( function( data ) {
ctrl.sending = false;
ctrl.errored = true;
} );
};
}] );
})();

5. آماده‌سازی api

ما اطلاعات را به صورت post به صفحه کنونی که پارامتر sent=ok دارد، ارسال می‌کنیم.

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

angularjs به دلیل انتقال داده خاصی که دارد؛ استفاده از گلوبال post_$ را برای ما غیرممکن می‌کند.

پیشنهاد می‌کنیم از هاست وردپرس استفاده کنید تا از سرعت بهتری برخوردار شوید.

بنابراین برای به دست آوردن اطلاعات ارسال شده باید از جریان داده php://input استفاده و سپس اطلاعات را کدگذاری json خارج کرد.

در مرحله آخر اینکه اطلاعات را به ایمیل مدیر ارسال و پاسخ را به صورت json ارسال کنیم.
برای ساخت api یک فانکشن دیگر با نام process به کلاس اضافه می‌کنیم:

...
public function process() {
if ( @ $_GET['sent'] == 'ok' ) {
header( 'Content-Type: application/json;charset=utf-8' );
$content = file_get_contents( 'php://input' );
$data = json_decode( $content, true );
if ( isset( $data['name'] ) && isset( $data['email'] ) && isset( $data['comment'] ) ) {
$content = '
Mr./Mrs. ' . $data['name'] . ' (' . $data['email'] . ') wrote for you:<br>' . $data['comment'] . '<br><hr>End!
';
$headers = "Content-Type: text/html;charset=utf-8\nReply-To: " . $data['email'];
if ( mail( get_bloginfo( 'admin_email' ), 'Contact!', $content, $headers ) ) {
echo json_encode( array( 'status' => 200 ) );
} else {
echo json_encode( array( 'status' => 500 ) );
}
exit;
}
}
}
...

اما api هنوز کار نمی‌کند چون هنوز به وردپرس هوک نشده است، برای پردازش اطلاعات این چنینی از تگ init استفاده می‌کنیم. کد زیر را به فانکشن construct__ اضافه کنید:

add_action( 'init', array( $this, 'process' ), 100 );

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

عدد 100 اولویت اجرای api است که کمترین اولویت اجرای هوک است.

5. به کار اندازی و استفاده

برای اجرا شدن کلاس کد زیر را به آخرین خط فایل اضافه کنید.

new My_Contact();

حالا افزونه ما آماده شده و کافیست به بخش افزونه‌ها رفته و افزونه را فعال کنید. حالا می‌توانید در هربرگه‌ای با استفاده از شورت کد [my-contact] برای نمایش فرم استفاده کنید.

با تشکر از این که تا پایان آموزش “ساخت فرم تماس با ما در وردپرس” همراه ما بودید.