Cocoonフォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

モバイル用フッター固定メニューの内容を...
 
共有:
通知
すべてクリア

モバイル用フッター固定メニューの内容を自由に設定したい

76投稿
6ユーザー
13Likes
8,327表示
yukito
(@yukito)
Eminent Member Registered
結合: 5年前
投稿: 43
Topic starter  

お世話になっております。

モバイル設定でスライドインボタンをチェックするとフッター固定メニューとして「メニュー」「ホーム」「検索」「トップ」「サイドバー」が表示されますが、この内容を自由に設定したいです。

参考URL
https://snow-monkey.2inc.org/manual/navigation/smartphone-footer-nav/
https://saruwakakun.com/sango/mb_footer

アドセンスメインのメディアであれば「メニュー」「ホーム」「検索」「トップ」「サイドバー」で十分だと思うのですが、ガチガチのアフィリエイトサイトだとフッター固定メニューを自由に設定できた方が収益を上げやすいです。

「SANGO」「JIN」「Affinger」など人気WPテーマのほとんどで実装されておりますのでCocoonでもご検討頂けると嬉しいです。

よろしくお願いいたします。


   
引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
かっちゃん
 かっちゃん
(@かっちゃん)
Active Member
結合: 3年前
投稿: 5
 

こんばんは!

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

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

?


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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

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

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

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


   
yukito reacted
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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

 


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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

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

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

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


   
yukito reacted
返信引用
yukito
(@yukito)
Eminent Member Registered
結合: 5年前
投稿: 43
Topic starter  

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

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

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


   
返信引用
かっちゃん
 かっちゃん
(@かっちゃん)
Active Member
結合: 3年前
投稿: 5
 

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

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

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

 


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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

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

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

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

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

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

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


   
返信引用
ろこ
(@lococo)
Prominent Member Registered
結合: 4年前
投稿: 830
 

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

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

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

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

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

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


   
わいひら reacted
返信引用
かっちゃん
 かっちゃん
(@かっちゃん)
Active Member
結合: 3年前
投稿: 5
 

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

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

PCにメニュー入れると、スマホはハンバーガーor

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

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

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

 


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
かうたっく - Facebook
 

かっちゃんさんに

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

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

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

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

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


   
わいひら reacted
返信引用
ろこ
(@lococo)
Prominent Member Registered
結合: 4年前
投稿: 830
 

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

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

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


   
わいひら reacted
返信引用
haineons
(@haineons)
Trusted Member Registered
結合: 4年前
投稿: 73
haineons - Twitter
 

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

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

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


   
返信引用
ろこ
(@lococo)
Prominent Member Registered
結合: 4年前
投稿: 830
 

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

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

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

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

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

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


   
返信引用
haineons
(@haineons)
Trusted Member Registered
結合: 4年前
投稿: 73
haineons - Twitter
 

>ロコさん

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter
 

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

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

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 13813
わいひら - Facebookわいひら - Twitter