مقدمه

یکی از نقاط قدرت وردپرس افزونه‌های آن است که قابلیت‌ها و توانایی‌های آن را افزایش میدهد. وردپرس این امکان را به هر کاربری با کمی معلومات میدهد تا افزونه خود را بنویسد و بصورت شخصی استفاده کند یا با دیگران به اشتراک بگذارد.
برای نوشتن یک افزونه وردپرس کافیست اطلاعاتی مقدماتی در PHP, JavaScript و CSS داشته باشید.

چرا باید یک افزونه وردپرس بنویسیم؟

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

شروع

هر افزونه وردپرس باید حداقل دارای یک فایل PHP باشد، همچنین میتواند دارای فایل‌های دیگر شامل فایل‌های جاوا اسکریپت، فایل‌های استایل، عکس و… باشد، به همین دلیل بهتر است برای افزونه خود یک پوشه ایجاد کنیم.
برای شروع در مسیر wp-content/plugins یک پوشه همنام با افزونه خود ایجاد میکنیم، نام این پوشه نباید شامل فاصله (space) باشد، برای این آموزش من پوشه‌ی myPlugin را ایجاد میکنم.
درون این پوشه یک فایل PHP ایجاد میکنیم همنام با نامِ پوشه، اگر با درست کردن قالب‌های وردپرس آشنا باشید میدانید که برای اینکه وردپرس قالب شما را بشناسد باید در چند خط اول فایل style.css مشخصات قالب را وارد کنیم، در نوشتن افزونه نیز باید همین کار را انجام دهیم، بنابراین چند خط اول این فایل به مشخصات افزونه اختصاص دارد.

<?php
/*
Plugin Name: Name Of The Plugin
Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
Description: A brief description of the Plugin.
Version: The Plugin's Version Number, e.g.: 1.0
Author: Name Of The Plugin Author
Author URI: http://URI_Of_The_Plugin_Author
*/
?>

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

نکته بسیار مهمی که باید به آن توجه داشته باشید این است که Encoding این فایل باید ANSI باشد، اگر این فایل را بصورت UTF-8 یا فرمت‌های دیگر ذخیره کنید هنگام راه‌اندازی یا استفاده از افزونه با خطای :

Warning: Cannot modify header information

مواجه خواهید شد. برای تغییر Encoding فایل میتوانید در برنامه Notepad++ از منوی Format گزینه Encoding in ANSI را انتخاب کنید مانند تصویر زیر:

یا از UTF-8 without BOM استفاده کنید.
حال که فایل که خود آماده و ذخیره کردیم میتوانید وارد صفحه مدیریت افزونه‌های وردپرس شویم، اگر تمام کارها را درست انجام داده باشیم افزونه‌ای که درست کردیم را در لیست افزونه خواهیم دید.

استفاده از توابع Hook

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

یکی از این توابع تابع register_activation_hook میباشد، این تابع دو ورودی دریافت میکند، ورودی اول مسیری است که فایل PHP اصلی افزونه در آن قرار دارد، و ورودی دوم تابعی است که باید اجرا کند.
کار این تابع این است که تابعی که به عنوان ورودی دریافت میکند را هنگامی که افزونه فعال میشود اجرا کند، برای مثال به کد زیر توجه کنید:

register_activation_hook(__FILE__, 'myPlugin_activate');

function myPlugin_activate() {
 // do something...
}

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

تابع دیگر register_deactivation_hook میباشد که مانند تابع قبل دو ورودی میگیرد و تابع‌ای که به آن معرفی میشود را هنگام غیرفعال کردن افزونه اجرا میکند.

به جز تو تابع بالا توابع hook به دو دسته تقسیم میشوند:
Actions : وقتی یک رویداد خاص اتفاق میفتد یا در زمان خاصی اجرا میشوند.
Filters : برای انجام تغییراتی روی اطلاعات قبل ارسال به پایگاه داده یا نمایش استفاده میشوند.

گاهی میتواند یک کار را هم با استفاده از Actionها انجام داد هم Filterها.

Actions

برای استفاده از actionها کافیست یک تابع PHP که میخواهید اجرا شود بنویسید، سپس آن را در زمانی که میخواهید توسط تابع add_action اجرا کنید.

add_action ('plugins_loaded', 'plugin_start');

function plugin_start() {
 if ( is_admin() ) { } else {
 wp_enqueue_script ("jquery");
 require_once (dirname (__FILE__) . "/functions.php");
 }
}

برای مثال در تکه کد بالا مشاهده میکنید که یک تابع با نام plugin_start نوشته شده است، سپس توسط تابع add_action در زمان plugins_loaded فراخوانی شده است، در این صورت تابع plugin_start در زمانی که افزونه‌ها بطور کامل بارگذاری شده‌اند اجرا میشود و کتابخانه جاوا اسکریپت jQuery موجود در هسته وردپرس و فایل functions.php موجود در پوشه افزونه را فراخوانی میکند.

یا برای مثال میتوانید تابعی به اسم email_friends بنویسید و آن را در زمان publish_post فراخوانی کنید، در این صورت زمانی که پست شما منتشر میشود تابع email_friends اجرا میشود و آن را برای تمام دوستان شما ارسال میکند.

میتوانید لیستی از hookهایی که میتوانید در آنها از تابع add_action استفاده کنید را در این صفحه ببینید.

Filters

فیلترها نیز مانند actionها کار میکنند، فقط باید یک تابع بنویسید و آن را به زمانی که میخواهید اجرا شود به وسیله تابع add_filter اختصاص دهید.

add_filter('comment_text','filter_profanity');

function filter_profanity($content) {
 global $profanities;
 $content=str_ireplace($profanities,'{censored}',$content);
 return $content;
}

برای مثال در کد بالا تابع filter_profanity نوشته شده و یک ورودی content میگیرد و با متغییر profanities از قبل تعریف شده مقایسه میکند و اگر کلمه‌ای متشابه داشته باشد آن را با {censored} جایگزین میکند، این تابع به comment_text اختصاص داده شده و به این ترتیب متن دیدگاه‌هارا بررسی میکند اگر در آن ناسزا بکار برده شده باشد آن را سانسور میکند.

میتوانید لیستی از hookهایی که میتوانید در آنها از تابع add_filter استفاده کنید را در این صفحه ببینید.

نمونه

در آخر افزونه myPlugin را این صورت کامل میکنیم:

<?php
/*
Plugin Name: myPlugin
Plugin URI: http://www.radikal2.com/
Description: it is my first wordpress plugin
Version: 1.0
Author: Radikal2
Author URI: http://www.radikal2.com
*/

add_action ('publish_post', 'myPlugin_email');
add_filter ('the_title', 'myPlugin_title');

function myPlugin_email($post_ID) {
 $mails = 'you-name@your-domain.com,you-name@your-domain.com,you-name@your-domain.com,';
 mail($mails, "My Blog Updated!",
 'I just put something on my blog: http://blog.example.com');
 return $post_ID;
}

function myPlugin_title($t) {
 $x = '<span style="text-shadow: 0px 0px 16px blue;">' .$t. '</span>';
 return $x;
}

?>

مشاهده میکنیم که در این کد از دو تابع add_action برای فراخوانی تابع myPlugin_email برای ارسال یک ایمیل برای تعدادی از دوستان بعد از انتشار پست و add_filter برای اضافه کردن افکت سایه به کمک یک کد CSS به تیتر مطالب استفاده شده است.

+ Writing a Plugin / Plugin API

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

برای این کار ابتدا سه المنت بشکل زیر در صفحه خود ایجاد میکنیم:

<div id="container">
<div class="percent"></div>
<div class="bar"></div>
</div>

المنت div کلی با آی‌دی container بدنه اصلی نوار را ایجاد میکند، المنت با کلاس percent درصد نوار را نمایش میدهد که میتوانید به دلخواه آن را حذف کنید و المنت بعدی با کلاس bar قسمت رنگی نوار را تشکیل میدهد که مقدار پر شده‌ی نوار را مشخص میکند.

بعد از این نوبت به نوشتن کد CSS میرسد:

#container {
background: #F0F0F0;
width: 200px;
height: 20px;
position: relative;
}
#container .percent {
text-align: center;
position: absolute;
width: 200px;
height: 20px;
top: 12%;
font: 12px Tahoma, Geneva, sans-serif;
}
#container .bar {
background: #3C0;
height: 20px;
}

مشخصه width دو المنت اول باید یکی باشد و مشخصه height هرسه المنت باید یکی باشد.

حالا کد اول را بصورت زیر تغییر میدهیم :

<div id="container">
<div class="percent">65%</div>
<div class="bar" style="width: 65%;"></div>
</div>

با تغییر دادن درصد مشخصه width میزان پر شدن نوار را مشخص میکنیم، حالا میتوانیم این درصد را به کمک یه زبان مانند php یا javascript تعیین کنیم و یا این کار را دستی انجام دهیم.

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

کد زیر را در قالب خود قرار دهید

<?php
$numposts = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = 'post'");
if (0 < $numposts) $numposts = number_format($numposts);

$numcomms = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_approved = '1'");
if (0 < $numcomms) $numcomms = number_format($numcomms);

$numcats = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->term_taxonomy WHERE taxonomy = 'category'");
if (0 < $numcats) $numcats = number_format($numcats);

$numtags = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->term_taxonomy WHERE taxonomy = 'post_tag'");
if (0 < $numtags) $numtags = number_format($numtags);
?>

حالا متغییر numposts$ تعداد پست‌ها، متغییر numcomms$ تعداد نظرها، متغییر numcats$ تعداد دسته‌بندی‌ها و متغییر numtags$ تعداد برچسب‌ها را در خود نگهداری میکنند و میتوانید به راحتی از آنها در قالب خود استفاده کنید.

Total posts: <?php echo $numposts; ?>
Total comments: <?php echo $numcomms; ?>
Total Categories: <?php echo $numcats; ?>
Total Tags: <?php echo $numtags; ?>

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

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

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

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

سپس فایل fetch.php را با یک ویرایشگر متن باز کرده و در مقابل id$ بجای YOUR_FEED_ID  آی دی فید مورد نظر خود را قرار دهید.
برای بدست آوردن آی دی فید میتوانید مثل قبل به داشبورد فیدبرنر در آدرس جدیدش بروید روی فید مورد نظر کلیک کنید و عبارت روبروی id در نوار آدرس مرورگر را کپی کنید.

بعد از این فقط کافیست مانند قبل بکمک تگ Script فایل js.php را در صفحه جایی که دوست دارید قرار دهید.

توجه داشته باشید که حتما Awareness API را که در مرحله اول نوشته قبلی توضیح داده شده بود فعال کنید، اگر هنگام فعال کردن این خاصیت با خطایی مواجه شدید که میگوید شناسه Delicious شما غلط است مجبورید دلیشز را غیر فعال کنید.

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

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

اما در این مطلب قصد دارم تا امکان توضیحات شرطی (Conditional Comments) را که از نسخه اینترنت اکسپلورر ۵ به وسیله مایکروسافت در این مرورگر جای داده شده را توضیح دهم.

ابتدا باید انواع توضیحات شرطی را شرح دهیم :
توضیحات استاندارد در زبان HTML - این توضیحات که بطور استاندارد در زبان HTML وجود دارند و توسط تمام مرورگر‌ها شناخته میشوند، این توضیحات کار خاصی انجام نمیدهند و فقط برای نوشتن توضیحات در قسمتی از کد استفاده میشوند و هنگام تجزیه کد توسط مرورگر نادیده گرفته میشوند.
شیوه نگارش این نوع توضیحات به این صورت میباشد :

<!-- Comment Content -->

توضیحات شرطی از نوع downlevel-hidden – این نوع توضیحات در مرورگر‌هایی که توضیحات شرطی را نمیشناسند نادیده گرفته میشنود و محتوای آنها نمایش داده نمیشوند، شیوه نگارش آنها بصورت زیر است :

<!-- [if expression]>
HTML
<![endif]-->

توضیحات شرطی از نوع downlevel-revealed – این نوع توضیحات در مرورگر‌هایی که توضیحات شرطی را نمیشناسند بدون در نظر گرفتن نتیجه شرط اجرا میشوند ولی در مرورگر‌هایی که توضیحات شرطی را میشناسند فقط در صورتی که نتیجه شرط درست باشد اجرا میشوند، شیوه نگارش آنها بصورت زیر میباشد:

<![if expression]>
HTML
<![endif]>

خصوصیات توضیحات شرطی :

نحوه استفاده :
نحوه استفاده از این دستورات در زیر بصورت کلی نمایش داده شده است.

<!--[if IE]> <p>You are using Internet Explorer.</p> <![endif]-->
<!--[if !IE]> <p>You are not using Internet Explorer.</p> <![endif]-->

<!--[if IE 7]> <p>Welcome to Internet Explorer 7!</p> <![endif]-->
<!--[if !(IE 7)]> <p>You are not using version 7.</p> <![endif]-->

<!--[if gte IE 7]> <p>You are using IE 7 or greater.</p> <![endif]-->
<!--[if (IE 5)]> <p>You are using IE 5 (any version).</p> <![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]> <p>You are using IE 5.5 or IE 6.</p> <![endif]-->
<!--[if lt IE 5.5]> <p>Please upgrade your version of Internet Explorer.</p> <![endif]-->

<!--[if true]> You are using an <em>uplevel</em> browser. <![endif]-->
<!--[if false]> You are using a <em>downlevel</em> browser. <![endif]-->

<!--[if true]><![if IE 7]> <p>This nested comment is displayed in IE 7.</p> <![endif]><![endif]-->

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

<!--[if IE 6]>
<link rel="stylesheet" href="IE6-style.css" type="text/css" media="screen" />
<![endif]-->

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

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

توجه! این یک اسکریپت نوشته شده به زبان PHP میباشد بنابراین اگر از سرویس‌های وبلاگ رایگان مثل بلاگر، وردپرس، بلاگفا یا دیگر سرویس‌ها استفاده میکنید باید ابتدا یک فضا برای ذخیره فایل‌های این اسکریپت که از زبان PHP پشتیبانی کند و اجازه دسترسی به این فایل‌ها را بدهد پیدا کنید.
برای این کار میتوانید از امکانات رایگان سایت AtHost استفاده کنید

حالا برای اجرای این اسکریپت باید مراحل زیر را طی کنید
۱- فعال‌سازی Awareness API : برای اینکه این اسکریپت بتواند به اطلاعات فید شما دسترسی داشته باشد باید این قابلیت را در فیدبرنر فعال کنید، برای این کار وارد اکانت فیدبرنر خود شده و روی اسم فید مورد نظر کلیک کنید، سپس روی گزینه Publicize کلیک کنید و در منوی سمت چپ صفحه روی گزینه Awareness API کلیک کنید.
در این قسمت روی Activate کلیک کنید تا این سرویس فعال شود.

۲- دانلود فایل‌های مورد نیاز : حالا باید فایل‌های مورد نیاز را دانلود کنید.

دانلود feed-count-display

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

۳- ویرایش فایل Config.php : حالا باید این فایل را ویرایش کنید و ID فید خود را در آن قرار دهید.
برای پیدا کردن آی‌دی فید خود وارد اکانت فیدبرنر شوید و روی اسم فید مورد نظر کلیک کنید، شماره روبروی ID در نوار آدرس آی‌دی فید شما میباشد.

فایل Config.php را در یک ویرایشگر متن مثل notepad باز کنید و شماره ID خود را جایگزین شماره موجود در خط ۱۵ام مقابل FeedID1 کنید و فایل را دخیره کنید.

۴- آپلود فایل‌ها : حالا باید فایل‌ها رو روی هاست خود آپلود کنید.
در این قسمت باید توجه کنید که سطح دسترسی (permissions) پوشه‌ی Data باید برابر ۷۵۵ باشد یعنی توسط سرور قابل نوشتن باشد.

بعد از انجام مراحل بالا میتوانید نتیجه کار را مشاهده کنید، کافیست آدرس فایل js.php را در نوار آدرس خود وارد کنید، برای مثال :

http://www.yoursite.com/yourfiles/feed-count-display/js.php

نتیجه کار باید چیزی شبیه این باشد :

document.write("354");

برای نمایش تعداد خوانندگان فید وبلاگتان در هر صفحه‌ای کافیست از یک کد ساده‌ استفاده کنید :

<script src="http://www.yoursite.com/yourfiles/feed-count-display/js.php" type="text/javascript"></script>

حالا میتوانید به کمک CSS به این کد شکل و ظاهری زیباتر بدهید.

اما ما میتوانیم فایل‌های استایل را برای قسمت‌های مختلف تفکیک کنیم، برای مثال فایل استایل قسمت صفحات را جدا، استایل صفحه اصلی را جدا و استایل قسمت نظرات را جدا بنویسیم.

برا این کار ابتدا یک پوشه با اسم stylesheets در پوشه‌ پوسته مورد نظر ایجاد میکنیم، فایل style.css را نیز ایجاد میکنیم و توضیخات مربوط به پوسته را درون آن مینویسیم.

سپس فایل‌های استایل مورد نظر را در پوشه stylesheets ایجاد میکنیم.
حالا برای وارد کردن این استایل‌ها به فایل استایل اصلی یعنی style.css کافیست فایل style.css را به شکل زیر ویراش کنیم.

برای مثال اگر سه استایل با اسم‌های index.css , pages.css , comment.css درست کرده‌ایم میتوانیم آنها را به شکل زیر وارد فایل style.css بکنیم.

@import url("stylesheets/index.css");
@import url("stylesheets/pages.css");
@import url("stylesheets/comment.css");