Question

基本上我想在Wordpress页面上使用http://www.outyear.co.uk/smint/ SMINT粘性菜单，包括导航东西我已经看过它在themeforest上有一个页面模板做了一百万次，任何人都有任何插件免费或付费的线索？

或者可以告诉我如何将它放入wordpress页面？我试过但js进入页面不起作用你不能包含一个js文件。

我不想为主要导航执行此操作，而是使用子导航滚动页面内容。

Answer 1

几天前搜索解决方案，我偶然发现了这篇文章。我设法通过使用原始Walker_Nav_Menu元素输出函数创建导航菜单的自定义Walker来解决问题。

1。创建助行器类

内部主题functions.php创建扩展原始Walker_Nav_Menu的新Walker类。从/ 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函数（orig。第81行）之后，我们将添加将从全局WPDB查询post_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 : '';替换为$item->url，找到'#'（原始第120行）并清除href链接网址，以便获得：

$atts['href']   = ! empty( $item->url )        ?     '#'           : '';

最后，我们必须将帖子ID添加到导航链接HTML输出中。在$item_output .=下（原始第149行，紧接在$item_output = $args->before;行之后），通过添加 id 类并从 $ pageid 数组调用post 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脚本

我还在开发我的主题，所以我在header.php中直接加载脚本，就在关闭</head>标记之前。出于测试目的，我已从我的主题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 。

就是这样，刷新你的网络浏览器！

最后评论

我已经在开发中的非常裸的主题上测试了这个，只有几行css而没有其他脚本可能会发生冲突。我还使用了其他wp_naw_menu参数进行了一些操作，并且只要按照说明定义了'container_class'和'walker'，SMINT就可以了。
当我完成项目时，我将使用示例链接进行更新。
最诚挚的问候

Answer 2

首先，您需要知道导航的html结构，在该示例中它看起来像这样：

   <div class="subMenu" >
    <div class="inner">
         <a href="#" id="sTop" class="subNavBtn active">Home</a> 
         <a href="#" id="s1" class="subNavBtn">What it does</a>
         <a href="#" id="s2" class="subNavBtn">How to use</a>
         <a href="#" id="s3" class="subNavBtn">Demo</a>
         <a href="#" id="s4" class="subNavBtn">Download</a>
         <a href="#" id="s5" class="subNavBtn end">About Me</a>
    </div>
   </div>

所以，你可以extend控制这个的wordpress类.. 这是示例，它可能需要更多的工作

<?php
class Create_cool_nav extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<div class=\"sub-menu\">\n";
    }

    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</div>\n";
    }

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'subNavBtn menu-item-' . $item->ID; //only in case you need it ?

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
        $id = apply_filters( 'nav_menu_item_id', 's'. $item->ID, $item, $args );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<div' . $id . $value . $class_names .'>'."\n";

        $atts = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
        $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
        $atts['href']   = ! empty( $item->url )        ? $item->url        : '';


        $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>'."\n";
        /** This filter is documented in wp-includes/post-template.php */
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>'."\n";
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }

    function end_el( &$output, $item, $depth = 0, $args = array() ) {
        $output .= "</div>\n";
    }

}
?>

之后我们需要添加css ..

 .inner {
        width: 960px;
        margin: 0 auto;
        position: relative;
        min-height: 50px;
        padding:30px 0;
        font-size: 18px;
        font-family: 'Open Sans', sans-serif;
        font-weight: 300;
    }
.subMenu {
    position: absolute;
    top: 462px;
    height: 50px;

    z-index: 1000;
    width: 100%;
    max-width: 1140px;
    min-width: 960px;

    background: #cdd242;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NkZDI0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NGEzNGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #cdd242 0%, #74a34a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdd242), color-stop(100%,#74a34a));
background: -webkit-linear-gradient(top,  #cdd242 0%,#74a34a 100%);
background: -o-linear-gradient(top,  #cdd242 0%,#74a34a 100%);
background: -ms-linear-gradient(top,  #cdd242 0%,#74a34a 100%);
background: linear-gradient(to bottom,  #cdd242 0%,#74a34a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdd242', endColorstr='#74a34a',GradientType=0 );



}

.subMenu .inner {
    padding:0;
    font-weight: 400;
}

.subMenu {


    /*float: left;*/
}

/*.subNavBtn {
    display: block;
    height: 35px;
    float: left;
    margin: 0px 50px 0 0;
    text-decoration: none;
    font-size: 16px;
    padding: 15px 0 0 0;
}*/

.subNavBtn {
    display: block;
    height: 35px;
    width: 12%;
    float: left;
    margin: 0px 0px 0 0;
    text-decoration: none;
    font-size: 14px;
    padding: 15px 2% 0 2%;
    text-align: center;

    color: #3d3d3d;
}



.active {
    background: #fc0;
}
.end {
    margin: 0;
}

他们正在使用this plugin，还有其他方法可以做到这一点。所以你可以再次在functions.php文件中包含它：

function add_scripts() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://code.jquery.com/jquery-1.10.1.min.js", false, null);
    wp_enqueue_script('jquery');
    wp_enqueue_script('migrate', 'http://code.jquery.com/jquery-migrate-1.2.1.min.js', array('jquery'), '1.2.1', false );
    wp_enqueue_script('smint', get_template_directory_uri().'/path/to/file/smint.js', array('jquery'), '1.2.1', false );

}
add_action( 'wp_enqueue_scripts', 'add_scripts' );

最后我们添加js以使其正常工作：

$(document).ready( function() {
    $('.subMenu').smint({
        'scrollSpeed' : 1000
    });
});

window.addEventListener("load",function() {
  setTimeout(function(){
    window.scrollTo(0, 1);
  }, 0);
});

测试并让我知道，可能需要进行调整以使其完美运行。

编辑：我忘了..大声笑如何在你的模板中使用它...

wp_nav_menu( array(
    'menu' => 'menu name', 
    'container' => false, 
    'menu_id' => 'subMenu',
    'walker' => new Create_cool_nav
));

如何为wordpress创建像SMINT一样的粘性导航？

2 个答案:

1。创建助行器类

2。添加菜单到主题

3。加载JS脚本