【WordPress】カスタム投稿を用意して、固定ページまたはアーカイブページにクラスcurrentを付与する

固定ページまたはアーカイブページかを判別して、クラスcurrentを付与

現在のページがどこなのかをユーザーに認識させるためにメニュー部分にクラスcurrentを付与してデザインを変更します。wp_list_pagesをそのまま利用してもいいのですが、他に方法がないかなと思ってやってみました。

メニューは柔軟に対応するためにカスタム投稿を利用。予めカスタム投稿タイプ「menu」を用意します。
メニューのスラッグと現在のスラッグを比較するので、固定ページまたはアーカイブページのスラッグと、カスタム投稿で「menu」のスラッグを一緒にする必要があります。
(このメニューは固定ページとカスタム投稿のアーカイブページしか対応していない)

階層ホームは常にメニューの最初にあるので、特に何もせずis_homeだった場合にクラスcurrentを付与。同時にrel=”home”も。

メニュー部分
<?php //固定ページの場合とカスタム投稿の場合のスラッグを取得 $current_page = get_post( get_the_ID() )->post_name; $current_post = get_query_var('post_type'); ?>   <nav> <ul>   <*-- ホームの場合。ホームは必ずメニューーの初めなのでホームだった場合にクラスcurrentを付与 --> <li><a href="<?php echo esc_url( home_url() ); ?>" <?php if( is_front_page() && is_home() ) echo ' class="current"'; ?> rel="home">ホーム</a></li>   <?php //カスタム投稿タイプ「menu」を作成してグローバルメニューの情報を読み込み $args = array( 'post_type' => 'menu', 'posts_per_page' => '-1' ); $the_query = new WP_query($args); if ($the_query->have_posts()): ?> <?php while($the_query->have_posts()): $the_query->the_post(); ?> <?php //カスタム投稿タイプ「menu」のスラッグ名を取得 $slug = get_post( get_the_ID() )->post_name; ?>   <*-- スラッグ名が一致した場合にクラスcurrentを付与 --> <li><a href="<?php echo esc_url( home_url() ); ?>/<?php echo $slug ?>" title="<?php the_title_attribute(); ?>" <?php if(($slug==$current_page)||($slug==$current_post)) echo ' class="current"'; ?> rel="bookmark"><?php the_title(); ?></a></li>   <?php endwhile; ?> <?php wp_reset_postdata(); endif; ?> </ul> </nav>

CSSでクリック無効にする

クラスcurrentにはpointer-event:none;でクリック無効に。

CSS
.current { pointer-events: none; }

ドラッグ&ドロップで編集できるようにする

WordPressプラグイン「Intuitive Custom Post Order」を、先程設置したカスタム投稿タイプ「menu」に設定してドラッグ&ドロップで簡単にメニューを編集できるようにしておくと便利。

Intuitive Custom Post Order

Yuki Nakata

中田デザイン事務所 代表。
WEBデザイナー(フリー)/ WEB講師(非常勤)/ 海外販売(法人)他

お仕事のご相談はお問い合わせフォームへお願いします。