الدليل النهائي لبناء البرنامج المساعد WordPress

تعد المكونات الإضافية جزءًا حيويًا من مواقع WordPress التي تحتاج إلى وظائف محددة.

بينما يحتوي مستودع WordPress الرسمي على أكثر من 45000 مكون إضافي يمكنك الاختيار من بينها ، إلا أن العديد من هذه المكونات الإضافية تفتقد العلامة.

لا يعني مجرد وجود مكون إضافي في المستودع أنه لن يعيق أدائه أو يعرض أمانه للخطر.

ذلك ما يمكن أن تفعله؟ حسنًا ، يمكنك بناء ملكك الخاص.

يبدأ إنشاء مكون إضافي رائع لـ WordPress بالتخطيط الدقيق.

سواء كنت تبني واحدًا من الصفر ، أو يعتمد على نموذج معياري ، فإن اتباع أفضل الممارسات الموثقة جيدًا أمر ضروري للغاية.

في هذا البرنامج التعليمي ، ستتعلم كيفية إنشاء مكون إضافي بسيط لبرنامج WordPress بالطريقة الصحيحة.

إذا كنت ترغب في مراجعة شفرة المصدر النهائية أثناء قراءتك ، يمكنك العثور عليها هنا.

ابدأ بخطة.

أولاً ، دعنا ندرج الميزات التي سيشملها المكون الإضافي الخاص بنا ونحدد بالضبط ما يجب أن يفعله.

سيسمح المكون الإضافي الذي نقوم ببنائه لزوار الموقع بحفظ المحتوى لقراءته لاحقًا.

بالنسبة للمستخدمين المسجلين ، سنقوم بتخزين القائمة في قاعدة البيانات ، وبالنسبة للمستخدمين المجهولين ، سنقوم بحفظ القائمة باستخدام ملفات تعريف الارتباط.

يوجد أدناه مخطط تفصيلي للميزات والوظائف التي سيوفرها المكون الإضافي الخاص بنا.

شاشة إعدادات

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

حفظ المحتوى

• إذا تم تسجيل دخول المستخدم ، فاحفظ المحتوى في حقل مستخدم مخصص
• إذا لم يقم المستخدم بتسجيل الدخول ، فاحفظ المحتوى في ملفات تعريف الارتباط

رسائل

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

• "حفظ العنصر".
• "عدم حفظ العنصر."
• "أنقذ. انظر العناصر المحفوظة. "
• "ليس لديك أي عناصر محفوظة."

الشاشة المحفوظة

هذا هو المكان الذي يعرض فيه الزوار قائمة المشاركات التي حفظوها.

• اعرض قائمة بالعناصر المحفوظة
• قم بإنشاء صفحة محفوظة عند تنشيط المكون الإضافي
• حذف الصفحة المحفوظة عند إلغاء تنشيط المكون الإضافي

رمز قصير

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

استخدم نموذج معياري.

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

يمكنك استخدام هذه الصفحة لإنشاء قاعدة شفرة للمكوِّن الإضافي بناءً على برنامج WordPress Plugin Boilerplate:

يجب أن تحصل على ملف مضغوط .

قم باستخراجها ووضعها في مجلد تثبيت WordPress الخاص بك: wp-content / plugins / .

إذا فتحت لوحة تحكم WordPress الخاصة بك ، وانتقلت إلى المكونات الإضافية ، فسترى أن المكون الإضافي الخاص بك مدرج هناك. لا تقم بتنشيطه الآن.

التعامل مع التنشيط والتعطيل.

من المهم أن يتعامل المكون الإضافي الخاص بنا مع التنشيط وإلغاء التنشيط بشكل صحيح.

عندما يتم تنشيط المكون الإضافي الخاص بنا ، سننشئ صفحة باسم "المحفوظة" ، والتي ستحتوي على عناصر المستخدم المحفوظة فيها.

أثناء إنشاء هذه الصفحة ، سنضيف رمزًا قصيرًا للعناصر المحفوظة لدينا إلى محتوى تلك الصفحة.

في النهاية ، سنحفظ الصفحة ؛ الحصول على المعرف الخاص به وتخزينها في قاعدة البيانات ، حتى نتمكن من الوصول إليها لاحقًا عند إلغاء تنشيط المكون الإضافي.

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

يمكننا القيام بكل هذا في include / class-toptal-save-activator.php و include / class-toptal-save-deactivator.php .

لنبدأ بعملية التنشيط:

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Activator { /** * On activation create a page and remember it. * * Create a page named "Saved", add a shortcode that will show the saved items * and remember page id in our database. * * @since 1.0.0 */ public static function activate() { // Saved Page Arguments $saved_page_args = array( 'post_title' => __( 'Saved', 'toptal-save' ), 'post_content' => '[toptal-saved]', 'post_status' => 'publish', 'post_type' => 'page' ); // Insert the page and get its id. $saved_page_id = wp_insert_post( $saved_page_args ); // Save page id to the database. add_option( 'toptal_save_saved_page_id', $saved_page_id ); } }

يتم استدعاء وظيفة activate() عند تنشيط البرنامج المساعد.

يقوم بإنشاء صفحة جديدة باستخدام وظيفة wp_insert_post() ويحفظ معرف الصفحة في قاعدة البيانات باستخدام add_option() .

الآن ، دعنا ننتقل إلى إلغاء تنشيط المكون الإضافي.

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Deactivator { /** * On deactivation delete the "Saved" page. * * Get the "Saved" page id, check if it exists and delete the page that has that id. * * @since 1.0.0 */ public static function deactivate() { // Get Saved page id. $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Check if the saved page id exists. if ( $saved_page_id ) { // Delete saved page. wp_delete_post( $saved_page_id, true ); // Delete saved page id record in the database. delete_option( 'toptal_save_saved_page_id' ); } } }

وظيفة deactivate() ، التي تُستدعى عند إلغاء تنشيط المكون الإضافي ، تسترد الصفحة باستخدام وظيفة get_option() ، وتزيل الصفحة المقابلة من قاعدة البيانات باستخدام wp_delete_post() ، وتزيل المعرف المحفوظ من جدول الخيارات باستخدام delete_option() .

إذا قمنا بتنشيط المكون الإضافي الخاص بنا ، وانتقلنا إلى الصفحات ، فسنرى صفحة تسمى "المحفوظة" مع رمز قصير بداخلها.

إذا أردنا إلغاء تنشيط المكون الإضافي ، فستتم إزالة تلك الصفحة.

نظرًا لأننا استخدمنا true كوسيطة في طريقة wp_delete_post() ، فلن يتم وضع هذه الصفحة في سلة المهملات ، بل سيتم حذفها تمامًا.

قم بإنشاء صفحة إعدادات البرنامج المساعد.

يمكننا إنشاء صفحة الإعدادات الخاصة بنا داخل ملف admin / class-toptal-save-admin.php ، وأول شيء نحتاج إلى القيام به في هذا الملف هو إزالة أو التعليق على استدعاء wp_enqueue_style() داخل وظيفة enqueue_styles() و استدعاء wp_enqueue_script() داخل وظيفة enqueue_scripts() إذا لم نكن نضيف أي CSS / JS إلى شاشة المسؤول.

ومع ذلك ، إذا أردنا إضافة بعض الأنماط ، فأوصيك بتحميل هذه الملفات فقط في صفحة الإعدادات الخاصة بالمكون الإضافي الخاص بنا ، بدلاً من تحميلها في جميع صفحات مسؤول WordPress. يمكننا القيام بذلك عن طريق وضع الكود التالي مباشرة فوق الأسطر التي كنا سنعلق عليها:

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-admin.css', array(), $this->version, 'all' );

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-admin.js', array( 'jquery' ), $this->version, false );

إذا كنت تتساءل من أين حصلت على جزء 'tools_page_toptal-save' هذا من.

حسنًا ، هذا هو الشيء ، أعلم أنني سأقوم بإنشاء صفحة إعدادات باستخدام slug toptal-save ، وأنا أعلم أيضًا أنني سأضيفها إلى شاشة Tools ( tools.php ). لذلك ، بتجميع هذين الاثنين معًا ، يمكننا معرفة أن قيمة المتغير $hook ستكون 'tools_page_toptal-save' - سلسلة من القيمتين.

إذا لم نكن في صفحة إعدادات البرنامج المساعد الخاص بنا ، فإننا نستخدم return لإنهاء تنفيذ الوظيفة التي نحن فيها على الفور.

نظرًا لأنني لن أقوم بإضافة أي تصميم مخصص إلى شاشة المسؤول الخاصة بي - لأنني أريد أن تبدو شاشة المكون الإضافي الخاصة بي مثل شاشة WordPress الأصلية - لن أضيف هذا الرمز.

الآن ، يمكننا المضي قدمًا في إنشاء صفحة الإعدادات الخاصة بنا.

سنبدأ بإضافة طريقة بسيطة إلى فئة Toptal_Save_Admin والتي ستستدعي الوظيفة add_submenu_page() .

 /** * Register the settings page for the admin area. * * @since 1.0.0 */ public function register_settings_page() { // Create our settings page as a submenu page. add_submenu_page( 'tools.php', // parent slug __( 'Toptal Save', 'toptal-save' ), // page title __( 'Toptal Save', 'toptal-save' ), // menu title 'manage_options', // capability 'toptal-save', // menu_slug array( $this, 'display_settings_page' ) // callable function ); }

هذا عدد لا بأس به من الحجج التي نمررها إلى add_submenu_page() . هذا ما يعنيه كل منهم.

• الأصل slug: اسم slug للقائمة الرئيسية (أو اسم ملف صفحة مسؤول WordPress قياسية). يمكنك الاطلاع على القائمة الكاملة لبزاقات الوالدين هنا.

• عنوان الصفحة: النص الذي سيتم عرضه في علامات العنوان للصفحة عند تحديد القائمة.

• عنوان القائمة: النص الذي سيتم استخدامه لعنوان القائمة.

• القدرة: القدرة المطلوبة من قبل المستخدم لعرض هذه القائمة لهم. لقد استخدمنا "management_options" التي تتيح الوصول إلى خيارات لوحة الإدارة. يمكنك قراءة المزيد حول الأدوار والقدرات هنا.

• القائمة الثابتة: اسم slug للإشارة إلى هذه القائمة.

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

المتغير الزائف $ هذا متاح عندما يتم استدعاء طريقة من داخل سياق كائن. $ هذا هو إشارة إلى الكائن الاستدعاء (عادةً الكائن الذي تنتمي إليه الطريقة ، ولكن من المحتمل أن يكون كائنًا آخر ، إذا تم استدعاء الطريقة بشكل ثابت من سياق كائن ثانوي).

بعد ذلك ، سنضيف طريقة أخرى إلى الفصل:

 /** * Display the settings page content for the page we have created. * * @since 1.0.0 */ public function display_settings_page() { require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/partials/toptal-save-admin-display.php'; }

تتضمن هذه الوظيفة القابلة للاستدعاء نموذجنا الذي سيعرض صفحة الإعدادات الخاصة بنا. يمكنك أن ترى أننا نشير إلى ملف موجود في المسؤول / الأجزاء يسمى toptal-save-admin-display.php .

الآن ، إذا انتقلت إلى الأدوات ، فلن ترى تلك الشاشة. لماذا ا؟ نظرًا لأننا لم نربط طريقة register_admin_page() الخاصة admin_menu .

يمكننا القيام بذلك عن طريق فتح ملف include / class-toptal-save.php وإضافة هذا الجزء من الكود داخل طريقة define_admin_hooks() ، مباشرةً أسفل حيث $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); الجزء هو.

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

لا تقلق بشأن استدعاءات add_action() لأن هذا شيء سنقوم بتغطيته لاحقًا.

في الوقت الحالي ، ما عليك سوى فتح صفحة الأدوات ، وستتمكن من رؤية صفحة Toptal Save. إذا فتحناها ، فإنها تعمل ، لكننا نرى شاشة فارغة نظرًا لعدم وجود أي شيء عليها.

نحن نحقق بعض التقدم ، ولكن مهلا ، نحتاج إلى عرض بعض الإعدادات هنا ، لذلك دعونا نفعل ذلك.

سنبدأ في إنشاء الحقول ، وهذا شيء سنفعله بمساعدة WordPress Settings API.

إذا لم تكن معتادًا على ذلك ، فإنه يسمح لنا بإنشاء حقول نماذج يمكننا استخدامها لحفظ بياناتنا.

 /** * Register the settings for our settings page. * * @since 1.0.0 */ public function register_settings() { // Here we are going to register our setting. register_setting( $this->plugin_name . '-settings', $this->plugin_name . '-settings', array( $this, 'sandbox_register_setting' ) ); // Here we are going to add a section for our setting. add_settings_section( $this->plugin_name . '-settings-section', __( 'Settings', 'toptal-save' ), array( $this, 'sandbox_add_settings_section' ), $this->plugin_name . '-settings' ); // Here we are going to add fields to our section. add_settings_field( 'post-types', __( 'Post Types', 'toptal-save' ), array( $this, 'sandbox_add_settings_field_multiple_checkbox' ), $this->plugin_name . '-settings', $this->plugin_name . '-settings-section', array( 'label_for' => 'post-types', 'description' => __( 'Save button will be added only to the checked post types.', 'toptal-save' ) ) ); // ... }

داخل وظيفة register_settings() يمكننا إضافة وتهيئة جميع الحقول. يمكنك العثور على التنفيذ الكامل للوظيفة هنا. لقد استخدمنا ما يلي في الوظيفة الموضحة أعلاه:

• register_setting() : يسجل الإعداد ونداء التعقيم الخاص به.
• add_settings_section() : يضيف قسمًا جديدًا إلى صفحة الإعدادات.
• add_settings_field() : يضيف حقلاً جديدًا إلى قسم من صفحة الإعدادات.

كلما استخدمنا إحدى هذه الوظائف الثلاث ، تم توفير رد اتصال التعقيم. يسمح ذلك بتعقيم البيانات ، وإذا كانت حقلاً ، لإظهار عنصر HTML المناسب (مربع الاختيار ، والراديو ، والإدخال ، وما إلى ذلك).

أيضًا ، قمنا بتمرير مصفوفة من البيانات إلى عمليات الاسترجاعات هذه ، مثل label_for أو الوصف أو الافتراضي حسب الضرورة.

الآن ، يمكننا إنشاء عمليات استدعاء التعقيم هذه. يمكنك العثور على رمز عمليات الاسترجاعات هذه هنا.

كل هذا جيد ، ومع ذلك ، نحتاج إلى ربط الحقول admin_init ثم إظهارها.

سنستخدم add_action وهو عبارة عن خطاف يبدأ نواة WordPress عند نقاط محددة أثناء التنفيذ ، أو عند حدوث حدث معين. يتم تشغيل admin_init قبل أي خطاف آخر عندما يصل المستخدم إلى منطقة الإدارة.

أولاً ، نحتاج إلى إضافة إجراء في ملف include / class-toptal-save.php .

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); // Hook our settings page $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); // Hook our settings $this->loader->add_action( 'admin_init', $plugin_admin, 'register_settings' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

بعد ذلك ، في admin / parts / topal-save-admin-display.php ، نحتاج إلى توفير طريقة عرض لمنطقة المسؤول الخاصة بالمكون الإضافي الخاص بنا:

 <?php /** * Provide a admin area view for the plugin * * This file is used to markup the admin-facing aspects of the plugin. * * @link https://www.toptal.com/resume/ratko-solaja * @since 1.0.0 * * @package Toptal_Save * @subpackage Toptal_Save/admin/partials */ ?> <!-- This file should primarily consist of HTML with a little bit of PHP. --> <div> <form method="post" action="options.php"> <?php settings_fields( 'toptal-save-settings' ); do_settings_sections( 'toptal-save-settings' ); submit_button(); ?> </form> </div>

يتم استخدام وظيفة settings_fields() لإخراج الحقول nonce و action و option_page لصفحة الإعدادات.

يتبعه do_settings_sections() التي تطبع جميع أقسام الإعدادات المضافة إلى صفحة إعدادات معينة.

أخيرًا ، تتم إضافة زر إرسال باستخدام النص المقدم والفئات (الفئات) المناسبة باستخدام وظيفة submit_button() .

الآن ، إذا ألقينا نظرة على صفحتنا ، فستبدو كما يلي:

هذا كل ما يتعين علينا القيام به في منطقة الإدارة لدينا. لنبدأ العمل على الجزء العام من المكون الإضافي الخاص بنا.

أنشئ وظيفة البرنامج المساعد.

هنا يأتي الجزء المثير للاهتمام. نحتاج إلى إنشاء وظائف متعددة لفصل وظائفنا:

• وظيفة ستظهر زر "حفظ العنصر". يحتاج هذا إلى التحقق مما إذا كان المستخدم الحالي قد حفظ هذا العنصر بالفعل أم لا ، بناءً على ذلك ، سنعرض نصًا ولونًا مختلفين.
• وظيفة من شأنها حفظ / إلغاء حفظ عنصر (AJAX).
• وظيفة ستظهر جميع العناصر المحفوظة.
• وظيفة من شأنها أن تولد الرموز القصيرة الخاصة بنا.

لنبدأ بإظهار الزر. سنفعل كل هذا في public / class-toptal-save-public.php .

أثناء القيام بذلك ، سنحتاج إلى إنشاء بعض الوظائف المساعدة الإضافية للعناية بأشياء معينة مثل:

• إنشاء اسم ملف تعريف ارتباط فريد للموقع
• إنشاء ملف تعريف الارتباط
• الحصول على قيمة ملف تعريف الارتباط
• الحصول على حالة العضوية من الإعدادات

يمكن العثور على رمز هذه الوظائف المساعدة هنا.

ستساعدنا وظيفة get_unique_cookie_name() في إنشاء اسم ملف تعريف ارتباط فريد من عنوان URL لموقع الويب واسم موقع الويب واللاحقة المحددة المخصصة لدينا. هذا حتى لا يتعارض اسم ملف تعريف الارتباط الذي تم إنشاؤه عند استخدامه في العديد من مواقع WordPress ضمن نفس المجال.

toptal_set_cookie() و toptal_get_cookie() وتحصل على قيمة ملفات تعريف الارتباط الخاصة بنا على التوالي.

ستحصل وظيفة get_user_status() على حالة مربع اختيار عضويتنا في الإعدادات (تُعيد 1 عند تحديدها ، و 0 بخلاف ذلك).

الآن ، الجزء العصير ، إنشاء الوظيفة التي ستكون مسؤولة عن إظهار زر الحفظ. يمكن العثور على تنفيذ الدالة show_save_button() الخاصة بنا هنا. وقد استخدمنا بعض الوظائف الجديدة من WordPress API هنا:

• get_queried_object_id() : استرداد معرف الكائن الحالي الذي تم الاستعلام عنه.
• is_user_logged_in() : للتحقق مما إذا كان الزائر الحالي هو مستخدم قام بتسجيل الدخول.
• get_user_meta() : استرداد حقل بيانات تعريف المستخدم لمستخدم.
• wp_create_nonce() : ينشئ رمزًا مميزًا مشفرًا مرتبطًا بإجراء معين ، ومستخدم ، وجلسة مستخدم ، ونافذة زمنية.

الآن ، لنقم بإنشاء وظيفة من شأنها إلحاق زرنا بنهاية المحتوى. هنا ، لدينا مطلبان رئيسيان.

1. تأكد من أن الزر يظهر فقط على نوع (أنواع) المنشور المحدد / المحدد في الإعدادات.
2. تأكد من تحديد خانة الاختيار الخاصة بإلحاق الزر.

 /** * Append the button to the end of the content. * * @since 1.0.0 */ public function append_the_button( $content ) { // Get our item ID $item_id = get_queried_object_id(); // Get current item post type $current_post_type = get_post_type( $item_id ); // Get our saved page ID, so we can make sure that this button isn't being shown there $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Set default values for options that we are going to call below $post_types = array(); $override = 0; // Get our options $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['post-types'] ) ) { $post_types = $options['post-types']; } if ( ! empty( $options['toggle-content-override'] ) ) { $override = $options['toggle-content-override']; } // Let's check if all conditions are ok if ( $override == 1 && ! empty( $post_types ) && ! is_page( $saved_page_id ) && in_array( $current_post_type, $post_types ) ) { // Append the button $custom_content = ''; ob_start(); echo $this->show_save_button(); $custom_content .= ob_get_contents(); ob_end_clean(); $content = $content . $custom_content; } return $content; }

الآن ، نحن بحاجة إلى ربط هذه الوظيفة the_content .

لماذا ا؟ لأنه يتم استخدام the_content لتصفية محتوى المنشور بعد استرجاعه من قاعدة البيانات وقبل طباعته على الشاشة.

باستخدام هذا ، يمكننا إضافة زر الحفظ الخاص بنا في أي مكان في المحتوى. يمكننا القيام بذلك في include / class-toptal-save.php في define_public_hooks() ، مثل هذا:

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

الآن ، إذا انتقلت إلى إعدادات البرنامج المساعد ، وتحقق من المنشورات والصفحات ، بالإضافة إلى إلحاق الزر ، فسنرى في أي منشور مدونة يظهر الزر.

من هنا ، يجب أن نمضي قدمًا ونصمم هذا الزر.

يمكننا القيام بذلك في public / css / toptal-save-public.css . ابحث عن ملف CSS المحدث هنا.

الآن ، دعنا ننشئ وظيفة ستحفظ العنصر بالفعل.

سنفعل ذلك في صفنا العام ، وسنقوم بذلك باستخدام AJAX. الرمز هنا.

دعنا نربط هذه الوظيفة بـ WordPress AJAX.

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

يمكنك قراءة المزيد عن AJAX في المكونات الإضافية هنا.

قبل أن ننتهي من هذا الجزء ، نحتاج إلى القيام بأمرين آخرين.

1. ترجمة نص.
2. قم بإنشاء مكالمة AJAX الخاصة بنا في public / js / toptal-save-public.js

ستتم ترجمة البرنامج النصي عبر wp_localize_script() داخل ملف public/class-toptal-save-public.php .

أيضًا ، أثناء وجودنا فيه ، سنتأكد أيضًا من تنفيذ عرض ملفات CSS و JS اعتمادًا على حالة مربع الاختيار "استخدم أسلوبنا".

 /** * Register the stylesheets for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_styles() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['toggle-css-override'] ) && $options['toggle-css-override'] == 1 ) { wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-public.css', array(), $this->version, 'all' ); } } /** * Register the JavaScript for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_scripts() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-public.js', array( 'jquery' ), $this->version, false ); // Get our options $options = get_option( $this->plugin_name . '-settings' ); // Get our text $item_save_text = $options['text-save']; $item_unsave_text = $options['text-unsave']; $item_saved_text = $options['text-saved']; $item_no_saved = $options['text-no-saved']; $saved_page_id = get_option( 'toptal_save_saved_page_id' ); $saved_page_url = get_permalink( $saved_page_id ); wp_localize_script( $this->plugin_name, 'toptal_save_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'item_save_text' => $item_save_text, 'item_unsave_text' => $item_unsave_text, 'item_saved_text' => $item_saved_text, 'item_no_saved' => $item_no_saved, 'saved_page_url' => $saved_page_url ) ); }

الآن ، يمكننا المضي قدمًا في مكالمة AJAX الخاصة بنا.

سيبحث البرنامج النصي للواجهة الأمامية عن العناصر ذات الفئة "toptal-save-button".

سيتم تسجيل معالج النقر لجميع العناصر المطابقة ، والذي سيقوم بإجراء استدعاء واجهة برمجة التطبيقات وتحديث واجهة المستخدم وفقًا لذلك.

يمكنك العثور على الكود هنا و CSS الضروري هنا.

لقد أضفت أيضًا وظيفة تتعامل مع الإشعار عند إضافة العنصر.

هنا كيف يعمل كل شيء.

بعد ذلك ، نحتاج إلى إنشاء رمز قصير للمستخدمين لإدراجه أينما يريدون.

يمكننا القيام بذلك في public / class-toptal-save-public.php :

 /** * Create Shortcode for Users to add the button. * * @since 1.0.0 */ public function register_save_unsave_shortcode() { return $this->show_save_button(); }

نحتاج أيضًا إلى تسجيله ، لأن الوظيفة في حد ذاتها لن تفعل أي شيء.

في include / class-toptal-save.php أضف هذا الكود بعد هذا السطر حيث قمنا بإلحاق زرنا.

 // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' );

الآن ، لن يعمل هذا لأننا لم نحمل بعد طريقة add_shortcode() داخل فئة اللودر الخاصة بنا.

فيما يلي الكود الكامل لملف include / class-toptal-save-loader.php .

لقد أضفت متغيرًا محميًا جديدًا يسمى shortcodes ، ثم في طريقة المُنشئ للفئة ، قمت بتحويله إلى مصفوفة.

في السطر 104 ، أضفت وظيفة ستكون مسؤولة عن إنشاء أكوادنا القصيرة ؛ يمكنك أن ترى أنها تشبه إلى حد كبير الوظيفة التي فوقها ( add_filter() ) ، إلا أنني قمت بتغيير "عامل التصفية" إلى "رمز قصير" و "عوامل تصفية" إلى "رموز قصيرة".

أيضًا ، في طريقة run() ، أضفت foreach آخر من شأنه أن يمر عبر مصفوفة الرموز القصيرة الخاصة بنا ، وسجّلها في WordPress.

كان ذلك سهلا.

تذكر ، في البداية ، استخدمنا [toptal-saved] ، لذلك دعونا ننشئ طريقة تعرض جميع العناصر المحفوظة لدينا.

ابحث عن الكود الكامل لهذه الطريقة هنا.

الآن ، كما هو الحال دائمًا ، نحتاج إلى تسجيل الرمز القصير في include / class-toptal-save.php :

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' ); $this->loader->add_shortcode( 'toptal-saved', $plugin_public, 'register_saved_shortcode' ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

لدينا شيئين آخرين لنفعلهما هنا.

1. صمم صفحة العناصر المحفوظة لدينا.
2. تأكد من أنه عندما يقوم المستخدم بإزالة عنصر محفوظ ، فإنه يختفي من صفحة العناصر المحفوظة.

للمهمة الأولى ، يمكنك العثور على كود CSS الضروري هنا.

بالنسبة للثاني ، فهو يتضمن القليل من البرمجة النصية للواجهة الأمامية.

يمكن العثور على كود JavaScript الكامل لذلك هنا.

كما سترى في السطر 52 ، لقد بحثت عن div بفئة "toptal-save-item".

بعد ذلك ، في السطور 70-75 ، نتحقق مما إذا كان div الأصل يحتوي على فئة toptal-save-item.

إذا حدث ذلك ، فإننا نخفي العنصر الخاص بنا باستخدام fadeOut وبعد ذلك ، بعد انتهاء الرسوم المتحركة ، نقوم بإزالة العنصر تمامًا من الشاشة.

الآن ، دعنا ننتقل إلى الجزء الأكثر صعوبة - جعله نمطيًا.

اجعل المكون الإضافي معياريًا.

التعريف الأساسي للمكوِّن الإضافي المعياري هو:

الكود القابل للتوسيع أو المعياري هو رمز يمكن تعديله أو التفاعل معه أو إضافته أو معالجته - كل ذلك بدون تعديل قاعدة الكود الأساسية.

الآن ، عندما يتعلق الأمر بهذا المكون الإضافي ، أود التأكد من أنه يمكن للمستخدمين تغيير HTML داخل العنصر المحفوظ في صفحة العناصر المحفوظة.

لذلك ، سنحتاج إلى إجراء بعض التغييرات في طريقة register_saved_shortcode() الخاصة بنا:

• html_to_return إلى inner_html_to_return حيثما نريد أن يتمكن المستخدمون من تغيير HTML. تأكد من أن التصريح الأول inner_html_to_return يحتوي على "=" بدون نقطة تسبقه.
• استخدم طريقة apply_filters() لتسجيل عامل التصفية الخاص بنا.

مع هذين التغييرين ، يجب أن ينتهي بك الأمر بشيء من هذا القبيل.

الآن ، إذا أراد المستخدمون التفاعل مع الكود الخاص بنا ، فيمكنهم إضافة شيء مثل هذا داخل ملف functions.php الخاص بهم:

 <?php add_filter( 'toptal_saved_item_html', 'change_toptal_saved_item_html'); function change_toptal_saved_item_html( $inner_html_to_return ) { // Some custom code return $inner_html_to_return; }

توليد ملفات الترجمة.

الترجمة مهمة جدًا لأنها تسمح لأعضاء مجتمع WordPress ومتعدد اللغات بترجمة المكون الإضافي الخاص بك ، مما يجعله متاحًا للمواقع غير الإنجليزية.

ومع ذلك ، دعنا نتعمق في بعض التفاصيل الفنية حول كيفية تعامل WordPress مع الترجمات.

يستخدم WordPress إطار عمل GNU gettext للترجمة. في هذا الإطار ، هناك ثلاثة أنواع من الملفات:

• قالب كائن محمول (POT)
• كائن محمول (PO)
• كائن الآلة (MO)

يمثل كل ملف من هذه الملفات خطوة في عملية الترجمة.

لإنشاء ملف POT ، نحتاج إلى برنامج يبحث من خلال كود WordPress ، ويحصل على كل النص الذي تم تمريره إلى وظائف الترجمة لدينا ، مثل __e() و _e() . يمكنك قراءة المزيد عن وظائف الترجمة هنا.

هنا نقوم بترجمة النص من ملف POT ، وحفظ كل من اللغة الإنجليزية وترجمتنا في ملف PO ، ونقوم بتحويل ملف PO إلى ملف MO.

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

بمجرد تثبيته وتنشيطه ، انتقل إلى Loco Translate> Plugins> Toptal Save.

من هناك ، انقر على تعديل القالب ، ثم على المزامنة والحفظ. سيؤدي هذا إلى تحرير ملف toptal-save.pot بنا داخل مجلد لغاتنا.

الآن ، البرنامج المساعد متاح للترجمة.

قم ببناء البرنامج المساعد WordPress الخاص بك الآن.

لقد أنشأنا مكونًا إضافيًا بسيطًا إلى حد ما في هذه المقالة ، ولكن في هذه العملية ، اتبعنا الممارسات والمعايير التي من شأنها أن تسمح لنا بالحفاظ على هذا المكون الإضافي وتوسيعه بسهولة.

لقد استخدمنا وظائف WordPress بطرق لا تعيق الأداء العام للنظام الأساسي.

سواء كان مكونًا إضافيًا بسيطًا أو معقدًا ، سواء كنت مطورًا فرديًا أو شركة تطوير WordPress ، فإن التخطيط واتباع أفضل الممارسات هو المفتاح لبناء مكون إضافي قوي.