• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(デフォルトの用例)
(サムネイルサイズ)
77行目: 77行目:
 
=== サムネイルサイズ <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()]]:
+
The default image sizes of WordPress are "thumbnail" (and its "thumb" alias), "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. If your theme enables Post Thumbnails then "post-thumbnail" is also available and this is the default when using Post Thumbnails. This is how you use these default sizes with [[テンプレートタグ/the_post_thumbnail | the_post_thumbnail()]]:
  
  the_post_thumbnail();                  // without parameter -> Thumbnail
+
  // without parameter -> Post Thumbnail (as set by theme using set_post_thumbnail_size())
 +
the_post_thumbnail();
 
   
 
   
 
  the_post_thumbnail('thumbnail');      // Thumbnail (default 150px x 150px max)
 
  the_post_thumbnail('thumbnail');      // Thumbnail (default 150px x 150px max)
 
  the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)
 
  the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)
 
  the_post_thumbnail('large');          // Large resolution (default 640px x 640px max)
 
  the_post_thumbnail('large');          // Large resolution (default 640px x 640px max)
 +
the_post_thumbnail('full');            // Original image resolution (unmodified)
 
   
 
   
 
  the_post_thumbnail( array(100,100) );  // Other resolutions
 
  the_post_thumbnail( array(100,100) );  // Other resolutions

2015年7月20日 (月) 07:43時点における版

このページ「投稿サムネイル」は未翻訳です。和訳や日本語情報を加筆してくださる協力者を求めています

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

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

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

add_theme_support( 'post-thumbnails' ); 

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

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

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

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

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

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

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

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

関数リファレンス

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

用例

デフォルトの用例

// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
	the_post_thumbnail();
} 
the_content();

注: To return the Post Thumbnail for use in your PHP code instead of displaying it, use: get_the_post_thumbnail()

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

To link the Post Thumbnail to the Post permalink or a larger image see the examples in the_post_thumbnail()

サムネイルサイズ

The default image sizes of WordPress are "thumbnail" (and its "thumb" alias), "medium", "large" and "full" (the image you uploaded). These image sizes can be configured in the WordPress Administration Media panel under Settings > Media. If your theme enables Post Thumbnails then "post-thumbnail" is also available and this is the default when using Post Thumbnails. This is how you use these default sizes with the_post_thumbnail():

// without parameter -> Post Thumbnail (as set by theme using set_post_thumbnail_size())
the_post_thumbnail();

the_post_thumbnail('thumbnail');       // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)
the_post_thumbnail('large');           // Large resolution (default 640px x 640px max)
the_post_thumbnail('full');            // Original image resolution (unmodified)

the_post_thumbnail( array(100,100) );  // Other resolutions

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

To be used in the current Theme's functions.php file.

Set the default Post Thumbnail size by resizing the image proportionally (that is, without distorting it):

set_post_thumbnail_size( 50, 50 ); // 50 pixels wide by 50 pixels tall, resize mode

Set the default Post Thumbnail size by cropping the image (either from the sides, or from the top and bottom):

set_post_thumbnail_size( 50, 50, true ); // 50 pixels wide by 50 pixels tall, crop mode

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

Example of a new Post Thumbnail size named "category-thumb".

To be used in the current Theme's functions.php file.

add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)

Here is an example of how to use this new Post Thumbnail size in theme template files.

<?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 ); // default Post Thumbnail dimensions (cropped)

// 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)
}

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

Post Thumbnails are given a class "wp-post-image". They also get a class depending on the size of the thumbnail being displayed You can style the output with these CSS selectors:

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

You can also give Post Thumbnails their own class.
Display the Post Thumbnail with a class "alignleft":

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

ソースファイル

外部資料

英語情報

日本語情報

関連

投稿サムネイル: 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最新版との差分