WordPress
カスタマイズ事例

WORDPRESS CUSTOMIZATION

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

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

今回はさらに一歩進めて、その一覧のli要素ひとつひとつにそれぞれ独自のアイコンをつけるためのクラスを付与してみようと思います。
よくありますよね。リンクの手前にアイコンをつける奴です。デザイン的にカッコよくなります。
 
まず、functions.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という関数が出てきますが、これの記述もあります。

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

【100ウェブ新着情報メルマガ】

WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!