Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

WordPress(ワードプレス)で投稿記事内の最初の画像を表示させる方法

02.06.16 16:45 | コメント(0)

投稿記事内の最初の画像を表示させる方法

WordPress(ワードプレス)を利用して、投稿記事内の最初の画像表示したり、最初の画像で一覧を作成したい場合があると思います。
WordPress(ワードプレス)では、いくつかのメディアサイズを指定できるので表示サイズにあった画像を表示させることができます。
今回は「投稿記事内の最初の画像」を表示させる方法をご紹介いたします。

画像一覧

投稿記事内の最初の画像
 1. メディアサイズの設定
 2. 記事内画像を表示させるコードの入力
 3. 各サイズの記事内画像を表示させるコードの入力

メディアサイズの設定

最初に画像がアップロードした際に、リサイズする画像のサイズを設定します。
WordPress(ワードプレス)管理画面メニューの設定から「メディア」を選択します。
メディア画面を表示させると各サイズの設定項目が出来てきます。
メディアのサイズは4つにわかれていますので全てお好きなサイズを設定してください。
【メディアサイズ】
・サムネイル:「thumbnail」
・中サイズ:「midium」
・大サイズ:「large」
・フルサイズ:「full」

メディアサイズの設定

メディアサイズの設定

記事内画像を表示させるコードの入力

画像の設定が完了したら記事をアップし、記事内画像を表示させたいファイルに表示させるコードを入力します。

【追加するコード】
<img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" />
これで記事内画像を表示出来ました。

【最新記事の5つの画像を表示させるコード】
<?php query_posts('posts_per_page=5'); ?>
<?php while (have_posts()) : the_post(); ?>
<img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" />
<?php endwhile;?>
これで最新記事の5つの記事内画像を表示出来ました。

各サイズの記事内画像を表示させるコードの入力

上記で記事内画像を表示出来たので次に別のサイズの画像を表示させたい方法をご紹介します。 記事内画像を表示させたいファイルに表示させるコードを入力します。

【サムネイル:「thumbnail」サイズの画像を表示させるコード】
<?php
$files = get_children("post_parent=$id&amp;post_type=attachment&amp;post_mime_type=image");
if (empty($files)){
	print "none";
}else{
	$keys = array_keys($files);
        $lastkeys = array_pop($keys);
        $num=$lastkeys;
        $thumb=wp_get_attachment_image_src($num,'thumbnail');
		print '<img src="' . $thumb[0] . '" width="' . $thumb[1] . '" height="' . $thumb[2] . '" alt="' . $post->post_title . 'の画像" class="transform01" />' . "";
}
?>
これでサムネイル:「thumbnail」サイズの記事内画像を表示出来ました。

【中サイズ:「midium」サイズの画像を表示させるコード】
<?php
$files = get_children("post_parent=$id&amp;post_type=attachment&amp;post_mime_type=image");
if (empty($files)){
	print "none";
}else{
	$keys = array_keys($files);
        $lastkeys = array_pop($keys);
        $num=$lastkeys;
        $thumb=wp_get_attachment_image_src($num,'midium');
		print '<img src="' . $thumb[0] . '" width="' . $thumb[1] . '" height="' . $thumb[2] . '" alt="' . $post->post_title . 'の画像" class="transform01" />' . "";
}
?>
これで中サイズ:「midium」サイズの記事内画像を表示出来ました。
大サイズ:「large」、フルサイズ:「full」も同じように表示が出来ます。
以上でWordPress(ワードプレス)で投稿記事内の最初の画像を表示させる方法です。
カテゴリ:WordPress(ワードプレス)構築と技術, カスタマイズ方法(WordPress), ブログツール【CMS】情報とWEBコンテンツ技術
  • このエントリーをはてなブックマークに追加
  • Facebookでコメントする

    コメントする

    おすすめの記事

    PAGE TOP