it-swarm-id.com

Tampilkan a WP 3.0 Menu Kustom dalam Pilih HTML dengan Navigasi Otomatis?

Sebagai bagian dari tema untuk klien, Saya ingin dapat menampilkan menu khusus (didefinisikan melalui admin) dalam kotak pilih yang secara otomatis mengubah halaman setelah mengubah pilihan .

Apakah ada plugin (atau cuplikan kode praktis) yang akan menyelesaikan ini?

3
Keith S.

Sistem menu baru WordPress luar biasa dan sangat membuat frustrasi , tergantung pada apa yang Anda coba lakukan dan hari apa dalam seminggu itu terjadi. :) Ini ide yang bagus tapi jauh dari matang jadi sementara ini fitur yang saya salut saya akan lebih bahagia ketika v3.3 atau v3.4 WordPress diluncurkan dan kami mendapatkan lebih banyak kasus penggunaan yang didukung langsung oleh sistem menu API .

Yang mengatakan, tidak yakin apakah ada plugin yang ada untuk melakukan apa yang Anda cari, tetapi bagaimana dengan kode yang Anda butuhkan untuk menulis plugin Anda sendiri? Atau Anda bisa memasukkannya dalam file functions.php tema Anda; apa pun preferensi Anda.

Apa yang saya berikan adalah contoh lengkap yang dapat Anda simpan sebagai test.phpin dalam direktori root situs web Anda untuk mengujinya. Jika domain Anda example.com Anda akan memuat untuk menguji di:

http://example.com/test.php

Begini tampilannya saat beraksi:

Inactive drop down of Pages from WordPress 3.0 Menu
(sumber: mikeschinkel.com )
Active drop down of Pages from WordPress 3.0 Menu
(sumber: mikeschinkel.com )

Dari kode di bawah ini seharusnya mudah untuk menggabungkan fungsi get_page_selector() ke dalam tema Anda dan menyebutnya kapan pun Anda membutuhkan fungsi ini:

<?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);
}

Jadi Anda mungkin bertanya-tanya bagaimana cara kerjanya?

Fungsi wp_get_nav_menu_items()

WordPress 3.0 menyimpan menu-menu itu di tabel wp_posts sebagai post_type jenis nav_menu_item. Fungsi wp_get_nav_menu_items() secara tidak langsung hanya memanggil fungsi get_posts(). Parameter pertama ke wp_get_nav_menu_items() adalah 1.) nama menu (yang saya gunakan: "My Select Menu" ), 2.) ID item menu (yaitu pos item menu) ID database) atau 3.) menu slug (siput dari istilah taksonomi menu; ya menu diimplementasikan menggunakan istilah taksonomi dengan taksonomi 'nav_menu'.)

Menu Configuration in WordPress 3.0
(sumber: mikeschinkel.com )

Melampaui parameter pertama, ia meneruskan ke get_posts() sebagian besar (jika tidak semua?) Dari $args Anda beralih ke wp_get_nav_menu_items() sehingga Anda dapat memperlakukannya seperti jenis posting khusus (meskipun jangka waktu yang lebih lama ketika mereka meningkatkan menu API yang mungkin tidak akan ide yang sangat bagus. Tapi hari ini? Buatlah jerami sementara Matahari bersinar!)

Memfilter Item Menu dengan meta_key dan meta_value

Penggunaan tulisan yang mendasari WordPress untuk item menu adalah alasan kami dapat meminta meta_key dan meta_value; WordPress menggunakan serangkaian meta_keys yang diawali dengan _menu_item untuk informasi tambahan yang dibutuhkan untuk setiap item menu. _menu_item_object akan berisi page untuk setiap item menu yang sesuai dengan jenis posting WordPress "Page" . (Jika Anda ingin memasukkan item selain Halaman, Anda perlu melakukan sedikit lebih banyak riset daripada yang saya lakukan di sini, tetapi setidaknya saya memberi Anda alat yang Anda butuhkan untuk melakukan riset sendiri.)

Berikut screenshot yang menggunakan Navicat untuk MySQL dari kueri yang menunjukkan catatan meta untuk beberapa nav_menu_items:

Menu Item Configuration found in wp_postmeta with WordPress 3.0
(sumber: mikeschinkel.com )

Meraih URL Halaman dengan get_post_link()

Selanjutnya saya akan menunjukkan bahwa mendapatkan URL halaman dari fungsi get_post_link() dan bahwa saya sedang mengatur HTML <option>'s value menjadi URL ...

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

Menggunakan onchange dari Javascript untuk Menavigasi ke Halaman Pilihan kami

... Sehingga saya dapat mengambilnya dari properti value dari elemen 'page-selector'<select> dan menetapkannya ke location.href. Menetapkan location.href menyebabkan browser untuk segera menavigasi ke URL baru, dan itu, singkatnya, adalah bagaimana semuanya dilakukan:

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

Empty value="" sebagai Opsi Default

Anda mungkin memperhatikan bahwa opsi "Select a Page" memiliki nilai kosong; itu bukan kesalahan melainkan desain. Ketika dipilih dan "onchange" dipicu1 pengaturan location.href ke string kosong tidak akan berpengaruh, yang persis seperti yang kita inginkan dan tidak mengharuskan kita untuk menulis kode pengecualian. Viola!

<?php
    $selector[] = '<option value="">Select a Page</option>';
  1. Memiliki pilihan "Pilih halaman" memicu "onchange" hanya dapat terjadi pada navigasi kembali browser ke halaman yang tidak memicu memuat ulang halaman di mana opsi lain sebelumnya telah dipilih, tetapi dapat masih terjadi jadi kita harus mengatasinya.
8
MikeSchinkel