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

أين نضعها

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

فيما يخصّ تمديدات ووكمرس فالأمر بيّن، هناك قائمة الإعدادات موجودة تحت قائمة ووكمرس على القائمة الجانبية الرئيسية، وضمنها تجد تبويبات (tabs) لضبط مختلف الإعدادات المرتبطة بووكمرس، وكل تبويب يوجد تحته تبويبات فرعية، مثلا التبويب منتجات (Products) تجد تحته تبويبات فرعية منها المخزون (Inventory). فإذا كانت تمديدتك تضبط إعدادات لها علاقة بالمنتجات فقم بإدراج تبويب فرعي لتبويب المنتجات، أما إذا كانت تمديدتك مستقلة لا ترتبط بأي من تبويبات ووكمرس، فيمكنك إنشاء تبويب خاصّ بها. فلنبدأ بطريقة إنشاء تبويب خاصّ بتمديدتنا.

إدراج تبويب إعدادات التمديدة

بالبحث ضمن دليل هوكات ووكمرس على الرابط التالي:

https://docs.woocommerce.com/wc-apidocs/hook-docs.html

فإننا نجد الفلتر woocommerce_get_settings_pages، إذا ما نقرت عليه ودخلت مصدره فإنك تجد الرماز التالي:

/**
 * Include the settings page classes.
 */
public static function get_settings_pages() {
  if ( empty( self::$settings ) ) {
    $settings = array();

    include_once dirname( __FILE__ ) . '/settings/class-wc-settings-page.php';

    $settings[] = include 'settings/class-wc-settings-general.php';
    $settings[] = include 'settings/class-wc-settings-products.php';
    $settings[] = include 'settings/class-wc-settings-tax.php';
    $settings[] = include 'settings/class-wc-settings-shipping.php';
    $settings[] = include 'settings/class-wc-settings-payment-gateways.php';
    $settings[] = include 'settings/class-wc-settings-accounts.php';
    $settings[] = include 'settings/class-wc-settings-emails.php';
    $settings[] = include 'settings/class-wc-settings-integrations.php';
    $settings[] = include 'settings/class-wc-settings-advanced.php';

    self::$settings = apply_filters( 'woocommerce_get_settings_pages', $settings );
  }

  return self::$settings;
}

ينوّر لنا الرِماز (الكود) أعلاه الطريق لما يلزم فعله لتسجيل تبويب إعداداتنا، فيكفينا تسجيل وظيفة على الهوك المذكور ثم إنشاء صنفٍ class يحاكي الأصناف المضمنة included في الرماز.

add_filter( 'woocommerce_get_settings_pages', 'oss_ot_add_settings' );

function oss_ot_add_settings($settings) {
  $settings[] = include 'oss_synctrackinginfo_settings_page.php';
  return $sections;
}

سجّلنا الوظيفة oss_ot_add_settings على هوك الفلتر woocommerce_get_settings_pages وضمّينا ملف صنفنا الخاص الذي سمّيناه oss_synctrackinginfo_settings_page. الآن لكي نعرف ما الذي يجب وضعه ضمن الصنف، سوف ننظر إلى مصدر إحدى الأصناف الموجودة مسبقًا وليكن class-wc-settings-general وهذا مقتطف منه:

<?php
/**
 * WooCommerce General Settings
 *
 * @package WooCommerce/Admin
 */

defined( 'ABSPATH' ) || exit;

if ( class_exists( 'WC_Settings_General', false ) ) {
  return new WC_Settings_General();
}

/**
 * WC_Admin_Settings_General.
 */
class WC_Settings_General extends WC_Settings_Page {

  /**
   * Constructor.
   */
  public function __construct() {
    $this->id = 'general';
    $this->label = __( 'General', 'woocommerce' );

    parent::__construct();
  }
	
}

الملحوظ وجود الصنف المجرّد WC_Settings_Page الذي يمكننا تمديده بصنفٍ نعرّفه ونجعل له وظيفة بانية على غرار ما فعلوه في الصنف WC_Settings_General. وها النتيجة تراها أسفله:

<?php
defined( 'ABSPATH' ) || exit;

if ( class_exists( 'WC_Settings_General', false ) ) {
  return new oss_synctrackinginfo_settings_page();
}

/**
 * WC_Admin_Settings_General.
 */
class oss_synctrackinginfo_settings_page extends WC_Settings_Page {

  /**
   * Constructor.
   */
  public function __construct() {
    $this->id = 'synctrackinginfo';
    $this->label = 'Synctrackinginfo';

    parent::__construct();
  }

}

return new oss_synctrackinginfo_settings_page();

ضمن الوظيفة البانية _construct عيّنت معرّف التبويب (id) وملصقه (label) أي الاسم الذي يظهر عليه، وأنت يحقّ لك أن تسمّيه ما تشاء. قم الآن بالحفظ ثم تحديث صفحة إعدادات ووردبرس فماذا ترى؟ أها خطأ، يوجد خطأ، ما الأمر يا ترى؟ علينا تضمين الصنف WC_Settings_Page في وظيفة الاستدعاء العائد للهوك التي أنجزناها أعلاه، وفي ما يلي التعديل:

function oss_ot_add_settings($settings) {
  include_once WP_PLUGIN_DIR. '/woocommerce/includes/admin/settings/class-wc-settings-page.php';
  $settings[] = include 'oss_synctrackinginfo_settings_page.php';
  return $settings;
}

إدراج حقول الإعدادات في التبويب

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

/**
 * Get settings array.
 *
 * @return array
 */
public function get_settings() {

  $settings = apply_filters(
    'woocommerce_general_settings',
      array(

        array(
          'title' => __( 'Store Address', 'woocommerce' ),
          'type'  => 'title',
          'desc'  => __( 'This is where your business is located. Tax rates and shipping rates will use this address.', 'woocommerce' ),
          'id'    => 'store_address',
        ),

        array(
          'title'    => __( 'Address line 1', 'woocommerce' ),
          'desc'     => __( 'The street address for your business location.', 'woocommerce' ),
          'id'       => 'woocommerce_store_address',
          'default'  => '',
          'type'     => 'text',
          'desc_tip' => true,
        ),

        array(
          'title'    => __( 'Address line 2', 'woocommerce' ),
          'desc'     => __( 'An additional, optional address line for your business location.', 'woocommerce' ),
          'id'       => 'woocommerce_store_address_2',
          'default'  => '',
          'type'     => 'text',
          'desc_tip' => true,
        )

      )
    );

    return apply_filters( 'woocommerce_get_settings_' . $this->id, $settings );
}

/**
 * Output the settings.
 */
public function output() {
  $settings = $this->get_settings();

  WC_Admin_Settings::output_fields( $settings );
}

/**
 * Save settings.
 */
public function save() {
  $settings = $this->get_settings();

  WC_Admin_Settings::save_fields( $settings );
}

إذن لدينا الوظيفتين output و save، تقوم الأولى بعرض الواجهة على الصفحة، والثانية بحفظ التعديلات. ثم لدينا الوظيفة get_settings التي نحدد فيها حقولنا، وفي المثال أعلاه لدينا ترويسٌ وحقلين لإدخال عنوان السكن.

خاتمة

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