تعلم برمجة إضافات وردبريس [الجزء الثاني]
بعدما تعلمنا في الجزء الأول كيفية صناعة إضافة بسيطة للوردبريس، سنتعلم اليوم صناعة إضافة أكثر إحترافية، حيث سنتعامل في هذا الدرس مع قواعد البيانات ونستخدم بعض الدوال الجاهزة من وردبريس وكذلك صناعة مُربع جانبي Widget للإضافة، وأيضاً جعلها مُتعددة اللغات.
وظيفة الإضافة
سنتعلم في هذا الدرس صنع إضافة تقوم بعرض مدونات صديقة بشكل عشوائي، أي نقوم نحن من خلال لوحة التحكم من إضافة مدونات صديقة و من ثم يتم عرض واحدة بشكل عشوائي في المدونة .
البداية
سنُطلق على هذه الإضافة اسم randfriendb و هي اختصار Random Friend’s Blogs أي المدونات الصديقة العشوائية. نذهب إلى مُجلد الإضافات wp-content/plugins ونقوم بإنشاء مُجلد باسم randfriendb، ندخل الآن إلى داخل المُجلد ونُنشأ ملف php بنفس اسم المُجلد randfriendb.php، نفتح الملف الآن -كما اتفقنا في الدرس السابق يجب علينا أن نضع الشيفرة التي نُعرّف فيها الإضافة من حيث اسمها و رقم الإصدار والمبرمج و موقع الإضافة … إلخ- و ستكون شيفرتنا اليوم على الشكل التالي:
/*
Plugin Name: RandFriendB
Description: إضافة لعرض مدونة عشوائية من المدونات الصديقة في المدونة
Version: 1.0
Author: المشروع
*/
الآن وكما تعلمون أن إضافات وردبريس هي عبارة عن دوال تحتوي بداخلها المهام الذي ستقوم بها الإضافة. في إضافتنا اليوم سنقوم بكتابة دالتين: الأولى للوحة التحكم، والثانية هي التي ستعرض المدونة الصديقة في الصفحة الرئيسية. إضافة إلى ذلك نحتاج إلى جدول في قاعدة البيانات من أجل وضع المعلومات فيه. نبدأ الآن مع الدالة الخاصة بلوحة التحكم ولكن قبل البدء ببرمجتها دعوني أتفق معكم على وضع أي نص نُريد طباعته ضمن إحدى الدالتين التاليتين:
الفرق بين الدالتين كما يلي: الأولى تحتفظ بالنص في داخلها وتحتاج لأمر echo أو print لكي تقوم بطباعته، أما الثانية فتقوم بالطباعة فوراً. وقُمت بإستخدامهم من أجل موضوع تعدد اللغات، وسأعود لشرحهم بشكل مُفصّل عندما ننتهي من البرمجة.
دالة لوحة التحكم
دعونا نُناقش ما الذي يجب أن نكتبه ضمن دالة لوحة التحكم، في البداية يجب أن يكون هُناك قسم من أجل إضافة مدونة جديدة، وقسم آخر من أجل إستعراض المدونات الموجودة -لا ضرورة لأكثر من ذلك- الآن نأتي لتحليل القسم الأول: القسم الأول عبارة عن نموذج (فورم) يحتوي على حقل لإدخال عنوان المدونة، وحقل ثاني لإدخال عنوان المدونة وحقل لكتابة وصف مُختصر عن المدونة. القسم الثاني: يقوم بعرض المدونات الموجودة مع وجود خيار حذف واحدة منهم، الآن نبدأ بالبرمجة:
سأطلق على دالة لوحة التحكم اسم randfriendb_admin وستحتوي في بدايتها على شرط للتأكد من وجود الجدول الخاص بالإضافة في قاعدة البيانات، فإذا لم يكن موجوداً فسيقوم بإنشاء جدول، أما إذا كان موجوداً سينتقل ليرى ماهو العمل الذي نُريد أن نقوم به، سنحتاج لدالة لكي نتأكد من وجود الجدول قُمت بكتابة واحدة:
function table_exists ($table, $db) {
$tables = mysql_list_tables ($db);
while (list ($temp) = mysql_fetch_array ($tables)) {
if ($temp == $table) {
return TRUE;
}
}
return FALSE;
}
الآن نبدأ بتعريف دالة لوحة التحكم وبداخلها دالة التأكد من وجود الجدول وبعدها الشرط الذي تحدثنا عنه :
view sourceprint?01.function randfriendb_admin()
{
// دالة للتأكد من وجود جدول مُحدد في قاعدة البيانات
function table_exists ($table, $db=DB_NAME) {
$tables = mysql_list_tables ($db);
while (list ($temp) = mysql_fetch_array ($tables)) {
if ($temp == $table) {
return TRUE;
}
}
return FALSE;
}
if (!table_exists(“wp_randfb”))
{
$create = mysql_query(”
CREATE TABLE `wp_randfb` (
`id` INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
`blog_title` VARCHAR(200) NOT NULL,
`blog_url` VARCHAR(200) NOT NULL,
`blog_desc` VARCHAR(200) NOT NULL
)
“);
if ($create)
{
echo ‘<div><h2>’.__(“تم إنشاء الجدول بنجاح”,”randfriendb”).'</h2></div><br />’.__(“يُرجى الإنتظار …”,”randfriendb”);
echo ‘<META HTTP-EQUIV=”refresh” CONTENT=”1; URL=admin.php?page=randfriendb/randfriendb.php&action=add”>’;
}else{
echo ‘<div><h2>’.__(“خطأ”,”randfriendb”).'</h2></div>’;
echo mysql_error();
}
}else{
// لاتفعل شيء !! 😀
}
}// نهاية دالة لوحة التحكم
سأقوم بشرح سريع للشيفرة الموجودة في الأعلى، لاحظوا بعدما قُمنا بتعريف الدالة وضعنا بعدها مُباشرة دالة للتأكد من وجود الجدول -يُمكنكم وضع هذه الدالة قبل تعريف دالة لوحة التحكم لا مُشكلة في ذلك- ومن ثم تأكدنا من وجود الجدول على إفتراض اسميناه wp_randfb، فإذا لم يكن موجوداً قُمنا بإنشاءه، وبعدها تأكدنا من نجاح عملية الإنشاء من عدمها. أما إذا كان موجوداً فقُلت له لاتفعل شي بشكل مؤقت حتى نُتابع شرحنا.
الآن نأتي للعمل الجدّي، سنحذف عبارة لاتفعل شيء و نأتي لتحليل ما الذي يحب كتابته. الآن نحن اتفقنا أن هناك بالقسم الثاني قسم لإضافة مدونة جديدة و قسم لعرض المدونات الموجودة، إذاً سنستخدم مصفوفة GET لنأخذ الفعل الذي سنقوم به، و سنأخذ المؤشر action ضمن مصفوفة GET لنحدد وجهتنا أي:
view sourceprint?
$_GET[‘action’];
سنكتب في برنامجنا سطور تُعبّر عن مايلي: إذا كانت قيمة المصفوفة عند المؤشر action فارغة فسنعتبر أن الفعل هو إضافة مدونة جديدة، وغير ذلك يذهب البرنامج إلى حسب تعليماته:
if (!isset($_GET[‘action’]) || $_GET[‘action’] == “add”){
//الحالة الأولى
}elseif($_GET[‘action’] == “edit”){
// الحالة الثانية
}elseif($_GET[‘action’] == “del”){
// الحالة الثالثة
}elseif($_GET[‘action’] == “insert”){
// الحالة الرابعة
}// نهاية مُعالجة الحالات
بعد استبدال كلمة لاتفعل شيء بالشيفرة الموجودة في الأعلى، نجد أن هُناك حالات، الحالة الأولى والثانية … إلخ، الآن نبدأ بكتابة الحالات، لنبدأ بالحالة الأولى وهي حالة الإضافة، ما الذي يجب علينا كتباته في هذه الحالة؟ شيفرة HTML تعرض لنا نموذج فيه حقول اتفقنا عليه مُسبقاً استبدل كلمة الحالة الأولى بالشيفرة التالية :
echo ‘
<form method=”POST” action=”admin.php?page=randfriendb/randfriendb.php&action=insert”>
<div><h2>’.__(“إضافة مدونة جديدة”,”randfriendb”).'</h2></div><br />
<table>
<tr>
<th>’.__(“عنوان المدونة”,”randfriendb”). ‘<span></span></th>
<td><input type=”text” name=”blog_title” /></td>
</tr>
<tr>
<th>’.__(“رابط المدونة”,”randfriendb”).'<span></span></th>
<td><input type=”text” name=”blog_url” /></td>
</tr>
<tr>
<th>’.__(“كلمات عن المدونة”,”randfriendb”).’ <span></span></th>
<td><textarea name=”blog_desc” rows=”5″ cols=”30″></textarea></td>
</tr>
</table>
<p>
<input type=”submit” value=”‘.__(“إضافة”,”randfriendb”).'” name=”submit” />
</p>
</div>
</form>
‘;
كما تُلاحظون النموذج يأخذكم إلى الفعل insert وهي الحالة الرابعة ضمن الحالات التي نُعالجها، إذاً انتيهنا من الحالة الأولى وسنذهب مُباشرةً للرابعة من أجل كتابة شيفرة الإضافة. في البداية نتحقق من أن جميع القيم مُعبئة، ومن ثم تقوم بعملية الإضافة و ستكون الشيفرة على الشكل التالي:
if(empty($_POST[‘blog_title’]) || empty($_POST[‘blog_url’]) || empty($_POST[‘blog_desc’]))
{
echo ‘<h2>’.__(“يُرجى تعبئة كافة المعلومات”,”randfriendb”).'</h2>’;
}else{
global $wpdb;
$insert = $wpdb->query(“INSERT INTO `wp_randfb` VALUES(NULL,'” . $_POST[‘blog_title’] . “‘,'” . $_POST[‘blog_url’] . “‘,'” . $_POST[‘blog_desc’] . “‘)”);
if ($insert)
{
echo ‘<div><h2>’.__(“تمت إضافة المدونة بنجاح”,”randfriendb”).'</h2></div><br />’.__(“يُرجى الإنتظار …”,”randfriendb”);
echo ‘<META HTTP-EQUIV=”refresh” CONTENT=”1; URL=admin.php?page=randfriendb/randfriendb.php&action=edit”>’;
}else{
echo ‘<div><h2>’.__(“حدث خطأ”,”randfriendb”).'</h2></div><br />’;
}
}
لاحظوا أننا استخدمنا الكائن wpdb وهو كائن جاهز يحتوي على دوال في داخله حيث يُفضّل استخدامه من أجل تجنب الثغرات. الآن وبعد أن انتهينا من الحالة الرابعة نأتي للحالة الثانية وهي عرض المدونات الموجودة ضمن قاعدة البيانات، نستبدل كلمة الحالة الثانية بالشيفرة التالية :
global $wpdb;
$blogs = $wpdb->get_results(“SELECT * FROM `wp_randfb`”,ARRAY_A);
if ($blogs)
{
echo ‘
<table cellspacing=”0″>
<thead>
<tr>
<th scope=”col” style=””>’.__(“عنوان المدونة”,”randfriendb”).'</th>
<th scope=”col” style=””>’.__(“رابط المدونة”,”randfriendb”).'</th>
<th scope=”col” style=””>’.__(“كلمات عن المدونة”,”randfriendb”).'</th>
<th scope=”col” style=””>’.__(“حذف”,”randfriendb”).'</th>
</tr>
</thead>
<tbody>
‘;
foreach($blogs as $blog){
echo ‘<tr id=”post-1″ valign=”top”><td>’.$blog[‘blog_title’].'</td>’;
echo ‘<td>’.$blog[‘blog_url’].'</td>’;
echo ‘<td>’.$blog[‘blog_desc’].'</td>’;
echo ‘<td><a href=”admin.php?page=randfriendb/randfriendb.php&action=del&id=’.$blog[id].'”>’.__(“حذف”,”randfriendb”).'</a></td></tr>’;
}
echo ‘
<tfoot>
<tr >
<th colspan=”4″></th>
</tr>
</tfoot>
</table>
‘;
}else{
echo ‘<h3>’.__(“لا يوجد مدونات”,”randfriendb”).'</h3>’;
}
كما تُلاحظون استخدمنا الدالة get_results من أجل استخراج البيانات المُخزنة ضمن قاعدة البيانات وهذه الدالة تأخذ مسقطين، الأول هو الاستعلام، والثاني هو نوع البيانات المُخرجة. ونحن اخترناها أن تكون على شكل مصفوفة. الآن نُعالج الحالة الأخيرة وهي حذف مدونة من قاعدة البيانات أي الحالة الثالثة، والشيفرة هي على الشكل التالي:
global $wpdb;
$id = intval($_GET[‘id’]);
$del = $wpdb->query(“DELETE FROM `wp_randfb` WHERE id='” . $id . “‘”);
if ($del)
{
echo ‘<div><h2>’.__(“تم حذف المدونة بنجاح”,”randfriendb”).'</h2></div><br />’.__(“يُرجى الإنتظار …”,”randfriendb”);
echo ‘<META HTTP-EQUIV=”refresh” CONTENT=”1; URL=admin.php?page=randfriendb/randfriendb.php&action=edit”>’;
}else{
echo ‘<div><h2>’.__(“حدث خطأ”,”randfriendb”).'</h2></div><br />’;
}
الآن وبعد أن إنتهينا من برمجة كل شيء يتعلق بلوحة التحكم، سنُضيف إلى قائمة لوحة التحكم خيارات لكي نتحكم بهذه الإضافة، يُقدم لنا برنامج وردبريس دوال جاهزة لإضافة أزرار إلى قائمة لوحة التحكم والدالة هي :
add_menu_page()
و يلحق بهذه الدالة دوال أُخرى لكي نُنشىء قائمة فرعية من القائمة الرئيسية:
add_submenu_page
إذاً الآن نقوم بكتابة دالة تحتوي على هذه الدوال التي تُنشىء قائمة خاصة بإضافتنا و لكن قبل ذلك دعوني أشرح لكم الدالة كيف تعمل:
add_menu_page(“الأيقونة”,”الدالة”, “الملف”, “المقدرة”,”اسم الصفحة في القائمة”,”عنوان الصفحة”);
add_submenu_page(“الدالة”, “الملف”, “المقدرة”, “اسم الصفحة في القائمة”,”عنوان الصفحة”,”الصفحة الرئيسية”);
add_action(‘admin_menu’,’randfriendb_add_admin’);
طبعاً الآن لم يفهم أي أحد منكم ما الذي حدث صحيح؟ سأشرح لكم، والعملية بسيطة جداً، كما قُلت لكم في الدرس السابق، كل شيء في الوردبريس يتم ضمن دوال، والبرنامج يوفر لك دوال جاهزة لكي تقوم بوظائف مُعينة. نحن قُمنا باستخدام الدالة التي تُنشىئ لنا قائمة خاصة بإضافتنا، لماذا؟ لأنه كيف سنتحكم في الإضافة إذا لم يكن هناك قائمة نتحكم منها؟
الآن تُشاهدون القيم التي قُمت بتمريرها للدالتين،دعوني أشرحها لكم:
المسقط الأول: عنوان الصفحة، وظيفته أخذ هذه القيمة وعرضها في شريط العنوان للمُتصفح عندما تفتح الإضافة.
المسقط الثاني: اسم الصفحة في القائمة، وظيفته أخذ القيمة وعرضها ضمن القائمة.
المسقط الثالث: المقدرة، ويُقصد بها هُنا ماهي الصلاحيات التي يجب أن يتمتع بها من يضغط على هذه القائمة، يُمكنكم مُراجعتها من هُنا.
المسقط الرابع: الملف، ويُقصد به الملف الذي سيدخل إليه عند الضغط.
المسقط الخامس: الدالة، وهُنا الدالة التي سيستدعيها من الملف الذي دخلنا إليه.
المسقط الأخير: الأيقونة، وهُنا يُمكنك تحديد أيقونة للقائمة.
دعونا نُضيف هذه الشيفرة إلى ملف الإضافة.
function randfriendb_add_admin() {
add_menu_page(__(“مدونات صديقة”,”randfriendb”),__(“مدونات صديقة”,”randfriendb”), 8, __FILE__, “randfriendb_admin”);
add_submenu_page(__FILE__, __(“إضافة مدونة جديدة”,”randfriendb”), __(“إضافة مدونة جديدة”,”randfriendb”), 8,__FILE__ , “randfriendb_admin”);
add_submenu_page(__FILE__, __(“التحكم بالمدونات”,”randfriendb”), __(“التحكم بالمدونات”,”randfriendb”), 8, __FILE__ .”&action=edit”, “randfriendb_admin”);
}
add_action(‘admin_menu’, ‘randfriendb_add_admin’);
لاحظوا وجود دالة جديدة في نهاية الشيفرة وهي الدالة المسؤولة عن تنفيذ الدالة التي تُضيف لنا القائمة، و النتيجة الأخيرة سوف تكون كما هو موضّح في الصورة التالية :
صناعة مربع جانبي للقائمة Widget
الآن وكما نُلاحظ في الدوال التي استخدمناها من أجل إنشاء القائمة، في المسقط الأخير هُناك هذه الجملة randfriendb_admin، وهي عبارة عن دالة لوحة التحكم التي قُمتا ببرمجتها. الآن كل شيء تمام، مارأيكم أن نبدأ بكتابة الدالة التي تعرض لنا المدونات الصديقة في الموقع؟ الدالة بسيطة جداً وهي كالتالي:
// دالة عرض المدونات الصديقة
function randfriendb_main($args)
{
extract($args);
global $wpdb;
$get_blogs = $wpdb->get_results(“SELECT * FROM `wp_randfb` order by rand() limit 0,1”,ARRAY_A);
foreach($get_blogs as $get_blog){
echo $before_widget;
echo $before_title;
_e(“مدونات صديقة”,”randfriendb”);
echo $after_title;
echo ‘<a href=”‘.$get_blog[‘blog_url’].'”>’.$get_blog[‘blog_title’].'</a><p>’.$get_blog[‘blog_desc’].'</p>’.$after_widget;
}
}
لم نفهم شيء صحيح؟ و أنا مثلكم في البداية ولكن دعوني أشرح لكم. في البداية عرّفنا دالة باسم randfriendb_main، ولاحظوا أننا مررنا لها المتغير args. ماهو هذا المتغير؟ هذا المتغير عبارة عن مصفوفة تحمل بداخلها 4 مُتغيرات هي before_widget، before_title، after_title، وafter_widget. طيب ماهي هذه المتغيرات؟
هذه المتغيرات تحمل بداخلها قيم من القالب. كما قلت لكم في بداية الدرس سنتعلم إنشاء مُربع جانبي، وبما أننا نكتب الآن دالة عرض مدونة بشكل عشوائي، فيجب علينا إستخدام هذه المتغيرات لكي يكون متوافقاً مع أي ستايل نستخدمه.
بعد ذلك إستخدمنا الأمر extract لكي ننشر مُحتويات المصفوفة على شكل مُتغيرات نتعامل معها، بعدها قُمنا باستعلام من قاعدة البيانات، يختار لنا مدونة بشكل عشوائي من الجدول الذي أنشأناه، ومن ثم قُمنا بطباعتها من خلال دالة foreach، لأنه عندما نستخدم الدالة get_results في الوردبريس، نستخرج محتويات المصفوفة الناتجة من خلال دالة foreach. لاحظوا داخل دالة foreach بعد أن مررنا لها القيم أننا قُمنا بطباعة المتغيرات before_widget، before_title، وبعدها طبعنا عنوان المُربع الجانبي، ومن ثم طبعنا قيمة المتغير after_title. رُبما لم نفهم كثيراً موضوع المتغيرات الأربعة والصور ستوضّح لكم:
هل لاحظتم أنه يعرض لنا المُربع Widget ولكن بشكل مُتناسق مع الشكل العام للمدونة؟ هذه هي الفائدة من المتغيرات الأربعة. الآن يبقى لنا سطر واحد فقط من أجل أن يتعرف النظام على هذا المُربع ويضعه ضمن المُربعات الجانبية والسطر هو:
register_sidebar_widget(__(“مدونات صديقة”,”randfriendb”),’randfriendb_main’);
دالة register_sidebar_widget هي دالة تأخذ مسقطين أو ثلاثة، الأول يحتوي على عنوان المُربع، والثاني الدالة التي سينُفذها و هنا استخدمنا دالة randfriendb_main التي وظيفتها طباعة المدونة العشوائية. لو ذهبنا الآن إلى المُربعات الجانبية سنجدها موجودة .
كل ماعليك الآن هو سحبها ووضعها في القائمة الجانبية 1 كما في الصورة، واذهب للرئيسية في موقعك ستجدها موجودة.
تدويل الإضافة (i18n)
للأسف انتهينا من البرمجة، ولكن الآن نأتي للخطوة الأهم وهي الترجمة والتدويل، كما لاحظتم أننا خلال البرمجة وضعنا أي مُتغير نصّي ضمن:
view sourceprint?
__(“النص هنا”)
// أو
_e(“النص هنا”)
لماذا وضعناها هكذا؟ يستخدم وردبريس نظام GNU gettext، وهذا النظام لتدويل النصوص (i18n) لسهولة ترجمة الإضافة لاحقاً إلى عدة لغات. دعونا قبل أي شيء أن نُضيف هذا السطر في بداية برنامجنا قبل دالة لوحة التحكم. وظيفة هذه الدالة هي إضافة مجال نصّي في البرنامج لكي يستخرج منه ترجمة النصوص .
load_plugin_textdomain(‘randfriendb’, “/wp-content/plugins/randfriendb/”);
نحن وضعنا النصوص باللغة العربية ولكن يُفضّل وضعها باللغة الإنجليزية في حال أردنا نشر الإضافة، لكي تكون أسهل على الناس الراغبة بترجمتها إلى اللغات الثانية، ولكن الآن ما الذي يجب فعله لنجعلها مُتعددة اللغات؟ خطوات سهلة جداً، و لكن في البداية يجب أن يكون لدينا برنامج Poedit.
مُلاحظة لمستخدمي نظام الويندوز: يُرجى تثبيت البرنامج على محرك القرص الصلب C مُباشرةً و ليس داخل مُجلد Programm files في حال كان السيرفر الشخصي لديك مُثبت على C. أما إذا كان على المحرك D فنفس الشيء يجب أن يكون على D مُباشرةً، لماذا؟ لأنه لن يتمكن من إيجاد ملف الإضافة في هذه الحالة. وحقيقة هذه مُشكلة عانيت منها لمدة 7 أيام وهذا سبب تأخر طرح الدرس.
بعد تثبيت البرنامج،نفتح البرنامج ونختار من قائمة file خيار New Catalog.
تظهر لنا الآن نافذة نفوم بتعبئة معلومات عن الإضافة مثل: اسم الإضافة و المُبرمج و البريد الإلكتروني واللغة والترميز كماهو موضّح في الصورة .
ومن ثم ننتقل إلى اللسان (Tab) الثاني وهو المسؤول عن ربط ملف الإضافة كما في الصورة :
طبعاً AppServ هو السيرفر الشخصي الذي أعمل عليه، والباقي أعتقد أنه واضح. الآن ننتقل للسان الأخير وهو عبارة عن الدوال التي يجب على البرنامج أن يأخذ منها العبارات النصية و نحن هنا استخدمنا الدوال __() و _e().
الآن وبعد الضغط على OK سيطلب منك البرنامج تسمية الملف، قُم بتسميته باسم “الإضافة-اللغة”، أي في مثالنا هذا randfriendb-en.po .
ومن ثم سيعرض لك النصوص الموجودة ضمن الدالتين لكي تقوم بترجمتهم .
الآن بعد حفظ الملف نبدأ بالترجمة وعندما ننتهي يُمكننا تجربة نجاح العملية من خلال التعديل على ملف wp-config الموجود في المجلد الرئيسي للوردبريس، نبحث عن:
define ('WPLANG', 'ar');
و نستبدلها بــ
define ('WPLANG', 'en');
جرّب الآن بنفسك و ستجد اللغة قد تغيرت
التغذية
تويتر
فيسبوك
يوتيوب
الاكاديمية العربية لفنون التصميم و تعليم الجرافيك 
يجب عليك تسجيل الدخول لكتابة تعليق.