基本上,我想使用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/

10-13 01:00