WordPressのテーマAstraで、ブログをサイトのトップにし、トップメニューのに下に各カテゴリーを設定していますが、各ブログの記事を表示すると、トップのメニューの選択色が、全て非選択の状態になります。ブログをサイトのトップに指定し、カテゴリーの選択時はメニューが選択状態となりますが、ブログの記事単体でも、メニューを選択状態にするべく、追加CSSで目的が達成されたので記録しました
ソースから目的のメニューのクラスを調べます
ソースの、目的のメニューに関連する、IDまたはClassを調べてみました（下記）・・・なお、ソースはブラウザの右クリックで出る、「ページのソースを表示」で出します
<li class=’mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-home mega-menu-item-has-children mega-align-bottom-left mega-menu-flyout mega-menu-item-3923‘ id=’mega-menu-item-3923‘><a class=”mega-menu-link” href=”https://east19-mikas.com/mpat/” aria-haspopup=”true” aria-expanded=”false” tabindex=”0″>ホーム<・・・・
メニューの「ホーム」に関係する、Class或いは IDはmega-menu-item-3923で有ることが分かります。
一方、個別の投稿を示すClassの名前は、Bodyダグ内にある、single-postであるらしい事が分かります
個別投稿では、目的のメニューの色を指定
下記は、個別投稿のクラスがある時には、目的メニューの背景色を指定してみました
.single-post .mega-menu-item-3923 { background:#D4F4AB!important; }
メニューの色が、個別投稿表示時に目的の色に
下図に個別投稿を表示している時、ホームのメニューに色が付いています
応用として、検索・タグクラウドでも色を
右サイドバーにある、タグクラウドをクリックしても、検索ボックスで検索しても、メニューが未選択となります。これを、ホームの色を変更して選択色をつけてみました
.search .mega-menu-item-3923 {background:#FDD1BB!important;}
.archive .mega-menu-item-3923 {background:#FDD1BB!important;}
.search-no-results .mega-menu-item-3923 {background:#FF99AA!important;}
上記の3行目は、検索結果が無かった時の色を変えています