【WordPress】WordPress Popular Postsでサムネイル画像を指定サイズのものに差し替える方法
WordPressを使ったサイトで、人気記事のランキングを表示するプラグインとして、
WordPress Popular Postsが使いやすくて便利で、私もよく使わせていただいてます。
プラグインだと、出力するHTMLの形式の自由が制限されているものも多いですが、
Popular Postsでは次のような設定をすることで、出力するHTMLの形式もある程度指定することができます。
|
1 2 | $args = 'post_html="<li>{thumb} <a href=\'{url}\'>{text_title}</a> </li>"' wpp_get_mostpopular($args); |
ただ、この場合出力される画像は、
自動的にaタグで囲まれたimgタグに固定されており、画像のサイズ指定もできません。
デザインによってはimgタグに直接リンクをつけたくない場合や、画像サイズを自由に決めたい場合も多いと思います。
そこで今回は、指定サイズのサムネイル画像のURLを取得し、ある程度自由に表示する方法について考えましたので、
ご紹介いたします。
※ここでの方法は 、パーマリンクの設定で、記事のURLを投稿名にしている場合の方法になります。
方法
ご紹介する方法の主な流れとphpの全文は次のようになります。
- post_htmlでsrc指定のないimgタグと{url}を含む形でHTMLの指定をして、wpp_get_mostPopluar()の値を取得
- 出力された値(ランキング全体)を記事ごとに分割
- 各記事で、{url}で出力されたURLから、post_nameを取得
- wpdbを使って、post_nameをKEYにしてデーターベースから投稿IDを取得
- 取得したIDから、指定サイズのサムネイル画像のURLを取得
- 文字の置き換えでimgタグにsrcを設定
- 各記事ごとに分割されていた情報を結合してechoで出力する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <?php ob_start(); $args = 'post_html="<li><a href=\'{url}\'><p class=\'image\'><img></p><h3>{text_title}</h3></a> </li>"'; wpp_get_mostpopular($args); $popular = ob_get_clean(); $popular_html = "<ul class='sideFavorite'>"; foreach ($pops[0] as $p){ preg_match("/<a href='.*'><p/", $p, $url); $url_post_name = str_replace("<a href='". home_url(). "/", "", $url[0]); $url_post_name = str_replace("/'><p", "", $url_post_name); $results = $wpdb->get_results( "SELECT id FROM wp_posts WHERE post_name = '". $url_post_name. "'"); $url_post_id = $results[0]->id; $imgUrls = wp_get_attachment_image_src( get_post_thumbnail_id($url_post_id), 'medium'); $p = str_replace("<p class='image'><img></p>", "<p class='image'><img src='" . $imgUrls[0] . "'></p>", $p); $popular_html .= $p; } $popular_html .= "</ul>"; echo $popular_html; ?> |
1. post_htmlでsrc指定のないimgタグと{url}を含む形でHTMLの指定をして、wpp_get_mostPopluar()値を取得
まずは出力するHTMLの形式を指定します。
今回は次のような形式としました。
|
1 | $args = 'post_html="<li><a href=\'{url}\'><p class=\'image\'><img></p><h3>{text_title}</h3></a> </li>"' |
ここでポイントになるのは imgタグを直接書き、src属性をここでは記述しないことと、
{url}を指定することです。
続いてPopular Postsから情報を出力しますが、
通常Popular Postsをphp上に配置する場合、
|
1 | <?php wpp_get_mostPopluar($args); ?> |
のような形で 記述します。
しかし今回はPopular Postsで出力されたデータを直接出力せず、書き換えた上で改めて出力したいので、
ob_start()とob_get_clean()というPHPの関数を使って、出力されたデータを変数に代入した上で表示を削除する処理を行います。
|
1 2 3 4 5 6 | <?php ob_start(); $args = 'post_html="<li><a href=\'{url}\'><p class=\'image\'><img></p><h3>{text_title}</h3></a> </li>"'; wpp_get_mostpopular($args); $popular = ob_get_clean(); ?> |
これでHTMLとして直接出力せず、$poplarにPopular Postsのデータを取得することができました。
2. 出力された値(ランキング全体)を記事ごとに分割
このままでは各記事ごとの処理が難しいため、記事ごとに分割します。
今回は<li></li>で各記事を囲う設定にしているので、liタグごとに分割します。
分割にはpreg_match_all()を使いました。
|
1 | preg_match_all('/<li>.*<\/li>/', $popular, $pops); |
3. 各記事で、{url}で出力されたURLから、post_nameを取得
|
1 2 3 4 5 6 7 8 | $popular_html = "<ul class='sideFavorite'>"; foreach ($pops[0] as $p){ preg_match("/<a href='.*'><p/", $p, $url); $url_post_name = str_replace("<a href='". home_url(). "/", "", $url[0]); $url_post_name = str_replace("/'><p", "", $url_post_name); ・・・ |
foreach文で各記事ごとに処理を行います。
まず、{url}で出力されたURLをpreg_match()で取得し、さらにこのURLからpost_nameの部分だけを取得します。
4. wpdbを使って、post_nameをKEYにしてデーターベースから投稿IDを取得
|
1 2 3 4 5 6 | ・・・ $results = $wpdb->get_results( "SELECT id FROM wp_posts WHERE post_name = '". $url_post_name. "'"); $url_post_id = $results[0]->id; ・・・ |
$wpdbを用いると、データベースから情報を取得することができるのですが、
今回は取得したpost_nameをKEYとして、記事のIDを取得します。
余談ですが、IDが取得できましたので、次のような指定をすることで、カテゴリーを取得することもできます。
|
1 2 3 4 5 | ・・・ $cats_now = get_the_category($results[0]->id); ・・・ |
5. 取得したIDから、指定サイズのサムネイル画像のURLを取得
記事のIDが取得できたら、このIDを使ってサムネイル画像のURLを取得します。
|
1 2 3 4 5 | ・・・ $imgUrls = wp_get_attachment_image_src( get_post_thumbnail_id($url_post_id), 'medium'); ・・・ |
ここでは’medium’を指定していますが、
functions.phpで add_image_size()で追加した画像サイズを指定したり、array(width, height)で指定した画像サイズでurlを取得することもできます。
6. 文字の置き換えでimgタグにsrcを設定
|
1 2 3 4 5 | ・・・ $p = str_replace("<p class='image'><img></p>", "<p class='image'><img src='" . $imgUrls[0] . "'></p>", $p); ・・・ |
str_replace()を使って文字列の置き換えを行うことで、
先ほど取得したサムネイル画像のURLをimgのsrcとして指定します。
7. 各記事ごとに分割されていた情報を結合してechoで出力する
foreachの最後尾と後に各記事を結合する処理を行い、echoで出力して完了です。
|
1 2 3 4 5 6 | ・・・ $popular_html .= $p; } $popular_html .= "</ul>"; echo $popular_html; |
参考にさせていただいたサイト
Author Profile
SHARE
