Blog

【WordPress】WordPress Popular Postsでサムネイル画像を指定サイズのものに差し替える方法

2014.12.16Cat:wordpress デザイナー

 

WordPressを使ったサイトで、人気記事のランキングを表示するプラグインとして、

WordPress Popular Postsが使いやすくて便利で、私もよく使わせていただいてます。

 

プラグインだと、出力するHTMLの形式の自由が制限されているものも多いですが、

Popular Postsでは次のような設定をすることで、出力するHTMLの形式もある程度指定することができます。

ただ、この場合出力される画像は、

自動的にaタグで囲まれたimgタグに固定されており、画像のサイズ指定もできません。

 

デザインによってはimgタグに直接リンクをつけたくない場合や、画像サイズを自由に決めたい場合も多いと思います。

そこで今回は、指定サイズのサムネイル画像のURLを取得し、ある程度自由に表示する方法について考えましたので、

ご紹介いたします。

※ここでの方法は 、パーマリンクの設定で、記事のURLを投稿名にしている場合の方法になります。

 

方法

ご紹介する方法の主な流れとphpの全文は次のようになります。

  1. post_htmlでsrc指定のないimgタグと{url}を含む形でHTMLの指定をして、wpp_get_mostPopluar()の値を取得
  2. 出力された値(ランキング全体)を記事ごとに分割
  3.  各記事で、{url}で出力されたURLから、post_nameを取得
  4. wpdbを使って、post_nameをKEYにしてデーターベースから投稿IDを取得
  5. 取得したIDから、指定サイズのサムネイル画像のURLを取得
  6. 文字の置き換えでimgタグにsrcを設定
  7. 各記事ごとに分割されていた情報を結合してechoで出力する

 

1. post_htmlでsrc指定のないimgタグと{url}を含む形でHTMLの指定をして、wpp_get_mostPopluar()値を取得

まずは出力するHTMLの形式を指定します。

今回は次のような形式としました。

ここでポイントになるのは imgタグを直接書き、src属性をここでは記述しないことと、

{url}を指定することです。

 

続いてPopular Postsから情報を出力しますが、

通常Popular Postsをphp上に配置する場合、

のような形で 記述します。

 

しかし今回はPopular Postsで出力されたデータを直接出力せず、書き換えた上で改めて出力したいので、

ob_start()とob_get_clean()というPHPの関数を使って、出力されたデータを変数に代入した上で表示を削除する処理を行います。

これでHTMLとして直接出力せず、$poplarにPopular Postsのデータを取得することができました。

 

2. 出力された値(ランキング全体)を記事ごとに分割

このままでは各記事ごとの処理が難しいため、記事ごとに分割します。

今回は<li></li>で各記事を囲う設定にしているので、liタグごとに分割します。

分割にはpreg_match_all()を使いました。

 

3. 各記事で、{url}で出力されたURLから、post_nameを取得

foreach文で各記事ごとに処理を行います。

まず、{url}で出力されたURLをpreg_match()で取得し、さらにこのURLからpost_nameの部分だけを取得します。

 

4. wpdbを使って、post_nameをKEYにしてデーターベースから投稿IDを取得

$wpdbを用いると、データベースから情報を取得することができるのですが、

今回は取得したpost_nameをKEYとして、記事のIDを取得します。

 

余談ですが、IDが取得できましたので、次のような指定をすることで、カテゴリーを取得することもできます。

 

5. 取得したIDから、指定サイズのサムネイル画像のURLを取得

記事のIDが取得できたら、このIDを使ってサムネイル画像のURLを取得します。

ここでは’medium’を指定していますが、

functions.phpで add_image_size()で追加した画像サイズを指定したり、array(width, height)で指定した画像サイズでurlを取得することもできます。

 

6. 文字の置き換えでimgタグにsrcを設定

str_replace()を使って文字列の置き換えを行うことで、

先ほど取得したサムネイル画像のURLをimgのsrcとして指定します。

 

7. 各記事ごとに分割されていた情報を結合してechoで出力する

foreachの最後尾と後に各記事を結合する処理を行い、echoで出力して完了です。

 

 

参考にさせていただいたサイト

[Я]Wordpress Popular Postsでカテゴリ毎の人気記事ランキングを作る : りくまろぐ

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ