こんにちは私はページとサブページのリストを印刷するためにこのコードを使っています:
<ul>
<?php wp_list_pages('title_li=&depth=2&child_of='); ?>
</ul>
それは出力します:
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a>
<ul class="children">
<li><a href="#">Subpage 2a</a></li>
<li><a href="#">Subpage 2b</a></li>
</ul>
</li>
<li><a href="#">Page 3</a></li>
<ul class="children">
<li><a href="#">Subpage 3a</a></li>
<li><a href="#">Subpage 3b</a></li>
</ul>
<li><a href="#">Page 4</a></li>
</ul>
functions.phpで何か他のもののために<ul class="children">
をオーバーライドする方法はありますか? <div class="container"><div class="container2"><ul>
と</ul></div></div>
の終わりのように
私はこの例をチェック していましたが 、私は自分のケースにそれを適用する方法がわかりません...感謝しています、ありがとう!
次のようにwp_list_pages
を呼び出すときにon Walker
オブジェクトを渡すことでこれをオーバーライドできます。
<テンプレート> .php
wp_list_pages(array(
'title_li' => null,
'depth' => 2,
'child_of' => 0,
'walker' => new My_Walker(),
));
デフォルトのWalker_Page
の代わりに、これはwp_list_pages
があなたのカスタムウォーカーMy_Walker
を使うようにします。ここで必要な唯一の違いは、あなたのリスト全体をあなたの質問で説明した2つのdivで囲むことです。これを行うには、start_lvl
のend_lvl
およびWalker_Page
メソッドをオーバーライドする必要があります。以下に定義されるように、それがレベル0(最上位レベル)にあるとき、リストは2つのdivでラップされますが、それ以降のリストはプレーンなul
要素になります。
functions.php
class My_Walker extends Walker_Page {
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
if ($depth == 0) {
$output .= "\n$indent<div class='container'><div class='container2'><ul>\n";
} else {
$output .= "\n$indent<ul class='children'>\n";
}
}
function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
if ($depth == 0) {
$output .= "$indent</ul></div></div>\n";
} else {
$output .= "$indent</ul>\n";
}
}
}
あるいは、あなたが提供したリンクで説明されているように、単にpage_css_classをオーバーライドして、各関数呼び出しをあなたのdivで手動でラップするだけです:
functions.php
function add_parent_class( $css_class = array(), $page = null, $depth = null, $args = array() )
{
if ( ! empty( $args['has_children'] ) )
$css_class = array();
return $css_class;
}
add_filter( 'page_css_class', 'add_parent_class', 10, 4 );
<テンプレート> .php
<div class="container"><div class="container2"><ul>
<ul>
<?php wp_list_pages('title_li=&depth=2&child_of='); ?>
</ul>
</div></div>