jQuery
ワードプレスにはカスタムメニューという機能がありますが、オリジナルでグローバルナビゲーションを作成したり、画像を使用したナビゲーションを一から作る場合に役立つ正規表現の使い方をご紹介します。
2019年3月5日
画像ナビゲーションの完成形イメージ
画像でナビゲーションを表現するケースで、現在のページにCSSクラスを適用して差別化してみます。今回は現在のページを表す画像を他より薄くしています。
■デスクトップ版
■スマートフォン版（レスポンシブ）
正規表現で一致したli要素にcurrentクラスを追加
bodyに付くそのページ固有のクラス
ワードプレスではbodyタグに以下の記述を付けることでそのページの情報がCSSクラスとして出力されます。
<body <?php body_class(); ?>>
例えば以下のように出力されますが、このなかでpage-id-11がこのページ固有のクラスになりますので画像ナビゲーションの該当するli要素にこのpage-id-11と同じ文字列のクラスをあらかじめ付けておけば、あとはJavaScript（jQuery）でcurrentクラスを追加してあげるだけです。
<body class="page-template page-template-page-system page-template-page-system-php page page-id-11 page-child parent-pageid-7">
■画像ナビゲーション部分の記述
<ul>
<li class="page-id-9">・・・</li>
<li class="page-id-11">・・・</li>
<li class="page-id-13">・・・</li>
</ul>
正規表現を使ったjQueryの記述
下記がjQueryの記述ですが4行目ではbodyについているCSSクラスのなかでpage-id-xxと同じ書式になる文字列を正規表現で探し、マッチした文字列をidに格納しています。そして画像ナビゲーションのli要素のなかでこのidと同じクラスを持っているものにcurrentクラスを追加しています。これでそのページに該当するli要素にcurrentクラスを追加することができました。
<script>
'use strict';
{
const id = $("body").attr('class').match(/page-id-[0-9]+/);
$("li").each((index, element) => {
if ($(element).hasClass(id)) {
$(element).addClass("current");
}
});
}
</script>
li.current { opacity: 0.3;}
上記は固定ページのケースですが投稿ページのケースではbodyにつく固有のクラスがpostid-xxのような記述になりますので以下のようになります。
<script>
'use strict';
{
const id = $("body").attr('class').match(/postid-[0-9]+/);
$("li").each((index, element) => {
if ($(element).hasClass(id)) {
$(element).addClass("current");
}
});
}
</script>
以上で「正規表現でつくる画像ナビゲーション」の解説を終わります。
Tweet
