web-dev-qa-db-ja.com

サブメニューでページのh2コンテンツタグを見る

私は私がどこかそれを見つけることができないので私が推測する珍しい何かをしようとしていると思います。

関連ページの内容に基づいてサブメニューを作成したいのですが。
例えば。私のメニューには "TOP"というメニュー項目があります。この項目には「第1章」というサブページがあります。
「第1章」のページには、H1またはH2タグで区切られた値を保持する内容がたくさんあります。

私の目標は、「第1章」のサブメニューにH1タグとH2タグ（それらの値を含む）をロードすることです。

私はこれをwp_nav_menu関数で行い、それにウォーカーを追加しようと考えていました。問題は、どこからどのように始めればよいか私にはわからないということです（特に歩行者に関して）。以下のようにスタイルシートでページとサブメニューを作成しました。

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>';

  • 新しい編集 - だから私はカスタムウォーカーをしました。私は今オンラインで見つけたチュートリアルからウォーカーを取りました。このウォーカーは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 );}}

H2タグの間にコンテンツを表示するために、$descriptionがあるべき部分をカスタムコードに置き換えました。

これはうまくいきますが、ここに問題があります。黒い背景のdivを作成したので、パーツがロードされていることは明らかです。 divブロックはメニューの上にあり、その下にはありません。どのサブメニュー項目が魔女ブロックなのか判断できません。

現在のスクリプトはすべてのサブメニュー項目のコンテンツを作成します。これは素晴らしいですが、ページが表示されているページのコンテンツのみが表示されます。だから私は$post->IDを$item->IDに変更しました、しかしそれは私にnav要素のIDを与えるだけです。これの利点は、メニュー要素の下にコンテンツが表示されることです。

私は私がここで正しい軌道に乗っていると思います、しかし私の友人からの少しの助けが必要です:-)

M.

-edit-これは現在の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 );
}
menuswalker
1
Interactive

基本的に、あなたはカスタムウォーカーをwp_nav_menuに追加します。アイテムが始まるときはいつでも、あなたはナビゲーションアイテムの下にあるページのコンテンツをチェックすることができます。

コンテンツが利用可能になったら、そのコンテンツを新しいDOMDocumentオブジェクトに読み込み、すべてのタイトルを除外します。タイトルとともに、start_el-関数で作成された現在のリンクbeeingへのサブリンクを作成します。

作業例：

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>';
        }
    }
1
uruk