URLを指定して記事本文のサムネイル画像を表示するショートコードを作成しました!






前回、本文の抜粋(the_except())を表示する際に、サムネイル表示もできるようにする方法を書きました(以下の記事です)。

WordPressのレイアウト変更(本文抜粋&アイキャッチ画像の設定)を行いました!WordPressのレイアウト変更(本文抜粋&アイキャッチ画像の設定)を行いました!

この記事を書いた後に、記事本文内でも同じようにできればイイなと。
(上のサムネイルは、今回ご紹介するショートコードを使って書いてあります)

ショートコードの記載例:

[thumbnail url="http://wakeiseijaku.com/?p=21551"]☞ <a href="http://wakeiseijaku.com/?p=21551" target="_blank">Wordpressのレイアウト変更(本文抜粋&アイキャッチ画像の設定)を行いました!</a><br style="clear:both;" />

そこで、今回は、記事本文内でサムネイル表示ができるように、ショートコード化しました。

今回やりたかった事の整理
1.URLを指定して、以下の1)〜3)の場合に応じたサムネイルを表示する
  1)記事本文にアイキャッチ画像が設定されている場合は、アイキャッチ画像を表示する
  2)設定されたいなかった場合は、記事本文の最初の画像を表示する
  3)画像が無い場合は、デフォルト画像を表示する
2.1をショートコード化して、記事本文で指定できるようにする

と、説明すると、気づいた方も居るかもしれませんが、前回ご紹介した本文抜粋のサムネイルを表示する方法と同じ処理を、今回は、URLを指定して記事を特定することになります。
ここで、URLを指定しなかった場合に現在の記事を対象にすれば、前回ご紹介した方法は、今回ご紹介するコードで対応できることになるね!

このアイデア、(・∀・)イイネ!!

(実際、今回ご紹介するコードを作成した後、前回ご紹介したコードは全て上書きして、当ブログに反映してあります)

では、今回作成したショートコードと、その使用方法について、ご紹介しまーす!

1.URLを指定して、ケースに応じたサムネイルを表示する

参考にした記事:
WordPressで指定した記事の投稿サムネールを取得するショートコード

この記事で紹介されてるコードは、アイキャッチ画像が設定されている場合はアイキャッチ画像を表示し、設定されてなければデフォルト画像を表示する仕様でした。私がやりたかった事の1)と3)を満たしています。あとは、アイキャッチ画像が設定されていなかった時の分岐で、記事本文内に画像があれば、それを表示するようにしてやればOK!

では、今回作成したコードご紹介します。

まず、functions.phpに以下のコードを追加します。

function get_thumbnail_shortcode($atts) {
    extract(shortcode_atts(array(
        'url' => '',
        'width' => 125, // デフォルト画像サイズ(横幅)を指定する
        'class' => '',
    ), $atts));
    $width = intval($width);

    $id = 0;
    if(empty($url)){
	$id = get_the_ID(); // URLが指定してない場合は、現在の記事IDを取得する
    } else {
        $id = url_to_postid($url); // 指定したURL(注1)から、記事IDを取得する
    }
    $title = esc_html(get_the_title($id));
    $atts2 = array(
        "alt"   => $title,
        "title" => $title,
        "class" => "alignleft"
    ); 
    if (has_post_thumbnail($id)) {
        return get_the_post_thumbnail($id, array($width,9999), $atts2); // アイキャッチ画像がある場合は、アイキャッチ画像を取得する(注2)

    } else {
	$img_url = '';
        $img_url_1st = '';

	$post = get_post($id);
        $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); 

        $img_url_1st = $matches [1] [0];
        if(empty($img_url_1st)){
	    $img_url = "default.jpg"; // デフォルト画像を指定する
	} else {
	    $img_url = $img_url_1st; // 記事本文の最初の画像を取得する
	}
	return sprintf(
                '<img src="%1$s" class="thumbnail wp-post-image alignleft" alt="%2$s" title="%2$s" width="%3$s" />',
		$img_url, $title, $width
	);
    }
}

注1)url_to_postid()に指定するURLですが、wp.meの短縮したURLを指定すると記事IDが取得できませんので、ご注意ください。実は、最初、ここでつまずきました。^^;

注2)スマフォ用のテーマの中では、なぜかget_the_post_thumbnailが使えませんでしたので、以下のようにコードを修正してあります。

修正したコード(抜粋):

    if (has_post_thumbnail($id)) {
        // アイキャッチ画像URL取得、スマフォテーマ内では、the_post_thumbnail で画像が表示されないため、
        // wp_get_attachment_image_srcを利用する

        $img_src = wp_get_attachment_image_src(get_post_thumbnail_id(), array($width,9999));
        return sprintf(
                '<img src="%1$s" class="alignleft" alt="%2$s" title="%2$s" />',
		$img_src[0], $title
        );
    } else {

2.ショートコード化

次に、記事本文内で、ショートコードとして利用するために、同じく、functions.phpに以下の1行を追加します。

add_shortcode("thumbnail", "get_thumbnail_shortcode");

ちなみに、ウィジェット内でもショートコードを使いたい場合は、以下の1行も functions.php に併せて追加すればOK!

add_filter('widget_text', 'do_shortcode');

3.記事本文での使用方法

冒頭で説明したけど、改めて使用方法を説明します。

記事本文内で、

[thumbnail url="URLを指定する" width="サムネイルの画像サイズ(横幅)を指定する"]

というショートコードを記入すれば、OK!です。urlと、widthは、それぞれ引数となっています。

全く引数を指定しなかった場合は、ショートコードを記入した記事本文のサムネイルが表示されます。

[thumbnail]この記事のサムネイル<br style="clear:both;" />

URLを指定して記事本文のサムネイル画像を表示するショートコードを作成しました!この記事のサムネイル

※width指定しないと、デフォルトのサイズ(width=”125″)となります。また、この記事には画像が無いので、アイキャッチ画像が表示されています。

次に、widthを指定してみます。

[thumbnail width="75"]この記事のサムネイル(width="75")<br style="clear:both;" />

URLを指定して記事本文のサムネイル画像を表示するショートコードを作成しました!この記事のサムネイル(width=”75″)

そして、url(先日投稿した記事のURLです)とwidthの両方を指定してみます。

[thumbnail url="http://wakeiseijaku.com/?p=21949" width="200"]先日投稿した記事のサムネイル(width="200")<br style="clear:both;" />

今日の写真 No.851 – 昨日Instagramへ投稿した写真(2枚)/iPhone5、instagram先日投稿した記事のサムネイル(width=”200″)

※この記事には、アイキャッチ画像が指定されていないので、最初の画像がサムネイルとして表示されています。

4.テーマ内での使用方法

記事の冒頭で説明したように、今回作成したショートコードで、前回ご紹介したコードは全て上書きしましたので、そのコードもご紹介しておきます。

コードの修正場所は、content.phpです。

前回ご紹介したコード:

<?php if ( is_home() or is_category() or is_archive() or is_tag() or is_search() ) : ?>
<div class="entry-summary">
	<?php if ( has_post_thumbnail()) { ?>
		<span style=" float: left; margin-right: 1em;"><?php the_post_thumbnail( array(180,9999) ); ?></span>
	<?php } else { ?>
		<img class="alignleft" src="<?php echo catch_that_image(); ?>" alt="" width="180" height="" />
	<?php } ?>
	<?php the_excerpt(); ?>
</div><!-- .entry-summary -->

今回修正したコード:

<?php if ( is_home() or is_category() or is_archive() or is_tag() or is_search() ) : ?>
<div class="entry-summary">
	<?php echo do_shortcode('[thumbnail width="200"]'); ?> // テーマ内でもショートコードをコール!
	<?php the_excerpt(); ?>
</div><!-- .entry-summary -->

うーん、コードがスッキリして、( ´∀`)bグッ!

以上、今回作成したショートコードの説明でした。

これで、記事本文の他に、ウィジェット内で、URLを指定してサムネイルを表示することができるようになりました。やったね!

私と同じように、URLを指定した記事のサムネイルを表示させたい場合に、参考にしてください。

カテゴリー: Wordpress, ブログ雑記   タグ: , , , , , , , ,   作成者: 朝井俊光   この投稿のパーマリンク






記事の購読はこちら!

一服のお茶と、お菓子を振る舞う気持ちで、ブログ立ち上げ時から毎日更新継続中です。


「今日の写真」を代表とする日常を記録してゆくライフログ的な性格と、「Asai’s check」によるRSSリーダー巡回チェック、「お店探訪」や「開封の儀・製品レビュー」等の各種レビュー記事を書いています。
登録はこちらから
follow us in feedly



関連記事:

コメントを残す