東京のホームページ制作会社・web制作会社
株式会社シンシエイト

WPPのデザインとレイアウトをカスタマイズして自作テンプレートを作る方法

WordPress Popular Postsをカスタマイズ

WordPress Popular Posts(WPP)では、デフォルトの表示方法の他にも、自作でレイアウトやデザインをカスタマイズする方法があります。オリジナルテーマ作成の際にはぜひ活用したい機能なので紹介していきます。

WPPのデザインとレイアウトをフルカスタマイズする方法

WordPress Popular Postsをカスタマイズ

基本的にはPHP関数の wpp_get_mostpopular($arg); で一覧を表示するのですが、この引数で表示方法を変更することが出来ます。

引数を指定しないで関数を使った場合

引数を指定しない場合のデフォルトでは、このようなHTMLが表示されます。(※ 見やすいように改行など加えています。)

デフォルトの引数がどうなっているかを見て見ましょう。

これらの引数を変更することで、人気記事の一覧を変更することができます。

WordPress Popular Posts でいい感じに見えるカスタマイズ設定

たくさんの設定があっても全ては使わないし、いい感じの見栄えになればOKという方も多いと思いますので、僕がよく使う設定をご紹介します。

こうすると、HTMLはこのように出力されます。(※ 一部改行等改変しています。)

どうでしょう?こんな感じになると、あとはCSSで調整しやすいのではないでしょうか?

プラスアルファのちょっとカスタマイズしてみる

サイトによってはビュー数や、日付を追加したい場合があるかもしれませんが、そんな時は上記に追加してこんな感じです。

その結果のHTMLが以下のようになります。(※ 一部改行等改変しています。)

いかがでしょう。これならかなり使いやすいし汎用性も高くなったのではないでしょうか。

WordPress Popular Postsのカスタマイズまとめ

いかがでしたでしょうか。上記の設定で大体のレイアウトは可能だと思います。あとはサイトに合わせてクラスを追加して、CSSでレイアウトを調整すれば、サイトにあった形でカスタマイズができると思います。

三上 龍志
この記事を書いた人
三上 龍志
株式会社シンシエイト代表。青学中退(尾崎豊ではない)から16年間IT・web一筋。学生起業時から潰した事業は数知れず。「人生を面白く」がテーマ!一人旅 / 筋トレ / Nuno Bettencourt / 千里眼 / 二娘 / 白髪
関連する記事
WP必須プラグイン!TinyMCE Advancedの使い方・設定方法
WPプラグイン
NO IMAGE
WPプラグインのAll in One SEO Packでサイトマップ生成時のエラー解決策
WPプラグイン
YARPPの表示位置を任意の場所に変更する方法(上級者向け)
WPプラグイン
Yet Another Related Posts Plugin(YARPP)のオススメ設定と機能概要
WPプラグイン
PHP7.3で起きるWPプラグインCrayon Syntax Highlighterのエラーを直す方法
WPプラグイン
WordPress Popular Posts(WPP)の使い方とオススメの設定方法
WPプラグイン
2枚の画像を比較するWordPressプラグインTwentyTwentyの使い方
WPプラグイン
【YARPP】関連スコア設定のタイトルと内容を「検討する」に変更する方法(上級者向け)
WPプラグイン
NO IMAGE
WPプラグインJetpackでオススメの厳選10の機能と設定方法
WPプラグイン
さよならスパム!ワードプレスのAkismetプラグインの設定・アクティベート方法
WPプラグイン
株式会社シンシエイト ブログ バックエンド WPプラグイン WPPのデザインとレイアウトをカスタマイズして自作テンプレートを作る方法

web制作とマーケティングで
貴社の経営課題を解決します

web制作でのブランディングや、コンテンツマーケティング・SEO・ネット広告を中心としたウェブマーケティングを通じて、企業の事業を加速させるご提案をしています。

お電話でのお問い合わせはこちら

現在リモートワーク推進中のため、お電話が繋がりにくくなっております。
受付時間は平日10:00〜18:00です。セールス目的のお電話はご遠慮ください。