モッピー!お金がたまるポイントサイト

WordPress Popular PostをStinger5と同じ表示にカスタマイズ

2021/06/21

WordPress Popular PostをStinger5と同じ表示にカスタマイズ

WordPressで「Stinger3」を使っている時に、プラグインのWordpress Popular Postsを使ったサイドバーに人気記事を表示させるカスタマイズの備忘録を残しました。

今回は「Stinger5」に変更した時に、Popular Postsの表示がStinger5のNew Postsの文字のデザインが違うのが気になったので、文字のデザインが合うような記述をしたいと思います。今回もMAMPを使ったローカル環境のWordPressで設定を行って行きます。導入方法はこちら、

[adsense]

WordPress Popular Posts

WordPress Popular PostをStinger5と同じ表示にカスタマイズ

まだインストールしていない方はプラグインの新規追加からお願いいたします。ダッシュボード → 外観 → ウィジェット のスクロール広告用にWordPress Popular Postsを入れてとりあえず、「投稿サムネールを表示する」にチェックを入れて一回保存してからサムネイルのサイズを100×100に変更しています閲覧数は表示させていません。

WordPress Popular PostをStinger5と同じ表示にカスタマイズ

画像右側上は「New Posts」の表示です。下側がPopular Postsの設定です。タイトルに下線が入りリンク色になってしまっています。これを上部の「New Posts」と同じ黒になるように設定します。又、抜粋は表示しない方向にしました。その辺はお好みでどうぞ!

[adsense]

WordPress Popular PostsのHTMLマークアップの設定を変更

WordPress Popular PostをStinger5と同じ表示にカスタマイズ

WordPress Popular Postsの設定画面の一番下に「HTMLマークアップの設定」があるのですが、そこのすぐ下の「カスタムHTMLマークアップを使う」にチェックをいれて一回「保存」を押すと下記のように書き込むBOXが表示されます。

WordPress Popular PostをStinger5と同じ表示にカスタマイズ

上記の画像のように設定していきます。一番上の「Before / after title:」 の右側に

<h4 class="menu_underh2">

左側に

</h4>

一番上の「Before / after Popular Posts: 」 の右側に

<div id="kanren">

左側に

</div>

そして最後一番下の「Post HTML Markup: 」に

<dl class="clearfix">
  <dt>{thumb}</dt>
  <dd>
    <h5>{title}</h5>
    <p>{stats}</p>
  </dd>
</dl>

を記述してください。入力後「保存」を押してブログを確認してみましょう。

[adsense]

WordPress Popular PostをStinger5と同じ表示にカスタマイズ

どうでしょうか?表示が上の「New Posts」と同じに変更できました。今回「ガジェニュー」さんのこちらの記事

を参考にカスタマイズさせて頂きました。読んで頂いてありがとうございました。

この記事を書いた人

ディーエムガジェット 

非IT系エンジニア。日々の出来事や自分の好きな物などの紹介をメインに色々発信していきます。2012 年から禁煙を開始して68キロぐらいだった体重が2012年6月には75キロまで増加。ヤバい!と感じてダイエットを開始。一回65キロまで落としましたが、2018年8月現在また72キロまで増加。こんな身体でもトライアスロンに出場予定「プロフィールはこちら

このエントリーをはてなブックマークに追加

WORDPRESS

Posted by dmgadget