ساختن یک فرم ساده تماس با ما در وردپرس

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

ما از HTML5 و AngularJS برای این‌کار استفاده خواهیم کرد. اما AngularJS چیست؟

معرفی AngularJS

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

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

AngularJS ، چیزی فراتر از یک کتاب‌خانه، و بلکه یک چارچوب (Framework) است. این فریم‌ورک توسط یکی از کارمندان گوگل در سال 2008 استارت خورد و اکنون به یک پروژه حیاتی برای گوگل تبدیل شده است، هزاران نفر از سراسر دنیا، به خصوص شرکت گوگل، در حال کار شبانه‌روزی بر روی این فریم‌ورک هستند.

AngularJS به ما کمک می‌کند که عناصر را بهتر مرتب کنیم، آن‌ها را به هم ربط دهیم و با چند خط کد، یک اپلیکیشن مقیاس‌پذیر (Scalable) بنویسیم. AngularJS هم‌اکنون بیشتر کاربرد را در اپلیکیشن‌های عظیم و اپلیکیشن‌های هیبردی (Hybrid) موبایل دارد.

و اما آموزش…

اگر با AngularJS آشنایی ندارید، قرار نیست در این آموزش، AngularJS را آموزش دهیم، درواقع می‌خواهم کاربرد AngularJS را در یک فرم ساده نشان دهم و اگر با AngularJS آشنایی دارید، این یک تمرین و دست‌گرمی است 🙂

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

سطح آموزش: متوسط

مدت زمان موردنیاز: کمتر از 40 دقیقه

مهارت‌های لازم: وردپرس (متوسط)، PHP (متوسط)، HTML & CSS (پیشرفته) و جاوا اسکریپت (متوسط)

مرحله‌ی اول: ایجاد فایل پلاگین

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

مرحله الف: دانلود AngularJS

فایل‌های AngularJS را از سایت رسمی آن دانلود کنید یا مستقیماً از ماندگار وب دانلود کنید. دقت کنید که نسخه‌ای که ما با آن کار می‌کنیم 1.2 به بالا و 1.3 به پایین (یعنی بین 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. ثبت یک Shortcode برای نمایش صحیح فرم
3. ساخت یک API برای تبادل اطلاعات

اوکی؟ به سوی مرحله بعد

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

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

<?php
/**
* Plugin Name: My Contact
* Description: Simple contact form, powered by AngularJS
* Version: 1.0-development
* Plugin URI: http://iehsan.ir/blog/
* Author: Ehsaan
* Author URI: http://iehsan.ir/
*/

من شخصاً استفاده از Class را به چندین فانکشن با نام‌های عجیب و سخت ترجیح می‌دهم. بنابراین یک کلاس با نام My_Contact ایجاد می‌کنم.

(نماد … در کدها یعنی کدهای قبلی)

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

کلاً این توصیه را از من داشته باشید که نوشتن Class و Namespace خیلی بهتر از چندین فانکشن متعدد است.

مرحله‌ی الف: ثبت اسکریپت‌ها

متأسفانه در بسیاری پلاگین‌ها، به خصوص پلاگین‌های ایرانی، برای استفاده از فایل جاوا اسکریپت در برگه، از 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 دارد. پیش از ادامه دادن کار، برگه مستندات وردپرس درمورد این فانکشن را مطالعه کنید. ما دوفایل جاوا اسکریپت برای ثبت‌کردن داریم: 1. AngularJS و 2. فایل اپ برای کنترل

ابتدا 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 روی آن حساب می‌کند.

مرحله ب: به‌کاربردن اسکریپت‌

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

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

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

نکته: فعلاً فایلی به نام app.js نداریم، به زودی آن را می‌سازیم

 مرحله‌ی سوم: ساخت Shortcode

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

مرحله الف: ثبت Shortcode

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

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

با این کد، در هر نوشته یا برگه‌ای می‌توانید از کد [my-contact] استفاده کنید. در واقع در add_shortcode، آرگومنت اول، مربوط به نام Shortcode است که بین براکت قرار می‌گیرد و آرگومنت دوم، مربوط به فانکشنی است که قرار است Shortcode را به HTML ترجمه کند.

مرحله‌ی دوم: رندر فرم

یک فانکشن به نام render به کلاس اضافه می‌کنیم که Shortcode را به HTML ترجمه کند.

چون قرار نبود درمورد AngularJS توضیح چندانی دهم، بنابراین فکر می‌کنم نیاز به توضیح درمورد فرم نباشد.

...
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();
}
...

اما لازم است کمی درمورد ob_start توضیح دهم. ob_start یک فانکشن است برای بافرکردن خروجی، یعنی این فرم ما echo نمی‌شود، بلکه ابتدا بافر می‌شود (ob_start)، سپس محتویات آن برگردانده می‌شود (return ob_get_contents()) و سپس بافر خروجی خالی می‌شود (ob_end_flush())

بنابراین رندر فرم با موفقیت انجام می‌شود !!!

مرحله‌ی چهارم: اسکریپت 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;
} );
};
}] );
})();

حالا ما آماده‌ایم که API را بسازیم. API اطلاعات را دریافت می‌کند و آن را به ایمیل شما می‌فرستد!

مرحله پنجم: آماده‌کردن 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 است که کمترین اولویت اجرای هُک است.

مرحله آخر: به کاراندازی و استفاده!

هنوز کدهای ما چیزی کم دارد! کلاس ما اجرا نمی‌شود! برای اجراشدن کلاس، کد زیر را به آخرین خط فایل اضافه کنید.

new My_Contact();

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

تبریک! تمام شد!

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

دریافت کل افزونه