新@kyotapyな日々

思いついたら書く… wordpress,iPad,美味しいもの,観光

Site Origin BuilderとWordPress Popular Postsでカテゴリ別人気記事一覧を作ってみました

   

Site Origin BuilderとWordPress Popular Postsを使って人気記事Top50を表示していたのですが、全てのジャンルのランキングなので、まとまりがありませんした。

そこで、同じく2つのプラグインを使って、固定ページにジャンル別に人気記事を表示させてみました。

Site Origin Builderで行と列の追加

ダッシュボード→固定ページから、今まで人気記事を表示させていたページの編集画面へ。

1行1列で表示されているので、右上のスパナマークをタップ。

 

列の設定画面。列数と列幅の比率を設定します。今回、列幅はEven(1)(50%ずつ)にしました。

 

列を追加したら、追加した列を選択して、"Add Widget"をタップ。

 

今回はWordPress Popular Postsのショートコードを使うので、"SiteOrigin Editor"を選択します。

 

4カテゴリ分の人気記事一覧を作りたかったので、もう1行追加。行は"Add Row"タップすれば追加できます。

 

また一番上に見出しとして1列の行を追加しました。

 

WordPress Popular Postsのショートコードを記載

行と列、ウィジェットの追加が終わったら、追加したウィジェットを選択して、"Edit"をタップ。エディタ画面でショートコードを記載していきます。

記載したショートコードは以下のとおり。実際は下記のコードを[]で囲ってください。

cat=16で表示させたいカテゴリID(例では16)を指定。

つまづいた点

カテゴリIDを指定しても、人気のある記事が表示されずに悩みました。原因は、親カテゴリのIDだけ指定して、子カテゴリのIDを指定していないことにありました。cat=16,17のようにIDをカンマで区切って指定したらうまくいきました。

レスポンシブデザインにも対応してました

ResponsiveDesignCheckerでいろんな画面サイズで表示させましたが、ちゃんとレスポンシブデザインにも対応していました。

まとめ

Site Origin Builderでヴィジュアルにレイアウトが組め、WordPress Popular Postsのショートコードを記載するだけで、簡単に短い時間でジャンル別の人気記事一覧ができました。

特にSite Origin Builderは、@kyotapyのような初心者でも簡単ににレイアウトが組めるのでオススメです。

 

 - wordpress, プラグイン ,