ポストサムネイルは日々人気が高まっています。多くの雑誌風テーマでは、特定の投稿に画像を関連付け、それをホームページまたは投稿ページに表示します。当サイトでは、投稿ページとカテゴリーページの両方で投稿にサムネイルを表示しています。以前のバージョンでは、この機能はカスタムフィールドメソッドを使用して実現されていましたが、これはあまりユーザーフレンドリーではありませんでした。WordPressコア開発者のおかげで、WordPress 2.9 の多くの注目すべき機能とともに、この機能もコアに追加されました。
Simply watch the video or read the tutorial below 
ビデオ
初心者ガイド
WordPressダッシュボードの「投稿の書き込み」パネルのサイドバーに、このようなオプションが表示されます。
リンクをクリックすると、画像アップロードページに移動します。写真をアップロードすると、次のようなものが表示されます:
「サムネイルとして使用する」と表示されているリンクをクリックするだけです。そうすると、次のような画面が表示されます。
上記の画面は、完了したことを意味します。公開をクリックするだけで、画像がサイトに表示されます。
開発者ガイド
この機能はコアに追加されていますが、すべてのユーザーが投稿作成パネルのサイドバーにこのオプションを表示できるわけではありません。これは、テーマがサポートしている場合にのみ有効にできる機能の1つです。古い無料テーマではサポートされていない可能性があるため、開発者に更新を依頼するか、このチュートリアルに従って自分で更新する必要があります。
まず、テーマフォルダ内の functions.php ファイルを開き、次のコードを貼り付ける必要があります。
add_theme_support( 'post-thumbnails' );
このコードは、投稿とページのテーマサポートを有効にします。これにより、ダッシュボードにオプションが表示されるようになります。ただし、まだテーマにコードを追加していないため、テーマには表示されません。
このコードを使用して、ループ内のどこにでもサムネイルを表示できます。
<?php the_post_thumbnail(); ?>
それは基本的な機能でしたが、投稿サムネイルのサイズを指定するなど、より高度なことをしたい場合は、functions.phpファイルを開いて次のようにコードを貼り付けるだけです。
add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 50, 50, true );
寸法は、幅x高さの順序で設定され、これらはピクセルです。
この行を追加することで、アイキャッチ画像に追加の画像サイズを設定することもできます。
add_image_size( 'single-post-thumbnail', 590, 180 ); // Permalink thumbnail size
後で投稿ループで特定のサムネイルサイズを次のように呼び出すことができます。
<?php the_post_thumbnail('single-post-thumbnail'); ?>
これは、この機能の完全な機能の分解版です。誰もが理解できるように、シンプルに保つようにしました。この機能に関する詳細については、以下をご覧ください。
Chrissy
Genesis Child Themes ではこれは必要ですか？彼らはすでに投稿にアイキャッチ画像があるようです。ありがとうございます
編集スタッフ
Genesisテーマでは、これは必要ありません。
管理者
Divya
こんにちは、
私のテーマには loop.php がありません。どこを編集すればよいですか？
事前に感謝いたします
編集スタッフ
ループは index.php、single.php、archive.php、その他のファイルに配置できます。
管理者
A. Suriel
ウィジェットを試したところ、正常に動作しました。ヒントをありがとうございます。
Kathleen Smitheram
それで、これを試したのですが、サイトを壊してしまったようです。今、このエラーが表示されます
Parse error: syntax error, unexpected ‘”‘ in /home/content/21/10729521/html/wp-content/themes/desk-mess-mirrored/functions.php on line 642
ダッシュボードに入ることができません。セルフホスティングは初めてで、これをどう修正すればいいのか全く分かりません。助けてください！
編集スタッフ
こちらの記事をお読みください：
https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
コードの貼り付けを正しく行わなかったと思われます。
管理者
Nik
素晴らしいチュートリアルです！
簡単な質問です:
「サムネイルとして使用」が表示されない場合は、テーマが古いテーマであるため、PHP内を確認する必要があるかもしれません。
新しいWordPressレイアウトのどこで、「サムネイルとして使用」がテーマに表示されているかを確認できますか？
「新しいWordPressレイアウト」という意味を説明するための画像です。
http://thereselawlor303.files.wordpress.com/2012/12/newpost5.jpg?w=1024&h=621
理解していただけると幸いです。
ありがとうございます！
編集スタッフ
サイトのタイトルの横にアイキャッチ画像が表示されている場合、そのテーマはサムネイルをサポートしています。
管理者
Nik
なるほど。ありがとうございます！
Drew
こんにちは、
この投稿、本当に助かりました！
質問ですが、実際の投稿内（ループ内ではなく）で、フィーチャー画像（別のサイズで）を表示するにはどうすればよいですか？
Thanks
編集スタッフ
画像の挿入ボタンを単純に使用できます。
管理者
Mimo
おっと、上記の例は失敗しました。
例：i mg src=”<?p hp the_p ost_thumbnail (); />
Mimo
コメントは無視してください。imgタグとアンカータグでラップしたくない理由がわかりました :D。
投稿ありがとうございます
カナダグース ジャケット
書き続けて、インスピレーションを与え続け、創造し続けてください。アイデアは気に入っていますし、ウェブサイトは比較的使いやすいです。この分野でトップ20ほどのウェブサイトしかレビューしないのではなく、もっと多くのウェブサイトをレビューしてほしいと思います。ウェブは広大な場所です。
カナダグース ジャケット
書き続けて、インスピレーションを与え続け、創造し続けてください。アイデアは気に入っていますし、ウェブサイトは比較的使いやすいです。この分野でトップ20ほどのウェブサイトしかレビューしないのではなく、もっと多くのウェブサイトをレビューしてほしいと思います。ウェブは広大な場所です。
mbtshoesmbts
この情報を投稿していただきありがとうございます。あなたのサイトをチェックしたところ、非常に興味深く有益な情報だと分かりました。たくさんの投稿を読むのが待ちきれません。
Speeltjezoeken
ありがとうございます。この記事のおかげで再び作業を再開できました。
lakkolmahendra
素晴らしい情報、本当にありがとうございます。ホームページにサムネイルを追加する簡単な方法ですね。今日私のサイトで試してみます。
LukeSwenson
WordPressバージョン3.2.1で作業しています。管理画面のモジュールが「投稿サムネイル」ではなく「アイキャッチ画像」と表示されていることに気づきました。
また、管理画面に画像を追加しようとすると、次のエラーが発生します。
Warning: Cannot modify header information – headers already sent by (output started at /——–/—-/——/——-/wp-content/themes/html5/functions.php:58) in /Applications/MAMP/htdocs/justine/wp-admin/async-upload.php on line 2648
SagivHaalush
@wpbeginner Hey
VERY(!) helpful post, However I got to the exact same problem after adding the 2 lines(at the bottom…). When I put them at the beginning, nothing happens…
Can you please be more specific as for the placement in the loop(Which/where)? Thanks
birdhammer
こんにちは。ビデオの指示に従って上記のコードを入力してみましたが、更新したときに解析エラーが発生しました。ダッシュボードにログインすることもできません。自分が馬鹿みたいに感じます！
Modularity LiteテーマでWordPressを使用しており、私のサイトはbirdhammer.comです。
手伝っていただけますか？
wpbeginner
functions.php ファイルにコードを配置したことがエラーの原因となっている可能性があります。テーマフレームワークを使用していますか？一番下に追加していますか？？
Casey Dennison
全く機能しません。PHPでエラーが出続けますが、正しく記述されています。何が問題なのか分かりません。WPダッシュボードの一番上に、関数のコードが表示され続けます???変ですね。
davede
@wpbeginner ああ、ありがとう、問題を解決しました。詳細はここにあります：（URLを貼り付けられないようです）。それはひどい。
wpbeginner
@davede さん、single.php ファイルにもサムネイルコードを追加する必要があります。
davede
素晴らしい内容です。ありがとうございます。
サムネイルが抜粋にのみ表示され、投稿ページには表示されないようにするのに苦労しています。
何かアイデアはありますか？
kevin.m.kwok
@wpbeginner 完璧に機能しました、本当にありがとうございます！
wpbeginner
@kevin.m.kwok はい、これはCSSの問題のようです。画像CSSクラスにfloat: leftプロパティが必要です。
kevin.m.kwok
こんにちは、素晴らしいチュートリアルです。すべて機能しますが、ホームページの投稿の左側にサムネイルが表示されません。サムネイルオプションで左を選択しても、常に投稿の上に表示されます。何かアイデアはありますか？
kevin.m.kwok
Hello,
Peter Wolff
WP Beginner様
上記のWPチュートリアルは編集スタッフによる素晴らしいものです！
WPサムネイルギャラリーページの写真について簡単な質問があります。カテゴリ.phpテンプレートに簡単なカスタムフィールドのPHPコードを追加しようとして、サムネイル画像の下に小さなテキストキャプションタイトルを追加しようとしています。非常にフラストレーションが溜まっています…とにかく、以下のカテゴリ.phpサムネイルループを添付しました。このループ内にカスタムフィールドのPHPコード（「thumb_tag」というフィールド）を記述するのを手伝ってもらえませんか。コードはこちらです。
ID, ‘main_image’, true); ?>
<a href="” ><img src="/resize.php?w=162&h=105&file=” alt=”” title=”” width=’162′ height=’105′ />
ありがとうございます！
ピート
編集スタッフ
なぜカスタムフィールドを使うのですか？WordPressにはデフォルトで組み込まれています。
https://www.wpbeginner.com/wp-tutorials/how-to-display-wordpress-post-thumbnails-with-captions/
管理者
Ankit
素晴らしいチュートリアルをありがとうございます。ホームページにサムネイルを追加する最もシンプルでユニークな方法です。私のサイトで機能しました。
shivam
WordPressは初めてで、プログラミングはあまり知りません。あなたの記事は気に入りました。しかし、このコードを正確にどの位置に配置すればよいか教えていただけますか？functions.phpのようなファイルの場合、どの場所にコードを追加する必要がありますか？デモはありますか？
編集スタッフ
テーマによってfunctionsファイル内のコードが異なります。このコードはphpタグ内に記述する必要があります。
管理者
ジェームズ
ありがとう、うまくいったと思います。しかし、サムネイルを追加すると、投稿にすでに画像があるにもかかわらず、自動的に投稿の先頭に追加されます。
mark
素晴らしいチュートリアルです。しかし、どこにもこの情報が見つからないのですが、投稿エディタ画面にサムネイルを追加して、ライターが公開前に投稿と並んでどのように見えるかを確認できるようにしたいのです。どこでそれができますか？よろしくお願いします。
編集スタッフ
アップロードするとサムネイルが表示されますが、管理画面でのライブプレビューはありません。著者はプレビューをクリックするだけで、新しいタブで投稿を確認できます <<
管理者
elizabeth
こんにちは
情報ありがとうございます。テーマの手順に従いましたが、画像ボックスに画像が表示されません…ホームページでは壊れたファイルのように見えます。クリックすると表示されます。どうすればホームページに表示できますか？ありがとうございます
編集スタッフ
the_post_thumbnail(); がホームページのループ内にあれば、正常に動作するはずです。
管理者
jam
ヘルプありがとうございます！プラグインは嫌いなので、テンプレート関数を使う方が好きです！
janine
素晴らしい投稿、特に add_theme_support( ‘post-thumbnails’ ); についてありがとうございます。変更中の wootheme でうまく機能しました。
saBEE
素晴らしい情報を提供していただきありがとうございます。
各投稿に写真があります。各投稿の写真をRSSフィードにサムネイルとして表示させたいのですが、上記のメソッドで可能でしょうか？
編集スタッフ
いいえ、この方法とこの方法を組み合わせて使用する必要があります。
https://www.wpbeginner.com/wp-tutorials/how-to-add-post-thumbnail-to-your-wordpress-rss-feeds/
管理者
sabee
迅速なご返信ありがとうございます。
使用しているテーマ、AutoFocus+ も Thematic テーマを必要とするため、少し混乱しています。どの functions.php ファイルを編集する必要がありますか？それとも両方編集する必要がありますか？
コードをどこに挿入するかも気になりますか？
バーナード
このチュートリアルで説明されている手順を実行しましたが、ギャラリーオプションから画像を選択しようとすると、なぜか次のエラーが発生します。
Fatal error: Call to undefined function: get_post_thumbnail_id() in /wp-admin/includes/media.php on line 1292
これを解決するのを手伝ってくれる人はいますか？
ありがとうございます
Bernard
darren
これは実際にアップロード時に画像をクロップしていますか？それとも、ページで呼び出す際に適切な高さと幅で表示するだけですか？ブログから非WPサイトにフィードをプルし、リンクバックしたいのですが、サムネイルを参照できるようにしたいので質問しています。ASPサイトなので、PHPのネイティブな画像操作の贅沢はありません。
編集スタッフ
画像をトリミングするのではなく、リサイズしています。
管理者
Zara
みんなありがとう、君たちは最高だ！
大好きだよ <3
ヘレン
こんにちは
テーマのfunctions.phpにこのコードがあります（テーマスキンに含まれていました）。テーマには「post thumbnail」機能を使用する画像スライダーがありますが、管理画面に表示されないため、スライダーが機能しません。
<?php
ヘルプ : ) ありがとう
編集スタッフ
Helen、
PHPコードが見えません。コメントに貼り付ける前にPHPコードをエンコードしていただけますか？または、お問い合わせフォームからメールでお送りいただくことも可能です。
管理者
Ami
うまくいきました!! 1つ質問があります。リンクを追加したり、リンクで囲んだりするにはどうすればよいですか？
そのため、誰かがリンクをクリックすると、元のサイズのライトボックスが開きます。
明確にするために。
現在、functions.phpには
add_image_size(‘my-custom-image’, 640,9999); これにより、投稿内の画像は幅640pxになり、これはたとえば1000px x 500pxの元の画像にリンクされます。
これは見つけました：http://polymathworkshop.com/shoptalk/2010/03/19/get-the_post_thumbnail-direct-path-for-wordpress/ ある程度機能しますが、サムネイルがライトボックスで開きます。
編集スタッフ
うまく機能させる唯一の方法は、サムネイルの元の添付ファイルにリンクすることです。
管理者
Eduardo Antunes
すごい！
覚えておくこと：
> functions.phpに追加
add_theme_support(‘post-thumbnails’);
set_post_thumbnail_size(70, 70, true);
> ループに追加:
php the_post_thumbnail();
Ricky@twitterアプリ
私は同じものを探していました。ちょっと質問があります。カテゴリのデフォルト画像をサムネイルとして表示する方法はありますか？それとも、投稿の最初の画像を取得して、関連記事のサムネイルとして使用する方法はありますか？
私はブログで上記の手法を実装しましたが、大きな問題は、すべての投稿にサムネイルが有効になっていないことです。これにより、すべての投稿にサムネイルを更新する必要があるため、状況が悪化しています。
上記の手法を使用して、最初の画像をデフォルトのサムネイルとして使用する方法はありますか？
編集スタッフ
はい、Justin Tadlock の Get Image Plugin を使用して、投稿の最初の画像を取得できます。is_post_thumbnail をチェックして、if then 変数を追加することもできます。
管理者
Jal
編集者、
WordPressの投稿エディタを使用していますか、それともオフラインのブログ公開ソフトウェアを使用していますか？私はLive Writerを使用していますが、いくつかのまともなオプションがありますが、時々Wpの投稿エディタへの切り替えを考えています。これについていくつか意見を共有してもらえますか？
ありがとうございます
Antonio
Wow thanks I’ve always wondered how to do this but never really had the patience to look for a solution. I didn’t know it was this simple. WOOOOT! Thanks.
Bob
サムネイルにライトボックスまたはシックボックス（例：rel=”lightbox”またはclass=”thickbox”）を追加するにはどうすればよいですか？
編集スタッフ
jQueryを使用し、サムネイルにクラスを追加する必要があります。クラスを追加するには、次のように追加します： array(‘class’ => ‘lightbox’)
管理者
Trisha
ページサムネイルにも機能するかどうか、何かアイデアはありますか？ このコードを使用して子ページをリストしようとしています。（2番目の「投稿フォーマット」のものです。すべての「content」のインスタンスを「excerpt」に置き換え、Andrew OzのExcerpt Editorを使用しました。これは本当に素晴らしいです。
サムネイルのコードを挿入しようとすると、表示されません。
何か間違っている可能性があると思いますか？
編集スタッフ
このコードはループ内でのみ機能します。ループの外に表示したい場合は、グローバルなwp_query関数を実行する必要があります。
管理者
noonoob
本当にありがとうございます、うまくいきました。完璧です
Jeremy
ループの外からサムネイルを取得するにはどうすればよいですか？
編集スタッフ
その説明は別の記事で近日中に公開します。ご提案ありがとうございます。もし本当に進めて作業したい場合は、query_post 関数を使用します。
管理者
チャド
ループの外で投稿画像を表示する投稿を楽しみにしています。WP 3.0を使用した動作例をまだ見つけられていません。
編集スタッフ
これは次と同じように機能します：
https://www.wpbeginner.com/wp-themes/how-to-display-custom-fields-outside-the-loop-in-wordpress/
ウォルト・リベイロ
それは、正確な例ではないチュートリアルのようなものです。それで、サムネイルの独自のハウツーを投稿しましたか？ぜひ知りたいです！
Cosmin
皆さん、これは正方形の画像でのみ機能しますか？
50px x 50px のようなものですか？
寸法を指定する際に高さの値しか取らないと誰かが言っていたのを耳にしました…
（したがって、50px x 30px は機能しません）
編集スタッフ
どのサイズでも機能します。比率が正しくない場合、画質が失われることがあります。クライアントのウェブサイトで動作させていますが、問題なく機能しています。
管理者
ルーク
私は初心者で、あなたのやっていることが大好きです。このようなことについては、非常に具体的な指示があると嬉しいです。functionsにコピー＆ペーストしても機能しません。
何か間違っている点について考えていますか？初心者向けの投稿はどうでしょうか？
ありがとうございます。素晴らしい仕事を続けてください。
編集スタッフ
WordPress 2.9を使用していますか？もしそうなら、機能しないということはありません。これはおそらくこのコードの最も優れた分解です。
できる限り明確にするよう努めていますが、一部のタスクを完了するには事前の知識が必要な場合があります。
スタッフの誰かに確認してもらい、これを実行してほしい場合は、少額の手数料で承ります。
管理者
Chris Peterson
素晴らしいヒントです！投稿のサムネイルのインストール手順をすべて明確に説明していただきました。
Cosmin
すごい！
みんなありがとう、ちょうど良いタイミングです。クライアントのためにWordPressテーマを作成しており、まさにこれが必要なのです！
Now it will be sooo easy for the less-tech-savvy person that’ll write posts
Nimit kashyap
それにはプラグインを使いたいと思います。
編集スタッフ
なぜですか？プラグインはサイトを遅くしますし、おそらくこれが最も簡単な方法です。
管理者
jeprie
とても良い記事ですね。WordPressでこのようなことができるとは知りませんでした。
プラグインは私たちのWordPressサイトをどれだけ遅くする可能性がありますか？それは重大ですか？
編集スタッフ
ウェブサイトのデータベースクエリが多いほど、読み込みは遅くなり、各プラグインがクエリを追加します。