it-swarm.asia

عرض WP 3.0 قائمة مخصصة في HTML حدد مع التنقل التلقائي؟

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

هل هناك مكون إضافي (أو مقتطف رمز مفيد) من شأنه إنجاز هذا؟

3
Keith S.

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

ومع ذلك ، لست متأكداً مما إذا كان هناك مكون إضافي موجود للقيام بما تبحث عنه ، ولكن ماذا عن الكود الذي تحتاجه لكتابة المكون الإضافي الخاص بك؟ أو يمكنك تضمينه فقط في ملفك الخاص بـ functions.php ؛ مهما كان تفضيلك.

ما أقدمه هو مثال قائم بذاته بالكامل يمكنك حفظه كـ test.php في دليل جذر موقع الويب الخاص بك لاختباره. إذا كان نطاقك example.com ، فسيتم تحميله للاختبار على:

http://example.com/test.php

إليك ما يبدو عليه في العمل:

Inactive drop down of Pages from WordPress 3.0 Menu
(المصدر: mikeschinkel.com )
Active drop down of Pages from WordPress 3.0 Menu
(المصدر: mikeschinkel.com )

من الكود أدناه ، سيكون من السهل دمج وظيفة get_page_selector() في نسقك والاتصال بها كلما احتجت إلى هذه الوظيفة:

<?php

  include "wp-load.php";
  echo 'Jump to:';
  echo get_page_selector('My Select Menu');

function get_page_selector($menu) {
  $page_menu_items = wp_get_nav_menu_items($menu,array(
    'meta_key'=>'_menu_item_object',
    'meta_value'=>'page',
  ));
  $selector = array();
  if (is_array($page_menu_items) && count($page_menu_items)>0) {
    $selector[] =<<<HTML
<select id="page-selector" name="page-selector"
    onchange="location.href = document.getElementById('page-selector').value;">
HTML;
    $selector[] = '<option value="">Select a Page</option>';
    foreach($page_menu_items as $page_menu_item) {
      $link = get_page_link($page_menu_item->object_id);
      $selector[] =<<<HTML
<option value="{$link}">{$page_menu_item->title}</option>
HTML;
  }
    $selector[] = '</select>';
  }
  return implode("\n",$selector);
}

لذلك قد تتساءل كيف يعمل؟

وظيفة wp_get_nav_menu_items()

يخزّن WordPress 3.0 قوائمه في جدول wp_posts كنوع post_type من nav_menu_item. wp_get_nav_menu_items() بشكل غير مباشر فقط باستدعاء الدالة get_posts(). المعلمة الأولى لـ wp_get_nav_menu_items() هي إما 1.) اسم قائمة (وهو ما استخدمته: "قائمة اختيار بلدي" ) ، 2.) معرف عنصر قائمة (أي منشور عنصر القائمة ID قاعدة البيانات) أو 3.) سبيكة قائمة (سبيكة من مصطلح تصنيف القائمة ؛ نعم يتم تنفيذ القوائم باستخدام مصطلحات التصنيف مع تصنيف 'nav_menu'.)

Menu Configuration in WordPress 3.0
(المصدر: mikeschinkel.com )

بعد المعلمة الأولى ، يتم إعادة التوجيه إلى get_posts() أكثر (إن لم يكن كل ذلك) من $args التي تمر بها إلى wp_get_nav_menu_items() وبالتالي يمكنك التعامل معها كنوع منشور مخصص (على الرغم من المدى الطويل عند تحسين واجهة برمجة تطبيقات القائمة والتي من المحتمل ألا تكون هذه فكرة رائعة ، ولكن اليوم؟ اجعل القش في حين تشرق الشمس!)

تصفية عناصر القائمة باستخدام meta_key و meta_value

الاستخدام الأساسي لـ WordPress لمشاركات عناصر القائمة هو السبب في أنه يمكننا الاستعلام عن meta_key و meta_value؛ يستخدم WordPress سلسلة من meta_keys مسبوقة بـ _menu_item للحصول على المعلومات الإضافية التي يحتاجها لكل عنصر قائمة. سيحتوي _menu_item_object على page لكل عنصر قائمة يتوافق مع نوع نشر WordPress "الصفحة" . (إذا كنت تريد تضمين عناصر إلى جانب الصفحات ، فستحتاج إلى إجراء بحث أكثر قليلاً مما فعلت هنا ولكن على الأقل أعطيتك الأدوات التي تحتاج إليها لإجراء البحث بنفسك.)

فيما يلي لقطة شاشة تستخدم Navicat لـ MySQL لاستعلام يعرض سجلات التعريف لعدة nav_menu_items:

Menu Item Configuration found in wp_postmeta with WordPress 3.0
(المصدر: mikeschinkel.com )

الاستيلاء على URL الصفحة مع get_post_link()

بعد ذلك ، سأشير إلى الحصول على عنوان URL للصفحة من وظيفة get_post_link() وأنني أقوم بتعيين HTML <option>value ليكون عنوان URL ...

<?php
    $link = get_page_link($page_menu_item->object_id);
    $selector[] =<<<HTML
<option value="{$link}">{$page_menu_item->title}</option>
HTML;

استخدام جافا سكريبت onchange للتنقل إلى الصفحة المختارة

... بحيث يمكنني الحصول عليها من خاصية value الخاصة بالعنصر 'page-selector'<select> وتعيينها إلى location.href. يؤدي تعيين location.href إلى أن يتصفح المستعرض على الفور إلى عنوان URL الجديد ، وهذا باختصار هو كيف يتم كل ذلك:

<?php
  $selector[] =<<<HTML
<select id="page-selector" name="page-selector"
    onchange="location.href = document.getElementById('page-selector').value;">
HTML;

إفراغ value="" كخيار افتراضي

قد تلاحظ أن الخيار الافتراضي "تحديد صفحة" له قيمة فارغة ؛ هذا ليس خطأ ولكن بدلاً من ذلك حسب التصميم. عند تحديده يتم تشغيل "onchange"1 لن يكون لإعداد location.href لسلسلة فارغة أي تأثير ، وهو بالضبط ما نريده ولا يتطلب منا كتابة رمز استثناء. فيولا!

<?php
    $selector[] = '<option value="">Select a Page</option>';
  1. لا يمكن أن يحدث تحديد "تحديد صفحة" للمشغل "onchange" إلا على متصفح يعيد التنقل إلى صفحة لا تؤدي إلى إعادة تحميل الصفحة حيث تم تحديد خيار آخر مسبقًا ، ولكن يمكن لا يزال يحدث لذلك يجب علينا معالجته.
8
MikeSchinkel