The Master of Swift App Coding

Swiftプログラミングでのアプリ作成方法やWordPressのテクニック解説

WordPress Popular Postsの見た目をAFFINGERに綺麗に合わせる方法

投稿日:2017年12月4日 更新日:

1.実現したいこと(目的)

WordPressのプラグイン「WordPress Popular Posts」の見た目をstinger8/affinger4に合わせて綺麗に変える方法

 

2.作業環境

WordPress 4.9.1
MacOSX Sierra 10.12.6
使用テーマ STINGER8/AFFINGER4

 

3.一言アンサー(概要)

  • WordPress Popular Postsの設定画面に入り、カスタムHTMLを含めて設定します
  • カスタムHTMLの部分はコピペでOKです
  • サーバーによっては、AFの例外処理(セキュリティの解除)が必要です

 

4.なぜ、これをやりたいのか?(理由)

日本で大人気のwordpressのテーマ、Stinger8(無料版)/(Affinger4でも同じ)を使っている場合、
WordPress Popular Postsというプラグインのデザインを、統一させたくなります。
そのままのデザインだと、綺麗に整列してくれなくて、美しくないからです。

WordPress Popular Postsというプラグインは、ブログ内の人気の記事をランキングで表示してくれる定番のプラグインです。

 

5.やり方(コード含む)

(1)ウィジェット画面でデザインを調整する

ここに関しては、以下のサイト様を参考にさせていただきました

WordPress Popular Posts で人気記事を表示する方法
https://bazubu.com/how-to-add-popular-posts-23487.html

人気記事を表示するWordPressプラグイン WordPress Popular Postsの使い方
http://nb-style.info/?p=1581

ここのコードと説明を基にして、このブログでは、タイトルにもh4タグを入れています。
なのでコードだとこちら。
タイトルの前 / 後:

投稿の前 / 後:

投稿の HTML マークアップ:

  • {thumb} {title} {stats}

画像にするとこのような感じです。

(2)サーバーによっては、カスタムHTML編集の際にWAFの例外処理(セキュリティの解除)が必要

お使いのサーバーによっては、カスタムHTML編集の際にWAFの例外処理(セキュリティの解除)が必要です。
筆者のサーバーはそれに該当していました。
そちらに関しては、以下のサイト様を参考にさせていただいき、サーバーの設定を行いました。

wordpressのウィジェットが保存できないとき
http://watanabesuguru.com/archives/139

WordPress4.8/Simplicity2でテキストウィジェットにアドセンス広告を貼ったらラベルとの間に余白が!?解決はカスタムHTMLウィジェットで。さらにコードが保存できない問題発生
http://koumetaro.com/blog/margin-between-ads-and-labels-at-wordpress4-8-simplicity2.html

もしも、自分でサーバーの設定を行うのが難しい環境にいる場合は、プラグインでもセキュリティのON/OFF操作ができるような記述もありましたが、コードを書いて操作する感じだったので、時間がかかりそうでリスクが大きいため試していません。

SiteGuard WP Plugin
https://www.jp-secure.com/siteguard_wp_plugin/

 

6.補足

(1)有料テーマAFFINGER4を購入したが、この作業は仕方なく時間かけて自分でやりました

有料テーマであるAFFINGER4を購入しました。たいていのデザインカスタマイズはやらなくて済みますが、このWordPress Popular Postsに関してはカスタマイズしました。

(2)AFFINGER4にはピックアップ機能がついているので、WordPress Popular Postsを使わないという手もある

AFFINGER4にはピックアップ機能がついています。あえて、ランキング機能を使わずに、自分が見て欲しい記事を載せておくのもいいかもしれないです。
(そちらはデザイン崩れないし)

どちらを使うのがいのか、これは難しい部分ですね…

音楽番組で例えると、売れている曲を紹介するのか、自分がお勧めする曲を紹介するのか
おすすめは売れるし、売れているものがお勧めだったりもします…w
とりあえず、僕はしばらくはランキングでいこうと思います。記事が貯まったら、ピックアップもいいかな

 

7.参考

上記文中に明記

 

Ad-336px-stinger8

Ad-336px-stinger8

-AFFINGER, WordPress
-, , ,

Copyright© The Master of Swift App Coding , 2018 All Rights Reserved.