当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

「投稿サムネイル」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(デフォルトの用例)
(投稿サムネイルにスタイルを付ける)
 
(2人の利用者による、間の4版が非表示)
1行目: 1行目:
{{NeedTrans}}
 
 
 
投稿サムネイルとは、[[Version 2.9|バージョン 2.9]] から導入された[[Theme Features|テーマ機能]]で、[[Version 3.0|バージョン 3.0]] 以降は'''アイキャッチ画像'''と呼ばれています。これは、ブログ投稿・固定ページ・カスタム投稿タイプを視覚的に描写するために選択された画像のことです。
 
投稿サムネイルとは、[[Version 2.9|バージョン 2.9]] から導入された[[Theme Features|テーマ機能]]で、[[Version 3.0|バージョン 3.0]] 以降は'''アイキャッチ画像'''と呼ばれています。これは、ブログ投稿・固定ページ・カスタム投稿タイプを視覚的に描写するために選択された画像のことです。
 
この画像を表示するかどうかはテーマによります。「マガジン風」テーマで各投稿に画像が含められている場合は特に便利です。
 
この画像を表示するかどうかはテーマによります。「マガジン風」テーマで各投稿に画像が含められている場合は特に便利です。
62行目: 60行目:
  
 
<pre>
 
<pre>
// check if the post has a Post Thumbnail assigned to it.
+
// 投稿に投稿サムネイルが割り当てられているかチェックします。
 
if ( has_post_thumbnail() ) {
 
if ( has_post_thumbnail() ) {
 
the_post_thumbnail();
 
the_post_thumbnail();
69行目: 67行目:
 
</pre>
 
</pre>
  
'''注:''' To return the Post Thumbnail for use in your PHP code instead of displaying it, use: [[テンプレートタグ/get_the_post_thumbnail|get_the_post_thumbnail()]]
+
'''注:''' 画面への表示ではなく PHP の値として投稿サムネイルを取得したい場合は [[テンプレートタグ/get_the_post_thumbnail|get_the_post_thumbnail()]] を使用してください。
  
 
=== 投稿または大きいサイズの画像へのリンク <span id="Linking_to_Post_or_Larger_Image"></span>===
 
=== 投稿または大きいサイズの画像へのリンク <span id="Linking_to_Post_or_Larger_Image"></span>===
  
To link the Post Thumbnail to the Post permalink or a larger image see the examples in [[テンプレートタグ/the_post_thumbnail#Examples |the_post_thumbnail()]]
+
投稿サムネイルに投稿パーマリンク、または大きな画像へのリンクをつけるには [[テンプレートタグ/the_post_thumbnail#Examples |the_post_thumbnail()]] 内の例を参照してください。
  
 
=== サムネイルサイズ <span id="Thumbnail_Sizes"></span>===
 
=== サムネイルサイズ <span id="Thumbnail_Sizes"></span>===
  
The default image sizes of WordPress are "thumbnail", "medium", "large" and "full" (the image you uploaded). These image sizes can be configured in the WordPress Administration [[Settings Media SubPanel|Media panel]] under Settings > Media. This is how you use these default sizes with [[テンプレートタグ/the_post_thumbnail | the_post_thumbnail()]]:
+
WordPress のデフォルトの画像サイズは 'thumbnail' (と、その別名 'thumb'), 'medium', 'large', 'full'(アップロードした画像のサイズ)です。これらの画像サイズは WordPress の管理画面の 設定 > メディア の「[[管理画面/メディア設定|メディア設定]]」画面で設定できます。さらに、テーマが投稿サムネイルを有効化している場合は 'post-thumbnail' を利用でき、投稿サムネイルを使用する際のデフォルトになります。以下は [[テンプレートタグ/the_post_thumbnail | the_post_thumbnail()]] タグでデフォルトの画像サイズを使用する方法です。
  
  the_post_thumbnail();                  // without parameter -> Thumbnail
+
  // パラメータなし -> 'post-thumbnail' (テーマが set_post_thumbnail_size() を使用して設定したように )
 +
the_post_thumbnail();
 
   
 
   
  the_post_thumbnail('thumbnail');      // Thumbnail (default 150px x 150px max)
+
  the_post_thumbnail('thumbnail');      // サムネイル (デフォルト 150px x 150px :最大値)
  the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)
+
  the_post_thumbnail('medium');          // 中サイズ  (デフォルト 300px x 300px :最大値)
  the_post_thumbnail('large');          // Large resolution (default 640px x 640px max)
+
  the_post_thumbnail('large');          // 大サイズ  (デフォルト 640px x 640px :最大値)
 +
the_post_thumbnail('full');            // フルサイズ (アップロードした画像の元サイズ)
 
   
 
   
  the_post_thumbnail( array(100,100) );  // Other resolutions
+
  the_post_thumbnail( array(100,100) );  // 他のサイズ
  
 
===  投稿サムネイルのサイズ設定 <span id="Set_the_Post_Thumbnail_Size"></span>===
 
===  投稿サムネイルのサイズ設定 <span id="Set_the_Post_Thumbnail_Size"></span>===
  
To be used in the current Theme's <tt>[[Theme_Development#Functions_File|functions.php]]</tt> file.
+
現在のテーマの <tt>[[Theme_Development#Functions_File|functions.php]]</tt>ファイルで使用されます。
  
Set the default Post Thumbnail size by resizing the image proportionally (that is, without distorting it):
+
画像サイズを比例してリサイズして、デフォルト投稿サムネイルサイズを設定する  (画像を歪ずに):
<pre>set_post_thumbnail_size( 50, 50 ); // 50 pixels wide by 50 pixels tall, resize mode</pre>
+
<pre>set_post_thumbnail_size( 50, 50 ); // 横 50px x 縦 50px リサイズモード</pre>
  
Set the default Post Thumbnail size by cropping the image (either from the sides, or from the top and bottom):
+
画像を切り出して、デフォルト投稿サムネイルサイズを設定する (両サイドから、またはトップとボトムから):
<pre>set_post_thumbnail_size( 50, 50, true ); // 50 pixels wide by 50 pixels tall, crop mode</pre>
+
<pre>set_post_thumbnail_size( 50, 50, true ); // 横 50px x 縦 50px 切り出しモード
 +
set_post_thumbnail_size( 50, 50, array( 'top', 'left')  ); // 横 50px x 縦 50px 左上からの切り出し
 +
set_post_thumbnail_size( 50, 50, array( 'center', 'center')  ); // 横 50px x 縦 50px 中央からの切り出し</pre>
  
 
=== 新規投稿サムネイルサイズの追加 <span id="Add_New_Post_Thumbnail_Sizes"></span>===
 
=== 新規投稿サムネイルサイズの追加 <span id="Add_New_Post_Thumbnail_Sizes"></span>===
Example of a new Post Thumbnail size named "category-thumb".
+
新しい投稿サムネイルサイズ 'category-thumb' の例です。
 +
現在のテーマの <tt>[[Theme_Development#Functions_File|functions.php]]</tt>ファイルで使用されます。
  
To be used in the current Theme's <tt>[[Theme_Development#Functions_File|functions.php]]</tt> file.
+
<pre>add_image_size( 'category-thumb', 300, 9999 ); // 横 300px (縦 制限なし)</pre>
<pre>add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)</pre>
+
 
 +
テーマテンプレートファイルにおける新しい投稿サムネイルサイズの使用例です。
  
Here is an example of how to use this new Post Thumbnail size in theme template files.
 
 
<pre><?php the_post_thumbnail( 'category-thumb' ); ?></pre>
 
<pre><?php the_post_thumbnail( 'category-thumb' ); ?></pre>
  
109行目: 112行目:
  
 
<pre>if ( function_exists( 'add_theme_support' ) ) {  
 
<pre>if ( function_exists( 'add_theme_support' ) ) {  
add_theme_support( 'post-thumbnails' );
+
    add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // default Post Thumbnail dimensions (cropped)
+
    set_post_thumbnail_size( 150, 150, true ); // デフォルト投稿サムネイルサイズ (切り出しモード)
  
// additional image sizes
+
    // 追加の画像サイズ
// delete the next line if you do not need additional image sizes
+
    // 追加の画像サイズが必要なければ次の行を削除
add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)
+
    add_image_size( 'category-thumb', 300, 9999 ); // 横 300px (縦 制限なし)
 
}</pre>
 
}</pre>
  
 
=== 投稿サムネイルにスタイルを付ける <span id="Styling_Post_Thumbnails"></span>===
 
=== 投稿サムネイルにスタイルを付ける <span id="Styling_Post_Thumbnails"></span>===
  
Post Thumbnails are given a class "wp-post-image". They also get a class depending on the size of the thumbnail being displayed
+
投稿サムネイルにはクラス「wp-post-image」が付与されます。また表示される投稿サムネイルサイズに依存したクラスも付与されます。たとえば
You can style the output with these [[Glossary#CSS|CSS selectors]]:
+
 
 +
<pre>the_post_thumbnail();
 +
the_post_thumbnail('medium');
 +
the_post_thumbnail( array(100,100) );
 +
the_post_thumbnail( 'category-thumb' ); // 上の例を参照 </pre>
 +
 
 +
これらの行はそれぞれ次のような HTML を生成します。
 +
 
 +
<pre><img src=... class="attachment-post-thumbnail wp-post-image" ...>
 +
<img src=... class="attachment-medium wp-post-image" ...>
 +
<img src=... class="attachment-100x100 wp-post-image" ...>
 +
<img src=... class="attachment-category-thumb wp-post-image" ...></pre>
 +
 
 +
以下の [[用語集#CSS|CSS セレクタ]]を使用して出力をカスタマイズできます。
  
 
  img.wp-post-image
 
  img.wp-post-image
 +
 +
img.attachment-post-thumbnail
 
  img.attachment-thumbnail
 
  img.attachment-thumbnail
 
  img.attachment-medium
 
  img.attachment-medium
128行目: 146行目:
 
  img.attachment-full
 
  img.attachment-full
  
You can also give Post Thumbnails their own class.<br>Display the Post Thumbnail with a class "alignleft":
+
また投稿サムネイルには、投稿サムネイルサイズに依存したクラスの代わりに、独自のクラスを付与できます。次の例は投稿サムネイルにクラス「alignleft」を付与します。
 +
 
 +
<pre><?php the_post_thumbnail('medium', array('class' => 'alignleft')); ?></pre>
 +
 
 +
次のような HTML が生成されます。
  
<pre><?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?></pre>
+
<pre><img src=... class="alignleft wp-post-image" ...></pre>
  
 
== ソースファイル <span id="Source_File"></span>==
 
== ソースファイル <span id="Source_File"></span>==
143行目: 165行目:
 
* [http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/ New in WordPress 2.9: Post Thumbnail Images], by Mark Jaquith
 
* [http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/ New in WordPress 2.9: Post Thumbnail Images], by Mark Jaquith
 
* [http://www.prelovac.com/vladimir/simple-wordpress-thumbnail-function Simple WordPress thumbnail function], by Vladimir Prelovac
 
* [http://www.prelovac.com/vladimir/simple-wordpress-thumbnail-function Simple WordPress thumbnail function], by Vladimir Prelovac
 +
* [http://generatewp.com/theme-support/ WordPress Theme Support Generator]
  
 
=== 日本語情報 ===
 
=== 日本語情報 ===
152行目: 175行目:
 
{{Theme Support}}
 
{{Theme Support}}
  
{{原文|Post Thumbnails|111019}}<!-- 2011-11-19T11:20:02 Keesiemeijer 版 -->
+
{{原文|Post Thumbnails|153444}}<!-- 16:28, 15 August 2015‎ Atachibana版 -->
  
 
{{DEFAULTSORT:とうこうさむねいる}}
 
{{DEFAULTSORT:とうこうさむねいる}}
162行目: 185行目:
 
[[en:Post Thumbnails]]
 
[[en:Post Thumbnails]]
 
[[it:Immagini in evidenza]]
 
[[it:Immagini in evidenza]]
 +
[[ja:投稿サムネイル]]

2018年4月23日 (月) 15:50時点における最新版

投稿サムネイルとは、バージョン 2.9 から導入されたテーマ機能で、バージョン 3.0 以降はアイキャッチ画像と呼ばれています。これは、ブログ投稿・固定ページ・カスタム投稿タイプを視覚的に描写するために選択された画像のことです。 この画像を表示するかどうかはテーマによります。「マガジン風」テーマで各投稿に画像が含められている場合は特に便利です。

投稿サムネイル対応の有効化

投稿・ページ編集画面に投稿サムネイルセクションを表示させるには、テーマ内で対応を宣言する必要があります。functions.php に以下を書きこみます。

add_theme_support( 'post-thumbnails' ); 

注意: 特定の投稿タイプで投稿サムネイルを有効化する方法については、add_theme_support() をご参照ください。

投稿サムネイルを設定する

テーマに投稿サムネイルのサポートを追加できると、「アイキャッチ画像」メタボックスが投稿・固定ページ編集画面に表示されます。もし表示されなければ、画面右上の表示オプションの中で「アイキャッチ画像」を有効にします。

アイキャッチ画像メタボックス

アイキャッチ画像メタボックス

「アイキャッチ画像を設定」リンクをクリックした後、投稿・固定ページへ画像を挿入する /en のと同じ手順を行います。アイキャッチ画像を選択してイメージ設定を済ませてから、青い「アイキャッチ画像を設定」ボタンをクリックすれば完了です。

「アイキャッチ画像を設定」ボタン

「アイキャッチ画像を設定」ボタン

関数リファレンス

テンプレートタグ
その他の関数

用例

デフォルトの用例

// 投稿に投稿サムネイルが割り当てられているかチェックします。
if ( has_post_thumbnail() ) {
	the_post_thumbnail();
} 
the_content();

注: 画面への表示ではなく PHP の値として投稿サムネイルを取得したい場合は get_the_post_thumbnail() を使用してください。

投稿または大きいサイズの画像へのリンク

投稿サムネイルに投稿パーマリンク、または大きな画像へのリンクをつけるには the_post_thumbnail() 内の例を参照してください。

サムネイルサイズ

WordPress のデフォルトの画像サイズは 'thumbnail' (と、その別名 'thumb'), 'medium', 'large', 'full'(アップロードした画像のサイズ)です。これらの画像サイズは WordPress の管理画面の 設定 > メディア の「メディア設定」画面で設定できます。さらに、テーマが投稿サムネイルを有効化している場合は 'post-thumbnail' を利用でき、投稿サムネイルを使用する際のデフォルトになります。以下は the_post_thumbnail() タグでデフォルトの画像サイズを使用する方法です。

// パラメータなし -> 'post-thumbnail' (テーマが set_post_thumbnail_size() を使用して設定したように )
the_post_thumbnail();

the_post_thumbnail('thumbnail');       // サムネイル (デフォルト 150px x 150px :最大値)
the_post_thumbnail('medium');          // 中サイズ   (デフォルト 300px x 300px :最大値)
the_post_thumbnail('large');           // 大サイズ   (デフォルト 640px x 640px :最大値)
the_post_thumbnail('full');            // フルサイズ (アップロードした画像の元サイズ)

the_post_thumbnail( array(100,100) );  // 他のサイズ

投稿サムネイルのサイズ設定

現在のテーマの functions.phpファイルで使用されます。

画像サイズを比例してリサイズして、デフォルト投稿サムネイルサイズを設定する (画像を歪ずに):

set_post_thumbnail_size( 50, 50 ); // 横 50px x 縦 50px リサイズモード

画像を切り出して、デフォルト投稿サムネイルサイズを設定する (両サイドから、またはトップとボトムから):

set_post_thumbnail_size( 50, 50, true ); // 横 50px x 縦 50px 切り出しモード
set_post_thumbnail_size( 50, 50, array( 'top', 'left')  ); // 横 50px x 縦 50px 左上からの切り出し
set_post_thumbnail_size( 50, 50, array( 'center', 'center')  ); // 横 50px x 縦 50px 中央からの切り出し

新規投稿サムネイルサイズの追加

新しい投稿サムネイルサイズ 'category-thumb' の例です。 現在のテーマの functions.phpファイルで使用されます。

add_image_size( 'category-thumb', 300, 9999 ); // 横 300px (縦 制限なし)

テーマテンプレートファイルにおける新しい投稿サムネイルサイズの使用例です。

<?php the_post_thumbnail( 'category-thumb' ); ?>

functions.php の一例

if ( function_exists( 'add_theme_support' ) ) { 
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 150, 150, true ); // デフォルト投稿サムネイルサイズ (切り出しモード)

    // 追加の画像サイズ
    // 追加の画像サイズが必要なければ次の行を削除
    add_image_size( 'category-thumb', 300, 9999 ); // 横 300px (縦 制限なし)
}

投稿サムネイルにスタイルを付ける

投稿サムネイルにはクラス「wp-post-image」が付与されます。また表示される投稿サムネイルサイズに依存したクラスも付与されます。たとえば

the_post_thumbnail();
the_post_thumbnail('medium');
the_post_thumbnail( array(100,100) );
the_post_thumbnail( 'category-thumb' );		// 上の例を参照 

これらの行はそれぞれ次のような HTML を生成します。

<img src=... class="attachment-post-thumbnail wp-post-image" ...>
<img src=... class="attachment-medium wp-post-image" ...>
<img src=... class="attachment-100x100 wp-post-image" ...>
<img src=... class="attachment-category-thumb wp-post-image" ...>

以下の CSS セレクタを使用して出力をカスタマイズできます。

img.wp-post-image

img.attachment-post-thumbnail
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

また投稿サムネイルには、投稿サムネイルサイズに依存したクラスの代わりに、独自のクラスを付与できます。次の例は投稿サムネイルにクラス「alignleft」を付与します。

<?php the_post_thumbnail('medium', array('class' => 'alignleft')); ?>

次のような HTML が生成されます。

<img src=... class="alignleft wp-post-image" ...>

ソースファイル

外部資料

英語情報

日本語情報

関連

投稿サムネイル: has_post_thumbnail, the_post_thumbnail, get_post_thumbnail_id, get_the_post_thumbnail, add_image_size(), set_post_thumbnail_size()


テーマサポート: add_theme_support(), remove_theme_support(), current_theme_supports()
テーマ機能: サイドバー, ナビゲーションメニュー, 投稿フォーマット, 投稿サムネイル, カスタム背景, カスタムヘッダー, 自動フィードリンク, html5, コンテンツ幅, editor-style



最新英語版: WordPress Codex » Post Thumbnails最新版との差分