دروس ووردبرس]: كيفية إنشاء البرنامج المساعد للتجارب

محدث: 12 أغسطس 2013 / مقال: روتشستر أوليفيرا

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

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

دعونا نبدأ بعد ذلك!

الرمز البريدي والتثبيت

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

ستحتاج إلى إضافة بعض البيانات ، من خلال إضافة بعض الشهادات باستخدام شهادات العلامة التجارية الجديدة التي يمكنك رؤيتها في لوحة التحكم:

list-testimonials

بعد ذلك ، يمكنك استخدام الرمز القصير الأساسي لتحميل ذلك:

[testimonials rand = 0 max = 5]

عندما تضيف هذا الرمز ، سترى شيئًا كهذا في صفحتك:

main-testimonials

سنرى الآن كيفية إنشاء واستكشاف هذا (بإضافة المزيد من الوظائف وتغيير الشكل).

أساسيات

كما قلنا من قبل ، ستحتاج إلى إضافة بيانات التعريف الخاصة بالرأس ، قم بإنشاء ملف ملحق وقم باستدعاء البرامج النصية الخاصة بك. قصة قصيرة طويلة ، ستنشئ مجلدًا جديدًا ضمن محتوى wp-content / plugins مع اسم المكوّن الإضافي ، ثم تنشئ ملفًا يحمل نفس اسم المجلد ليكون الملف الإضافي الرئيسي.

بمجرد الانتهاء من هذه النسخة ولصقها على النحو التالي:

<?php
/*
Plugin Name: Testimonials
Description: Display customer testimonials.
Version: 1.0
Author: Web Revenue Blog
License: GPL2
*/

//enqueueing scripts and styles
function plugin_scripts(){
    wp_enqueue_script('jquery');
    wp_enqueue_script('flexslider', plugins_url( 'js/jquery.flexslider-min.js' , __FILE__ ), array('jquery'), '2.2', false);
    wp_enqueue_script('testimonials', plugins_url( 'js/testimonials.js' , __FILE__ ), array('jquery'), '1.0', false);
    wp_enqueue_style('flexsliderCSS', plugins_url( 'css/flexslider.css' , __FILE__ ), false, '2.2', 'all' );
    wp_enqueue_style('testimonialsCSS', plugins_url( 'css/testimonials.css' , __FILE__ ), false, '1.0', 'all' );
}
add_action("wp_enqueue_scripts","plugin_scripts");

إليك ما نفعله:

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

الأمر كله رائع ، ولكن لا تنسى إنشاء الملفات تحت / js و / css. يمكنك فقط تنزيلها في محتواها التجريبي حتى لا تحتاج إلى حفر الكثير للعثور على ملفات flexslider.

الآن لدينا كل الأشياء الأساسية في مكان يمكننا أن نبدأ الجزء مضحك.

نوع مخصص النشر

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

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

// السحر الأسود لإنشاء وظيفة نوع المنشور create_post_type () {register_post_type ('testimonials'، // مصفوفة نوع المنشور الجديد ('labels' => array ('name' => __ ('Testimonials')، 'singular_name' => __ ('Testimonial'))، 'public' => true، / * نوع المنشور مخصص للاستخدام العام. وهذا يشمل الواجهة الأمامية وفي wp-admin. * / 'support' => array ('title '،' editor '،' thumbnail '،' custom_fields ')،' hierarchical '=> false))؛ }

نحن هنا فقط نستخدم وظيفة register_post_type () لإخبار WP "Hey Buddy ، نحتاج إلى تخزين هذا النوع من البيانات ، يرجى أن تكون مستعدًا لاستلامها".

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

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

add_action ('init' ، 'create_post_type')؛

الحقول المخصصة

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

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

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

// إضافة وظيفة حقل مربع التعريف لعنوان URL add_custom_metabox () {add_meta_box ('custom-metabox'، __ ('Link')، 'url_custom_metabox'، 'testimonials'، 'side'، 'low')؛ } add_action ('admin_init'، 'add_custom_metabox') ؛

تتطلب الوظيفة add_meta_box () هذه المعلمات:

  1. رقم التعريف - المعرف الفريد له. يمكنك استخدام أي شيء فريد هنا مثل "rainbow-eating-rainbow" أو "linkimonial-link". أي شيء يمكن استخدامه داخليا
  2. العنوان - ما الذي سيتم عرضه للمستخدم؟ من المهم استخدام الدالة __ () ، وهي الوظيفة التي تسمح للمستخدمين من اللغات الأجنبية بترجمة المكون الإضافي مع ملفات .po (بدون تحرير ملفات المكونات الإضافية)
  3. رد الاتصال - الوظيفة التي لديك فيها المحتويات الفعلية لل metabox
  4. نوع المشاركة - في حالتنا نحن نريد أن يكون مرئيًا فقط للشهادات
  5. السياق - في الصفحة التي تريد إظهارها
  6. الأولوية - إذا كان يجب أن تكون قبل العناصر الأخرى من نفس الموضع أو بعده

الآن نحن بحاجة إلى إنشاء الدالة url_custom_metabox () ، لأننا نسميها.

// HTML لوظيفة منطقة الإدارة url_custom_metabox () {global $ post؛ $ urllink = get_post_meta ($ post-> ID، 'urllink'، صحيح)؛ // التحقق! if (! preg_match ("/ http (s؟): ///"، $ urllink) && $ urllink! = "") {$ errors = "عنوان URL هذا غير صالح"؛ $ urllink = "http: //" ؛ } // إخراج رسالة url غير مفعلة وإضافة http: // إلى حقل الإدخال if (isset ($ errors)) {echo $ errors؛ }؟> URL: " />

حسنا ، الآن ترجمة هذا إلى سهل الإنجليزية:

  • يتم استدعاء المتغير العالمي $ post ، حتى نتمكن من معرفة ما هو POSTID للعنصر الحالي
  • نقوم بتحميل القيمة الحالية لعنوان URL
  • نحن التحقق من الصحة إذا كانت القيمة التي أدخلها المستخدم صالحة. إذا كان هناك ظهور "http" أو "https" واحد على الأقل ، تكون القيمة "موافق" ، وإلا سيكون صالحًا ونحتاج إلى استخدام القيمة الافتراضية
  • ثم نعرض الأخطاء ، إذا كان هناك أي أخطاء
  • الآن نبدأ HTML الفعلي ، بإضافة القيمة الافتراضية في حقل الإدخال كما حصلنا في PHP

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

// يحفظ دالة بيانات الحقل المخصصة save_custom_url ($ post_id) {global $ post؛ if (isset ($ _ POST ['siteurl'])) {update_post_meta ($ post-> ID، 'urllink'، $ _POST ['siteurl'])؛ }} add_action ('save_post'، 'save_custom_url') ؛

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

بعد وضع كل شيء في مكانه ، إليك الشكل الذي ستبدو عليه صفحة الشهادة الجديدة:

new-testimonial

تحميل البيانات المخصصة لدينا

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

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

// إرجاع URL لوظيفة المنشور get_url ($ post) {$ urllink = get_post_meta ($ post-> ID، 'urllink'، true) ؛ عودة urllink دولار؛ }

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

// تسجيل الكود المختصر لإظهار وظيفة الشهادات load_testimonials ($ a) {$ args = array ("post_type" => "testimonials") ؛ if (isset ($ a ['rand']) && $ a ['rand'] == true) {$ args ['orderby'] = 'rand'؛ } if (isset ($ a ['max'])) {$ args ['posts_per_page'] = (int) $ a ['max']؛ } // الحصول على كل الشهادات $ posts = get_posts ($ args)؛ // HTML OUTPUT} add_shortcode ("الشهادات" ، "load_testimonials") ؛

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

الآن نحن بحاجة إلى إضافة بعض كود HTML هناك ، بعد الهيكل الافتراضي flexslider. إليك كيف ستبدو:

صدى صوت ' "؛ صدى صوت ' "؛ foreach (منشورات $ كـ $ post) {// الحصول على صورة مصغرة $ url_thumb = wp_get_attachment_thumb_url (get_post_thumbnail_id ($ post-> ID)) ؛ رابط $ = get_url ($ post) ؛ صدى صوت ' "؛ إذا (! فارغ ($ url_thumb)) {echo ' "؛ }          صدى صوت ' ". $ post-> post_title." "؛ if (! blank ($ post-> post_content)) {echo ' ". post-> post_content." "؛ } if (! blank ($ link)) {echo ' قم بزيارة الموقع "؛ }       صدى صوت ' "؛ }    صدى صوت ' "؛ صدى صوت ' "؛

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

ماذا عن الشريط الجانبي؟

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

add_filter ('widget_text'، 'do_shortcode')؛

ما هي الخطوة التالية؟

هل استمتعت بهذا البرنامج التعليمي؟ ما الذي تضيفه كخيار للشفرة القصيرة الخاصة بك؟ هل لديك أي أفكار لمشاركات مستقبلية؟ أعلمنا باستخدام قسم التعليقات!

حول روتشستر أوليفيرا

أنا مصمم على شبكة الإنترنت ورجل أعمال من Itajubá (MG) ، البرازيل. أحب الكتابة عن المواضيع الغامضة والقيام ببعض الأشياء الرائعة.