WordPress - footer カストマイズ

WordPressのフッターは常に各ページの一番下にメニューやウジェット、Copyrightなどと表示される。テーマによってはヘッダーとフッターのカストマイズ用メニューが用意されているがLightning にはない。またプラグインもあるがここでは追加CSSの使い方を紹介する。

HTML5からセマンティック要素が使われるようになってhtml経験の少ないユーザーにとっては若干複雑になった。

主なセマンティック要素

*セマンティック要素 : HTML文書の構造や意味を明確にするために使用される要素。セマンティック（semantic）は英語で「意味の」、「意味論の」という意味。

ここでは、実際のサイトからフッター部分のみ取り出して疑似コードを作成して調整してみた。

• フッターの背景をdarkblue (#00008b)にする
• Copyright ©の2行目Powered by.....を表示しない
• メニュー背景も darkblue (#00008b)にする、テキストはwhite

わかりやすく整頓している。

<footer class="section siteFooter">
<div class="footerMenu">
<div class="container">
<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-1" class="menu nav">
 <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 menu-item-890"><a href="https://ABC.comx/" aria-current="page">HOME</a></li>
 <li id="menu-item-838" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-838"><a href="https://ABC.comx/?page_id=43">会社案内</a></li>
 <li id="menu-item-839" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-839"><a href="https://ABC.comx/?page_id=46">業務紹介</a></li>
 <li id="menu-item-842" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-842"><a href="https://ABC.comx/?page_id=719">求人情報</a></li>
 <li id="menu-item-841" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-841"><a href="https://ABC.comx/?page_id=49">アクセス</a></li>
 <li id="menu-item-837" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-837"><a href="https://ABC.comx/?page_id=200">問い合わせ</a></li>
</ul>

</nav>	
</div>
</div>

<div class="container sectionBox footerWidget">
<div class="row">
<div class="col-md-4">
<aside class="widget widget_block" id="block-16">

<ul class="wp-block-list">
<li class="vk_block-margin-0--margin-top"><a href="https://ABC.comx/?page_id=258"><strong>プライバシーポリシー</strong></a></li>
</ul>

</aside>
</div>
<div class="col-md-4"></div><div class="col-md-4"></div>	
</div>
</div>	

<div class="container sectionBox copySection text-center">
 <p>Copyright © 株式会社　ABC All Rights Reserved.</p><p>Powered by <a href="https://wordpress.org/">WordPress</a> with <a href="https://wordpress.org/themes/lightning/" target="_blank" title="Free WordPress Theme Lightning">Lightning Theme</a> & <a href="https://wordpress.org/plugins/vk-all-in-one-expansion-unit/" target="_blank">VK All in One Expansion Unit</a></p>	
</div>

</footer>

/* footer 2行目 非表示 */
footer .copySection p:nth-child(2) {
    display:none !important;
}

/* footer background-color darkblue */
.siteFooter,
.footerMenu,
.footerMenu .container,
.footerMenu nav {
    background-color: #00008b !important;
    color: #ffffff !important;
} 

.footerMenu a ,
.wp-block-list li a {
    color: #ffffff !important;
}

.footerMenu a:hover {
    color: #cccccc !important;
}