メニュー設定：タブレット・スマホのヘッダー・フッターモバイルボタン

デフォルトのハンバーガーメニュー、ロゴ、検索ボタンのままでいいんだけど、キャプションをMenu等別のテキストにしたい

キャプションを別のテキストに変えたい場合は、新しくオリジナルメニューを作成するのが手っ取り早いです。

オリジナルメニューの作成手順（デフォルトと同じメニューの場合）

①WordPress管理画面 > 外観 > メニューで、「新しいメニューを作成しましょう」をクリック

②メニュー構造のメニュー名に、自分の分かりやすい任意の名前を入力

③メニュー設定の「ヘッダーモバイルボタン」にチェックし、「メニューを保存」をクリック

④メニュー項目を追加のカスタムリンクで、「URL」に#menu、「リンク文字列」に設定したいキャプションを入力（デモでは、Menuとしています） し、「メニューに追加」をクリック

⑤同様に、カスタムリンクで「URL」に#logo、「リンク文字列」にサイトタイトルを入力（デモでは、Demo-grayishとしています） し、「メニューに追加」をクリック
※ロゴ画像が設定されている場合はロゴ画像が表示されます。この場合リンク文字列に入力したテキストは、表示されません。

⑥同様に、カスタムリンクで「URL」に#search、「リンク文字列」に設定したいキャプションを入力（デモでは、Searchとしています） し、「メニューに追加」をクリック

⑦メニュー構造の「メニューを保存」をクリック

メニュー変更後の表示

キャプションがMenu, Searchになりました。

デフォルトのボタンも不要で、ヘッダーのボタンを消したいとき

WordPress > 外観 > メニューにて、ヘッダーモバイルボタン用のメニューだけ作成します。

メニュー設定で、「ヘッダーモバイルボタン」を選択し、メニューを保存をクリックします。

これでモバイル時の全てのページでヘッダーモバイルボタンは表示されません。

ただし、フロントページ以外のページでは、ボタンがあるはずの位置が空スペースとして残ります。

ロゴだけ表示したい。メニューや検索ボタンが不要な場合

WordPress > 外観 > メニューにて、ヘッダーモバイルボタン用のメニューを作成します。

カスタムリンクで、モバイルボタンコマンドの#logoを入力しメニューに追加します。

メニュー設定で、「ヘッダーモバイルボタン」を選択し、メニューを保存をクリックします。

これでモバイル時の全てのページでヘッダーにロゴのみ表示されます。

ヘッダーのボタンは、全部のページでメニューボタンのみにしたい

#logo以外のボタンを一つだけのメニューにすると、ボタンが一つ中央に表示されて微妙な見た目になります。

23/11/28 追記
Cocoon ver2.6.9.1より、#logo以外のボタンを一つだけのメニューにした場合の仕様を変更いたします。

Cocoon ver2.6.9.1より、
#logo以外のボタンを一つだけのメニューにした場合、フロントページ、その他のページどちらもボタンが画面左上に表示されます。

以下画像は#menuボタンの場合です。他のボタンの場合も同様に左上に表示されます。

以下の手順で子テーマのカスタマイズ例を載せていましたが、バージョンアップ後は不要になります。
恐れ入りますが、このカスタマイズをされていた方はCocoon ver2.6.9.1にアップデート後はコードを削除していただきます様、よろしくお願いいたします。

※Cocoon ver2.6.9.1からは以下カスタマイズは不要になります。

全部のページでメニューボタンを画面左上に表示したい、と仮定して、CSSでのカスタマイズ例を載せておきます。

編集するファイル：子テーマのstyle.css

かならず変更前のファイルをバックアップとしてコピーしてから編集してくださいね！

①モバイルヘッダーボタンメニューをメニューのみで作成（メニュー作成手順はCASE1参照）

②子テーマのstyle.cssに以下のように追加（padding-leftの値を各自の好みで変更する）

レスポンシブデザイン用のメディアクエリの下に追加します。

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {

  /*必要ならばここにコードを書く*/

  /* モバイルヘッダーボタン　#menuだけを左端に表示する */
  .mobile-header-menu-buttons .navi-menu-button .navi-menu-icon {
    text-align: left;
    padding-left: 28px;
  }

  .mobile-header-menu-buttons .navi-menu-button .navi-menu-caption {
    text-align: left;
    padding-left: 20px;
  }
}

/*834px以下*/
@media screen and (max-width: 834px) {

  /*必要ならばここにコードを書く*/
  .mobile-header-menu-buttons .navi-menu-button .navi-menu-icon {
    padding-left: 18px;
  }

  .mobile-header-menu-buttons .navi-menu-button .navi-menu-caption {
    padding-left: 12px;
  }

}

これで以下のような表示にすることが可能です。

ヘッダーモバイルボタンのメニューに#logoが含まれない場合、フロントページのボタンの表示に不具合があります。

フロントページにて、先頭に設定したボタン一つが画面左上でなく画面上の中央に表示されてしまいます。

Cocoon ver2.6.9.1では上記が修正され、メニューに#logoを含まない場合もフロントページのボタンの表示は画面左上になります。

現在お困りの方は、大変お手数ですが、Cocoonの最新版をGithubからダウンロードしてご利用ください。

Cocoonテーマファイルを手動でアップデートする方法

GitHubのCocoonテーマファイル等の、ダウンロードしたzipファイルからアップデートする方法です。 テーマファイルの入手 まずCocoonテーマファイルを入手します。 安定版はCocoonのダ...

wp-cocoon.com