在具有自动导航功能的HTML选择中显示WP 3.0自定义菜单?

时间:2010-08-24 作者:Keith S.

作为客户主题的一部分,I want to be able to show a custom menu (通过管理员定义)in a select box that automatically changes pages after changing the selection.

是否有一个插件(或一个方便的代码片段)可以实现这一点?

1 个回复
最合适的回答,由SO网友:MikeSchinkel 整理而成

WordPress\' new menu system is both wondrous and infinitely frustrating, 取决于你想做什么以及一周中的哪一天。:)这是一个很好的想法,但还远未成熟,所以虽然这是一个特性,但当v3出现时,我会更高兴。3或v3。WordPress的4个版本推出后,我们得到了菜单系统API直接支持的更多用例。

也就是说,不确定是否有一个现有的插件来完成您正在寻找的功能,但是how about the code you need to write you own plugin? 或者你可以把它包括在你的主题中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);
}
所以你可能想知道它是如何工作的?

Thewp_get_nav_menu_items() 功能WordPress 3.0将其菜单存储在wp_posts 表aspost_type 类型nav_menu_item. 这个wp_get_nav_menu_items() 间接打电话给get_posts() 作用第一个参数wp_get_nav_menu_items() 为1。)菜单名称(我使用的是:“我的选择菜单”),2。)菜单项ID(即菜单项的帖子ID 数据库)或3。)菜单slug(菜单分类术语中的slug;是菜单是使用分类术语实现的,分类为\'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 有关每个菜单项所需的其他信息。_menu_item_object 将包含page 对于与WordPress“Page”post类型相对应的每个菜单项。(如果你想包括页面以外的项目,你需要比我在这里做更多的研究,但至少我给了你自己做研究所需的工具。)

下面是使用Navicat for MySQL 显示多个nav_menu_items:

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

使用获取页面的URLget_post_link()

接下来我将指出,从get_post_link() 函数,我正在设置HTML<option>\'svalue 要成为URL。。。

<?php
    $link = get_page_link($page_menu_item->object_id);
    $selector[] =<<<HTML
<option value="{$link}">{$page_menu_item->title}</option>
HTML;
使用Javascriptonchange 要导航到所选页面。。。这样我就可以从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" 触发设置location.href 对于一个空字符串没有任何影响,这正是我们想要的,它不需要我们编写异常代码<中提琴

<?php
    $selector[] = \'<option value="">Select a Page</option>\';
选择“选择页面”触发器"onchange" 只能在浏览器返回导航到一个不会触发页面重新加载的页面时发生,而之前已选择了另一个选项,但这种情况仍然可能发生,因此我们应该解决它

结束

相关推荐

Adding goodies to themes

如何在主题更新时向Arjuna-X等主题添加内容而不丢失?儿童主题是一种很好的方式,还是有其他选择?如果新版本的主题对我添加的功能具有本机支持,该怎么办?