web-dev-qa-db-ja.com

Wp_nav_menu内の項目数を2で割ったものに基づいて、liの2つの等しい列を表示する方法

サイドバーにカスタム3.0メニューを表示したいです。私は、リストを名前順に並べ、リストを左の列のリストを下にして順番に並べ、次に右の列に入れたいと思います。

enter image description here

私は現在cssを使用していてliをフロートさせていますが、問題はリストが順番に下に行くのではなく、左から右の列に行き来することです。

使ってます

<?php wp_nav_menu('menu=Canon-camcorders'); ?> in my sidebar.php

次に、＃sidebar ul＃menu-Canon-camcorders li.menu-item {width：89px;フロート：左。右マージン：18px;}

私がやりたいことは、リスト項目がいくつあるかを数え、それを2つに分割し、それから2つのulを作成することです。私のphpの能力は、正式なトレーニングを受けずに一緒にパッチを当てられているようなものです。私はいくつかのjqueryを知っていますが、どちらの方法でこれを行うのか分からない。

私はこの記事を読みます： ナビゲーションメニュー項目を数える方法は？ しかし、私は私のニーズのためにそれを把握することができませんでした。

任意の助けは大歓迎です。

ありがとう、ラリー

countmenus
4
Larry4Design

独自のカスタムウォーカーを登録する必要がありますが、カスタムウォーカーの内部に関数（start_el）を1つだけ含める必要があるため、非常に簡単です。

参照しているスレッドからコードを追加して項目の数を算出し、次に半分の値を算出して、その値が満たされた時点で現在のリストを終了し、別の値で開始する必要があります。

私はこれらのことを説明するのがいつも得意ではないので、最初に私があなたのために書いたこの歩行者を見てください。これはデフォルトのナビゲーションメニューのウォーカーを基にしているので、ここであちこちで新しいリストを作成するときにうまくいく数行を除いて、特別なことは何もしていません。

class example_nav_walker extends Walker_Nav_Menu {

    var $current_menu = null;
    var $break_point  = null;

    function start_el(&$output, $item, $depth, $args) {

        global $wp_query;

        if( !isset( $this->current_menu ) )
            $this->current_menu = wp_get_nav_menu_object( $args->menu );

        if( !isset( $this->break_point ) )
            $this->break_point = ceil( $this->current_menu->count / 2 ) + 1;    

        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

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

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

        if( $this->break_point == $item->menu_order )
            $output .= $indent . '</li></ul><ul><li' . $id . $value . $class_names .'>';
        else
            $output .= $indent . '<li' . $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 .= '</a>';
        $item_output .= $args->after;

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

クラス内に2つの変数を作成します。最初の$current_menuはメニューオブジェクトを保持する予定です。メニュー項目の繰り返しごとにフェッチしたくないので、デフォルトのnull値を指定してメニューオブジェクトを取得します。その変数が設定されていないとき、これは一度だけ呼び出しをすることを保証します。 2番目の変数$break_pointはブレークポイントを保持します。現在のリストをいつ終了して別のリストから開始するかを決定するために使用する値。繰り返しになるたびにこれを無駄にしたくないので、最初の項目の繰り返しにのみ設定します。

通常、反復の終わりに増分する伝統的なカウンターを使用していないので（ブレークポイントはプラス1になります）、ceilの呼び出しはメニューが次の場合に対処します。奇数の項目があります。あなたが9個のアイテムを持っていたら、それは5日後に新しいリストを始めるでしょう。

基本的にこのウォーカーの唯一のカスタムパーツは..

    var $current_menu = null;
    var $break_point  = null;

..この..

if( !isset( $this->current_menu ) )
    $this->current_menu = wp_get_nav_menu_object( $args->menu );

if( !isset( $this->break_point ) )
    $this->break_point = ceil( $this->current_menu->count / 2 ) + 1;

そして最後にこれ..

if( $this->break_point == $item->menu_order )
    $output .= $indent . '</li></ul><ul><li' . $id . $value . $class_names .'>';
else
    $output .= $indent . '<li' . $id . $value . $class_names .'>';

私はそれらを指摘している、それで他に何か関連があるかどうか疑問に思うことなく重要な部分に注意を払うことができる。

最後に、カスタムウォーカーを使用するためにwp_nav_menu呼び出しを設定する必要があります。これはargsを配列として渡す必要があることを意味します。これは例です。

<?php wp_nav_menu( array(
    'menu' => 'your-menu',
    'walker' => new example_nav_walker
) ); ?>

あなたはあなたがそれを使うときちょうどあなたが私が上に示したようにそうすることを確かめる、あなたが好きなどんなメニューでもこのwalkerを使うことができます（walkerとmenu argsの設定）。

コードの大きな部分（ウォーカー）は、あなたのテーマの関数ファイルに入ることができます、それがあなたにとって最も簡単なら、それは私がそれをテストしたところでもあります。

それが役立つことを願っています、そして、あなたが質問をするならば、知らせてください。

11
t31os