【WordPressテーマカスタマイズ】MinimalWPのFolcloreでサイドバーに人気記事を表示した際、新着記事と同じ見た目にする方法

ブログカスタマイズ記事を書きます。今回使用したテーマは、MinimalWPさんのFolcloreです。

ワードプレステンプレート Minimal...

WordPressテーマ Minimal WP | シンプル＆おしゃれな日本語テンプレート WordPressテーマ「Minimal WP」はシンプルでおしゃれな日本語ワードプレステンプレートです。初心者でも簡単にスマホ対応のホームページが作れます。2012年のスタート以来...

WordPress Popular Postsを利用してサイドバーに人気記事を表示

Folcloreで人気記事をサイドバーに表示した際に、新着記事と同じ見た目にする方法をご紹介いたします。

↑このように表示するためのカスタマイズです。

Folcloreの人気記事表示には、ワードプレスプラグインWordPress Popular Postsを使用します。

ワードプレスにWordPress Popular Postsをインストールするやり方は、検索などで調べてみてくださいね。

WPPプラグインをインストールして有効化した後のカスタマイズ方法は以下の通りです。

申し訳ありませんが、カスタマイズは自己責任でお願いいたしますm(__)m

ウィジットのWordPress Popular Postsの各項目に入力するコード

外観→ウィジットから、 WordPress Popular Posts をドラックしてサイドバーのウィジットエリアにドロップします。

ドロップをしたら、アイキャッチ画像を表示にチェックボタンをいれて、 カスタム HTML マークアップを使う にもチェックを入れ保存。

すると HTML マークアップ設定 の欄が現れるので、以下のように記述してください。

タイトルの前

<h4 widget-title>

タイトルの後

</h4>

投稿の前

<ul class="similar-side">

投稿の後

</ul>

投稿の HTML マークアップ:

<li><table class="similar-side"><tbody><tr><th>{thumb}</th>
<td>{title}<span class="wpp-meta post-stats">{stats}</span></td></tr></tbody></table></li>

以上の記述でウィジットを保存してください。

CSSでサイドバーに表示された人気記事の項目の見た目を整える

そして、CSSで見栄えを整えます。以下のように、外観→カスタマイズから追加CSSに記述してください。文字の色とかはお好みで調節してくださいね。

.popular-posts {
  padding-bottom: 50px;
}

.popular-posts h4 {
  color: #222;
  padding-bottom: 5px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 3px double #ccc;
}

.similar-side li {
  border-bottom: 1px dotted #ccc!important;
}

以上で完了です。MinimalWPさんのテンプレートはおしゃれでいいですね。カスタマイズ情報がネットにあまりなかったので、今回私が書いてみました。

自分のブログで表示は確認していますが、もしも間違っていたならば、教えてくださいね。お疲れさまでした～。