サイトやブログのトップページをカテゴリー別で一覧表示simplicityカスタマイズwordpress

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行目→カテゴリー名の背景色を変更できます。他にも詳しい設定がありますが、基本的な操作は以上になります。お疲れ様でした。

企業向けHP/個人向けブログ|無料制作サービス6月30日まで

ホームページ・ブログ制作依頼に高額料金を払っていませんか?

フリーランス・個人事業主だからこそ無料でできるサービス。もちろん、無料だからといって質の心配無用。多数の企業様とのご依頼経験を積んだプロによるサービス。

今回は指定のサーバーに契約していただ人のみ限定のサービスとなります。たったこれだけの条件でHPやブログを運営可能。

・おしゃれなHPで集客したい・お店の商品をネットで販売したいなど

・学生・主婦が隙間時間にブログで稼ぐのは当たり前の時代!コソッとバレずに副収入を稼ぐノウハウもご一緒にプレゼント!

今回の企画は6月30日までの期間限定となりますので、お早めのご依頼お待ちしております

※現在、多数のご依頼をいただいております。

依頼をご希望の方に関してはお問い合わせよりご連絡ください。基本即日対応させていただきますが、納期につきましては多少前後することがありますのでご了承ください。

※初めてホームページを依頼するという方も安心してご相談くださいませ。

初めてで分からないのはお客様皆様ご一緒です。まずはお気軽にお問い合わせくださいませ。

おすすめの記事