كيفية بناء أول برنامج إضافي لبرنامج WordPress. دليل خطوة بخطوة

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

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

يمكنك القيام بذلك بطريقتين. أولاً ، عن طريق كتابة رمز يغير تصميم أو وظيفة موقع WordPress الخاص بك. الطريقة الثانية (والأكثر شيوعًا) هي الاستفادة من المكونات الإضافية لمنشئ مواقع الويب مثل Elementor لتغيير تصميم / مظهر موقع الويب الخاص بك ثم استخدام المزيد من المكونات الإضافية لإضافة وظائف. يمكن لأي شخص استخدام المكونات الإضافية ... تتطلب معظمها مهارة قليلة جدًا للإعداد ولا يلزم وجود خبرة في البرمجة مما يجعلها أداة قوية بشكل لا يصدق.

ما هو البرنامج المساعد ولماذا يجب أن أقوم بإنشائه؟

كما تعلم بالفعل (أو ربما خمنت الآن) ، تُستخدم المكونات الإضافية في WordPress لتوسيع ميزات موقع WordPress على الويب. يأتي WordPress "خارج الصندوق" بعدد من الميزات المفيدة الجاهزة للاستخدام. تتيح لك المكونات الإضافية إما تحسين الميزات المضمنة المتاحة أو إضافة ميزات جديدة تمامًا بسرعة وسهولة وبدون الحاجة إلى الترميز. فكر في مكونات WordPress الإضافية كأحد الأدوات التي تتيح لك إنشاء موقع ويب مصمم وفقًا لمتطلباتك الدقيقة.

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

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

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

استضافة موقع الويب الخاص بك مع Pressidium

ضمان استرداد الأموال لمدة 60 يومًا

اطلع على خططنا

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

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

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

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

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

تحديد أهداف البرنامج المساعد الخاص بك

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

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

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

الآن حددنا وظيفتها وأطلقنا عليها اسمًا ، يمكننا العمل على بنائها!

ملاحظة: استخدم دائمًا خادمًا مرحليًا لاختبار المكون الإضافي الخاص بك وليس موقع ويب مباشر.

الخطوة 1: قم بإنشاء الملفات / المجلدات المطلوبة لجعل المكون الإضافي يعمل

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

قم بإنشاء مجلد البرنامج المساعد

أولاً ، قم بالوصول إلى موقع الويب الخاص بك عبر عميل SFTP وانتقل إلى مجلد / wp-content / plugins. في هذا المجلد ، قم بإنشاء مجلد جديد باسم فريد. يجب أن يكون الاسم مشابهًا لاسم المكون الإضافي الخاص بك وأن يحتوي فقط على أحرف صغيرة وشرطات. سيُطلق على مجلدنا "زر under-post-button".

قم بإنشاء الملف الرئيسي

بعد ذلك ، داخل هذا المجلد الجديد ، قم بإنشاء ملف PHP بنفس اسم مجلدنا "under-post-button.php".

دع WordPress يعرف عن المكون الإضافي

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

• اسم البرنامج المساعد
• عنوان URL للمكون الإضافي
• وصف
• إصدار
• يتطلب على الأقل
• يتطلب PHP
• مؤلف
• المؤلف URI
• رخصة
• URI للترخيص
• مجال النص
• مسار المجال
• شبكة الاتصال

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

لإضافة اسم البرنامج المساعد إلى ملف PHP الخاص بنا ، افتح ملف PHP الخاص بك في محرر كود (مثل Sublime) وأضف ما يلي:

 <?php /* Plugin Name: Under Post Button */ ?>

توجه الآن إلى مدير WordPress الخاص بك ، وانقر فوق "المكونات الإضافية" وستتمكن من رؤية المكون الإضافي الخاص بك في قائمة المكونات الإضافية.

يمكنك الآن تفعيلها. يعمل المكون الإضافي الآن ولكن نظرًا لأننا لم نقم بتشفير أي وظيفة ، فلن يفعل أي شيء في الواقع.

الخطوة 2: إضافة وظائف إلى البرنامج المساعد

في ملف PHP الخاص بالمكون الإضافي الخاص بك ، أضف الكود التالي:

 add_action( 'the_content', 'myButton' ); function myButton ( $content ) { return $content .= '<button class="btn">My Button</button>'; }

ما يفعله هذا الجزء من الكود هو أنه يستخدم الخطاف "add_action ()" لإضافة وظيفة رد الاتصال "myButton". هذا يعني أنه سيتم تنفيذ وظيفة "myButton" جنبًا إلى جنب مع الوظائف الأساسية الافتراضية التي يتم تنفيذها في كل مرة يتم فيها استدعاء إجراء "the_content".

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

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

الخطوة 3: تنقيح البرنامج المساعد الخاص بنا

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

تغيير النص المعروض على الزر

هذا سهل للغاية. فقط قم بتحرير النص بعد علامة <button class = ”btn”>. في حالتنا ، قمنا بتغيير هذا إلى "أدخل السحب المجاني على الجوائز!"

 add_action( 'the_content', 'myButton' ); function myButton ( $content ) { return $content .= '<button class="btn">Enter our FREE Prize Draw!</button>'; }

إضافة ارتباط إلى الزر

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

 add_action( 'the_content', 'myButton' ); function myButton ( $content ) { return $content .= '<a href="YOURDOMAIN.URL/contact/"><button class="btn">Enter our FREE Prize Draw!</button></a>'; }

بدلاً من ذلك ، يمكنك استخدام ما يُعرف باسم url النسبي والذي يعتبر الطريقة "الصحيحة" لإضافة عناوين url في WordPress.

 add_action( 'the_content', 'myButton' ); function myButton ( $content ) { return $content .= '<a href="/contact/"><button class="btn">Enter our FREE Prize Draw!</button></a>'; }

وها نحن مستعدون لجذب جهات اتصال جديدة باستخدام زر CTA المخصص الخاص بنا.

استنتاج

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

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

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