【WP】wp_list_pages()の不要なクラスを削除する設定

固定ページを一覧表示できるwp_list_pages()は“page_item page-item-○”など、
不要なclassもが追加されてしまいます。

この不要なクラスは、functions.phpに以下コードを追加することで削除できます。

wp_list_pages()で不要なclassがついた状態のHTMLソース

			<ul class="subMenu">
				<li class="page_item page-item-19 current_page_item"><a href="ドメイン/company/greeting/">代表あいさつ</a></li>
<li class="page_item page-item-23"><a href="ドメイン/company/about/">会社概要</a></li>
<li class="page_item page-item-24"><a href="ドメイン/company/philosophy/">企業理念</a></li>
<li class="page_item page-item-25"><a href="ドメイン/company/history/">沿革</a></li>
<li class="page_item page-item-20 page_item_has_children"><a href="ドメイン/company/office/">事業所</a>
<ul class='children'>
	<li class="page_item page-item-21"><a href="ドメイン/company/office/tokyo/">本社(東京)</a></li>
	<li class="page_item page-item-22"><a href="ドメイン/company/office/osaka/">大阪</a></li>
</ul>
</li>
			</ul>

functions.php

//「page_item page-item-○」を削除し、現在のページクラス「current_page_item」を「on」に変更する
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
function my_css_attributes_filter($var) {
            if(is_array($var)){
                $varci= array_intersect($var, array('current_page_item'));
                $cmeni = array('current_page_item');
                $selava   = array('on');
                $selavaend = array();
                $selavaend = str_replace($cmeni, $selava, $varci);
            }
            else{
                $selavaend= '';
            }
        return $selavaend;
        }

//空のクラス「class=""」を削除する設定
add_filter ('wp_list_pages','strip_empty_classes');
function strip_empty_classes($menu) {
    $menu = preg_replace('/ class=(["\'])(?!on).*?\1/','',$menu);
    return $menu;
    }

上記を追加したHTMLソース

			<ul class="subMenu">
				<li class="on"><a href="ドメイン/company/greeting/">代表あいさつ</a></li>
<li><a href="ドメイン/company/about/">会社概要</a></li>
<li><a href="ドメイン/company/philosophy/">企業理念</a></li>
<li><a href="ドメイン/company/history/">沿革</a></li>
<li><a href="ドメイン/company/office/">事業所</a>
<ul>
	<li><a href="ドメイン/company/office/tokyo/">本社(東京)</a></li>
	<li><a href="ドメイン/company/office/osaka/">大阪</a></li>
</ul>
</li>
			</ul>

不要なクラスがなくなり、ソースがスッキリしました。

また、現在ページのclass「current_page_item」も「on」にしたことで、
シンプルになって良かったと思います。

参考サイト
remove li class & id for menu items and pages list

コメント

タイトルとURLをコピーしました