如何在<select>没有插件的情况下使导航成为列表？

Question

我已经为此尝试了几种解决方案，但没有一个奏效。
我设法将导航列表制作成<select><option>列表，但不仅没有页面名称，没有任何 URL 指示

任何想法如何在没有外部插件的情况下进行功能齐全的选择列表导航？

（理想的解决方案是页面URL在option中显示为value，以便我可以使用JavaScript进行页面导航）

Answer 1

如果您

还没有自定义脚本加载器，请在主题的函数中添加以下内容.php：

function addScripts() {
    if ( !is_admin() ) { 
        wp_register_script('navScript', get_template_directory_uri() . "/js/navScript.js")); 
        wp_enqueue_script('navScript');
}
}
add_action( 'wp_print_scripts', 'addScripts');

在您的WordPress仪表板中，转到外观>我的自定义小部件，创建一个新的小部件（给它一个名字，选择HTML作为类型），并添加你的版本（省略div，因为您可以根据自己的喜好包含/样式）：

<form>
    <select id="superNav">
        <option value="">Choose a destination...</option>
        <option value="http://www.yahoo.com/">YAHOO</option>
        <option value="http://www.google.com/">GOOGLE</option>
        <option value="http://www.amazon.com/">AMAZON</option>
    </select>
</form>

然后，在外观>小部件下，将新的自定义小部件添加到您希望它放置的任何位置。

在 navScript 中.js（在相应的模板 JS 目录中，如上所述），您可以添加类似于以下代码的代码。我正在使用jQuery执行此操作，但是使用addEventListener（）可以轻松地将其重新用于纯JavaScript：

$(document).ready(function() {
    $('#superNav').change(function() {
        var curUrl = $("option:selected", this).val();
        if (curUrl) {
            window.open(curUrl, '_top')
        }
    });

Answer 2

您可以尝试使用get_pages( $args )函数来获取页面列表及其各自的链接。 然后使用@Spencer霍夫曼列出的jQuery应该得到我相信你正在寻找的东西。

http://codex.wordpress.org/Function_Reference/get_pages#Displaying_pages_in_dropdown_list

这个例子应该是一个完美的例子（除了内联javascript）。