WordPress Popular Postsの見た目をstinger8/affinger4に合わせて綺麗に変える方法は？
カスタムHTMLの部分はコピペでOKって本当？
サーバーによっては、AFの例外処理（セキュリティの解除）が必要って本当？
こんな疑問に答えます。
本記事の内容
僕はWordPressのブログでは月２万PV、自作のiPhoneアプリを２つリリースしています。
そんな僕が解説していきます。
作業環境
WordPress 4.9.1
MacOSX Sierra 10.12.6
使用テーマ STINGER8/AFFINGER4
WordPress Popular Postsの見た目をAFFINGERに綺麗に合わせる方法【タグ編集】
WordPress Popular Postsはブログ内の人気の記事をランキングで表示してくれる定番のプラグインです。
日本で大人気のwordpressのテーマ、Stinger8（無料版）/（Affinger4でも同じ）を使っている場合、WordPress Popular Postsというプラグインのデザインを、統一させたくなります。
そのままのデザインだと、綺麗に整列してくれなくて美しくないからです。
（１）ウィジェット画面でデザインを調整する
ここに関しては、以下のサイト様を参考にさせていただきました
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}
画像にするとこのような感じです。
（２）サーバーによっては、カスタム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/
WordPress Popular Postsの見た目をAFFINGERに綺麗に合わせる方法と共に知っておきたいこと【他の方法もある】
（１）有料テーマAFFINGER4を購入したが、この作業は仕方なく時間かけて自分でやりました
有料テーマであるAFFINGER4を購入しました。たいていのデザインカスタマイズはやらなくて済みますが、このWordPress Popular Postsに関してはカスタマイズしました。
（２）AFFINGER4にはピックアップ機能がついているので、WordPress Popular Postsを使わないという手もある
AFFINGER4にはピックアップ機能がついています。あえて、ランキング機能を使わずに、自分が見て欲しい記事を載せておくのもいいかもしれないです。
（そちらはデザイン崩れないし）
どちらを使うのがいのか、これは難しい部分ですね…
音楽番組で例えると、売れている曲を紹介するのか、自分がお勧めする曲を紹介するのか
おすすめは売れるし、売れているものがお勧めだったりもします…w
とりあえず、僕はしばらくはランキングでいこうと思います。記事が貯まったら、ピックアップもいいかな
というわけで今回は以上です。