Cocoonのトップページをサイト型に変更してみた件
私は、WordPressのテーマは無料テーマの中でも特に人気の高いCocoonを利用していますが、トップページ(ホーム)画面を、サイト風の表示形式に変更してみました。
これまでは、新着順に記事が表示されている状態でした。
こちらを、サイトの記事一覧のような状態に変更してみました。
最新の記事、人気の記事、記事数の多いカテゴリー3つを表示させています。
色々試行錯誤しながらだったので、ほぼ一日がかりでの変更作業となってしまいましたが、それなりにオリジナリティのあるページになったのではないかなと思っています。
今回は、なぜトップページをサイトっぽい表示に変更したのかについて、そして私がサイト型に変更した時の流れについて簡単に説明します。
【2020年9月7日追記】ブログをWordPressからはてなブログに移行した関係で、現在のトップページはサイト型ではありませんが、備忘録として記事を公開しています
トップページをサイト型に変更した理由
カテゴリーごとの記事一覧も表示させたかった
WordPressに限らず、ブログのトップページは自分の記事が新着順に表示されている場合がほとんどですよね。
1つのジャンルに特化しているブログであれば、この新着順での表示でもあまり問題はないかもしれませんが、雑記ブログの場合は、さまざまカテゴリーの記事がごちゃまぜになった状態で時系列に並びます。
この雑記を書いたのが、有名人のような「その人が書いているブログだから見る」という、書いた人にブランド的な価値がある状態であれば、この時系列での表示も効果的だと思うのです。
しかし、一般的なブログの場合、どんな人が書いているかについてあまり関心を持たれることはなく、検索で見つけた記事のジャンルに興味があるから見る…ということがほとんどというのが現実です。
そのため、トップページにカテゴリー毎の記事一覧も表示しておくことで、同じカテゴリーの記事を見やすく出来るのではないかなと考えました。
ただ、表示をサイト型に変えたといっても、ブログであることに変わりはないので、新着記事を一番上に表示している状態は変えていません。
利用者が多いCocoonでオリジナリティを出したかった
正直、ブログを3年半ほどやってきて、トップページが新着順で表示される形式に疑問を持ったことなど一度もありませんでした。
しかし、たまたまTwitterでCocoonのトップページをサイト型に変更したという報告ツイートを見かけたことが、トップページをサイト型に変えてみようと思ったきっかけでした。
Cocoonは無料で使えるWordPressテーマですが、無料なのが申し訳ないくらい多機能なテーマのために利用している方がかなり多く、様々な情報を入手しやすいです。
一方で、誰かのブログを覗いてみたらCocoonだ…とわかってしまうことも多く、ありふれたブログ感が出てしまうことが欠点でした。
そこで、わざわざトップページを見て下さる方というのは少数派だと思いつつ、トップページを変更したら個性が出てちょっと面白そう…と思ったのです。
htmlやcssの知識は全く持っていないため、知識不要で簡単にトップページを変更できそうな方法がないか調べてみました。
html&CSSの知識不要で変更できる方法を発見
トップページをサイト型に変更するにあたり、htmlとCSSはコピペだけでいけるレベルの簡単に変更出来そうな方法がいくつか見つかりました。
その中で、ぽんひろ様のサイトに、簡単にCocoonをサイト型にカスタマイズする方法がありましたので、今回はそちらを参考に…というより、ほぼそのまま採用しました。
実は最初に試した別の方法はもっと簡単に変更することができていて、固定ページの編集と、ごく最低限のCSS編集だけで出来たのですが、完成したページのレイアウトがシンプルすぎてちょっと微妙に感じてしまいまして。
今回の方法ではコードで編集する部分が多く、少し躊躇してしまっていたのですが、スマホでもレイアウトが2列で表示されていたりデザインが素敵だったため、再度作り直してしまいました。
詳しい手順については、コードのコピペが必要になるためサイトを見ていただく形になりますが、サイト型に変更するにはどうするのか気になる方のために、ざっくり変更の手順の記録を残しておきます。
トップページをサイト型に変える大まかな流れ
固定ページを新規作成
サイト型のトップページは、固定ページで作ったものを表示させる仕組みになるので、トップページ用の固定ページを作ります。
ぽんひろ様のサイトに、この固定ページ編集画面に貼る用のコードが置いてあるので、これをコピーして、コードエディター状態にした編集画面に貼り付けます。
右上の三点リーダをクリックすればエディターを選択するメニューが表示されますので、ビジュアルエディターからコードエディターにチェックを変えればOKです。
このテンプレには、おすすめタグ(自分で「おすすめ」というタグを作成し、表示させたい記事にこのタグをつける)の記事を表示させられるようになっていましたが、私はこのおすすめタグの代わりに「人気記事」を表示させるように変更しました。
※デモページでは新着記事と人気記事を切り替えて表示できるようになっていますが、現在はリニューアル中で非公開とのことです。もし再公開されたら導入したいです
<h2>人気の記事</h2>
[popular_list days="all" rank="0" pv="0" count="6" type="large_thumb" cats="all" class="mobile-2"]
おすすめ記事タグのコードの部分に、人気記事を表示させるため上記のコードに入れ替えました。
スマホで2行表示させたかったので、「class="mobile-2"」も追加しています。
ちなみにコードを貼り付けた状態のままだと自分のブログのカテゴリーの情報が反映されませんので、WordPressメニューの「投稿」→「カテゴリー」のカテゴリ名にマウスを載せると表示されるカテゴリーIDの数字と、カテゴリーのURL(カテゴリーの記事一覧のURL)を編集する必要があります。
広告と目次の非表示も設定できたら、公開します。トップページに変更しなければ特に見られることもありませんので、気にせずに公開してしまって大丈夫です。
新着記事用の固定ページも別に作る
コードには新着記事一覧の下に「もっと見る」というボタンが表示されるように設定されているのですが、このもっと見るボタンで記事を表示させるために、コードを貼り付けたのとは別の固定ページを作ります。
タイトルだけ「記事一覧」などわかりやすいものに変更しておき、パーマリンクに「articles」を追加した状態で公開しました。
新着記事一覧に「もっと見る」ボタンを設置する方は、この作業も必須です。
子テーマのCSSを編集する
CSS編集…なんて聞くと、ハードルの高さにクラクラしそうになりますが、今回の方法ではぽんひろ様のサイトに貼られているCSSコードを、Cocoonの子テーマのCSS編集する画面にコピペするだけで完成します。
固定ページを作った段階でプレビューを見るとわかるのですが、このCSSコードを貼り付けていないと、かなり表示が乱れてしまっているので、この編集作業は重要な作業です。
このCSSコードを編集する場所は「外観」→「テーマエディター(style.css)」になります。
Cocoonの子テーマに貼る必要があるため、必ず「Cocoon Child」になっているか確認してから貼るようにしましょう。※「Cocoon」となっているものは親テーマのため、必ず切り替えて下さい
最初に貼ったコードとは別に、SNSボタンなどのトップページには不要な情報を消すことのできるコードもサイトにありますので、非表示にしたい場合はそのコードも追加して貼ります。
作成した固定ページをトップページに表示させる
CSSの編集も終われば、いざ作った固定ページをトップページに変更します。
「設定」→「表示設定」にいくと「ホームページの表示」というメニューがありますので、「最新の投稿」のチェックを「固定ページ」に変更し、ホームページの選択で最初に作った(コードを貼って編集した方)固定ページを選び、投稿ページの選択では新着記事用に作った固定ページを選びます。
この状態で下にある「変更を保存」をクリックすれば、トップページが新しく作ったものに変更されています。
これで、トップページをサイトっぽく表示させる作業の流れは終了です。
仕組みがわかれば自分流にカスタマイズできる…かも
トップページをサイト型に表示変更させるためには色々な方法が出てきますが、個人的には今回の方法が変更する説明もわかりやすく、コードを貼ってちょこっと編集してしまえば、レイアウトも整ったトップページに変更ができるため、この方法で挑戦してみてよかったです。
簡単かつ素敵なカスタマイズ方法を紹介して下さったぽんひろ様には、感謝しかないですね。勢いでCocoonのスキンもぽんひろ様のものに変更しちゃいましたw
ちなみに、今回の方法でなかったとしても、トップページをサイト型に変更するのは
固定ページを作る→必要であればCSSの編集をする→表示設定で作った固定ページをホームページに変更する…という流れは共通していました。
固定ページのレイアウト(テンプレ)はさまざまですし、普段CSSの編集などしたことがなかったために混乱しがちでしたが、この基本が理解できていれば、もっと落ち着いて変更する作業ができそうだなと感じました。
しばらくは、今回変更したものを表示させるカテゴリーや記事数をいじる程度で活用していきますが、ゆくゆくは色々とトップページのデザインを変えていけるように挑戦してみたいですね。
私のような専門知識がない人間でも、Cocoonをサイトっぽい表示形式のトップページに変更できるということが伝われば嬉しいです。
それでは、今回はこのへんで。
