【Cocoon】トップページをサイト型にカスタマイズする方法【1時間でできる!】

【Cocoon】トップページをサイト型にカスタマイズする方法 WordPress
質問
質問

無料WPのCocoonを使っているけど、トップページをサイト型にカスタマイズすることってできるの?


Cocoonでも、トップページをサイト型にカスタマイズすることは可能です!

先日、このアンパパブログもトップページをカスタマイズしてみました。
さくっと1時間くらいでカスタマイズする方法を解説します。




スポンサーリンク

トップページをサイト型にするメリット

通常、ブログのトップページは、単純に新着記事が新しい順に表示されます。
それをWEBサイトのようにカスタマイズすると、どのようなメリットがあるのでしょうか?

サイト型にするメリット

  • おすすめ記事をトップに表示させることができる

    過去記事におすすめしたい記事があるのに、新着順の場合、どんどん後ろに追いやられてしまいますよね。サイト型にすれば、おすすめ記事をトップに表示することも可能です。


  • カテゴリ毎に表示することができ、読者が見たい記事にスムーズにアクセスさせることができる

    私のブログは雑記ブログですので「育児ネタ」もあれば、「ブログネタ」もあります。
    もしインスタから遷移してきた場合、「育児ネタ」を求めているのに、「ブログネタ」がトップに来ていたらがっかりですよね。

    カテゴリを分けることにより、その問題をクリアすることができます。



トレンドブログをやっている場合は、これまで通りブログ型でもいいかと思います。
私のように雑記ブログをやっていて、複数カテゴリがある場合は、サイト型にするメリットは大きそうですね。

完成形を紹介します

✔ Before(ブログ型)

もともとは、このような感じでした。

アンパパブログ(ブログ型)



✔ After(サイト型)

サイト型にするとこんな感じになります。

アンパパブログ(サイト型)


新着だけでなく、おすすめ記事の紹介や各カテゴリにわけて表示することができます。

トップページをサイト型にする方法

それではさっそくトップページをサイト型にする方法を説明します。
前提はCocoonユーザで、ブロックエディタ(Gutenberg)を利用します。


下記色々書いていますが、お好みに応じて採用して下さい。
例えば、2段レイアウトではなく1カラムの方がよければ、2カラムレイアウトの箇所は飛ばして読んで下さいね。

固定ページを新規作成する

WordPress左メニューより「固定ページ>新規追加」を選んで下さい。

タイトルは、後で消すことができますが、「トップページ」などにして下さい。

2カラムレイアウトにする

2段レイアウトにする方法は、Cocoonであればめちゃくちゃ簡単です。

ブロックエディタの「Cocconレイアウト > 2カラム」を選択するだけです。



新着記事欄を作る

次に新着記事欄を作ってみましょう。
2カラムの左側に「新着記事」を作りたい場合は、左側のブロックエディタを編集しましょう。

新着記事

①見出し
タイトルは、ブロックエディタの「一般ブロック>段落」を選択して下さい。
段落に「新着記事」と文字を入力しましょう。


②記事一覧
記事一覧は、ブロックエディタの「フォーマット>カスタムHTML」を利用します。
カスタムHTMLに下記の通り入力しましょう。

new_list count="3"
上記の文字列を[ ](大かっこ)で囲って下さい


ここのcountは、表示したい記事数です。5記事のリストを作りたい場合はcount=”5″にしましょう。


③ボタン
ボタンは、ブロックエディタの「Cocoonブロック>ボタン」を利用しましょう。
ボタンのラベルは、例えば「新着記事をもっと見る」とかにしましょうか。


ボタンを押した時、新着記事のページを見せたい場合は、もう一つ固定ページを作る必要があります。


WordPress左メニューより「固定ページ>新規追加」を選び、タイトルは「新着記事」にして一旦公開しましょう。
内容は空でない丈夫です。一番最後の設定で、その空ページが新着記事一覧になります。


この固定ページのURLを先程のボタンに設定します。



おすすめ記事欄を作る

次におすすめ記事欄を作りましょう。
おすすめ記事を作るやり方は色々ありますが、今回はタグを利用しましょう。


事前準備① おすすめしたい記事にタグを設定する

いつも記事を保存する時、カテゴリやアイキャッチ、タグを利用するかと思いますが、今回はそのタグを利用します。


おすすめ記事欄に表示したい記事のタグに「おすすめ」タグを設定し、公開しましょう。

私の場合は20個くらい「おすすめ」タグを設定し直しました。


事前準備② タグのIDを控える

タグのIDは、次のように調べます。

WordPress左メニューから、「投稿 > タグ 」を選択して下さい。

タグIDの調べ方

さきほど設定した、「おすすめ」タグの箇所にカーソルを合わせると、ブラウザ下方にURLが表示されます。そのtag_IDに書かれている数字を控えておきましょう。


これで事前準備は完了です。


それでは「おすすめ記事欄」を作りましょう。


2カラムの右側に「おすすめ記事欄」を作りたい場合は、右側のブロックエディタを編集しましょう。

おすすめ記事欄


①見出し
タイトルは、ブロックエディタの「一般ブロック>段落」を選択して下さい。
段落に「おすすめ記事」と文字を入力しましょう。

②記事一覧
記事一覧は、ブロックエディタの「フォーマット>カスタムHTML」を利用します。
カスタムHTMLに下記の通り入力しましょう。

new_list count="3" tags="75"
上記の文字列を[ ](大かっこ)で囲って下さい


ポイントは、tagsの箇所(上記の例だと75)に先程控えたタグの番号を設定しましょう。

そうすると、おすすめタグが設定された記事の一覧が新着順で表示されます。

③ボタン
ボタンも先程と同じように、ブロックエディタの「Cocoonブロック>ボタン」を利用しましょう。
ボタンのラベルは、例えば「おすすめ記事をもっと見る」などにしましょう。

ボタンに設定するURLは次のようにして下さい。

先程IDを控えた時にタグの設定画面を見ましたが、今度は「表示」リンクをクリックして下さい。

そこでブラウザに表示されているURLを、ボタンに設定します。

カテゴリ欄を作る

アンパパブログでは、「ライフ/マネー」「育児」などのカテゴリがあります。
カテゴリ欄についても、先程と同じような手順です。


2カラムレイアウトを作って、それぞれに「見出し」「記事一覧」「ボタン」を設定します。

先程はタグのIDを取得しましたが、今度はカテゴリのIDを取得します。



①カテゴリのIDを控える

今度は、Wordpress左メニューから投稿>カテゴリを選択して下さい。
やり方は、先程のタグの場合と同じです。

カテゴリのIDの取得方法


作ろうとしているカテゴリ欄が「ライフ/マネー」であれば、そこにカーソルを当てるとブラウザ下部にURLが表示されます。

そこのtag_IDにかかれている番号が、カテゴリのIDです。(カテゴリもtag_IDなんですね)


それでは「カテゴリ欄」を作りましょう。
やり方はこれまでとほぼ同様です。もう慣れてきましたね。

カテゴリ欄の作り方


①見出し
タイトルは、ブロックエディタの「一般ブロック>段落」を選択して下さい。
段落に、カテゴリの名称を入力しましょう。

②記事一覧
記事一覧は、ブロックエディタの「フォーマット>カスタムHTML」を利用します。
カスタムHTMLに下記の通り入力しましょう。

new_list count="3" cats="11" children="1"
上記の文字列を[ ](大かっこ)で囲って下さい


ポイントは、先程控えたIDをcats(上記の11と書かれた場所)に記載します。

また、children=”1″については、カテゴリの下に子カテゴリがある場合は、その子カテゴリを含めるかどうかです。含める場合は”1″に設定し、含めない場合は”0″にします。

③ボタン
ボタンも先程と同じように、ブロックエディタの「Cocoonブロック>ボタン」を利用しましょう。
ボタンのラベルは、例えば「ライフ/マネーをもっと見る」などにしましょう。

ボタンに設定するURLは、カテゴリのURLを入力して下さい。

カテゴリのURLの見つけ方は、タグの場合と同じ手順です。

先程のカテゴリ一覧で、該当カテゴリ(今回の例だと「ライフ/マネー」)の「表示」ボタンを押すとURLが表示されます。


他のカテゴリも、同じように作成しましょう。


不要なタイトル等を消す

さて、固定ページを作ると、「タイトル」とか「SNSフォローボタン」とかついてしまいますよね。トップページには不要のため消しておきたいです。


そのためには、CSSを編集する必要があります。


CSSの編集は、Wordpress左メニューから「外観>テーマエディタ」をクリックします。
手順は次の通りです。

CSSの編集方法


①Cocoon Childを選択する
「編集するテーマを選択」のプルダウンをCocoon Childに設定して下さい。

親テーマである「Cocoon」を編集してしまうと、Cocoonのアップデートの時に消えてしまうので、必ず子テーマの「Cocoon Child」が選択されていることを確認して下さい。



②バックアップ
CSSを間違えて編集してしまうと、デザインが崩れてしまう場合があります。
元のバージョンに戻せるようにバックアップしましょう。


バックアップは、「選択したファイルの内容」にあるテキストを全選択して、テキストエディタ(メモ帳等)に貼り付けて保存すればOKです。



③ファイルの編集

まず固定ページにはSNSフォローボタンは不要だと思いますので、下記のテキストを「選択したファイルの内容」に追記しましょう。

.page .sns-share,
.page .sns-follow {
display: none;
}


次に、今回のトップページには公開日付、著者情報、タイトルは不要のため、下記のテキストも追記しましょう。


page-id-1505の「1505」の部分ですが、今回作成する記事のIDに置き換えてください。

.page-id-1505 .date-tags,
.page-id-1505 .author-info {
display: none;
}

.page-id-1505 h1.entry-title {
display: none;
}


記事のIDは、Wordpressの左メニューから固定ページをクリックすると、確認できます。

固定ページ


今回作成したトップページを一時保存すると、固定ページの一覧に載りますので、そこのIDを取得して下さい。


追記後、「ファイルを更新」ボタンを押して下さい。


トップページ公開

これで一通りの設定が完了です。
プレビューで確認後、いよいよトップページを公開しましょう。

固定ページの公開


公開には、Wordpress左メニューの「設定 > 表示設定」をクリックします。
その後、ホームページの表示ラジオボタンを「固定ページ」に選択して下さい。


そして、以下のように設定しましょう。

  • ホームページ:今回作成したトップページ
  • 投稿ページ:新着記事欄を作った時に作成した固定ページ



以上で完了です。お疲れさまでした。

まとめ

まとめ


Cocoonで、トップページをサイト型に変更する手順を説明しましたが、いかがだったでしょうか?

ほとんど画面で操作ができ、思ったよりも簡単ではないでしょうか。

無料テンプレートのCocoonでも、有料WPテンプレートに近いことが色々できそうですね。


Cocoonを作ってくれたわいひらさんには感謝です。



Cocoonについてはこんな記事も書いています。お時間のある時にでも見て下さい。




サイトを整えたら、アフィリエイトも頑張って収益できるように目指したいですね!

アフィリエイトのオススメASPは次の6つです。

オススメASP

A8.net  ←初心者オススメ!審査なし!

もしもアフィリエイト ←初心者おすすめ!

afb(アフィb) ←満足度5年連続No1!

バリューコマース ←旅行・グルメ系強し!

JANet ←クレカ系強し!

アフィリエイトはアクセストレード ←転職系強し!


同じ案件でも、A社では成果報酬500円、B社では1500円といったことがあります。

ですので、まずは全部のASPを登録して、毎回比較してみることをオススメします。

ブログを書いている人
アンパパ

ブログがとにかく好き | 4ブログ運営で1万記事目指す | ブログ飯が目標 | 1歳9ヶ月の娘が大好き | 「人生をより楽しく幸せに」がテーマのアンパパブログ執筆中 | ブログ運営ノウハウ発信 | お得情報発信 | 育児便利ネタ発信 | 詳しいプロフィールはコチラ
  \フォロー、はてブお願いします/

アンパパをフォローする
WordPress
スポンサーリンク
アンパパをフォローする
アンパパブログ
タイトルとURLをコピーしました