単一の投稿に注目の画像を追加する

公開: 2013-10-10

アーカイブの注目画像（投稿サムネイル）は、[投稿の編集]画面でどのように追加したかに関係なく、注目画像から取得されます。

単一の投稿エントリのタイトルの前後に表示される画像は、削除しない限り、投稿に挿入した最初の画像から取得されます。

このページのコードスニペットの1つを使用して、単一の投稿エントリのタイトルの前後に画像を表示するコードを削除または変更できます。

注目の画像として画像を追加すると、単一の投稿のタイトルの後に注目の画像としてではなく、投稿のサムネイルとしてアーカイブに表示されます。

注目の画像を追加しない場合、投稿の最初の画像は、単一の投稿エントリのタイトルの前後とアーカイブページに表示されます。

この投稿では、子テーマのfunctions.phpファイルの最後に簡単に貼り付けることができる数行のPHPコードを提供します。

このコードを使用すると、単一の投稿のタイトルの前後に投稿画像を表示できます。

シングルタイトルの前に画像を投稿する

ダンは最近この質問をしました：

このフォーラムで見つかったさまざまなコードを使用して、頭を悩ませて検索し、新しい投稿を作成することになりました。
ミニマムプロを使用して、投稿の注目画像を「単一の投稿」ページに表示したいと思います。できればテキストコンテンツの上。このフォーラムでコードを見つけて、functions.phpに入れました。注目の画像が表示されますが、同時にテキストコンテンツが消去されます。だから明らかに私は何か間違ったことをしている。

注：フックが変更されたため、HTML 5ではなく古いXHTMLマークアップを実行している場合は、この投稿の最後のPHPコードスニペットを使用してください。

タイトルの後に注目の画像を表示する

このコードは、単一の投稿タイトルの後に画像を表示します。

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

タイトルの前に注目の画像を表示する

このコードは、単一の投稿タイトルの前に画像を表示します。

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

静的ページに注目の画像を表示する

これを静的な単一ページでも機能させたい場合は、次のようにコードにページを追加するだけです。

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'page' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

静的ページと単一の投稿に注目の画像を表示する

これを静的ページや投稿でも機能させたい場合は、次のようにコードにページを追加するだけです。

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular() ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

注目の画像が表示する位置は、ポジショニングの優先度の3番目のパラメーターを使用して決定できます。

上記のコードでは、3番目のパラメーターを5から15に変更するだけです。

画像サイズの変更

メディア設定に応じて大きいサイズを使用する例を次に示します。

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => 'large', 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

[設定]>[メディア]で構成されている他のデフォルトサイズを使用することもできます。

サムネイル
中くらい
大きい
満杯

関数ファイルに追加したカスタムサイズを使用することもできます。

例：

ポートフォリオ

add_image_size( 'portfolio', 540, 340, TRUE );

古いXHTMLループフックの使用

まだXHTMLを実行していて、まだHTML 5に変換していない場合は、古いループフックを使用する必要があります。

 add_action( 'genesis_before_post_title', 'single_post_featured_image' ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

タイトルと画像の間にスペースを追加する

これは、メディアクエリのコードの前に子テーマstyle.cssファイルの最後に追加できるCSSコードのサンプルです。これにより、注目の画像と単一の投稿のエントリタイトルの間にマージンが追加されます。

 .single .post-image { margin-bottom: 30px; }

このサンプルをページに使用します。

 .page .post-image { margin-bottom: 30px; }

注目の画像（ポスト画像）を右揃え

投稿画像を右揃えにすることもできます。

子テーマのstyle.cssファイルの終わり近くにあるメディアクエリの前に、このCSSコードを追加するだけです。

 .single .post-image { float:right; margin:0 0 1em 1em; width: 285px; height: 285px; }

上記のコードは、すべての単一の投稿で注目の画像として追加した画像をコンテンツの右側に配置し、テキストが次のように折り返されるようにします。

投稿画像

CSSを使用する代わりに、alignrightクラスをPHPコードに追加することもできます。

 'class' => 'alignright'

PHPコードのpost-imageをalignrightに置き換えるだけで、テキストがコンテンツの右側の画像に折り返されます。

注目の画像（ポスト画像）を左揃え

単一の投稿の注目画像を左に揃えることもできます。

 .single .post-image { float:left; margin: 1em 1em 0 0; width: 200px; height: 200px; }

結果は次のとおりです。

左に浮く

CSSを使用する代わりに、alignleftクラスをPHPコードに追加することもできます。

 'class' => 'alignleft'

PHPコードのpost-imageをalignleftに置き換えるだけで、テキストがコンテンツの左側の画像に折り返されます。

注：このCSSコードは、Genesis 2.0 HTML 5の子テーマに適用され、投稿画像/注目画像に異なるクラスを使用する他のテーマでは機能しない場合があります。

注目の画像からhrefリンクを削除する

メンバーがコードからリンクを削除する方法を私に尋ねたので、ここにあります：

コードのこの部分を置き換えるだけです。

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );

これとともに：

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); echo $img;

単一の投稿とアーカイブページにさまざまな注目の画像を使用する2つの方法
単一の投稿の注目の画像に対するエントリのタイトル
個々の投稿またはページで注目の画像を追加または削除するには、チェックボックスをオンにします
注目の画像をカスタムURLにリンクする
単一の投稿での注目の画像の表示をカスタマイズする
任意のテーマのコンテンツの前に注目の画像を追加する
カテゴリごとにフォールバックの注目画像を設定する