WordPressプラグイン「Child Pages Shortcode」で、画像サイズがうまく表示されない

WordPressの勉強中です。こちらの本を使っています。
本格ビジネスサイトを作りながら学ぶ WordPressの教科書

なぜかうまくいかなくて、悩まされた。。

WordPressのプラグイン「child-pages-shortcode」を使うと、子ページの一覧を表示できます。
が、僕のPC環境がダメなのか、よくわからないんんだけれども、サムネイル画像の表示がイマイチうまくいかない。

通常、こんな感じで表示されるはずなんだけど、

僕の場合こうなる。
本来の画像が縮小表示されずに、一部分が切り出された形になってる。

WordPress本体の設定がダメなのかもしれない、と思っていろいろ調べたけど結局よくわからず。
最終的に、プラグイン「child-pages-shortcode」のソースコードをいじって、むりやり?動くようにした。このやり方があっているのかどうか、自信ないけど、練習用のサイトなのでとりあえずよしとした。
というわけで、その内容をメモ。

僕が使っているバージョン
WordPress3.4.2
Plugin 「Child Pages Shortcode 0.8.0」


(1)どんな状況か

WordPressの固定ページに以下のショートコードを記載すると、子ページの一覧が表示されます。

[child_pages width="50%" size="thumbnail"]

このときSizeに指定した値にしたがって、画像が表示されます。僕の場合、画像が半分だけ切り出された形で表示されてしまいました。

width=100%にすると画像全体が縮小された形で、きちんと表示されます。ただ、width=100%にすると、記事全体が拡大されて、1行で表示されます。(width=50%の場合は、記事が2行に表示されます) width=50%の状態でも、画像がきちんと表示されるはずなんだけど、なぜかうまく表示されない・・・

(2)やったこと

悩んだ結果、ソースをいじってしまった。

WordPressの「wordpress\wp-content\plugins\child-pages-shortcode」フォルダの中に、child-pages-shortcode.phpがあります。

その中の、

        if ($tid = get_post_thumbnail_id()) {
            $src = wp_get_attachment_image_src($tid, $p['size']);
            $img = sprintf(
                '<img src="%s" alt="%s" title="%s" />',
                esc_attr($src[0]),
                esc_attr(get_the_title()),
                esc_attr(get_the_title())
            );
        }

のところを、

        if ($tid = get_post_thumbnail_id()) {
            $src = wp_get_attachment_image_src($tid, $p['size']);
            $img = sprintf(
                '<img width="%s" height="%s" src="%s" alt="%s" title="%s" />',
                esc_attr($src[1]),
                esc_attr($src[2]),
                esc_attr($src[0]),
                esc_attr(get_the_title()),
                esc_attr(get_the_title())
            );
        }

といった形に修正した。
こうすると、実際のHTMLの中で画像のサイズを指定した形で出力してくれる。

<img width="302" height="123" src="http://localhost/wordpress/wp-content/uploads/2011/11/shiodome_mall.jpg" alt="汐留モール" title="汐留モール">

で、意図したとおりに画像が表示されるようになりました。

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s