本サイトにはプロモーションが含まれています

[WordPress]「Cocoon」のトップページにカテゴリーメニューを表示させる方法など

Wordpressテーマの変更cocoon

前記事『ワードプレスのテーマをSimplicityからCocoonへ簡単に変える方法』からのココです。

あわせて読みたい
[Simplicity2からCocoonへ]ワードプレスのテーマを変更する[WordPress] 以前、当方の趣味のブログは全てテーマ「Simplicity2」で作っていると書かせていただいた気がしますが、映画のブログは「はてな」からWordpressに移転した時点で「Cocoo...

記事の内容は、テーマの移行ではなくて初めての「Cocoon」だという方でも使えるように書いています。

「まず、やった方が良い事」も記載していますので、お急ぎの方は「目次」を使って目的の部分だけご覧ください。

目次

テーマ「Cocoon」のトップページを簡単にカスタマイズあれこれ

まず、「Simplicity2」から「Cocoon」にテーマを移行した時点で、案件のブログのスタイルはほとんど崩れていませんでした。ヘッダー画像が消えて真っ白になったくらい。

元々、そのブログはトップページを「固定ページ」で作成していました。

当方の所有ではなく、知り合いのページを無料ブログからWordpressに引っ越ししてテーマを「Simplicity2」に設定するという作業までを請け負ったもので、ちょっとブログ名や画像を使う事が出来ず、やりにくいのですが、「Simplicity2」時の見てくれはこんな感じ。

Cocoonトップページカスタマイズ

 

メインカラムのボックスは、プラグインなどで作っているわけではなく、HTMLでtableタグを使って作っていたようです。そのせいか、Googleせんせーからモバイル・ユーザビリティの問題を指摘されるメールが来たそうで。

今回は、tableタグなど使わずに、入れたい所に入れたいものを詰め込むトップページを作りたいという話。

しかし、テーマをCocoonに変更した現在、モバイル・ユーザビリティテストにはこのままでOKが出ており、ヘッダーも元々の画像よりも真っ白の方が良いような気がする(笑)このままでいいのでは……という気も……。

まぁ、ちゃかちゃかと要点だけ書いて行きます。

ヘッダーカスタマイズ

先ほども書いたようにSimplicityからCocoonへ移行したらヘッダー画像が消えました。ので、設定し直します。

1. ダッシュボードの「Cocoon設定」→「ヘッダー」タブを開く

ここでは他にグローバルメニューやフォントカラー、背景色などが設定できます。

2. 「ヘッダー背景画像」に設定

「Simplicity2」の時に使っていた画像がそのまま戻ります。(ちなみにサイズは「Simplicity2」のまま1280 × 640の物を使用しました。当然、何らかの方法で圧縮してから使用のこと)

個人的な印象では、ヘッダーが大きくて画像がガッツリ入っているほど「個人ブログっぽい」。ヘッダーの高さが狭くて無色透明な感じにそっけないのは「企業っぽい」。感覚です。ヘッダーはトップページだけではなく全ページに付いてきますので、ここの印象は結構大事かも。

サイドバーの見出しやフッター色を変更する

「Cocoon設定」→「全体」タブを開くと「サイトキーカラー」などを設定する事が出来ます。サイドバーの見出しカラーやフッターのカラーは基本的にここで設定したカラーになります。

サイトの全体的なカラーは「Cocoon設定」でほぼ終わります。まずはここを色々といじってみるといいと思います。

フッターにメニューを入れる

ひと昔前はブログのフッターをオシャレにカスタマイズする事が流行りましたが、アクセスがほぼほぼスマホからになっているこの時代、凝ったフッターはむしろ邪魔ですよね。

少なくともスマホ表示のフッターはメニューだけ分りやすく表示されていれば充分だと思います。

1.ダッシュボードの「外観」⇒「メニュー」を開く

2.一番下、メニュー設定の「フッターナビ」にチェック

3.「Cocoon設定」→「フッター」タブから表示を調整(フッター背景色もここから変えられます)

フッターメニューは、これだけで完成。

トップページカスタマイズ

本題です。

1.まずトップページを「固定ページ」に設定

これは「Simplicity2」と同じです。
基本的に何のカスタマイズもしていない状態だとWordpressのトップページは新着記事の一覧が並んだ状態になります。以下参照。

あわせて読みたい
【WordPress】トップページを固定ページにしつつ最新記事も表示する方法 たびたび書いておりますが、当方ではWordPressのテーマに「Simplicity」(→SWELL)を使わせていただいています。 2024年テーマを「Simplicity」→「Cocoon」→「SWELL」と変...
つまりやる事はトップ用の固定ページを1つ作る事。そして「設定」→「表示設定」→「ホームページの表示」で「固定ページ」を選択。

2.テーブルタグを使わずに綺麗にボックスデザインを作る

この記事の冒頭でご説明した「ボックスを作るディスプレイ」をCocoonでは簡単にtableタグ無しで作ることができます。

Cocoon
記事内を2カラム・3カラム・4カラムに分ける方法 投稿記事内に手軽に2カラム・3カラムレイアウトを挿入する方法です。ビジュアルエディターからクリック操作のみで入力可能です。

 

1.ビジュアルエディターで右上の「ツールバー切り替え」アイコンをクリック

2.「タグ」という項目が出て来るので右の▲をクリック

3.プルダウンメニューから挿入したいカラムを選択

「Cocoon」で簡単にカラム分けする方法(ボックスを作る)

4.「右側(左側)に入力する内容」の部分にテキストや画像を挿入

「Cocoon」で簡単にカラム分けする方法(ボックスを作る)

こんな風に簡単にボックス分けできます。

青や黄色のバックカラーは恐らく編集の利便性を考えて付けて下さっているだけで、UPすると消えます。
「Cocoon」で簡単にカラム分けする方法(ボックスを作る)

むしろ何の枠も無くなってボックス感も消えるので、明確に枠を付けたい方は「スタイル」タブを使って枠を付けた方が良いです。色々といじってみて下さい。

このスタイルはパソコンの時には設定した通りに表示されますが、モバイル表示の場合は普通に1カラムで表示されます。

「Cocoon」で簡単にカラム分けする方法(ボックスを作る)モバイル

※「Cocoon」では管理者だけに見えるモバイルユーザビリティテストもページごとに行えます。

3.カテゴリー一覧メニューを表示させる

タイトルを見て来て下さった方は、やっとここ……で申し訳ないです。(こうしてからこうするって順番に書いた方が良いと思ったので……)

 

「Cocoon」にはショートコードを使って、新着記事などをどこにでも表示させられる機能があります。

Cocoon
新着記事一覧を表示するショートコードの利用方法 新着記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。

 

つまり、で説明したカラム分けを使って、そこにショートコードを記入するだけでカテゴリーごとの新着記事一覧を並べて表示することなども出来るわけです。
1.入れたい場所にショートコードを記入する

◆基本のショートコード

[new_list count=”5″ type=”default” cats=”all” children=”0″ post_type=”post”]

一覧を表示する基本のショートコードは[new_list]です。

上のコードを説明すると、

  • 「count=”5″」 新着記事を5つ表示させる。
  • 「type=”default”」通常のリストです。「type=”large_thumb”」に変えると大きなサムネイル画像で表示されます。
  • 「cats=”all”」「all」にすると「全ての新着記事」の一覧が表示されます。カテゴリーごとの新着記事を表示したい場合は表示させたいカテゴリーのIDを「all」の代わりに挿入します。「cats=”5″」や、「cats=”3,5″」など。
  • 「children=”0″」子カテゴリーも表示させたい場合はここに「children=”1″」などの数値を。
  • 「post_type=”post”」投稿タイプです。「”post”」は投稿記事。固定ページも含めたい場合は「post_type=“post,page”」を記入。

 

2.ビジュアルエディターでタグ挿入

 

実は上のショートコードは特に覚える必要はありません。

「タグ」の右にある「ショートコード」をクリックするだけで簡単に挿入できます。
「Cocoon」でトップページにカテゴリー一覧を表示

見出しを入れてみたりして装飾してもいいと思います。
「Cocoon」でトップページにカテゴリー一覧を表示

表示例です。
「Cocoon」でトップページにカテゴリー一覧を表示

その他の覚書きカスタマイズ

何回やっても忘れてしまい、「ん?」と思った部分をメモする個人的な忘備録カスタマイズ。

記事冒頭のアイキャッチ画像を削除する

なぜかデフォルトで文頭にアイキャッチが表示される仕様の「Cocoon」。おかげさまで記事の画像とダブるので、サクッと消します。

1.「Cocoon設定」→「画像」タブを開く

2.「アイキャッチの表示」→「本文上にアイキャッチを表示する」のチェックを外す。

この項目は思い出したら追記します。
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

profile

主にWordpress中心のサイト・ブログ制作&コーダー、カスタマイザー。

2000年からHP制作を始めました。

ハウツーサイトやキュレーションサイトのライター、ブログ作成・運営のお手伝いなどをしております。

お仕事で関わった無料ブログ&Wordpressカスタマイズ案件実績500件以上。

携わったワードプレステーマ30以上。

アナリティクスを観察するのは生活の一部。

Google Analytics個人認定資格取得(GA4)。 SEOマーケティングアドバイザー資格取得。

SEOに特化したページ作りをめざしています。

 

カスタマイズのご依頼は「一木堂」へ

follow us in feedly 映画@見取り八段 | 映画感想ブログ coconara ss

サポートよろしくお願いします

いつもありがとうございます。

この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。

Amazonギフト券- Eメールタイプ - Amazonベーシック
金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。
※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

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

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』

コメント

コメントする

目次