Cocoonテーマを使ってブログを作成し始めてから早数か月。
私はブログのトップページを作成したいと思い始めていました。
トップページとはサイトに来てくれた人を迎えるためのページで、ウェブサイト全体の入口となる部分です。
記事に直接行くわけではない場合、サイトに来る人はまずトップページにやってきます。
しかし、サイトの入口となるトップページが綺麗にまとまってなければ皆さんはどう思うでしょうか。
これ以上、サイト内の記事を読みたい思わないですよね。
Cocoonというテーマは非常に万能で使い勝手が良いのですが、初期状態だとカテゴリに関係なく新着記事がズラリと並んだだけのトップページとなっています。
出来立てホヤホヤを見てもらうために新着記事を並べてくれるのは嬉しいのです。
でも各カテゴリの記事を並べたい。
しかも人気順で。
あと、どういうサイトなのかを伝えておきたい。
この「りんね☆ブログ」を訪問してくれたのだから、ちゃんとお迎えしたい…。
というわけで、自分好みのトップページを作成しました。
この記事では「Cocoon」テーマの初期状態である新着記事順のトップページの代わりに、自分好みのトップページを作成する方法をお伝えします。
プラグインを用いたりしませんので、誰にでも簡単に作れるかと思います。
ぜひ、この記事を参考に自分好みのWebサイトを作成してみてくださいね。
・プラグイン無しでトップページを作成したい方！
・もっとアクセス数(PV数)を増やしたい方！
他のテーマを使っていても参考にできる部分があるかもしれませんので、良ければご一読ください。
トップページの作成手順
トップページ作成までの手順はたったの2ステップ！。
- 固定ページの作成
- 固定ページのトップページ化
次から具体的な内容をみていきましょう。
固定ページの作成
まずは管理画面の固定ページから新規追加で自分好みのトップページを作成しましょう。
私の方で一通り完成させたのが下図です。
(実際にトップページにされていますが、後程変更されている可能性があります。)
カスタムHTMLブロックで設定した方がより細かい設定ができるかと思いますが、HTMLに関するスキルがありませんでしたので見出しや段落、2カラムやショートコードなど各ブロックを使って作り上げました。
人気記事を表示するにはショートコードブロックを使います。
書いている最中は表示されていないので、本当にできているか不安になりますが大丈夫です。
公開されるとしっかり表示されます。
新着記事順にしたい場合は代わりにnew_listと記載しましょう。
popular_listの後ろにあるcountではいくつの人気記事を表示するかを書きます。
上の図では”3″と書いているので3つ表示してくれます。
ここの数字を変えると好きな数を表示できます。
catsはカテゴリーのことです。
数字はカテゴリー毎に割り振られていますので、確認する必要があります。
確認方法はまず下図のように、”投稿”→”カテゴリー”を選択します。
カテゴリーのページ内で、それぞれのカテゴリー名にカーソルを合わせてみると、下側にカテゴリー表示がされます。
この数字をcatsの中に書いてあげると、そのカテゴリーの記事のみを表示させることが可能です。
ちなみに、複数のカテゴリーを表示させたい場合は、cats=”3,5,6″などのように書くとそのカテゴリーIDに関連した記事だけを載せることができます。
なお、[popular_list count=”3″］とcatsの中身を指定しない場合は全てのカテゴリーが反映されます。
cats=”all”と記載しても全てのカテゴリーになります。
タイトルにはホーム画面という意味でホームと付けましたが、こちらは消すことができますので、適当に名付けて大丈夫です。
肝心の消し方ですが、まずは下記のように”ダッシュボード”から”外観”の”カスタマイズ”を選択します。
すると、自分のサイトのカスタマイズ画面に移ります。
ここで、”追加CSS“を開いてみましょう。
この追加CSSに下記のような文面を記載するとタイトルは表示されなくなります。
タイトルを消去したいページのID番号を記載しているのが、上図の赤枠で囲まれた部分です。
要するに、どのページからタイトルを消去するかを記載します。
ページIDは各投稿記事にそれぞれ設定されています。
今回は固定ページで作成したので、固定ページから確認します。
ページIDの確認方法は非常にシンプルです。
今回は固定ページで作成したので、”ダッシュボード”の”固定ページ一覧”からタイトルを消したいページIDを覚えておき、先ほどの追加CSSにページIDを記載しちゃいましょう。
ここまででトップページの作成はほとんど終わったも同然です。
あとは作成したページをトップページとして表示するようにします。
固定ページのトップページ化
作成したページをトップページに設定する方法は非常にシンプルです。
まずは、管理画面のダッシュボードから”設定”を選択し、”表示設定”にいきます。
デフォルトでは最新の投稿にチェックマークがありますが、これを固定ページに変更します。
次に、ホームページの項目に作成した固定ページを選択します。
これで完了です。
最後に変更を保存しましょう。
まとめ
今回は、 ウェブサイトの顔ともいえるトップページを設定する方法についてお伝えしました。
自分でもやってみましたが、以前よりはスマートになったかと思います。
とはいえまだまだ発展途上。
今後も改善していくつもりですが、基本的な部分は今回の記事にした方法で対応可能です。
私はCocoonのテーマを使用していますが、WordPressを使用されている方でしたら誰でも対応可能です。
余計なプラグインも用いていませんので、プラグインが増えてごちゃごちゃするということもないかと思います。
ウェブサイトのオリジナリティを出したい方も多いとは思いますので、少しでも多くの方に参考にしていただければ幸いです。
りんね☆のひとこと
ここまで簡単に作れるようになっていることに驚きを隠せません。
良い時代になったなぁと思う一方で、他にも良いサイトがたくさん登場するということなので、負けないようにオリジナリティを出していきたいですね。
コメント