基本上,我想使用http://www.outyear.co.uk/smint/ SMINT粘性菜单,包括在Wordpress页面上进行导航的麻烦我已经看到它在themeforest上使用一页模板完成了100万次,是否有人对任何免费或付费的插件有所了解?
或者可以告诉我如何将其放入wordpress页面?我试过了,但是页面中的js无法正常工作,您无法包含js文件。
我不想在主导航中执行此操作,而是在子导航中滚动页面的内容。
最佳答案
几天前在寻找解决方案时,我偶然发现了这篇文章。我设法通过使用原始Walker_Nav_Menu元素输出功能为导航菜单创建自定义Walker来解决问题。
1.创建助行器类
在主题functions.php中,创建新的Walker类,该类扩展了原始的Walker_Nav_Menu。从/ wp-includes / nav-menu-template.php(行68 – 187)复制原始的start_el和end_el元素输出函数代码,并将其粘贴到自定义Walker类中。
class SMINT_nav extends Walker_Nav_Menu {
// copy original code from /wp-includes/nav-menu-template.php, rows 68 – 187
// and paste here
}
打开start_el函数(原始行81)后,我们将添加代码以查询来自全局WPDB的帖子object_id。这些ID我们用作链接HTML输出ID,用于连接节和触发器链接。用于查询的原始解决方案是来自此topic。
/* oppening start_el function */
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
/* Add code bellow to query posts object_id for <a> link HTML output id
* source: https://wordpress.stackexchange.com/questions/13604/get-the-id-of-the-page-a-menu-item-links-to */
global $wp_query;
$pageid = get_post_meta( $item->ID, '_menu_item_object_id', true );
/* and bellow continues original code with line */
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
查找
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
(原始行120)并通过用$item->url
替换'#'
清除href链接URL,这样您将获得:$atts['href'] = ! empty( $item->url ) ? '#' : '';
最后,我们必须将帖子ID添加到导航链接HTML输出中。在
$item_output .=
(原始行149,紧接在$item_output = $args->before;
之后)下,通过添加id类并从$ pageid数组调用帖子ID来编辑链接。/* SMINT SCROLL - Add post ID to link HTML output */
$item_output .= '<a id="s' . esc_attr( $pageid ) .'"'. $attributes .'>';
2.将菜单添加到主题
使用以下命令在
<body> ... </body>
标记内调用菜单:<?php wp_nav_menu(array('container_class' => 'smintMenu',
'walker' => new SMINT_nav(),
)); ?>
“容器类”是默认的顶级菜单类,我们必须定义其名称,因为我们将其用作smint.js触发元素类。
在“ walker”下,我们必须调用我们之前创建的自定义Walker类。
3.加载JS脚本
我仍在开发主题,因此在关闭
</head>
标记之前,已直接在header.php中加载脚本。为了进行测试,我从主题js文件夹中加载了最新的jquery.js和jquery.smint.js。 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/themejs/jquery.smint.js"></script>
<!-- activate smint -->
<script type="text/javascript">
$(document).ready( function() {
$('.smintMenu').smint({ // define class, same as 'class_container'
'scrollSpeed' : 1000 // and scroll speed to 1000ms
});
});
</script>
</head>
不要忘记根据``container_class''下定义的类来更改激活脚本中的类。在此示例中,它是.smintMenu类。
就是这样,刷新您的Web浏览器!
结束语
我已经在开发中的裸露主题上对此进行了测试,只有几行css,没有其他可能发生冲突的脚本。
我还对其他wp_naw_menu参数进行了调整,只要我按照说明的方式定义了“ container_class”和“ walker”,SMINT就可以正常工作。
完成项目后,我将通过示例链接进行更新。
最好的祝福
关于javascript - 如何为wordpress创建像SMINT这样的粘性导航?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21423284/