اذهب إلى المحتوى

تطوير ووردبريس للمبتدئين: برمجة إضافة – الأساسيات والخصائص


Bilal MOUSSI

تعرّفنا في الدرس السابق على المعلِّقات، الأفعال و المرشِّحات (Hooks, Actions, Filtres ) وسنتعرّف في هذا الدرس على أساسيات إنشاء الإضافة وكيفية إضافة خصائص القالب للإضافات…

أساسيّات إنشاء إضافةٍ:

الآن وقد صِرنا نعرف كلّ شيءٍ عن المعلِّقات فإن الخطوة التاليّة ستكون معرفة طريقة استخدامها. لنعد خطوة للوراء ولنلق نظرة عامّة على الإضافات.
يتم وضع الإضافات في المجلّد الرئيسي للإضافات في موقعك ووردبريس، يوجد هذا الملف عادة في هذا المسار "wp-content/plugins". كمثال لنقم بإنشاء إضافة تقوم بإضافة رابط تغريده تحت مقالاتك.
أوّلا، فلننشئ مجلّدًا في مجلّد الإضافات الرئيسي ولنسمّه مثلا "tweet-plugin-tutorial". الآن أنشئ ملفًّا داخل هذا المجلّد وسمّه "tweet-plugin-tutorial.php". الآن قم بفتح الملف وقم بنسخ البرمجيّة التالية بداخله:

<?php 
/**
 * Plugin Name: Tweet Plugin Tutorial
 * Plugin URI: http://danielpataki.com
 * Description: This plugin adds a simple tweet link below posts.
 * Version: 1.0.0
 * Author: Daniel Pataki
 * Author URI: http://danielpataki.com
 * License: GPL2
*/

هذه المعلومات سيتم عرضها في لوحة تحكّم المدير في قسم الإضافات. بمجرّد حفظك للملف ستلاحظ ظهور إضافةٍ جديدةٍ في قائمة الإضافات، تهانينا! لقد أنشأت أوّل إضافة لك بإتقان ولكن لا تفرح كثيرًا فهذه الإضافة لا تقوم بأيّة وظيفة بعد، ولكن يمكنك تفعيلها الآن وهو ما ندعوك للقيام به.
حاليًّا قمنا بـ 90% من العمل. كلُّ ما علينا القيام به الآن هو إيجاد طريقة لإضافة رابط التغريدة أسفل محتوى المقال. ربّما أنت تفكّر بتعديل محتوى المقال عن طريق إضافة نصٍّ إضافي له. هذا يعني أنّك تفكّر في استخدام معلِّق the_content مثلما قمنا بهذا سابقًا:

<?php 
function tweet_link( $content ) {
  return $content . '<p><a href="https://twitter.com/intent/tweet?url='.get_permalink().'">Tweet about this</a></p>';
}
add_action( 'the_content', 'tweet_link' );

هذه البرمجيّة ستقوم بإضافة رابطٍ بعد محتوى مقالِتنا، ما سيتيح لمستخدمينا مشاركة رابط المقال عن طريق تغريده.

img-1 (2).png

في الواقع هذا كلّ ما يجب عليك معرفته لإنشاء إضافة ووردبريس. جميع الإضافات هي عبارة عن مزيج من الدّوال والمعلِّقات التي تحدِّد المكان الذي سيتم منه تشغيل هذه الدّوال. لذا من الآن فصاعدًا عليك التركيز على تعلُّم الأنظمة الفرعية مثل Options API, Metadata API وغيرها.

إضافة خصائص القالب للإضافات:

هناك عدّة طرق لإضافة خصائص لقوالبك. دعنا أولًّا نلقي نظرة على الطريقة القياسية للقيام بهذا الأمر عن طريق دليل ووردبريس.
سوف نبدأ بإنشاء صفحة مدير ستحتوي على النموذج التالي:

<?php 
add_action('admin_menu', 'tweetlink_settings_menu');

function tweetlink_settings_menu() {
    add_menu_page('Tweet Link Settings', 'Tweet Link', 'manage_options', 'tweetlink-settings', 'tweetlink_settings_page', 'dashicons-twitter');
}

function tweetlink_settings_page() {
  echo '<div class="wrap"><h2>Tweet Link Options</h2></div>';
}

دالّة ()tweetlink_settings_menu تمّ تعليقها بمعلِّق admin_menu. حسب دليل الووردبريس هذه هي الطريقة الصحيحة التّي يجب استخدامها لإنشاء قائمة مدخلات في لوحة التحكّم. العمل سيتّم عن طريق دالّة ()add_menu_page التي تأخذ مجموعة مُعامِلات صفحة ذات مستوى أعلى. المعاملات التي تأخذها هذه الدّالة هي:

  • عنوان الصّفحة – يستخدم في وسم العنوان
  • عنوان القائمة – يستخدم في كتابة اسم القائمة في الجهة اليسرى/اليمنى من لوحة تحكم المدير.
  • الإمكانيّة – لتحديد أقل مستوى يمكنه مشاهدة القائمة (مثلا القائمة ستكون ظاهرة فقط للمدير والمحرّرين)
  • الاسم اللطيف للقائمة – يستخدم في الرابط المؤدّي لصفحة القائمة.
  • الدّالة - اسم الدّالة التي تقوم بالتحكّم بالمُخرجات.
  • الأيقونة – رابط صورة او نص لأيقونات ووردبريس.
  • الموقع – تموضع العنصر ضمن القائمة.

إليك كيف تبدو صفحة الخصائص في لوحة التحكم:

img-2 (2).png

قد تبدو لك هذه الصّفحة رائعة ولكن في الحقيقة هي مبالغةٌ كبيرة إنشاء صفحة كاملة من أجل إضافة بسيطة كالتّي نعمل عليها الآن، لذا سيكون من الأفضل وضع هذه الصفحة داخل قائمة الإعدادات الموجودة سلفا بالووردبريس. يمكنك القيام بذلك باستخدام دالّة ()add_options_page.
الخطوة التّالية ستكون جعل الووردبريس يعلم حول إعدادات تغريدتنا. هذا الأمر سيتطلب استخدام دالّة ()register_settings داخل دالّة معلّقة إلى ()to admin_init.
إليك كيف سيكون شكل البرمجيّة:

<?php 
add_action( 'admin_init', 'tweetlink_settings' );

function tweetlink_settings() {
    register_setting( 'tweetlink_settings', 'twitter_account' );
}

كلّ شيءٍ تمام. الخطوة الأخيرة ستكون إضافة استمارة تستخدم خصائصنا. استخدم البرمجيّة التاليّة كنموذج لإنشاء إعداداتك الخاصّة، لا تنسَ استخدام دوال ()settings_fields و ()do_settings_sections لضمان قيام الووردبريس بحفظ البيانات لك.

<?php 
function tweetlink_settings_page() {
?>
<div class="wrap">
<h2>Tweet Link Settings</h2>

<form method="post" action="options.php">
    <?php settings_fields( 'tweetlink_settings' ); ?>
    <?php do_settings_sections( 'tweetlink_settings' ); ?>
    <table class="form-table">        
        <tr valign="top">
        <th scope="row">Twitter Account</th>
        <td><input type="text" name="twitter_account" value="<?php echo esc_attr( get_option('twitter_account') ); ?>" /></td>
        </tr>
    </table>
    
    <?php submit_button(); ?>

</form>
</div>

<?php
}

عند نهاية العمليّة يجب أن ترى ظهور حقل جديد يُمكّنك من إدخال حسابك على تويتر ثم الضغط على حفظ. بعد ذلك يمكنك استخدام دالّة  'get_option( 'twitter_account ( لاسترجاع القيمة المُدخلة واستخدامها بأي مكان داخل إضافتك.

img-3 (1).png

يمكننا الآن التعديل على رابط التغريدة لإضافة "via @username" إذا قام المستخدمون بإضافة حسابهم على تويتر في صفحة الخصائص.
إليك كيف عدّلت دالّة ()tweet_link

<?php 
function tweet_link( $content ) {
    $url = 'https://twitter.com/intent/tweet';
    $url .= '?url=' . get_permalink();

    $account = get_option( 'twitter_account' );
    if( !empty( $account ) ) {
        $url .= '&via=' . $account;
    }

    return $content . '<p><a href="' . $url . '">Tweet about this</a></p>';
}

خاتمة

هكذا نختم سلسلتنا حول تطوير ووردبريس للمبتدئين. في هذه المقالة تعلّمنا طريقة إنشاء إضافة بسيطة نتمنّى أنها خلقت داخلك شعورًا بالرّضى كونك تمكّنت من برمجة أوّل إضافة لك.
فقط التجربة والإصرار من سيجعلان تطوير الووردبريس أسهل بالنسبة إليك وسترتقي من مجرّد مبتدئ غير خبير إلى مستوى مطوّر.

ترجمة -وبتصرّف- للمقال WordPress Development for Beginners: Building Plugins لصاحبه Daniel Pataki


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...