カテゴリー別最新記事・人気記事一覧をトップページに表示!【ストークカスタマイズ紹介】

先日、このブログのトップページにちょっとした変化を施しました。
ページの下半分にカテゴリー別の最新記事と人気記事の一覧を表示させています。

↓このような見た目に仕上がりました。(パソコンから見た場合)

前から欲しかった機能をやっと付けることができました(^^)

現在は人気記事のみを表示させています。
しかも、使っている人気記事表示プラグインもこの記事とは違います。
(以下、せっかく書いた記事なので当時のまま残しています。)

「トップページ下部」ウィジェットにソースを書いて表示させています

「トップページをいじるとか、なんか特別なことでもしたんですか??」
と思うかもですが、私が使っているWordPressテーマ「ストーク」だとこんな機能も余裕でできちゃいます。

使ったのは、ストーク独自の機能「トップページ下部ウィジェット」です。
↓こんなのが並んでるうちの「トップページ下部」と書いてある2種類ですね。

ここにそれぞれテキストボックスを入れています。
(※PC(デスクトップ幅)とSP(スマホ幅)の両方に入力しなければ両方で表示させることはできないので注意です。)

こんな感じで書き込んでいます。

珍しくソースコードも晒してみようかと(^^;
【2017.8.12現在・パソコンでの表示コード(スマホは表示件数を3件にしてます。)】

注意点
WordPressを現在のバージョン(4.8.1)にアップデートして以来、改行すると余計なスペースが入るようになってしまったので、コードが無駄に横に長くなっていますm(_ _)m

ウィジェットのテキストボックスに入れるには結構長めのコードですが、ちゃんと表示してくれています。

ただ、ウィジェットとして入っているということは、リンクの色や文字の大きさなどは基本的にサイドバーのウィジェットと同じものが適用されます。
サイドバーとは違う表示を適用したければ、独自のCSSを指定することが必要です。
私は見出しや新着記事・人気記事表示で↓こんな感じでいじっています。

キレイなコードの書き方じゃないかもしれませんが、その辺のクレームは受け付けていませんのであしからず(^o^)

使っているショートコードは3つ

話をCSSからソースコードに戻しまして。
上のソースコードの中では3つのショートコードを使っています。

その1:ストーク独自の2カラム表示

まずは、これもストーク独自の機能である2カラム表示
「アイウエオ」「あいうえお」という2つの文字列を↓以下のようなショートコードで囲えば…、

↓このように、横に2列で並べて表示してくれる機能です。
(って、これじゃ分かりにくいですかね?(^^;)

アイウエオ
あいうえお
 

ちなみにこの機能、スマホ幅では↓このように、ちゃんと左から1列ずつ順番に表示してくれるスグレモノです。

その2:プラグイン「Newpost Catch」のショートコード

2つ目が「Newpost Catch」というプラグインのショートコードです。

↓こんなやつですね。

このプラグインは新着記事を表示させるものとして超有名ですが、ショートコードでは、中に直接属性を記入することで

・カテゴリーを絞って表示させる
・サムネイルを表示させるか否か
・日付を表示させるか否か
・何件表示させるか

などなど、表示にいろんなオプションを持たせることができます。
私の場合、

・「cat=”10,-27″」ってので表示させるカテゴリーを
・「posts_per_page=”5″」ってので表示させる件数を
・「width=”80″ height=”80″」ってので表示させるサムネイルサイズを

それぞれ指定しています。

ほか、詳しい解説は作者さんのブログ記事↓をどうぞ!

その3:プラグイン「WordPress Popular Posts」のショートコード

最後の3つ目は「WordPress Popular Posts」というプラグインのショートコードです。

現在は「WordPress Popular Posts」ではなく、「Simple GA Ranking」を使っています。
WordPress Popular Postsが重いので代替プラグインを導入してみた【Simple GA Ranking】

↓以下はせっかく書いたので残しています…。

こちらは人気記事を表示させるプラグインとして超有名ですね。
このページでも、サイドバー(スマホの場合はページの下部)にこのプラグインを使って「仕事関連の記事」「仕事以外の記事」の人気記事をそれぞれ表示させています。

ショートコードを上と同じように引用すると、↓こんなのです。

こちらも「Newpost Catch」プラグイン同様、ショートコードの中にいろんな属性を書き加えることによって、表示させる記事の種類や条件を絞ることが可能です。

上の場合も、ショートコードの中で

・表示させるカテゴリー
・表示させる記事の数
・計測期間(日計か週計か月計かなど)
・表示させるサムネイル画像のサイズ(注:実際の表示サイズはCSSで指定する必要あり。)
・閲覧件数は表示させない

といった点を指定させています。

どんな属性があるかは、WordPressの管理画面に入って、
設定→WordPress Popular Posts→「パラメーター」タブをクリック、で出てきます。
(↓こんな画面が表示されます。「パラメータ」欄に挙がっているのが指定できる属性、「デフォルト」欄に挙がっているのが何も指定しない場合の初期設定です。)

もっと詳しい解説はググればいろんなページが出てくるので、そちらを参考にして頂ければ!

…てか、タブは「パラメータ(「ー」付き)」なのに表のタイトルは「パラメータ」。
こんなん気になるのワタクシだけっすかね…??

私自身が一番知りたい情報でした

実は、カテゴリー別の最新記事や人気記事の一覧は私自身が一番欲しいと思っていた機能でした。
だって、どのカテゴリーの記事をよく更新してるかとか、どの記事がよく読まれてるかって、書いてる方も結構気になるじゃないですか。

この機能を表示させて以降はトップページを見る回数も明らかに増えました。
こうした仕込みをいろいろ入れながら、なんとか自分自身の気持ちがブログに向くように工夫してます。
(と、更新が滞りがちな言い訳を少々(^^;)

相続税に強く、クラウド会計に特化した京都市左京区の税理士事務所です。
「専門用語をなるべく省いたわかりやすい説明」と「税理士が直接お客様に全てのサービスを提供すること」を大切にしています。
京都市左京区の尾藤武英税理士事務所

AUTHORこのブログを書いている人

京都市左京区下鴨で開業している税理士です。税理士試験受験予備校の元講師。相続税法が担当科目だったことから、税理士としても相続・贈与を得意分野としています。個人・法人の経理はクラウド会計に特化&Mac対応可(自身もMacユーザー)。【好き】写真を撮る(Nikon D500) / Apple製品 / 馬 / DEEN / イチロー / 地元京都の四季の風景 【詳しいプロフィールはこちら】