前向きに検討したいと思います。

こんばんは！

シェアボタン欲しいですねー

あと、目次に戻るボタンもあったらいいな

?

シェアボタン以外は、実装してみました。

------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------

以下では、マニュアルを書く際の草稿がてら、簡単に使い方を書いて行こうと思います。

まず、この機能を利用するためには、Cocoon設定の「モバイル」タブにある「モバイルボタンレイアウト」が「スライドインボタン」になっている必要があります。

次にWordPress設定画面の「外観」から「メニュー」を選択します。

メニュー画面では、「オプション」から「CSSクラス」を有効にしておいてください。

メニュー画面で、まず新しいメニューを作成します。

メニュー名をつけて「メニューを作成」ボタンを押します。

URLを指定してメニューを作るには、「カスタムメニュー」から追加行ってください。
※カスタムメニュー以外も普通に利用できます。

詳細設定し画面では、以下のように割り当てられています。

• URL：対象ページへのURL
• ナビゲーションラベル：メニュー名
• CSS class：Font Awesomeアイコフォントのクラス

Font Awesomeのアイコフォントクラスは、以下のバージョン4.7のものを利用します。
https://fontawesome.com/v4.7.0/icons/

例えば星（fa-star）を表示するのであれば、class内の「fa fa-star」を入力します。
https://fontawesome.com/v4.7.0/icon/star

その他に、メニューを追加後、「フッターモバイルメニュー」を選択後、「メニューを保存」ボタンを押してください。

この時点でのモバイルフッターメニューの表示はこんな感じになります。

Cocoon独自メニューについては、所用の後に書きます。

Cocoonデフォルトのモバイルボタン機能を利用したい場合は、特別な入力を行います。

「メニュー」ボタンを表示するには、「カスタムリンク」からURLに「#menu」と。
「リンク文字列」に「メニュー（任意に変更可）」と入力してメニューに追加します。

するとメニューにはこんな感じで表示されます。

メニューボタンをクリックすれば、もちろんグローバルメニューが表示されます。

#menuのような独自モバイルメニューでも、「CSS class」を変更すれば、アイコフォントも変更できます。

アイコンフォントの変更後のメニューボタンはこんな感じ。

その他の独自メニューは、#home
機能はフロントページへのリンクです。

#search
検索ボタンを表示します。

#top
トップに戻るボタンを表示。

#sidebar
サイドバー表示ボタン。

#toc
目次に戻るボタンの表示。

やろうと思えば、こんな感じでいろいろなボタンを表示させることができます。
※多すぎると表示が崩れるので、4～6個のボタン表示推奨。

今のところの、Cocoon独自ボタンをまとめるとこんな感じ。

• #menu：グローバルメニュー表示
• #home：フロントページへのリンク
• #search：検索フォームの表示
• #top：トップに戻るボタンの表示
• #sidebar：サイドバーの表示
• #toc：目次に戻るボタン

※全て小文字で入力してください。

とりあえず、今のところはこんな感じです。

早速の実装ありがとうございます！

動作確認してみましたが特に問題はございませんでした。

目次に戻るボタンも結構便利ですね！

「目次に戻るボタン」イイですね！

このCocoonサイト、スマホからは確認できない？ですが
レスポンシブルテストのサイトから「シェア」も確認できました！
※個人的にはSNSボタンは丸がカワイイです(^O^)

ヘッダーの両端に「メニュ」と「検索」のアイコンがあるサイトをよく見かけるのですが、Cocoonでの実装はご無理でしょうか？
('◇')ゞ

動作確認ありがとうございます。
他の機能もプラスして、バージョンアップしました。
使い方。
https://wp-cocoon.com/mobile-footer-menu/

Cocoon自体、基本方針として、汎用性の高さとカスタマイズのしやすさをテーマに作っているので、なるべくデフォルト状態ではスタイリングの少ない状態にしたいと思っています。
デザイン性の高いものは、スキンで実装するのを基本としたいと思っています。
ただ、まだ機能追加したばかりで、仕様が固まっていないので、今後何かしらの変更は入るとは思います。

ヘッダーの両端に「メニュ」と「検索」のアイコンがあるサイトをよく見かけるのですが、Cocoonでの実装はご無理でしょうか？

実装しようと思えばできますが、するかしないかはまた別の話になると思います。
例えば、メニューなどは、

• パソコン：普通にグローバルメニューが見える
• モバイル：メニューボタンがある

という状態なので、あえてパソコン画面に「メニュー」を表示させる必要性はどういったものがあるでしょうか？

基本的に経験上、サイト訪問者はクリック動作等はなかなか行われないため、実装するのであれば、それでも必要な機能である理由が知りたいです。
※実際自分もパソコン画面でメニューボタンをほぼほぼ押したことがないので。

ヘッダーの両端に「メニュ」と「検索」のアイコンがあるサイトをよく見かけるのですが、Cocoonでの実装はご無理でしょうか？

おそらく、モバイルでヘッダー固定時のハンバーガーメニューについてだと思うのですが、わいひら様のコメントに補足を加えておくと、モバイルでの固定メニューバーはヘッダーよりもフッターの方がクリックされやすい傾向があります。
片手でスマホを持ったときに、ヘッダーよりもフッターの方が指が届きやすいからです。

ただフッター固定にもデメリットがあり、少しの差ではありますが、コンテンツ上のリンククリック率が落ちる可能性がある点です。

• メニューバーにクリックが奪われる
• 指が届く範囲の一部をメニューバーが占める
• コンテンツよりメニューバーに目が行きがち

など、様々な細かい影響が考えられますが、メニューリンクよりもコンテンツ上のリンクの方が重要なニュースサイトなんかはヘッダー固定にしているところも多いです。

ちなみに私は極力固定メニューバーを使用したくない派で、コンテンツ上のリンクがクリックされやすい形で設計するようにしますが、モバイルメニューの位置を気にするのであれば、単純な見た目以外の部分にこだわった方がよいかもしれません。

パソコン画面に「メニュー」を表示させる必要性はどういったものがあるでしょうか？

必要性と言われましても(´・ω・`)

PCにメニュー入れると、スマホはハンバーガーor モバイルヘッダーナビなんですよね？（違いました？）
どっちもスペースを取るから嫌いなんです

わたしもクリックしないんですけど･･･
ヘッダーの中に納まればスッキリすると思います
あと、モバイルフッターメニューもスッキリ

ヘッダーの固定はカスタマイズできても
それ以上は＼(^o^)／お手上げなんです

お返事いただきましてありがとうございました
m(__)m

かっちゃんさんに

PCにメニュー入れると、スマホはハンバーガーor モバイルヘッダーナビなんですよね？（違いました？）
どっちもスペースを取るから嫌いなんです

わたしもクリックしないんですけど･･･
ヘッダーの中に納まればスッキリすると思います
あと、モバイルフッターメニューもスッキリ

Cocoon設定『モバイル』タブにある『モバイルレイアウト』を『トップボタン』にして、ちょっとだけCSSを触れば簡単にできるっぽいですよ。

検索はヘッダー部分に検索のテンプレートを読み込むだけでイケたと思いますけど、それもCSSで調整しないとダメかと思われます。

なんで、ローカルやテスト環境で試してみるが良いかもです。

わたしもクリックしないんですけど･･･
ヘッダーの中に納まればスッキリすると思います

見た目はスッキリしても、クリックされなかったらメニューボタンの必要性はなくなりますよね？
逆にボタンとしてまとめるほどスッキリさせなくても、メニューがクリックされるならその方が必要性がありますよね？

私が補足で書いたのは、「見た目の好みではなく、クリック率などの数値で見た方がいいですよ。」という意味で、わいひら様も具体的な"必要性"を聞いたのだと思います。

今回のフッターメニューについて1点だけ質問があります、メニュー(ナビメニューかな？)についてなのですが

1.7.8にすると子カテゴリがあっても表示されない(親カテゴリのみになっている)ようになっています

この部分は今後以前と同じような(子カテゴリや孫カテゴリも表示されている)状態になりますでしょうか？もしくは設定にあるメニューから追加して作っていく形になりますか？

haineons様、フッター固定メニューバーのメニューボタンをクリックした際に開かれる、カテゴリーリストのことでよろしいでしょうか？

子カテゴリー以下が表示されないのは、CSSでdisplayがnoneに変更されたからです。

https://github.com/yhira/cocoon/commit/3dbc1f23885513de94735dae2141542517564713#diff-0f7304bd1534c1fd5598407ce95e3dd3

「モバイルフッターメニューのデフォルトアイコン設定」とあるものの、具体的にどのような意図でこの変更が行われたのかは細かく見ていないので分かりませんが、子テーマでCSSに

.mobile-menu-buttons .sub-menu {
  display: block;
}

を追加するなどして、displayの指定を書き換えることでとりあえず表示はされると思います。

＞ロコさん

ですです、display: noneに変更されてたんですねー

display: block に変更することで以前と同様に子カテゴリが表示されました、感謝です＾＾

なるほど。
モバイル画面での場合なんですね。
要望の説明が簡潔だったもので、事前に見ていたサイトのメニュー構造を想像してしまいました。
なので、一応どういった需要からの要望なのか知りたくて質問させていただきました。

ヘッダーの両端に「メニュ」と「検索」のアイコンがあるサイト

だと、様々な実装方法が想像できてしまうので、もしイメージがあるのであれば、イメージしているものと似たような仕様になっているサイトのURLを貼り付けていただければと思います。

ただ、モバイル画面だと、「上部にあるメニュー」、「フッターのメニューボタン」の他に、「ヘッダー内のボタン」という選択肢はあってもいいと思うので、いろいろ検討してみたいと思います。

1.7.8にすると子カテゴリがあっても表示されない(親カテゴリのみになっている)ようになっています

これはどこの部分でしょうか。

モバイルフッターメニューにサブメニューを表示させたくないため、こういう仕様にしましたが、どの部分にも適用されていたかが知りたいです。

一応、想像で対応はしてみました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------

ただ、できれば状態がわかる画像等をアップして修正に問題がないかを確認させていただけると助かります。※場所だけわかれば十分です。

.mobile-menu-buttons .sub-menu {
  display: block;
}

このコードの挿入意図としては、モバイルフッターメニューに誤ってサブメニューが挿入されたときに、添付画像のように崩れて表示させないようにしたかったためです。

なので、モバイルフッターメニューのみに適用されれば良いので、モバイルフッターメニューのサブメニューのみに適用されるようには、書き換えてみましたがもしかしたら、他で影響が出るかもしれません。

その際は、おかしな表示になった部分の、キャプチャを貼っていただけると、修正できるかと思います。

一応メニューの設定画面も貼っておきます。

これはどこの部分でしょうか。

私がhaineons様の投稿から頭に浮かんだのは添付画像のカテゴリーリスト（現在のこのサイトで言うモバイルフッターメニューの「MENU」）で、haineons様も解決したとのことなのでたぶんあっているのかなと。

モバイルフッターメニューに誤ってサブメニューが挿入されたときに、添付画像のように崩れて表示させないようにしたかったためです。

https://github.com/yhira/cocoon/commit/f214029a564d8731199a2504faf4786fd1fcbc62

こちらの修正だと、添付画像の崩れた状態に戻ってしまいそうな気がします。
ここはCSSで表示・非表示を指定するのではなく、メニュー取得時に制限すべきかと思います。

https://github.com/yhira/cocoon/blob/master/tmp/mobile-footer-menu-buttons.php

モバイルフッターメニューの取得はこちらですかね。
ここで使用されているwp_nav_menuのパラメータ'depth'に1を指定するとサブメニュー以下は表示されないはずです。

こちらの修正だと、添付画像の崩れた状態に戻ってしまいそうな気がします。

わいひら様の添付画像にある崩れた状態のことです。

まだコードを読んだだけで確認まではしていません。

その部分でよかったんですね。カテゴリーと書かれていたのでこんがらがりました。
修正しておきました。
https://github.com/yhira/cocoon
depthについては、存在を忘れていたようです。。
フッターのメニューでは設定していたのに…。
https://github.com/yhira/cocoon/blob/master/tmp/navi-footer.php

確認しました。
とりあえずhaineons様が質問した点とわいひら様が意図した点については、この修正で問題なく表示されるようです。

.mobile-menu-buttons .sub-menu {
  display: block;
}

haineons様は、最新版への更新時に上のCSS追記を削除してもらっても大丈夫だと思います。

＼(^o^)／

仕様は
お・ま・か・せ
です?

＞「ヘッダー内のボタン」
これ、モバイル用のメニューができるのかな
それとも
パソコンメ表示ニューの使いまわしなのかな(*´з`)

しっかり画像を添付するべきでしたね申し訳ないです、今更ですがこうしたかった画像を上げておきます

guthubの最新版に上げた所、意図したように表示されています

おまかせが一番困ります…。
どういう機能を望んでおられるのかが、分からないので。

これ、モバイル用のメニューができるのかな
それとも
パソコンメ表示ニューの使いまわしなのかな(*´з`)

これも申し訳ないですが、いろいろな意味にとれるので、もう少し詳しく書いていただけると助かります。
これだけだと、なんて答えていいものやら、ちょっと分からないです。

ヘッダーなかのレイアウトは「SANGO」さんですかね
サンゴさんはメニューでモバイル用のサイドバーを表示しているのかな？
これはこれで ?素敵ですよね 

＞モバイル用のメニューができるのかな

うまく伝わらなかったようで
 ? ん･･･ 

メニューは管理画面からたくさん作成できますよね
「位置の管理」→「テーマの位置」に
スライドインがあればモバイル用メニューができるのでないかと
（あくまでもシロート考えです）

伝わりました？？

SANGOに「モバイル用のサイドバー」てあります？
見たところ、添付画像に検索ボタンしか表示されていないように見えます。
それとも、機能を変更とかで表示できる設定とかがあるのかな？
すいません使ったことがないので^^;