「メイド・イン・ヘブン」スキン適用中

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. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

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

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

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

76 投稿
6 ユーザー
13 Likes
10.7 K 表示
(@yukito)
Eminent Member Registered
結合: 6年前
投稿: 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
結合: 6年前
投稿: 16317
 

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


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

こんばんは!

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

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

?


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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

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

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

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


   
yukito reacted
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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

 


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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

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

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

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


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

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

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

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


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

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

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

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

 


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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

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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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

 


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

かっちゃんさんに

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

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

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

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

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


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

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

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

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


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

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

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

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


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

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

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

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

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

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

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


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

>ロコさん

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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

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

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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

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

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

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

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 
.mobile-menu-buttons .sub-menu {
  display: block;
}

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

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


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

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

私が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を指定するとサブメニュー以下は表示されないはずです。


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

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

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


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

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

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

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


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

\(^o^)/

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

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

 


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

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

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


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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

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

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


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

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

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

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

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

伝わりました??


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

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


   
返信引用
固定ページ 1 / 2
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました