【WordPress】トップページでおすすめ記事を紹介するカスタマイズ

スポンサーリンク
宿を安くする方法

やっほう!フリーWEBエンジニアのテツヤマモト(@okapo192)です。

今回は「ブログトップにおすすめ記事リストをつくる方法」を共有します。

トップページで自信のある記事を紹介したい!
ぐへへへ、この記事は収入が発生する記事だぞー!もっと読んでくれー!

この辺りの要望にお答えします。

 

ブログのトップページは、ブログにやってきてくれた読者を迎え入れる玄関口です。

最新記事を並べるだけでも問題はないんですが、せっかくなら自分の自信のある記事をどーん!と紹介したいですよね。

 

僕は以前まで、シンプルを意識しすぎるあまり、ブログのトップページは少し寂しい状態になってました。

ちょくちょくテーマが偏ることが多いので、「このブログは興味ないな」って思われても仕方がなかったかと思います。

 

そこで今回はブログトップページに「おすすめ記事のリスト」を作るカスタマイズを施しました。

コピペだけで初心者でも実践できるので、興味がある人はぜひ試してみるといいですよ〜。

トップページからの離脱率低下、ファン作り、収益アップなど、幅広い効果が期待できるはずです!

使用テーマについてこのブログは、大人気のWordPressテーマ「STORK 」を使用しています。

また、今回のカスタマイズは同じく人気テーマ「JIN」を参考に行いました。

どちらもブログ運営をしていく上で強い味方になるおすすめテーマです。

今回のカスタマイズ概要

今回はブログトップページ上部に、おすすめ記事へのリンクを特設設置します。

実装前

実装前のブログトップページはこんな感じでした。

スクリーンショット 2018 07 29 11 34 44

シンプルで悪くはないんですけど、このブログの推し記事がわからない状態です。

ブログ運営において、「キラーページ」と呼ばれる収益の落とし所、ファン作りに繋がる記事へ読者を流すのは重要ポイントです。

最新記事しか並んでいない状態だと、記事の質が担保できなかったり、時期によってテーマが偏ったり、イマイチ読者さんへのアピールが弱いですね。

実装後

スクリーンショット 2018 07 29 11 40 46

今回実装後の様子はこのような形になります。

トップページ上部に、おすすめ記事(カテゴリー)が表示されていまして、このブログの得意分野がわかりやすくなりました。

収入につながる記事やら、自分に興味持ってくれそうな記事をおけば、運営者ユーザー共に満足度が上がりますね。

カスタマイズの流れ

では、ここからカスタマイズの流れを紹介します。

コピペだけですぐ終わります。

テンプレートファイルを編集する形になりますので、子テーマを使ったカスタマイズをおすすめします。

参考:WordPressで子テーマを活用して安全にカスタマイズを行う方法

こちらコードは使用テーマ「STORK」に合わせたデザイン担っています。

ご使用テーマによって、CSSコードを若干変える必要があるかと思いますが、ご了承ください。

1.HTMLを貼り付ける

まずは管理画面「外観」→テーマの編集→home.php (front-page.phpの場合あり) に飛びます。

こちらで以下のHTMLをコードを、おすすめリストを表示したい位置にコピペします。

 

コピペの位置はテーマによって違ってくるのですが、STORKをはじめ多くの場合、<?php get_header();?>の下で大丈夫かな。

スクリーンショット 2018 07 29 11 52 41

コピペしましたら、①記事のリンク、②アイキャッチ画像リンク、③短いキャッチコピーを入力する形です。

②のアイキャッチ画像リンクは、管理画面「メディア」から画像をアップロードしたのち、画像詳細画面より調べられます。

スクリーンショット 2018 07 29 11 57 37

おまけ

もし僕が「flat icon design」で適当に作ったアイコンを使いたい人がいたら、自由に使って大丈夫ですよー。

トップページから右クリックで保存しちゃってください。

2.CSSをコピペする

続きまして、CSSのデザイン情報です。

同じく管理画面「外観」→テーマの編集→style.cssに以下CSSコードをコピペします。

これで実装できてるはずです。

もしデザイン崩れ、わかんない、できない等ありましたら、Twitter(@okapo192)で教えてくれたらできる限り対応します!

まとめ

あなたに興味を持って、SNS等からブログにやってきた人が、一番最初に目にするのはトップページの上部です。

そこで「興味ない」と判断されたら帰っちゃいますし、面白そう!と思われたら何記事も読んでくれることでしょう。

 

いかにトップページで読者を歓迎して迎え入れるか。

様々な興味を持った方々を幅広く受け入れられるかが重要事項です。

その1つの手段として、今回のカスタマイズが役に立ちましたら嬉しいです。

ABOUT

海外ノマド系フリーランス, ブロガー, WEBエンジニア, 24歳。フットワーク軽く生きたくて、新卒でフリーに。その後、海外35カ国を旅しながらノマドワーク。現在は1ヶ月ごとに拠点を変えつつ、旅生活を継続中です。勉強が大好きで年に3回語学留学をします。 

>>詳しいプロフィールはこちら!