it-swarm.cn

显示一个 WP 3.0自动导航HTML选择中的自定义菜单?

作为客户主题的一部分,我希望能够显示自定义菜单(通过管理员定义)在更改选择后自动更改页面的选择框中

是否有一个插件(或一个方便的代码片段)来实现这一目标?

3
Keith S.

WordPress的新菜单系统既奇妙又令人沮丧,取决于你想要做什么以及它恰好是一周的哪一天。 :)这是一个好主意,但远非成熟,所以虽然这是一个我鼓掌的功能,当Word3的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_itemwp_get_nav_menu_items()间接调用get_posts()函数。 wp_get_nav_menu_items()的第一个参数是1.)菜单名称(我使用的是:“我的选择菜单”),2。)菜单项ID(即菜单项的帖子) ID数据库)或3.)一个菜单slug(来自菜单分类术语的slug; yes菜单是使用分类术语实现的,分类为'nav_menu'。)

Menu Configuration in WordPress 3.0
(来源: mikeschinkel.com

除了第一个参数,它转发到get_posts()$args的大多数(如果不是全部?)你传递给wp_get_nav_menu_items(),因此你可以把它当作自定义帖子类型(即使它们改进菜单API时可能不会更长期)这么棒的主意。但今天呢?在阳光普照的时候做干草!)

使用meta_keymeta_value过滤菜单项

WordPress对菜单项的帖子的底层使用是我们可以查询meta_keymeta_value的原因; WordPress使用前缀为meta_keys的一系列_menu_item来获取每个菜单项所需的附加信息。对于与WordPress“Page”帖子类型相对应的每个菜单项,_menu_item_object将包含page。 (如果你想要包括除了Pages之外的项目,你需要做比我在这里做的更多的研究,但至少我给了你自己做研究所需的工具。)

这是一个截图,使用 Navicat for MySQL 查询显示几个nav_menu_items的元记录:

Menu Item Configuration found in wp_postmeta with WordPress 3.0
(来源: mikeschinkel.com

get_post_link()抓取Page的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设置为空字符串将无效,这正是我们想要的,它不需要我们编写异常代码。 中提琴!

<?php
    $selector[] = '<option value="">Select a Page</option>';
  1. 选择“选择页面”触发器"onchange"只能在浏览器上导航到不会触发页面重新加载的页面,而之前已经选择了另一个选项,但它可以仍然发生,所以我们应该解决它。
8
MikeSchinkel