Header menuカストマイズ

戻る

WordPress Header menu カストマイズ

2025/01/20

概要
before
ソースコード
追加CSS
after
ソースコード(2)
追加CSS(2)
感想

概要

WordPressのテーマLightningで作成したサイトのトップメニューの文字をカストマイズしたいと思うことがある。それ用のプラグインはあるらしいが、出来る限りプラグインの導入は避けたい。

ということで、追加CSSでの対応を試みた。最終的にはカストマイズできたがWordPressのソースコードを表示してみると、テーマ、追加プラグインによりクラス名がそれぞれ異なっており、それなりの対応が必要。

before

トップメニューの文字は小さい(といえば小さい)

ソースコード

ソースコードの抜粋、見やすいように並べたもの。

.........................................

<header id="site-header" class="site-header site-header--layout--nav-float">
		<div id="site-header-container" class="site-header-container container">

				<h1 class="site-header-logo">
		<a href="https://tokyoak.local/">
			<span><img src="https://tokyoak.local/wp-content/uploads/2023/10/4924f7875127bf9d34697177cf40fe02.png" alt="東京秋工会" /></span>
		</a>
		</h1>

		<nav id="global-nav" class="global-nav global-nav--layout--float-right">
<ul id="menu-%e3%83%88%e3%83%83%e3%83%97%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc" class="menu vk-menu-acc global-nav-list nav">

<li id="menu-item-1598" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home"><a href="https://tokyoak.local/"><strong class="global-nav-name"><i class="fa-solid fa-house"></i>ホーム</strong><span class="global-nav-description">home</span></a></li>

<li id="menu-item-1590" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="https://tokyoak.local/%e6%9d%b1%e4%ba%ac%e7%a7%8b%e5%b7%a5%e4%bc%9a-2/"><strong class="global-nav-name"><i class="fa-solid fa-handshake"></i>東京秋工会</strong><span class="global-nav-description">about</span></a></li>

<li id="menu-item-1593" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://tokyoak.local/%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b/"><strong class="global-nav-name"><i class="fa-solid fa-envelope"></i>問い合わせ</strong><span class="global-nav-description">mail</span></a></li>

<li id="menu-item-1594" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://tokyoak.local/%e3%83%aa%e3%83%b3%e3%82%af%e9%9b%86/"><strong class="global-nav-name"><i class="fa-solid fa-link"></i>リンク集</strong><span class="global-nav-description">link</span></a></li>

<li id="menu-item-1599" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="https://www.akt.co.jp/news/livecam"><strong class="global-nav-name"><i class="fa-solid fa-video"></i>秋田ライブカメラ</strong><span class="global-nav-description">AKT camera</span></a></li>

<li id="menu-item-1597" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="https://tokyo-akiko.blog/"><strong class="global-nav-name"><i class="fa-solid fa-blog"></i>Blog</strong><span class="global-nav-description">メール投稿</span></a></li>
</ul>
</nav>	</div>
	</header>
.........................................

追加CSS

ウジェット : 外観 > カストマイズ > 追加CSSで、ulのクラス名とliのクラス名を指定する

/* global menu */
ul.global-nav-list > li .global-nav-name {
font-size:18px;
text-shadow: 1px 1px 0px aliceblue;
border: 1px double green;
padding: 2px;
border-radius: 5px;
box-shadow: 2px 2px 0px gray;
}
/* hover */
ul.global-nav-list > li .global-nav-name:hover {
font-size: 18px;
text-shadow: 1px 1px 0px aliceblue;
background-color: gold;
padding: 2px;
border-radius: 5px;
box-shadow: 2px 2px 0px gray;
}

after

CSSを追加した結果。ダッシュボードの画像
「ホーム」にマウスを載せた画像
追加CSSでは、すぐに結果が表示されるので確認し易い。

ソースコード(2)

別のサイトのソースコード。ulとliの近くを並べ直したもの。

.........................................
<div id="gMenu_outer" class="gMenu_outer">
				<nav class="menu-%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc-container">

<ul id="menu-%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc" class="menu gMenu vk-menu-acc">

<li id="menu-item-890" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-36 current_page_item"><a href="https://miyama-consultants.com/"><strong class="gMenu_name">HOME</strong></a></li>

<li id="menu-item-838" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://miyama-consultants.com/?page_id=43"><strong class="gMenu_name">会社案内</strong></a></li>

<li id="menu-item-839" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://miyama-consultants.com/?page_id=46"><strong class="gMenu_name">事業案内</strong></a></li>

<li id="menu-item-842" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://miyama-consultants.com/?page_id=719"><strong class="gMenu_name">採用情報</strong></a></li>

<li id="menu-item-841" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://miyama-consultants.com/?page_id=49"><strong class="gMenu_nam">交通アクセス</strong></a></li>

<li id="menu-item-837" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://miyama-consultants.com/?page_id=200"><strong class="gMenu_name">お問い合わせ</strong></a></li>

</ul>
</nav>
</div>
.........................................

追加CSS(2)

ウジェット : 外観 > カストマイズ > 追加CSSで、ulのクラス名とliのクラス名を指定する

/* menu */
ul.gMenu > li .gMenu_name {
font-size:18px;
text-shadow:1px 1px 0px aliceblue ;
}

感想

トップページのメニューのフォントを変えるにはと思っていたが、検索してみると追加CSSでカストマイズする例が見つかるがそのままではうまくいかない。そのうちじっくりとwordpressのソースコードをみてみようと思っていたが、wordpressのソースコードはclassが幾重にも重なっており見にくく後回しにしていた。

結局、同じLightningのテーマでもバージョンや追加プラグインの違いのため、それぞれ対応する必要がある。

戻る