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

DIY家族と英語家族

diyと英語を楽しんでいる家族のまとめ

サイトのtopページをカテゴリー別で一覧表示simplicityカスタマイズ

スポンサーリンク

f:id:buchibuchi4647:20170317050630p:plain

 

再編集(備忘録)別のサイトでwordpressのsimplicity2を使っていますが、自分の備忘録のためカスタマイズした内容を書いています。ブログ記事がどんどん貯まってくるとカテゴリー一覧だけでは読者にはちょっと見づらいかなって以前から思っていました。トップページにカテゴリー別で新着記事を一覧で表示したいと思い、今回カスタマイズすることにしました。

 

topにカテゴリー記事一覧を表示

いままでは新着記事がずらーっとならんでいるだけでしたが、今回カスタマイズしたことによって、カテゴリー別にサムネイルが入ってとても見やすくなったことないですか。

simlicityはカスタマイズが自由ですから好きです。自分がこうゆう風にしたいなって思うのもsimplicityなら実現可能ですからね。おすすめの無料テーマです。

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

http://lahatnggusto.com/net/categorybox

しかし、僕が使っているテーマsimplicity2ではうまくいかなかったので、ちょっと変更を加えてsinplicity2でも使えるカテゴリー別表示方法としてまとめました。

必要なプラグイン

page in builder by siteorigin.

php text widget.

この二つの使い方は今回は以下にまとめました。今回は この2つのプラグインを設定後、カテゴリー別に一覧表示するカスタマイズ方法を書いています。設定方法がわからない人は下記を先に読んでほしいです。ちなみに php text widjetはインストールして有効化するだけで大丈夫です。

 

 

diy-english.hatenablog.com

 

 

 

page builder にテキストウィジェットを貼る

page builderプラグインを導入後、ウジェットにテキスト貼付けます。テキストを貼付けることで、広告を表示したり、snsを表示したりできる。今回は貼付けたテキストにカテゴリーの新着記事をサムネイル付きで表示したいと思います。

しかし、参考にしたサイトではサムネイルと新着記事が表示されなかった。調べてみるとsimplicity2では動作未確認だからだ。

修正をくわてsimplicity2の2.3〜4まで動作確認済の修正版を載せます。

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

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

wordpressですと、投稿一覧→カテゴリ→表示したいカテゴリーを選択すると

f:id:buchibuchi4647:20170317051306p:plain

 

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

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

cssの編集

これだけでは個性がないのでcssも少しいじっています。

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

以上です。おつかれさまでした。