SWELLの通常の投稿で、アイキャッチ画像をタイトルの下から上へ移す方法です。
画像を追加できた記事だけ元の画像を非表示にし、対象外の記事は元の表示を保ちます。
デザインを差別化するにあたって、逆の順序にしたいことはないでしょうか？
本記事ではSWELLでタイトル上にアイキャッチ画像を表示する方法を紹介します。
SWELLでタイトル上にアイキャッチ画像を表示する方法
やり方は簡単です。
SWELLにはフックというものが用意されているので、タイトル上に画像を追加してあげて、下のアイキャッチを非表示にしてあげるだけです。
適用する記事と設定
以下はSWELL 2.19.0向けの例です。
タイトルがコンテンツ内にあり、アイキャッチを表示する設定の通常の投稿を対象にします。
固定ページ、タイトルが上部エリアにある記事、画像非表示の記事、YouTubeや画像キャプションを設定した記事は元の表示を保ちます。
PHPをひとまとめに追加する
バックアップを取り、子テーマのfunctions.phpのPHP内、またはCode SnippetsのPHPスニペットへ次のコード全体を一度だけ追加します。
親テーマやカスタムHTMLブロックには貼りません。
旧版のmotoki_eyecatch_above_title・motoki_remove_swell_thumbnailと、それぞれのadd_action・add_filterは先に削除・無効化して置き換えてください。
$target_idsが空配列のままなら、条件に合う通常の投稿すべてが対象です。
特定の記事だけなら[ 123, 456 ]のように、自分の記事IDを整数で指定します。
追加した画像が実際に出力された投稿だけ、元のアイキャッチを非表示にします。
対象外の記事の画像や動画は消しません。
$waza_moved_eyecatches = [];
add_action( 'swell_before_post_head', function( $post_id ) use ( &$waza_moved_eyecatches ) {
// 空配列は通常の投稿すべて。限定する場合は [ 123, 456 ] のように指定。
$target_ids = [];
if ( ! is_singular( 'post' ) || (int) $post_id !== get_queried_object_id() ||
( $target_ids && ! in_array( (int) $post_id, $target_ids, true ) ) ) {
return;
}
if ( ! class_exists( 'SWELL_Theme' ) || SWELL_Theme::is_show_ttltop() ||
! SWELL_Theme::is_show_thumb( $post_id ) ||
get_post_meta( $post_id, 'swell_meta_youtube', true ) ||
get_post_meta( $post_id, 'swell_meta_thumb_caption', true ) ) {
return;
}
$image = get_the_post_thumbnail( $post_id, 'large', [ 'class' => 'my-eyecatch' ] );
if ( $image === '' ) {
return;
}
echo $image;
$waza_moved_eyecatches[ (int) $post_id ] = true;
} );
add_filter( 'swell_parts_post_thumbnail', function( $html, $post_id ) use ( &$waza_moved_eyecatches ) {
return ! empty( $waza_moved_eyecatches[ (int) $post_id ] ) ? '' : $html;
}, 10, 2 );WordPress標準の画像出力を利用するため、メディアの代替テキスト・画像寸法を引き継ぎます。
生成済みサイズに応じてsrcsetも付与されます。
画像未設定の場合は追加も非表示処理も行いません。
コード全体をコピーしたら、貼り付け先で先頭の$waza_moved_eyecatchesから末尾の10, 2 );まで入っているか確認します。
行番号やfunctions.phpという表示ラベルはコードに含めません。
ボタン操作でコードが選択されたままの場合はCtrl+C（MacではCommand+C）でもコピーできます。
2026年10月2日に、選択後のCtrl+Cで掲載PHP全文と同じ文字列を取得しました。
ボタンの表示だけをコピー成功の根拠にはしていません。
CSS
CSSは「追加CSS」または子テーマのstyle.cssへ追加します。
my-eyecatchというクラスが付いた画像の余白を調整する例です。
今回はアイキャッチ画像とタイトルの間隔も調整しました。
.my-eyecatch {
display: block;
max-width: 100%;
height: auto;
margin-bottom: 2em;
}確認
記事を確認してみましょう。
このページ自体にも掲載コードを適用しています。
対象IDをこの記事だけに限定し、画像がタイトル上に1枚表示され、元の位置には重複しないことをPCとスマートフォン幅で確認しました。
次の画像は2026年10月1日、画面幅390pxの実画面です。
反映確認と元に戻す方法
PCとスマートフォンで、画像がタイトル上に1枚だけ表示されるか、画像のない記事・対象外の記事に影響がないか確認します。
タイトルの表示位置を記事ごとに変更している場合は、その記事も確認してください。
反映されないときはサイトとブラウザーのキャッシュを削除します。
元に戻すときは、追加した画像出力と画像非表示の両方のPHP処理、および追加CSSを削除・無効化します。
画像出力だけを残すと、タイトル上と元の位置に画像が重複するため、2つの処理をまとめて外してください。
PHP編集後に画面が開けなくなった場合に備え、管理画面以外からファイルを戻せる手段を用意してください。
画像あり・画像なし・固定ページで比較する
| 開くページ | 確認する結果 |
|---|---|
| アイキャッチを設定した通常の投稿 | タイトル上に1枚表示され、タイトル下には重複しない |
| アイキャッチを設定していない通常の投稿 | 追加画像がなく、本文が通常どおり表示される |
| 固定ページ | この例の対象外で、my-eyecatchを追加しない |
同じ画像を設定した記事だけを見ると、対象条件の間違いに気付きにくくなります。
検証環境の実HTTP出力では、画像ありの投稿にmy-eyecatchが1枚あり、元のc-postThumbは0枚でした。
画像なしの投稿と固定ページにはmy-eyecatchを追加しませんでした。
自身のサイトでも表の3ページを順に開き、対象記事だけ変更されることを確認します。
この記事だけに適用しているWAZAの設定と、空の$target_idsで通常の投稿全体を対象にするコード例は、適用範囲が異なります。
記事IDを指定した場合と画像サイズを確認する
一部の記事だけに適用する場合は、PHP内の$target_ids = [];を、たとえば$target_ids = [123];へ変更します。
123は、適用したい通常の投稿の実際のIDへ置き換えてください。
このPHPはis_singular(‘post’)で対象を限定するため、固定ページやカスタム投稿タイプのIDを指定しても移動しません。
複数の記事はカンマで区切って指定します。
確認には、画像のある対象記事と、画像のある対象外記事を1つずつ使います。
対象記事はタイトル上に画像が1つ、本文側の元の画像枠は0になることを確認します。
対象外記事は元の画像枠が1つ残り、タイトル上には追加されないことを確認してください。
隔離環境ではこの対象・対象外の2条件を実HTTP画面で確認しました。
掲載画像には、対象記事のタイトル上へ移動したアイキャッチが写っています。
画像のファイル名に-1024x768などが付くのは、WordPressが生成した画像サイズを使っているためです。
今回の元画像は1200×900pxで、300×225、1024×768、150×150、768×576pxの派生画像が生成されました。
実画像には幅・高さ・代替テキストとsrcsetが出力され、読み込みも確認できています。
画質や大きさが意図と異なる場合は、元画像の寸法とメディアの登録情報を確認します。
記事IDの限定を解除する場合は配列を空に戻し、移動自体をやめる場合は今回のPHPとCSSを外してください。
この隔離環境の検証では、スマホ幅での画像選択とWP Rocket統合は未確認です。
Pjaxで画像あり・画像なしの記事を往復する
| 操作 | 確認する結果 |
|---|---|
| 固定ページから画像あり記事へ | タイトル上に読み込み済み画像が1枚 |
| 画像なし記事へ | 移動前の画像が残らない |
| 履歴で画像あり記事へ戻る | 元の画像が1枚に戻り、重複しない |
通常読み込みの確認に加えて、SWELLのPjaxを使っている場合は画像あり記事と画像なし記事をリンクで往復します。
URLの変化だけで判断せず、記事名と本文が移動先へ切り替わってから画像の枚数を数えてください。
2026年10月3日のWordPress 7.1.2 / SWELL 2.19.0では、同じ画面の実Pjaxで画像あり・なしを切り替え、履歴で戻っても元のアイキャッチが1枚だけ表示されました。
画像の移動はPHPが作る本文に含まれ、掲載例へPjax専用のJavaScriptを追加する必要はありませんでした。
これは今回の構成での結果で、スマホでのsrcset選択やWP RocketがHTMLを書き換える構成は別途確認してください。
画像が残るときは、このPHPを複数箇所へ追加していないか、元のアイキャッチを非表示にするフィルターが一緒に登録されているかを確認します。
タイトル位置と画像設定を切り替えた出力
| 条件 | 実テンプレートでの画像出力 |
|---|---|
| 投稿・コンテンツ内タイトル・画像あり | my-eyecatchが見出し前に1回。元の画像枠は出ない |
| 投稿・コンテンツ上タイトル | 移動しない。本文側の元の画像枠が1回出る |
| 投稿・アイキャッチ非表示 | 移動画像も元の画像枠も出ない |
| 投稿・アイキャッチ未設定 | 移動画像も元の画像枠も出ない |
| 固定ページ・アイキャッチあり | 投稿用の移動処理は動かず、元の画像枠を保つ |
隔離したWordPress 7.1.2／SWELL 2.19.0でsingle.phpとpage.phpを実行し、画像要素の回数と見出しとの順序を照合しました。
タイトルを上部へ出す設定では、このコードで画像を上部タイトルの前へ移すことはありません。
タイトル位置も条件に含めて適用する記事を決めてください。
この表はPHPから生成されたHTMLの照合です。
ブラウザーでの画像解像度・srcset選択、スマホの余白、新しい説明の画面確認、全キャッシュ条件を確認した結果ではありません。
既存のPjax検証とは範囲を分けています。
画像が出ないときは登録情報を確認する
この例は、登録済みのアイキャッチをWordPressの画像関数で出力します。
移動してもアイキャッチの登録先や画像メタデータは書き換えず、メディアに保存した代替テキストと画像の幅・高さを引き継ぎます。
代替テキストを直す場合は、メディアの登録情報を編集してください。
アイキャッチIDが保存されていても、メディアの登録が削除されるなどして画像HTMLが空になる場合があります。
この場合はタイトル上へ出力せず、元のアイキャッチ表示を非表示にする処理も行いません。
ここで判定しているのは、画像のHTMLが空かどうかです。
get_the_post_thumbnail()の戻り値は画像タグの文字列なので、ブラウザーで画像ファイルの読み込みが完了したことまでは確認しません。
画像タグを生成できても、画像URLが404になったり通信に失敗したりすると、元の画像を非表示にしたまま移動先の画像も表示できない場合があります。
この場合はアイキャッチの登録情報に加え、公開ページで画像ファイル自体を読み込めるか確認してください。
投稿のアイキャッチ設定で画像を選び直し、タイトル上に出力された後に元の画像枠が消えることを確認してください。
隔離環境で、代替テキストと寸法の出力、登録情報を変えないこと、存在しない画像IDで元の表示を抑止しないこと、カスタム投稿タイプへ適用しないことをPHPで確認しました。
ブラウザーがスマホ幅で選ぶ画像ファイルは、実画面での確認が必要です。
まとめ
昨今、WordPressテーマはSWELLだらけなのですが、せっかくの自分のサイト、見た目の差別化をするなら
よく目にする箇所の要素を大きく変えてあげると効果的です。
気になった方はぜひ試してみてください。
フックの使い方はSWELLのフック一覧と使い方でも説明しています。
よくある質問：SWELLでタイトル上にアイキャッチ画像を表示するとき
この方法では、何がどう変わりますか？
記事では、SWELLの通常の投稿で、アイキャッチ画像をタイトルの下から上へ移します。フックで、タイトル上に画像を追加し、下のアイキャッチを非表示にします。画像を追加できた記事だけ元の画像を非表示にし、対象外の記事は元の表示を保ちます。
どの記事が対象ですか？
記事では、SWELL 2.19.0向けの例で、タイトルがコンテンツ内にあり、アイキャッチを表示する設定の通常の投稿を対象にします。固定ページ、タイトルが上部エリアにある記事、画像非表示の記事、YouTubeや画像キャプションを設定した記事は、元の表示を保ちます。
特定の記事だけに適用できますか？
できます。記事では、$target_idsが空配列のままなら、条件に合う通常の投稿すべてが対象で、特定の記事だけなら、記事IDを配列に指定します。記事IDの限定を解除する場合は、配列を空に戻します。
コードは、どこに追加しますか？
記事では、バックアップを取り、子テーマのfunctions.phpのPHP内、またはCode SnippetsのPHPスニペットへ、コード全体を一度だけ追加します。親テーマやカスタムHTMLブロックには貼りません。旧版のコードとadd_action・add_filterは、先に削除・無効化して置き換えます。
元に戻すときは、一部だけ外してもよいですか？
外さないでください。記事では、追加した画像出力と画像非表示の両方のPHP処理、および追加CSSを削除・無効化します。画像出力だけを残すと、タイトル上と元の位置に画像が重複するため、2つの処理をまとめて外します。
画像が出ないときは、何を確認しますか？
記事では、アイキャッチの登録情報を確認します。アイキャッチIDが保存されていても、メディアの登録が削除されるなどして画像HTMLが空になる場合があり、この場合はタイトル上へ出力せず、元のアイキャッチも非表示にしません。画像タグを生成できても、画像URLが404になるなどの場合は、元の画像を非表示にしたまま移動先の画像も表示できない場合があるため、公開ページで画像ファイル自体を読み込めるか確認します。
画像が重複して表示されるときは？
記事では、このPHPを複数箇所へ追加していないか、元のアイキャッチを非表示にするフィルターが一緒に登録されているかを確認します。
どこまで検証されていますか？
記事では、隔離環境（WordPress 7.1.2・SWELL 2.19.0）で、PCとスマートフォン幅での表示、Pjaxで画像あり・なしの記事を往復した場合の表示などを確認しています。一方、スマホ幅での画像選択（srcset）、WP Rocketとの統合は未確認です。タイトルを上部へ出す設定では、このコードで画像を上部タイトルの前へ移すことはありません。
