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

المادة التي كتبها:
  • الواردة التسويق
  • تم التحديث: Sep 15 ، 2014

ملاحظة: لم نعد ندعم هذا المكون الإضافي لـ WP حيث أن المؤلف لا يكتب لنا في الوقت الحالي.

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

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

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

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

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

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

[flip_book ids = "78 79 78 79 79 78 78 79 79 78" width = "300" height = "225" display = "double"]

معاينة سريعة

وهذا هو نوع النتيجة التي ستحصل عليها:

تأثير كتاب الوجه

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

رأس

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

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

/ * اسم البرنامج المساعد: FlipBook Gallery الوصف: إنشاء رمز قصير لمعارض دفتر الملاحظات. الإصدار: 1.0 المؤلف: Web Revenue Blog License: GPL2 * /

بسيطة جدا ، هاه؟ بمجرد إنشاء هذا الملف ، ستشاهد المكون الإضافي في القائمة ضمن مشرف WP> الإضافات ، ويمكنك تنشيطه (ولكن إذا كان لديك هذا المحتوى في ملفك فلن يؤدي ذلك إلى تغيير الكثير من موقعك).

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

الآن نحن بحاجة إلى تضمين بعض الأصول الخارجية الهامة هنا. الملفات الخارجية المطلوبة للوظائف الأساسية هي:

  • jQuery (1.9 +)
  • برنامج Turn.js النصي
  • تحويل التصميم الأساسي

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

لهذا السبب يجب علينا دائمًا استخدام الدالتين wp_enqueue_script و wp_enqueue_style. هنا هو الاستخدام الأساسي:

function plugin_scripts () {wp_enqueue_script ('jquery')؛ wp_enqueue_script ('turn'، plugins_url ('js / turn.js'، __FILE__)، array ('jquery')، '1.3'، false)؛ wp_enqueue_style ('turnCSS'، plugins_url ('css / style.css'، __FILE__)، false، '1.3'، 'all')؛ }

نحن نتصل بالعناصر الخارجية في 3 بطرق مختلفة ، ها هي:

  • استدعاء عنصر حالي: jQuery - لا نحتاج إلى تمرير الكثير من المعلمات إذا كنا نعرف على يقين من أن WordPress بالفعل تحميل هذا البرنامج النصي ، نحن فقط نقول له "المتأنق ، يجب أن يكون هذا البرنامج النصي هنا وإلا لن رمز لدينا عمل"
  • إنشاء نص برمجي جديد - ستحتاج إلى تمرير بعض السمات مثل الاسم ، وموقع الملف ، والعناصر المطلوبة (في هذه الحالة تتطلب jQuery) ، والإصدار ، وإذا تم تحميله في التذييل أو الرأس (false = header، true = footer)
  • إنشاء نمط جديد - تمامًا مثل النمط السابق ، مع وجود اختلاف بسيط في السمة الأخيرة ، والذي يحدد نوع الوسائط هذا النمط إذا كان

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

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

بعد هذه الشفرة اللطيفة ، نحتاج إلى إخبار WordPress بتحميلها على هيئة نصوص ، فإن الإجراء "wp_enqueue_scripts" سيفعل ذلك:

add_action ('wp_enqueue_scripts'، 'plugin_scripts')؛

رمز قصير

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

add_shortcode ( "flip_book"، "create_flip_book")؛

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

العمليات الثلاثية هي نوع من إذا كانت البيانات مباشرة في قيمة المتغير. إذا اتبعت هذا الهيكل:

المتغير $ = (CONDITION)؟ "VALUE IF CONDITION IS TRUE": "VALUE IF CONDITION FALSE"؛

يمكنك رؤيتها في العمل في الجزء الأول من وظيفتنا:

function create_flip_book ($ attr) {// Preparing the IDs to be processed $ array ['ids'] = explode (""، $ attr ['ids'])؛ // display mode $ array ['display'] = empty ($ attr ['display'])؟ "single": $ attr ['display']؛ // standard value // width $ array ['width'] = empty ($ attr ['width'])؟ 400: $ attr ['width']؛ // height $ array ['height'] = empty ($ attr ['height'])؟ 300: $ attr ['height']؛
    // HTML والباقي من التعليمات البرمجية يذهب هنا}

ثم سنحتاج إلى إنشاء HTML ، والدعوة الأساسية لصورنا. النقطة المهمة الأخرى هنا هي ضبط الحجم إذا كنا نستخدم نمط المجلة (يجب أن يكون 2x العرض لأننا سنحصل على صور 2 بدلاً من واحدة):

<؟ php if ($ array ['display'] == "double") {$ array ['width'] = $ array ['width'] * 2؛ } // HTML و JS و Black Magic؟> <div id = "flipbook"> <؟ php لـ ($ i = 0؛ $ i <sizeof ($ array ['ids'])؛ $ i ++) {؟> < div> <؟ php echo wp_get_attachment_image ($ array ['ids'] [$ i]، 'full')؛ إذا ($ array ['display'] == "single") {؟> <span> <؟ = "". ($ i + 1)؟ / /؟ echo "" .sizeof ($ array ['ids'])؟> </ span> <؟ php} else {؟> <spanright ":" left ")؛؟>"> <؟ php echo "". ($ ط + 1)؟> / <؟ echo "" .sizeof ($ array ['ids'])؛ ؟> </ span> <؟ php}؟> </ div> <؟ php}؟> </ div> <script type = "text / javascript"> jQuery ("# ​​flipbook"). turn ({width: < ؟ php echo $ array ['width']؛؟>، height: <؟ php echo $ array ['height']؛؟>، autoCenter: true، display: '؟؟ php echo $ array [' display ']؛ ؟> '، // تسريع الصفحة الواحدة أو الصفحة المزدوجة: true، gradients:! jQuery.isTouch،})؛ </ script>

ما رأيك؟

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

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

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

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

الاتصال: