サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021年8月9日 11:43
◆対象ページのURL： https://officelove.net/
◆相談内容：ヘッダーメニューにカテゴリーを設定する事は可能でしょうか？
（※ヘッダーメニューに「カテゴリー」という項目を表示して、そこから各カテゴリーを選び、各カテゴリーのページに飛べるように設定したいです）
◆テーマ情報
サイト名：片恋オフィスラブ
サイトURL： https://officelove.net
ホームURL： https://officelove.net
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：5.8
PHPバージョン：7.4.13
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.3.4
カテゴリ数：48
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：0.0.5
style.cssサイズ：826バイト
functions.phpサイズ：169バイト
----------------------------------------------
2021年8月9日 14:22
小嶋 司さん
私のテストサイトはカテゴリー数が少ないため、左側と右側は同じカテゴリーが並んでいますが、左右カテゴリーのメニューを別々に作れば、カテゴリーは重複しません。
参考
意図した記事一覧を作成できる「ナビカード」ショートコードの使い方
https://wp-cocoon.com/navi-card-shortcode/
以下にやってみた手順を記します。
1、固定ページを新規に作成して、記事タイトルを「カテゴリー一覧」などにして、URLスラッグを「category-list」などわかりやすいスラッグにしておきます。(本文部分はあとで作成します)
２、「外観」→「メニュー」と辿り、新しいメニューを作成します。
３、画面右上の「表示オプション」をクリックして、「CSSクラス」と「説明」にチェックをいれておきます。
４、メニュー名は、「カテゴリー一覧(左)」とでもしておくと良いかと思います。（本文部分に２列で表示させるためです。）
５、「メニュー項目を追加」の「カテゴリー」から固定ページの左側に表示したいカテゴリーにチェックを入れて「メニューに追加」ボタンをクリックして「メニュー構造の」項目に加えます。
６、メニュー構造の中にある各カテゴリーをクリックして開き、「説明」を入力します。
７、メニュー構造の中にある各カテゴリーの説明を入力したら「メニューを保存」ボタンでメニューを保存します。
８、同様に本文部分の右側に表示させるためのメニューを作成します。メニュー名は、「カテゴリー一覧(右)」とでもしておくと良いかと思います。（左側のメニューに設定したカテゴリーと被らないようにカテゴリーをチョイスします。メニューの数は左側と同じ数が良いでしょう。）
９，２つの新しいメニューが出来たら、最初に作成した固定ページを編集します。
１０、タイトルの下に「カラム」ブロック（カラムブロックはWordPressのものとCocoonオリジナルの２カラム、３カラム、ブロックがありますが、今回はWordPressのカラムブロックを使用しています。）を挿入して50/50を選択します。
１１、カラムブロックの左側のブロックに「ショートコード」ブロックを挿入して
[navi_list name="カテゴリー一覧(左)"]
のショートコードを貼り付けます。
次にカラムブロックの右側のブロックに「ショートコード」ブロックを挿入して
[navi_list name="カテゴリー一覧(右)"]
のショートコードを貼り付けます。
プレビューして、表示を確認して上手く表示されていたら公開します。
これで固定ページは一応、完成です。
１２、次にこの作成した固定ページをグローバルメニューに追加します。
１３、やはり、「外観」→「メニュー」と辿り、「編集するメニューを選択」のところで、グローバルメニュー（ヘッダーメニュー）を選択します。
１４、「メニュー項目を追加」の「固定ページ」を開き「カテゴリー一覧」にチェックを入れて「メニューに追加」ボタンでメニュー構造に追加して「メニューを保存」ボタンでメニューを保存します。
This post was modified 3年前 2回 by リフィトリー
わいひら reacted
2021年8月9日 14:46
小嶋 司さん
２列表示にしているので、スマホ表示だと左側が上で右側は下になります。
2021年8月9日 19:41
小嶋 司さん
ちょっと、そそくさと書き込んだため、手順１１のところのコードが欠けていたようです。
再度、以下に書き込んでみます。
ショートコードが上手く表示されないので、最初の括弧の直後に半角の空白を入れています。
１１、カラムブロックの左側のブロックに「ショートコード」ブロックを挿入して
[ navi_list name="カテゴリー一覧(左)"]
のショートコードを貼り付けます。
次にカラムブロックの右側のブロックに「ショートコード」ブロックを挿入して
[ navi_list name="カテゴリー一覧(右)"]
のショートコードを貼り付けます。
プレビューして、表示を確認して上手く表示されていたら公開します。
これで固定ページは一応、完成です。
This post was modified 3年前 2回 by リフィトリー
わいひら reacted
2021年8月9日 20:54
あとで見返してみたら、これ、ショートコードなので、カテゴリーを分類して整理し、その分類のタイトルを見出しで付ける、なんて使い方もできちゃうっぽいです。
いろいろと応用してみてください。
2021年8月29日 11:54
小嶋 司さん
いままでの小嶋さんのフォーラムでのご質問からすると、ちょっと難しかったでしょうか？(ご返信がないので・・)
もしくは、イメージされていたものとはちょっと違っていた、とかでしょうか？
Topic starter
2021年9月5日 14:02
回答ありがとうございます！
パソコンが故障してしまい、フォーラムの返信が見れない状況になってりました。
返信が遅れて申し訳ありません！
まだ、手順を実践出来ておりませんが、
かなり詳しく説明して頂いたので、大丈夫かと思います。
後ほど実践させて頂きます！
お忙しいところありがとうございました(^^)
リフィトリー reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。