前提
以下の記事に記載の内容以外で実施したことを、記載する。
ボックスメニューの作成
・Font Awesome5のアイコンを使用
・ウィジットとして「コンテンツの上部」にボックスメニューを表示
ヘッダーレイアウトを「トップメニュー 右寄せ」にする
[Cocoon設定]→[ヘッダー]の「ヘッダーレイアウト」で設定する
目次を「サイドバースクロール追従」に追加
[外観]→[ウィジット]で追加する
メニューにアイコンを付与する
Font AwesomeFont Awesome5でフリーのアイコンのコードを取得する。
取得したコードをメニューの「ナビゲーションラベル」に記載する。
ヘッダー下に画像を表示
「アピールエリア」を利用して表示する。
[Cocoon設定]→[アピールエリア]
┗アピールエリアの表示 ：「全ページで設定」
┗エリア画像 ：任意の画像を設定。サイズは
┗アピールエリア背景画像の固定 ：チェックを外す
┗テキストメッセージエリアを表示する ：チェックを外す
上記以外は未設定 or デフォルトのまま。
ヘッダーのカスタマイズ
[Cocoon設定]→[ヘッダー]
┗背景色：白
┗文字色：黒
フッターのカスタマイズ
①[Cocoon設定]→[フッター]
┗背景色：グレー(6c757d)
┗文字色：白
②[外観]→[ウィジット]
┗「アーカイブ」を「フッター左」に追加
┗「カテゴリー」を「フッター中」に追加
③スタイルシートを修正
・「フッターのロゴ」を非表示にする
・「フッターウィジット」の横幅を変更する
・「フッターウィジット」配下の「カテゴリとアーカイブのリストの文字サイズ」を変更する
・「フッターウィジット」配下の「カテゴリとアーカイブのリスト」を装飾
・「フッターウィジット」配下の「カテゴリとアーカイブのリスト」のオンマウス時の設定を変更
/*「フッターのロゴ」を非表示にする*/
.footer-bottom-logo .logo-image, .footer-bottom-logo .logo-text {
display: none;
}
/*「フッターウィジット」の横幅を変更する*/
.footer-left, .footer-center, .footer-right {
width: 25.00%;
}
/*「フッターウィジット」配下の「カテゴリとアーカイブのリストの文字サイズ」を変更する*/
#footer .widget_categories ul li, #footer .widget_archive ul li {
display: inline-block;
margin: 2px;
padding: 0;
font-size: 13px;
letter-spacing: 0;
}
/*「フッターウィジット」配下の「カテゴリとアーカイブのリスト」を装飾*/
#footer .widget_categories ul li a, #footer .widget_archive ul li a {
background-color: #343a40;
text-transform: uppercase;
padding: 2px 4px;
border-radius: 3px;
}
/*「フッターウィジット」配下の「カテゴリとアーカイブのリスト」のオンマウス時の設定を変更*/
#footer .widget_categories ul li a:hover, #footer .widget_archive ul li a:hover {
background: #000000; /* 背景色 */
}投稿ページや固定ページを作成したユーザー名を非表示にする
スタイルシートを修正する。
/*投稿ページや固定ページを作成したユーザー名を非表示*/
.author-info {
display: none;
}ヘッダーに検索ボックスを追加
以下を「functions.php」へ追記する。
//ヘッダーに検索ボックスを追加
add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
ob_start();
get_search_form();
$searchform = ob_get_contents();
ob_end_clean();
$items .= '<li>' . $searchform . '</li>';
return $items;
}
//Cocoon設定のヘッダーのプレビューを無効化（検索ボックス対策）
add_filter('cocoon_setting_preview_header', '__return_false');以下をスタイルシートへ追記する。
/*ヘッダーに追加した検索ボックスを微調整 */
#navi-in .search-box {
margin: 0;
position: relative;
}
/*ヘッダーに追加した検索ボックスの内部の文字サイズを変更 */
#navi-in .search-box .search-edit{
font-size: 10px;
}
/* フッターメニューX番目検索窓の消す ※ここでは4番目としている。状況に応じて変更する。*/
.navi-footer-in>.menu-footer>li:nth-child(n+4) {
display: none;
}モバイルスライドインメニューの作成
[外観]→[メニュー]でモバイルスライドインメニューの作成する。
ボックスメニューのオンマウス時の設定を変更。
以下をスタイルシートへ追記する。
/* ボックスメニューをカスタマイズ。オンマウス時の設定 */
.box-menu:hover{
box-shadow: none; /* 枠線を消す */
background: #E6E6FA; /* 背景色 */
}ヘッダーメニュー(１つ目と2つ目のみ)のオンマウス時の設定を変更
ヘッダーメニューの１つ目と2つ目のオンマウス時の設定を変更。
以下をスタイルシートへ追記する。
/* ヘッダーメニュー(１つ目と2つ目のみ)のオンマウス時の設定を変更。 */
#navi-in ul li:nth-child(1):hover, #navi-in ul li:nth-child(2):hover{
box-shadow: none; /* 枠線を消す */
background: #E6E6FA; /* 背景色 */
}サイトロゴを作成し設定
作成例)
①「B. ロゴタイプ」で「シンプルのやつ」を選択
②「日本語・英数字」にサイト名を入力
③「色」を任意で変更
④「フォント」を任意で変更
⑤「1.作成」をクリック
⑥「2.ダウンロード」をクリック
⑦[Cocoon設定]→[ヘッダー]の「ヘッダーロゴ」に設定する。