كيفية إنشاء ملحق WordPress: خطوة بخطوة

تريد إنشاء ملف وورد البرنامج المساعد ؟ سيعلمك هذا البرنامج التعليمي كيفية القيام بذلك.

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

يوجد أكثر من 50 مكون إضافي في ملف rدليل WordPress  مصممة لأغراض مختلفة. سوف تجد الإضافات وورد ل الاشتراك في النشرة الإخبارية , الامن et  التجارة الإلكترونية . فقط سمها.

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

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

أسئلة يطرح fréquemment

هل تكسب إضافات WordPress المال؟

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

CodeCanyon,  Themeforest وموجو السوق  هي أفضل 3 مواقع لبيع المكونات الإضافية.

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

هل من الصعب إنشاء ملحقات WordPress؟

تم إنشاء ملف وورد البرنامج المساعد سهل وصعب نسبيًا، اعتمادًا على الميزات التي تريدها.

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

كم يكسب مطورو البرنامج المساعد؟

وفقًا لـ Zip Recruiter، متوسط ​​السعر بالساعة للمطورين الإضافات وورد في الولايات المتحدة هو 35 دولارًا للساعة. يصل هذا إلى ما يقرب من 72 دولار سنويًا و000 دولار شهريًا.

إذا كنت تبيع المكون الإضافي الخاص بك ، فيمكنك كسب ما يصل إلى 5 دولار شهريًا ، اعتمادًا على عدد المبيعات. يمكن أن يكسبك تقديم خدمات تخصيص المكونات الإضافية ما بين 000 دولارًا و 20 دولارًا في الساعة.

ما ستحتاج إليه لإنشاء البرنامج المساعد WordPress

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

• المعرفة الأساسية في برمجة PHP: تتم كتابة إضافات WordPress بلغة PHP ، لذا يجب أن تفهم اللغة وبناء الجملة قبل أن تبدأ.
• HTML و CSS أساسيان:  يسمح لك HTML و CSS بالتحكم في عرض ومظهر المكونات الإضافية الخاصة بك. لذلك من الأهمية بمكان فهم أساسياتهم لإنشاء مكون إضافي لبرنامج WordPress.
• الإلمام بـ WordPress:  من المفيد أن تتعرف على منصة WordPress ووظائفها الرئيسية ، بالإضافة إلى وورد الدستور (الدليل الإلكتروني لتطوير WordPress).
• بيئة تنموية: لتطوير واختبار المكون الإضافي الخاص بك ، تحتاج إلى تثبيت WordPress على جهازك المحلي أو على موقع تطوير. سيسمح لك ذلك باختبار المكون الإضافي الخاص بك دون التأثير على موقع ويب مباشر. سنوضح لك كيفية القيام بذلك في القسم التالي.
• محرر نصوص: ستحتاج إلى محرر نصوص لكتابة كود البرنامج المساعد الخاص بك. تتوفر العديد من الخيارات ، مثل Sنص سامي, ذرة et كود الاستوديو المرئي.

كيفية إنشاء البرنامج المساعد WordPress في 7 خطوات

الخطوة 1: فهم كيفية عمل مكونات WordPress الإضافية

نظرًا لأن WordPress مكتوب بلغة برمجة ، يمكن لأي شخص لديه معرفة بالترميز الوصول إلى كود WordPress وتعديله.

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

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

دعنا نلقي نظرة على العلاقة بين الأقواس المربعة والوظائف لفهم أساسيات مكونات WordPress الإضافية.

وظائف ووردبريس:

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

هذا مثال :

function sticky_header() {

  ?>

  <script>

  // Select the header element

  var header = document.querySelector(‘header’);

  // Get the offset position of the header

  var sticky = header.offsetTop;

  // Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position

  function addSticky() {

    if (window.pageYOffset > sticky) {

      header.classList.add(“sticky”);

    } else {

      header.classList.remove(“sticky”);

    }

  }

  // Add the sticky class to the header when you scroll the page

  window.onscroll = function() {

    addSticky();

  };

  </script>

  <?php

}

add_action( ‘wp_footer’, ‘sticky_header’ );

يمكنك استدعاء هذه الوظيفة مباشرة في ملحق WordPress الخاص بك عن طريق كتابة sticky_header () حيث تريد تشغيل الكود. لكنها ممارسة سيئة لأنك قد تواجه مشاكل. فيما يلي سببان آخران لعدم استدعاء الوظائف مباشرة في التعليمات البرمجية الخاصة بك.

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

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

خطافات ووردبريس:

الخطاف هو نقطة محددة في كود WordPress حيث يمكنك أداء وظائفك المخصصة. هناك نوعان من الخطافات: خطافات الحركة وخطافات المرشح.

خطافات العمل

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

add_action('hook_name', 'my_custom_function');

Le  اسم الخطاف  هو اسم خطاف العمل الذي تريد استخدامه.

هناك العديد من الإجراءات في WordPress. يمكنك العثور عليها في cأوديكس ووردبريس.

my_custom_function  هي الوظيفة التي تحتوي على الكود الذي تريد تنفيذه. يجب تحديد هذه الوظيفة قبل الوظيفة ADD_ACTION.

سيبدو بناء الجملة على هذا النحو لإرفاق وظيفة الرأس اللاصق أعلاه بخطاف.

add_action( 'wp_footer', 'sticky_header' );

تقوم هذه الوظيفة بتنفيذ وظيفة sticky_header () عندما يتم استدعاء ربط الإجراء wp_footer. يمكنك أيضًا إرفاق الوظيفة بخطاف معين عن طريق استبدال wp_footer باسم الخطاف الذي تختاره.

على سبيل المثال:

add_action( 'init', 'sticky_header' );

سيؤدي هذا إلى تشغيل وظيفة الرأس اللاصق عند استدعاء إجراء WordPress init.

خطاطيف التصفية

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

add_filter( ‘the_title’, ‘uppercase_title’ );

function uppercase_title( $title ) {

  return strtoupper( $title );

}

تقبل هذه الوظيفة وسيطة واحدة ، $ title ، وهو العنوان الأصلي لمنشور المدونة.

ثم تستخدم الوظيفة الوظيفة strtoupper () لتحويل العنوان إلى أحرف كبيرة وإرجاع القيمة المعدلة.

الفرق بين خطاف العمل والتصفية

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

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

كما في المثال أعلاه ، عامل التصفية العنوان يسمح لك بتعديل عنوان منشور مدونة قبل عرضه على موقع الويب.

الخطوة 2: قم بإعداد بيئة اختبار

الخطوة الثانية في إنشاء مكون WordPress الإضافي هي إعداد بيئة اختبار أو تطوير. الهدف هو تجنب إجراء التجارب على موقع حقيقي.

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

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

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

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

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

اختر من قم بإنشاء موقع جديد وانقر على زر اتبع الدورة.

بعد ذلك ، اتبع التعليمات التي تظهر على الشاشة لإضافة اسم موقعك ، وإعداد البيئة ، وإنشاء تفاصيل تسجيل الدخول إلى WordPress.

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

بمجرد فتح صفحة تسجيل دخول المسؤول ، استخدم ملف إسم المستخدم و كلمة مرور ووردبريس التي قمت بإنشائها أعلاه للوصول إلى لوحة التحكم الخاصة بك.

لقد تم. بيئة الاختبار الخاصة بك جاهزة. لنبدأ في إنشاء مكون WordPress الإضافي الخاص بك.

الخطوة 3: قم بإنشاء مجلد الملحقات الخاصة بك

بمجرد أن تصبح بيئة الاختبار الخاصة بك في مكانها الصحيح ، فإن أول شيء عليك القيام به هو إنشاء ملف مكون إضافي في دليل موقعك. بشكل افتراضي ، يخزن WordPress جميع المكونات الإضافية في الدليل wp-content/plugin.

سيكون لكل مكون إضافي مثبت على موقع WordPress مجلد في هذا الدليل. بالنسبة إلى المكون الإضافي الخاص بك ، سيتعين عليك إنشاء مجلد داخل هذا الدليل وتسميته.

في هذا البرنامج التعليمي ، سننتقل إلى المجلد wp-content/plugin في دليل المواقع المحلي لدينا. إليك الطريقة.

ملاحظة:  العملية هي نفسها إذا كنت تستخدم موقعًا وسيطًا.

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

اختر التطبيقات في الخيارات ، انقر فوق جمهور ثم الفسفور الابيض بين المحتوى. سترى مجلدات مختلفة في هذا الدليل.

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

الخطوة 4: قم بإنشاء ملف PHP الرئيسي للمكوِّن الإضافي الخاص بك

بعد إنشاء مجلد البرنامج المساعد ، فإن الخطوة التالية هي إضافة ملف PHP إلى هذا المجلد. هذا هو المكان الذي ستتوفر فيه رموز المكون الإضافي ووظائفه.

في هذا البرنامج التعليمي ، نحتاج فقط إلى ملف PHP واحد لمكوِّن إضافي بسيط يقوم بإنشاء رأس ثابت في WordPress.

بالنسبة للإضافات الأكثر تعقيدًا ذات الوظائف المتقدمة ، قد تكون هناك أنواع ملفات مختلفة في مجلد البرنامج المساعد ، مثل CSS وجافا سكريبت. في حالتنا ، يكفي ملف PHP واحد.

للقيام بذلك ، قم بإنشاء ملف PHP في مجلد البرنامج المساعد ، كما في لقطة الشاشة أدناه.

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

الخطوة 5: تكوين معلومات البرنامج المساعد الخاص بك

تُعرف أيضًا باسم رأس ملف المكون الإضافي ، معلومات المكون الإضافي الخاصة بك عبارة عن كتلة تعليق PHP تتضمن تفاصيل حول المكون الإضافي الخاص بك مثل اسم المكون الإضافي والإصدار وعنوان URL واسم المؤلف وموقع الويب الخاص به والترخيص وما إلى ذلك.

هذه هي المعلومات التي تراها على صفحة البرنامج المساعد WordPress بعد تثبيت البرنامج المساعد.

يمكنك العثور على ملف رأس ملف البرنامج المساعد في مجلد ووردبريس . تبدو هكذا.

ما عليك سوى نسخ هذا الرمز ولصقه في ملف PHP للمكوِّن الإضافي الخاص بك ، ثم تحرير التفاصيل لتناسب المكون الإضافي الخاص بك. في حالتنا ، سيبدو قارئ ملف المكوّن الإضافي Sticky header بهذا الشكل.

<?php

/*

Plugin Name: Sticky Header

Plugin URI: https://wordpress.org/plugins/sticky-header/

Description: Make your website header sticks to the top of every page on your website as users scroll.

Author: The Team

Author URI: https://blogpascher.com/sticky-header

Text Domain: Sticky Header 

Domain Path: /languages

*/

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

سجّل الدخول إلى لوحة معلومات WordPress الخاصة بموقعك التجريبي وانتقل إلى Plugins>Plugins installés.

سترى المكوّن الإضافي Sticky Header مع التفاصيل. هاهو.

يمكنك الآن تنشيط المكون الإضافي ، لكنه لن يفعل أي شيء لأننا لم نضف أي وظائف إليه حتى الآن. لذلك دعونا نجعل المكون الإضافي الخاص بنا يفعل شيئًا ما.

الخطوة 6: أضف رمزًا إلى المكون الإضافي الخاص بك

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

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

function sticky_header() {

  ?>

  <script>

  // Select the header element

  var header = document.querySelector(‘header’);

  // Get the offset position of the header

  var sticky = header.offsetTop;

  // Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position

  function addSticky() {

    if (window.pageYOffset > sticky) {

      header.classList.add(“sticky”);

    } else {

      header.classList.remove(“sticky”);

    }

  }

  // Add the sticky class to the header when you scroll the page

  window.onscroll = function() {

    addSticky();

  };

  </script>

  <?php

}

add_action( ‘wp_footer’, ‘sticky_header’ );

يقوم هذا الرمز بأمرين أساسيين ،

الوظيفة رأس_الثبات يتم تنشيطه عندما يقوم المستخدم بتمرير الصفحة ويتوقف عند توقف التمرير.

ثانيًا ، العمل add_action ('wp_footer'، 'sticky_header') ؛ استخدم العنوان… ..

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

الخطوة 7: تنشيط البرنامج المساعد. في العمل.

ارجع إلى موقعك وقم بتنشيط المكون الإضافي.

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

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

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

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

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

وفي الختام

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

يتبع إنشاء الإضافات المعقدة نفس الطريقة. المزيد من الوظائف تعني المزيد من الوظائف في ملف البرنامج المساعد الخاص بك.

هل سبق لك أن حاولت إنشاء مكون إضافي لبرنامج WordPress؟ دعنا نتحدث عن تجربتك في قسم التعليقات أدناه.