带有 Wordpress 的 Slicknav

Posted 2023-05-09

【中文标题】带有 Wordpress 的 Slicknav

【英文标题】：Slicknav with Wordpress

【发布时间】：2014-08-31 00:12:03

【问题描述】：

我正在尝试在 Wordpress 上使用 SlickNav 和自定义主题。我觉得我已经尽了一切努力让它发挥作用，却找不到任何有类似问题的人。该网站还没有上线，所以恐怕我没有链接可以分享。

首先，我按照插件网站上的说明安装了 SlickNav（在添加与 Wordpress 相关的代码之前工作得很好），然后我尝试为 Wordpress 修改它。在我的functions.php中，我添加了“菜单”的ul ID：

    

add_action( 'init', 'register_my_menus' );
function register_my_menus() 
register_nav_menus(

array(

'main-menu' => __( 'Main Menu' ),
'menu_id'         => 'menu'

    )
);

在我的 header.php 中添加了以下内容，在 head 标记内但在调用 wp_head 之前和 body 标记之前：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<link rel="stylesheet" href="<?php bloginfo("template_url"); ?>/css/slicknav.css" />
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.slicknav.min.js"></script>

并在调用 wp_footer 和关闭 body 标记之前将其添加到我的 footer.php 中：

<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.slicknav.js">
$(document).ready(function()
$('#menu').slicknav();
prependTo:'#demo1'
);
</script>

我尝试将 <?php bloginfo("template_url"); ?> 替换为我在 Wordpress 论坛上找到的所有变体；甚至用指向目录的硬链接替换它，但没有任何效果。

然后我删除了所有这些，并将其添加到我的functions.php中：

function slicknav_scripts() 
wp_enqueue_script( 'jquery' );
wp_register_script( 'jqueryui', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
wp_enqueue_script( 'jqueryui' );
wp_register_script( 'slicknav', get_template_directory_uri().'/js/jquery.slicknav.min.js');
wp_enqueue_script( 'slicknav' );
wp_register_style('slicknavcss',get_template_directory_uri().'/css/slicknav.css');
wp_enqueue_style('slicknavcss');
  
add_action('wp_enqueue_scripts', 'slicknav_scripts');

并将其添加到我的 header.php；当这不起作用时，我将其删除并将其添加到我的footer.php：

<script type="text/javascript">
jQuery('#myelement').slicknav();
</script>

当这不起作用时，我删除了所有内容，回到第一格，但删除了<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>，假设这可能是一个 jquery 问题。但这没有用。

在这一点上，我几乎尝试了所有我能想到的东西，我开始怀疑答案是否很简单/就在我的眼皮底下，但我只是盯着它太久了。任何帮助将不胜感激。

【问题讨论】：

你能复制粘贴你当前的输出菜单html吗？

啊！我注意到 ul id 是“menu-main-menu”而不是“menu”，所以我调整了页脚中的 jQuery 脚本以反映这一点，添加了“#menu-main-menu”。这是 HTML：Home

【参考方案1】：

啊哈！我让它工作。我将提供的入队代码添加到 functions.php，使用此链接 (http://codex.wordpress.org/Using_Javascript) 作为指南，将脚本正确添加到我的页眉和页脚；调整 jquery 脚本以匹配 Wordpress 给定的 ul ID，并通过 CSS 进行更改以反映它。