この実装、面倒なら代行します
以前、固定ページの下層ページ一覧を取得し、自ページにはクラスを付与して、一覧表示するという記事を紹介しました。
今回はさらに一歩進めて、その一覧の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という関数が出てきますが、これの記述もあります。
こちらも用途は多そうですね。
WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!
100ウェブで手がけた制作・開発案件を一部、ご紹介。
クライアントからご相談いただいた内容とその実装におけるポイント、工期、予算について確認いただけます。
【テレワーク実施中 につきお電話転送中】
コール中1秒程度無音状態になりますがそのままお待ちください。
受付時間
平日 10:00~18:00
メールでのお問い合わせでも
1営業日以内にご連絡いたします。