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

المادة التي كتبها:
  • وورد
  • تحديث: Aug 12 و 2013

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

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

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

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

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

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

شهادات-قائمة

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

[testimonials rand = 0 max = 5]

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

الرئيسية-الشهادات

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

أساسيات

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

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

<؟ php / * اسم البرنامج المساعد: الشهادات الوصف: عرض شهادات العملاء. الإصدار: 1.0 المؤلف: 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 لا يحتوي على مكان مضمن لتخزين ذلك ، لذا نحتاج إلى إنشاء ذلك. لا تخف جندبًا صغيرًا ، إنه بسيط جدًا ، يمكنك استخدام هذا الرمز:

// the black magic to create the post type function create_post_type () {register_post_type ('testimonials'، // new post type array ('labels' => array ('name' => __ ('Testimonials')، 'singular_name' => __ ('Testimonial')) ، 'public' => true ، / * نوع النشر مخصص للاستخدام العام ، وهذا يشمل على الواجهة الأمامية وفي wp-admin. * / 'supports' => array ('title) '،' editor '،' thumbnail '،' custom_fields ')،' hierarchical '=> false))؛ }

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

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

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

add_action ('init' ، 'create_post_type')؛

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

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

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

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

// add the field meta box field function 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'، true)؛ // التأكد من صحتها! إذا (! preg_match ("/ http (s؟): ///"، $ urllink) && $ urllink! = "") {$ errors = "عنوان URL هذا غير صالح"؛ $ urllink = "http: //"؛ } // output invlid message url وأضف http: // إلى حقل الإدخال إذا (isset ($ أخطاء)) {echo $ error؛ }؟> <p> <label for = "siteurl"> URL: <br /> <input id = "siteurl" size = "37" name = "siteurl" value = "<؟ php if (isset ($ urllink) ) {echo $ urllink؛}؟> "/> </label> </p> <؟ php}

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

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

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

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

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

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

جديد-شهادة

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

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

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

// return URL لوظيفة post get_url (مشاركة $) {$ urllink = get_post_meta ($ post-> ID، "urllink"، true)؛ return $ urllink؛ }

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

// تسجيل الرمز القصير لإظهار وظيفة الشهادات load_testimonials ($ a) {$ args = array ("post_type" => "testimonials")؛ إذا (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 ("testimonials"، "load_testimonials")؛

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

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

صدى "<div>" ؛ صدى '<ul>' ؛ foreach ($ posts as $ post) {// getting thumb image $ url_thumb = wp_get_attachment_thumb_url (get_post_thumbnail_id ($ post-> ID))؛ $ link = get_url (مشاركة $) ؛ صدى '<li>' ؛ if (! empty ($ url_thumb)) {echo '<img src = "'. $ url_thumb. '" />'؛ } echo '<h2>'. post post-> post_title. '</ h2>'؛ إذا كانت (! فارغة ($ post-> post_content)) {echo '<p>'. $ post-> post_content. '<br />'؛ } إذا كانت (! فارغة ($ link)) {echo '<a href="'.$link.'"> زيارة الموقع </a> </ p>'؛ } صدى '</ li>' ؛ } صدى '</ ul>' ؛ صدى "</ div>" ؛

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

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

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

add_filter ('widget_text'، 'do_shortcode')؛

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

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

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

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

الاتصال: