web-dev-qa-db-ja.com

を表示 WP 3.0 HTMLのカスタムメニュー自動ナビゲーションで選択しますか？

クライアントのテーマの一部として、カスタムメニューを表示できるようにしたい（管理者によって定義された）選択を変更した後にページを自動的に変更する選択ボックス内。

これを達成するプラグイン（または便利なコードスニペット）はありますか？

customizationthemestheme-developmentmenus
3
Keith S.

WordPressの新しいメニューシステムは、何をしようとしているのか、そして何曜日になるのかにもよりますが、不思議でありながら無限にイライラするものです。 :)これは素晴らしいアイデアですが、成熟しているとは言い難いので、WordPressのv3.3またはv3.4がリリースされ、メニューシステムのAPIによって直接サポートされるもっと多くのユースケースが得られると嬉しくなるでしょう。 。

そうは言っても、あなたが探しているものを実行するための既存のプラグインがあるかどうかわからないが、あなたがあなた自身のプラグインを書くために必要なコードはどうですか？テーマの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）メニュー名（これは私が使ったものです。 "My Select Menu"）、2.）メニューアイテムID（つまり、メニューアイテムの投稿）です。 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には、WordPressの "Page"投稿タイプに対応するすべてのメニュー項目のpageが含まれます。 （Pages以外のアイテムを含めたい場合は、ここで行ったよりももう少し調査を行う必要がありますが、少なくとも自分で調査を行うために必要なツールを提供しました。）

これは、 Navicat for MySQL を使用して、いくつかのnav_menu_itemsのメタレコードを表示するクエリのスクリーンショットです。

Menu Item Configuration found in wp_postmeta with WordPress 3.0
（出典： mikeschinkel.com ）

get_post_link()でページのURLをつかむ

次に、get_post_link()関数からページのURLを取得し、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;

Javascriptのonchangeを使用して選択したページに移動する

... 'page-selector'<select>要素のvalueプロパティから取得し、それを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を空の文字列に設定しても効果はありません。これはまさに私たちが望むものであり、例外コードを書く必要はありません。 Viola！

<?php
    $selector[] = '<option value="">Select a Page</option>';
  1. "ページを選択"トリガー"onchange"を選択することは、以前に別のオプションが選択されていたページの再読み込みをトリガーしないページへのブラウザバックナビゲーションでのみ発生する可能性があります。まだ起きているのでそれに取り組むべきです。
8
MikeSchinkel