WordPressカスタマイズ事例

サイドバーなどの固定ページの下層ページ一覧のli要素にそれぞれ独自のアイコン用のクラスをつける

以前、固定ページの下層ページ一覧を取得し、自ページにはクラスを付与して、一覧表示するという記事を紹介しました。

今回はさらに一歩進めて、その一覧のli要素ひとつひとつにそれぞれ独自のアイコンをつけるためのクラスを付与してみようと思います。
よくありますよね。リンクの手前にアイコンをつける奴です。デザイン的にカッコよくなります。
 
まず、function.php にwp_list_pages関数のフィルターを記述します。

function kaiza_page_css_class( $css_class, $page, $depth, $args, $current_page ) {

    global $post;
    $current_slug  = $page->post_name;
    $css_class[] = 'icon-'.$current_slug;

    return $css_class;
}
add_filter( 'page_css_class', 'kaiza_page_css_class', 10, 5 );

これで、生成されるliのクラスに icon-[ページスラッグ] というクラスを追加します。
 
次にsidebar.phpなど、下層ページ一覧を表示したい部分に以下のように記述します。

<?php
    $root_page = kaiza_get_root_page( $post->ID );
    $thePostID = $root_page->ID;
    $children = wp_list_pages('title_li=&child_of='. $thePostID. '&echo=0');
    $cid = get_the_ID();
    $slug = get_post($thePostID)->post_name;
    ?>

    <ul>
        <li class="page_item <?php if($cid==$thePostID){echo 'current_page_item';} ?> icon-<?php echo $slug;?>">
            <a href="<?php echo get_the_permalink($thePostID); ?>"><?php echo get_the_title($thePostID); ?></a>
        </li>
        <?php
        if ( $children ){echo $children;}
        ?>
    </ul>

固定ページの下層ページ一覧を取得し、自ページにはクラスを付与して、一覧表示する」で紹介したコードに似ていますが、6行目で親ページのスラッグを取得して、10行目でそれをクラスとしてliに付与している部分だけが違います。
※kaiza_get_root_pageという関数が出てきましたが、これのソースコードも上のページに記載があります。

こちらも用途は多そうですね。


関連するWordPressカスタマイズ事例