読者です 読者をやめる 読者になる 読者になる

英語とappleとDIYと

apple製品、英語関連、DIYについて

wordpressPV数を上げるカスタマイズsimplicityトップページをカテゴリー別レイアウト表示

Check!!!▼

スポンサーリンク

f:id:buchibuchi4647:20170518112813j:plain

別ブログでwordpressのテーマ「simplicity」を使っています。サイトのトップページにカテゴリーごとに分けたすっきりしたデザインかつ新着記事を表示するカスタマイズのまとめです。

 

メインページにカテゴリー別で記事一覧表示

以前はトップページのメインに新着記事が一覧で表示されているだけでした。今回のカスタマイズを導入することで、カテゴリー別に記事(サムネイル入り)表示されるようになったことによって、すっきりしたデザインとなりました。

また、読者にとっても見やすいページとなったので直帰率を避けることにつながります。PV率効果も見込めるカスタマイズです。

wordpressのテーマ「simlicity」を使っている人も多いと思います。もともとがシンプルなだけに、自分次第で自由にカスタマイズできます。本当におすすめの無料テーマです。

今回カスタマイズするのに参考にしたのは

http://lahatnggusto.com/net/categorybox

ただし、この上記のサイトはバージョンが2.0以降では動作が上手くいきませんでした。古いバージョンの方は上記のサイトを参考にカスタマイズしてください。

僕はsimplicity2.3を使っているのでいろいろ修正を加えました。最新のバージョンでも動作確認済です。

設定手順1

事前にインストールが必要なプラグインは page  builder by siteorigin.とphp text widget. この二つの設定方法は別記事にまとめています。10分程度で設定できると思います。以下を参考にしてくだい。

 

english-apple-diy.hatenablog.com

2つのプラグインを設定後、カテゴリー別に一覧表示するカスタマイズ方法を書いています。php text widjetはインストールして有効化するのみです。

設定手順2

page builder by siteoriginを設定完了後、ウジェットにテキスト貼り付けてください。テキストには自由にhtmlを書き込みことが可能で広告やsnsを表示することができます。今回はテキストにカテゴリー別に新着記事をサムネイル付きで表示するように設定してします。

参考したブログはサムネイルと新着記事がなぜかうまく表示されなかった。よくよく調べるとsimplicity2以降のバージョンでは動作未確認みたいです。 今回、いろいろ修正を加えてsimplicityの2.3〜4まで動作確認済の修正版とします。

以下のコードをテキストテキストウェジェットにコピペして貼り付けてください。

1行目→カテゴリーURLと表示したいカテゴリー名を入力します。

14行目→表示したいカテゴリーのスラッグIDを入力します。

スラッグIDとは、投稿一覧→カテゴリ→表示したいカテゴリーを選択すると

f:id:buchibuchi4647:20170518110250p:plain

使用しているブラウザ(yahooやグーグルなど)上のURLバー欄でID確認できます。

15行目→新着記事で表示したい投稿数です。デフォルトは5になっています。

cssの設定

最後にcssを貼り付けて背景色や色を設定しましょう。

5行目→カテゴリー名の背景色を変更できます。