Question

我已经为此尝试了几种解决方案，但它们都没有奏效我设法将导航列表设置为<select><option>列表，但不仅包含页面名称，而且没有任何URL的指示

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

（理想的解决方案是网页在value中显示为option，因此我可以使用JavaScript进行网页导航。

Answer 1

如果您还没有自定义脚本加载器，请在主题的functions.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仪表板中，转到Appearance-＆gt; My Custom Widgets，创建一个新的小部件（给它起一个名字，选择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>

然后，在Appearance-＆gt; Widgets下，将新的自定义窗口小部件添加到您希望的位置。

在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 Hoffman列出的jQuery，可以得到我认为你正在寻找的东西。

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

这个例子应该是最好的例子（除了内联的javascript）。

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

2 个答案: