これまでの無料WordPressテーマ「Cocoon」の各部の変更によって、かなりシンプルなデザインになってきました。
そうすると、フッターがイマイチな感じがすることに気づくと思います。
このページでは「Cocoon」のフッターを3カラムにしてデザイン的な重さを持たせていきます。
もくじ
Cocoonのノーマルなフッター
まず、「Cocoon」のノーマルなフッターを見てみます。

とても、シンプルな作りです。
ロゴとコピーライトしかありません。
これだと、コンテンツの回遊性を向上させる目的は果たせそうにありません。
「Theme3」では、企業サイトのWordPressテーマに「
ワードプレステーマTCD
」をオススメしています。
WordPressテーマ「SOLARIS」のPRを見る
オススメの理由は、以下のページをチェックしてください。
Cocoonのフッターをどのように改善するか
そこで、3カラムを使って、以下の要素を配置することを考えます。
- オススメ情報
- キーワード(タグ)
- プロフィール
これらをフッターに配置すればサイトの回遊性を高めることが想定できます。
また、軽い感じのフッターをデザイン的に重くすることも可能です。
「Theme3」では、企業サイトのWordPressテーマに「
ワードプレステーマTCD
」をオススメしています。
WordPressテーマ「SOLARIS」のPRを見る
オススメの理由は、以下のページをチェックしてください。
フッターを中央寄せにする
まず、コピーライトが右側にあるのが気になるので中央寄せにします。
「管理画面」→「Cocoon設定」→「フッター」を設定します。

- フッター表示タイプ→メニュー&クレジット(中央揃え)
- クレジット表記→独自表記
クレジット表記の「サイト名」をトップページのリンクにするため「独自表記」にして、以下のコードを設置します。
© 1999 <a href="https://www.sample.jp/">サンプルサイト</a> All Rights Reserved.
フッターメニューを配置する
「Cocoon」はコピーライトと同階層にフッターメニューを配置できます。

メニューを作成し、メニュー設定で「フッターメニュー」を選択します。
フッターの3カラムを設置
フッターの3カラムはウィジェットによって設置します。
「Cocoon」には3カラムのそれぞれのウイジェットが定義されています。

フッター左の設置項目
「管理画面」→「外観」→「メニュー」→「フッター左」に「[C]おすすめカード」と「ナビゲーションメニュー」を設置します。
このサイトの場合は「「Cocoon」のおすすめカード」が「カテゴリーカード」
「おすすめ記事」を「ピックアップ」として「フッター左」に配置しています。

おすすめカードのメニュー作成方法
「Cocoon」のおすすめカードの設置は、まず、「管理画面」→「外観」→「メニュー」から新しいメニューを作成します。

このメニュー名をウィジェットの「[C]おすすめカード」で指定します。
ナビゲーションメニューのメニュー作成方法
「ナビゲーションメニュー」についても同様に、先にメニューを作ります。

「ナビゲーションラベル」に以下を設定するとボタンに矢印が表示されます。
ボウイ 全スタジオアルバム解説 <i class="fa fa-caret-right" aria-hidden="true"></i>
<i以降が矢印です。
※今ではCSSで矢印を後付けする方が一般的ですが、ここでは古い手法を使ってみます。
フッター中の設置項目
「フッター中」には「タグクラウド」を配置します。

フッター右の設置項目
「フッター右」は「カスタムHTML」で「ロゴ、プロフィール、SNS」を設置します。
その他は「カテゴリー」と「検索」です。
スマホでは「SNS」「カテゴリー」「検索」が最後に表示されることになります。

カスタムHTMLは以下の様になっています。
<div class="centering foot-about-rogo">
<center><a href="https://www.bluelady.jp/"><img width="220" height="57" src="https://www.bluelady.jp/wp-content/uploads/2023/05/rogo-4.png" class="custom-logo" alt="ブルーレディ" decoding="async"></a></center>
</div>
<p class="foot-about">「ブルーレディ」は、平井和正、デヴィッド・ボウイ、アイルトン・セナの3人のヒーローを中心にしたブログです。その他にも、電子書籍・音楽情報・F1情報・各種レビューなど、多くのコンテンツが派生しました。中でも書籍の電子化・自炊に関するノウハウが特に充実しています。<br>ブログ名称は平井和正の作品「BLUEシリーズ」をルーツとしています。<br>
<br>※フェイスブックではデヴィッド・ボウイ中心の情報を発信しています。</p>
<div class="link-list centering">
<a href="https://www.bluelady.jp/sitemap/" title="サイトマップ"><i class="fa fa-sitemap" aria-hidden="true"></i></a><br>
<a href="https://www.bluelady.jp/about/" title="プロフィール"><i class="fa fa-user" aria-hidden="true"></i></a><br>
<a href="https://www.bluelady.jp/contact1/" title="お問い合わせ"><i class="fa fa-envelope-square" aria-hidden="true"></i></a><br>
<a href="https://www.facebook.com/bluelady.jp/" title="フェイスブック"><i class="fa fa-facebook-official" aria-hidden="true"></i></a><br>
<a href="https://twitter.com/bluelady09" title="ツイッター"><i class="fa fa-twitter" aria-hidden="true"></i></a><br><br>
</div>
※当方のサイトのコードをそのまま掲載していますので、ドメイン名やSNS等をカスタマイズしてください。
フッターの表示結果
どうなったか確認してみましょう。

なんだかカッコ悪いものが出来上がりました。
ひとつひとつ調整していきます。
フッターのデザインを調整する
まず、「フッター左」の「おすすめカード」を調整します。
このエリアがグレーになっているのはカテゴリーにアイキャッチ画像が設定されていないからです。
カテゴリーのアイキャッチを設定
「管理画面」→「投稿」→「カテゴリー」から該当するカテゴリーのアイキャッチを設定します。

CSSでフッタを成形
あとはCSSで形を整えていきます。
詳細はコメントを参照してください。
/* フッター */
/* フッターはスマホも表示させる */
@media screen and (max-width: 834px){
.footer-widgets {
display: block;
}
}
/* フッター左 */
/* おすすめの文字の大きさ */
.recommended.rcs-center-title .card-content {
font-size: .7em;
font-weight: bold;
}
/*ピックアップ*/
.widget_nav_menu .menu-item-object-category a,
.widget_nav_menu .menu-item-object-custom a,
.widget_nav_menu .menu-item-object-post a {
padding: 10px;
margin-left: 0;
margin-bottom: 15px;
border: 1px solid #111;
background-color: #fff;
display: block;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
font-size: 95%;
transition: all .3s ease-in-out;
}
.widget_nav_menu .menu-item-object-category a:hover,
.widget_nav_menu .menu-item-object-custom a:hover,
.widget_nav_menu .menu-item-object-post a:hover {
background-color: #f7f7f7;
}
.widget_nav_menu .menu-item-object-category .fa,
.widget_nav_menu .menu-item-object-custom .fa,
.widget_nav_menu .menu-item-object-post .fa {
float:right;
margin-top:0.4em;
}
/*ピックアップを2行にする*/
@media screen and (min-width: 541px){
.footer .menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.footer .menu li {
width: 49% !important;
}
}
@media screen and (min-width: 1024px){
.footer .menu li {
width: 100% !important;
}
}
/* フッター中 */
/*ピックアップとマウスオーバー色を合わせる*/
.tagcloud a:hover {
background-color: #f7f7f7;
}
.footer .tagcloud {
margin-top: 16px!important;
}
/* フッター右 */
.foot-about-rogo {
margin-top: 20px;
margin-bottom: 1em;
}
.foot-about {
font-size: 14px;
}
/*フッターSNS*/
.footer .link-list {
padding-top: 2em;
display: flex;
justify-content: center;
}
.footer .link-list a {
font-size: 25px;
color: #555;
text-decoration: none;
transition: all 0.3s ease-in-out;
margin-right: 0.3em;
margin-left: 0.3em;
line-height: 25px;
display: block;
width: 25px;
height: 25px;
}
.footer .link-list a:hover {
color: #111;
}
.footer .fa-external-link {
display: none;
}
/*カテゴリーのタイトルが、何故か表示されるので消す*/
.footer .widget_categories .footer-title {
display: none;
}
/* カテゴリー、アーカイブのプルダウンマーク */
.widget_archive select, .widget_categories select, .wp-block-archives-dropdown select, .wp-block-categories-dropdown select {
appearance: none;
background-color: #fff;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="5"><path d="M0,0 10,0 5,5z" fill="var(--main-text-color)" /></svg>');
background-position: 98%;
background-repeat: no-repeat;
border: 1px solid var(--cocoon-basic-border-color);
border-radius: 3px;
color: #757575;
cursor: pointer;
display: block;
height: auto;
line-height: 32px;
padding: 6px 24px 6px 12px;
width: 100%;
font-size: var(--cocoon-default-text-size);
}
/*検索を調整*/
.search-edit, input[type=text], input[type=password], input[type=date], input[type=datetime], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=time], input[type=url], textarea, select {
padding: 6px 12px;
border: 1px solid var(--cocoon-basic-border-color);
font-size: var(--cocoon-default-text-size);
width: 100%;
border-radius: 3px;
line-height: 32px;
}
/* フッターナビとコピーライトの並びを成形 */
.navi-footer-in > .menu-footer {
display: block;
text-align: center;
margin-top: -2em;
}
.navi-footer-in > .menu-footer li {
border: none;
margin-bottom: 1em;
}
.navi-footer-in > .menu-footer li:last-child {
border: none;
}
.navi-footer-in > .menu-footer li.menu-item {
width: 100%;
}
.footer-bottom.fnm-text-width .menu-footer li a {
padding: 0;
margin-right: auto;
margin-left: auto;
}
.navi-footer-in a {
display: initial;
text-align: center;
width: auto;
}
.navi-footer-in a:hover {
background-color: transparent;
text-decoration: underline;
}
.copyright {
padding-top: 1em;
padding-bottom: 2em;
}
.copyright a {
color: var(--cocoon-text-color);
text-decoration: none;
}
.copyright a:hover {
text-decoration: underline;
}
大きく変更したのはスマホでフッターウィジェットをそのまま表示するようにしていることです。
また、「Cocoon」のプルダウンメニューは形が悪いので、現在では一般的になったSVGを使用するように変更しました。
※/* カテゴリー、アーカイブのプルダウンマーク */の箇所
結果
結果は以下です。

ずいぶん美しくなりましたね。
しかし、「フッター中」のタグが長すぎます。
タグについては最適化する必要があります。
タグクラウドを最適化する方法
タグクラウドは表示個数の制限や指定したIDのタグを非表示にしたりすることができます。
特に表示したくないものを非表示にする機能は、タグクラウドを最適化する上で重要です。
タグクラウドの制御は「functions.php」で行います。
/**
* タグの停止
*/
function custom_widget_tag_cloud_args($args) {
$args['exclude'] = array(902, 825, 981, 477, 872, 1034, 1144, 1195, 1196, 1153, 1149, 510, 543, 1015, 1024, 1049, 1174, 891, 121, 1050, 114, 550, 938, 1016, 1398, 45, 824, 1372, 1387, 72, 1207, 201, 146, 222, 365, 509, 544, 548, 852, 1104, 1123, 196, 1586, 1491, 44, 1408);
return $args;
}
add_filter('widget_tag_cloud_args', 'custom_widget_tag_cloud_args');
/**
* タグの表示数
*/
function custom_tag_cloud_number_filter($args) {
$myargs = array(
'number' => 47,
);
$args = wp_parse_args($args, $myargs);
return $args;
}
add_filter('widget_tag_cloud_args', 'custom_tag_cloud_number_filter');
このコードを「functions.php」に書きます。
タグを非表示にする方法
「custom_widget_tag_cloud_args」関数の$args[‘exclude’] = array(以降の番号がタグIDです。
指定したIDのタグが非表示になります。
タグIDは「管理画面」→「投稿」→「タグ」のタグ一覧で調べます。

削除したいタグをマウスオーバーしても調べられます。
タグの表示数を制限する方法
「custom_tag_cloud_number_filter」関数の‘number’ => 47が表示個数です。
フッターの長さを見ながら決定してください。
Cocoonフッターのカスタマイズ結果
以下のようになりました。

「フッター中」が一番長くなるようにすると、デザイン全体のセンター揃えが強調されてみえるので、カッコいいです。
まとめ
このページでは以下のことをおさえてください。
- ウィジェットでフッターを3カラムにする方法
- おすすめカードの使い方
- プルダウンメニューの下矢印の変更方法
- タグクラウドの最適化方法
その他、かなり盛りだくさんなページになっています。
しっかり読み込んで実践してみていただけると、スキルアップにつながると思います。
Cocoonのフッターを整えましょう。