在子菜单中查看页面的H2内容标签

时间：2014-10-31 作者：Interactive

我想我是在尝试做一些不寻常的事情，因为我在任何地方都找不到它

我想根据相关页面的内容创建一个子菜单
例如，在我的菜单中有一个名为“TOP”的菜单项。该项目有一个子页面，称为“第1章”
在“第1章”的页面上有很多内容，其中包含H1或H2标记中分隔的值。

我的目标是将H1和H2标记（包括它们的值）加载到“第1章”的子菜单中。

我想用wp_nav_menu 函数并向其添加一个walker。问题是我不知道从哪里或如何开始（尤其是步行者）。显然，我已经在样式表中创建了页面和子菜单，如下所示：

div class="nav">
    <?php wp_nav_menu( array( \'theme_location\' => \'menu\') );?>
</div>
但现在我需要加载内容。我希望任何人都能帮助我解决这个“问题”，从哪里开始。

所以我找到了一种只获取所有“H1”标签内容的方法。这仅适用于当前正在查看的页面。

function getTextBetweenTags($tag, $html, $strict=0)
        {
            /*** a new dom object ***/
            $dom = new domDocument;

            /*** load the html into the object ***/

            $dom->loadHTML($html);


            /*** discard white space ***/
            $dom->preserveWhiteSpace = false;

            /*** the tag by its tag name ***/
            $content = $dom->getElementsByTagname($tag);

            /*** the array to return ***/
            $out = array();
            foreach ($content as $item)
            {
                /*** add node value to the out array ***/
                $out[] = $item->nodeValue;
            }
            /*** return the results ***/
            return $out;
        }

        global $post;
        $post_id = $post->ID;
        $html = get_post_field(\'post_content\', $post_id);
        $content = getTextBetweenTags(\'h1\', $html);
        $i=0;
        echo \'<ul>\';
        if($content[0]){ 
            foreach( $content as $item )
            {
                echo \'<li><a href="#\'.$i++.\'">\'.utf8_decode($item).\'</a></li>\';

            }
        }else{
        echo\'<li>\'.get_the_title().\'</li>\'; 
        }
        echo \'</ul>\';
新编辑-所以我选择了定制的Walker。现在，我从网上找到的教程中学习了一个助行器。此助行器的描述来自wp_nav_menu 并将其置于实际标题下方。这是步行者：

class custom_walker extends Walker_Nav_Menu{        
//start of the sub menu wrap
function start_lvl(&$output, $depth) {
$output .= \'<div class="drop">
                <div class="holder">
                    <div class="container">
                        <ul class="list">\';
}

//end of the sub menu wrap
function end_lvl(&$output, $depth) {
$output .= \'
            </ul>
        </div>
    </div>
    <div class="bottom"></div>
</div>\';
}

//add the description to the menu item output
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\\t", $depth ) : \'\';

$class_names = $value = \'\';

$classes = empty( $item->classes ) ? array() : (array) $item->classes;

$class_names = join( \' \', apply_filters( \'nav_menu_css_class\', array_filter( $classes ), $item ) );
$class_names = \' class="\' . esc_attr( $class_names ) . \'"\';

$output .= $indent . \'<li id="menu-item-\'. $item->ID . \'"\' . $value . $class_names .\'>\';

$attributes  = ! empty( $item->attr_title ) ? \' title="\'  . esc_attr( $item->attr_title ) .\'"\' : \'\';
$attributes .= ! empty( $item->target )     ? \' target="\' . esc_attr( $item->target     ) .\'"\' : \'\';
$attributes .= ! empty( $item->xfn )        ? \' rel="\'    . esc_attr( $item->xfn        ) .\'"\' : \'\';
$attributes .= ! empty( $item->url )        ? \' href="\'   . esc_attr( $item->url        ) .\'"\' : \'\';

$item_output = $args->before;
$item_output .= \'<a\'. $attributes .\'>\';
$item_output .= $args->link_before . apply_filters( \'the_title\', $item->title, $item->ID ) . $args->link_after;
$item_output .= \'<br /><span class="sub">\' . 
        $post_id = $post->ID;
        $html = get_post_field(\'post_content\', $post_id);
        $content = getTextBetweenTags(\'h2\', $html);
        $i=0;
        echo \'<div style="background:#000000;"><ul>\';
        if($content[0]){ 
            foreach( $content as $item )
            {
                echo \'<li><a href="#\'.$i++.\'">\'.utf8_decode($item).\'</a></li>\';
            }
        }
        echo \'<ul></div>\'

 . \'</span>\';
$item_output .= \'</a>\';
$item_output .= $args->after;

$output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args );}}
我更换了$description 应使用自定义代码显示H2标记之间的内容。

这是可行的，但问题是。我创建了一个具有黑色背景的div，这样就可以清楚地看到加载了哪个部分。div块位于菜单的顶部，而不是下方。我不能确定wich block是哪个子菜单项。

当前脚本为每个子菜单项创建内容。这很好，但是它只显示它所在页面的内容。所以我改变了$post->ID 到$item->ID 但这只给了我导航元素的ID。这样做的好处是，它显示菜单元素下面的内容。

我想我在这方面做得对，但需要朋友们的帮助：-）

M

-编辑这是当前start_el 作用

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

    $class_names = $value = \'\';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;

    $class_names = join( \' \', apply_filters( \'nav_menu_css_class\', array_filter( $classes ), $item ) );
    $class_names = \' class="\' . esc_attr( $class_names ) . \'"\';

    $output .= $indent . \'<li id="menu-item-\'. $item->ID . \'"\' . $value . $class_names .\'>\';

    $attributes  = ! empty( $item->attr_title ) ? \' title="\'  . esc_attr( $item->attr_title ) .\'"\' : \'\';
    $attributes .= ! empty( $item->target )     ? \' target="\' . esc_attr( $item->target     ) .\'"\' : \'\';
    $attributes .= ! empty( $item->xfn )        ? \' rel="\'    . esc_attr( $item->xfn        ) .\'"\' : \'\';
    $attributes .= ! empty( $item->url )        ? \' href="\'   . esc_attr( $item->url        ) .\'"\' : \'\';

    $current_post = get_post( $item->object_id );

    $item_output = $args->before;
    $item_output .= \'<a\'. $attributes .\'>\';
    $item_output .= $args->link_before . apply_filters( \'the_title\', $item->title, $item->ID ) . $args->link_after;
    $item_output .= \'<br /><span class="sub">\'.
    $doc = new DOMDocument();
    $doc->LoadHTML( $post->post_content );
    $titles = $doc->getElementsByTagName(\'h1\');
    foreach ($titles as $a_title) {
        $single_title = $doc->saveHTML( $a_title );
    }   
    \'</span>\';
    $item_output .= \'</a>\';
    $item_output .= $args->after;


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

1 个回复
最合适的回答,由SO网友:uruk 整理而成

基本上，您可以向wp_nav_menu. 每当项目开始时，您都可以检查导航项目下的页面内容。

当内容可用时，将内容读入新的DOMDocument-对象并过滤掉所有标题。使用标题，创建指向当前链接的子链接start_el-功能：

Working example:

class Custom_Walker extends Walker_Nav_Menu {
        function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
            $output .= \'<li>\';

            // link attributes for the "normal" link
            $attributes = \'\';
            $attributes .= ! empty( $item->attr_title ) ? \' title="\'  . esc_attr( $item->attr_title ) .\'"\' : \'\';
            $attributes .= ! empty( $item->target )     ? \' target="\' . esc_attr( $item->target     ) .\'"\' : \'\';
            $attributes .= ! empty( $item->xfn )        ? \' rel="\'    . esc_attr( $item->xfn        ) .\'"\' : \'\';
            $attributes .= ! empty( $item->url )        ? \' href="\'   . esc_attr( $item->url        ) .\'"\' : \'\';

            $output .= sprintf( \'%1$s<a%2$s>%3$s</a>%4$s\',
                $args->before,
                $attributes,
                apply_filters( \'the_title\', $item->title, $item->ID ),
                $args->after
            );

            // Check for titles in the content and add them as a sub-ul after the current a-element
            // but only on level 3
            if ( $depth == 3 ) {
                $current_post = get_post( $item->object_id );
                if ( $current_post->post_type == \'page\' ) {
                    $doc = new DOMDocument;
                    $doc->LoadHTML( $current_post->post_content );
                    $titles = $doc->getElementsByTagName( \'h1\' );
                    // begin the sub-list here
                    $output .= \'<ul>\';
                    foreach ( $titles as $a_title ) {
                        // clean up the title to use as a fragment in the href-attribute
                        $sanitized_title = sanitize_title( $doc->saveHTML( $a_title ) );
                        // and add the link to the output as a li-element
                        $output .= sprintf( \'<li><a href="%s#%s">%s</a></li>\', esc_attr( $item->url ), $sanitized_title, $doc->saveHTML( $a_title ) );
                    }
                    // end of sub-list
                    $output .= \'</ul>\';
                    $doc = null;
                }
            }
        }

        function end_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
            $output .= \'</li>\';
        }
    }

结束
标签： menus   walker   小码农  

相关推荐

Walker导航从某一深度移除子菜单UL

我想删除sub-menu ul和.menu-item-has-children 当菜单深度优于或等于2时初始化。所以，我只想要一个最多有3个子菜单的菜单。其他子项仍将显示在菜单中，但不会显示在子菜单中。使用wp\\U nav\\U菜单（“深度”=>3），它不会附加所有项目。所以，我想我需要使用一个定制的walker导航。我不知道该怎么做start_lvl. 如何计算深度并删除ul和类。。。我的目标是更改此菜单：菜单项具有子菜单项1菜单项2菜单项具有子菜单项3菜单项4菜单项具有子菜单项5菜单项6：菜单