SWELLでは投稿ページのタイトルとアイキャッチ画像の並び順がデフォルトで決まっています。（タイトル→アイキャッチの順番）

しかし、SWELLはWordPressテーマ使用数No.1を誇っているだけあり、「デザインの差別化」を図りたいと考える方もいらっしゃるかと思います。

今回はそのような方に向けて

SWELLでタイトルとアイキャッチ画像の表示を
上下逆にする方法

をご紹介します。

今回ご紹介する表示のイメージ

ケケンタ

functions.phpにソースコードを追加するだけで誰でも簡単にできるので、ご興味のある方はぜひお試しください！

上述の通り、この記事でご紹介する方法ではfunctions.phpを編集します。
作業をする際には必ずバックアップをお取りいただき、自己責任のもとで作業を行ってください。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

【ソースコード】タイトルとアイキャッチ画像の表示を上下逆にする

以下の２つのソースコードをfunctions.phpの最後に追加します。

タイトルの上にアイキャッチ画像を表示するための処理

/**
 * タイトルの上にアイキャッチ画像を表示する処理
 */
function my_eyecatch_on_title() {		
	// アイキャッチ画像のURL
	$thumb_url = get_the_post_thumbnail_url(get_the_ID(), 'full');

	// アイキャッチ画像が存在するなら出力
	if ($thumb_url) {
		echo '<img src="' . esc_url($thumb_url) . '" alt="' . esc_attr(get_the_title()) . '" class="my-eyecatch">';
	}
}
add_action('swell_before_post_head', 'my_eyecatch_on_title');

元々タイトルの下に表示されていたアイキャッチ画像を非表示にする処理

/**
 * 元々のアイキャッチ画像は非表示にする
 * ※これを行わないとアイキャッチ画像がダブって表示されてしまう
 */
function my_remove_swell_thumbnail($return) {
	return '';
}
add_filter('swell_parts_post_thumbnail', 'my_remove_swell_thumbnail');

ケケンタ

以上のソースコードをfunctions.phpの最後に追加することでタイトルとアイキャッチ画像の表示順序を上下逆にすることが可能です。

子テーマのfunctoins.phpにソースコードを追加する手順はこちら
※このページ内で移動します。

タイトルの上に表示したアイキャッチ画像の下の余白を調整する

ただし、素の状態だとアイキャッチ画像とタイトルの間の余白が狭いため、CSSで少し調整します。

以下のソースコードを「外観」→「カスタマイズ」→「追加CSS」の最後に追加します。

.my-eyecatch {
    margin-bottom: 2em !important;
}

.my-eyecatchは前章でご紹介した「アイキャッチを表示する処理のimgタグに与えているCSSクラス」です。
これにCSSプロパティを当てることでアイキャッチ画像とタイトルの間の余白を調整しています。

「追加CSS」に追加する

CSS追加したら右上の「公開」ボタンを忘れずにクリックしましょう。

SWELLの子テーマのfunctions.phpにソースコードを追加する方法

まずは管理画面の「外観」→「テーマファイルエディタ」をクリックします。

すると以下のような画面が表示されるので、右側にある「Theme Functions（functions.php）」をクリックします。

このとき、念のため右上の「編集するテーマを選択」が「SWELL CHILD」になっていることをご確認下さい。
※もしなっていなければ、「SWELL CHILD」を選び、「選択」ボタンをクリックして下さい。

続いて、エディタの末尾にソースコードを追加します。

ケケンタ

ソースコードを追加したら、最後に画面左下の「ファイルを更新」をクリックして完了です。

まとめ

以上が「SWELLでタイトルとアイキャッチ画像の表示を上下逆にする方法」でした。

SWELLは利用者数が多い分、デザイン面で他の方と被りが発生しがちという側面も持ち合わせています。

（それでもカスタマイズ性が非常に高いためオリジナリティを出すことは十分可能です）

今回の方法を用いることで、各投稿記事のデザインで差別化が図れます。

ケケンタ

有料テーマのSWELLはカスタマイズ性が非常に高く、操作も簡単です！

それだけに、こうしたソースコードを利用したカスタマイズが他の方との違いを生み出しやすくなります。

このブログではWordPressやPHP、Web制作に関するお役立ち情報を発信していますので、ご興味のある方はぜひ他の記事もご覧いただけると嬉しいです。

それでは最後までご覧いただきありがとうございました！

SWELLのその他の記事はこちら

 SWELL記事一覧

今回ご紹介した内容のテーマ 

＼　19,800円・買い切り　／

今すぐSWELLを購入する　>>

ケケンタ

ときどきアイキャッチの上に広告を表示させているブログがあるけど、あれってSWELLではどうやるんだろう……？

今回はこのようなお悩みをお持ちの方に

SWELLでアイキャッチ画像の上に広告を表示する方法

をご紹介します。

この記事でご紹介する方法ではfunctions.phpを編集します。
作業をする際には必ずバックアップをお取りいただき、自己責任のもとで作業を行ってください。

記事タイトルの上に広告を表示したい場合は以下の記事をご覧ください。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

【ソースコード】アイキャッチ画像の上に広告を表示する

アイキャッチ画像の上に広告を表示するときのソースコードには大きく２パターンあります。

• 広告のソースコードをそのまま載せる
• 広告タグに登録した広告をショートコードで呼び出す

ケケンタ

順番にソースコードをご紹介します。

① 広告のソースコードをそのまま載せる

add_action( 'swell_before_post_thumb', function( $post_id ) {
?>
  <div class="widget widget_swell_ad_widget">
      <!-- 広告のコードをここに貼り付ける -->
  </div>
<?php
});

実際の使用例

add_action( 'swell_before_post_thumb', function( $post_id ) {
?>
  <div class="widget widget_swell_ad_widget">
     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-●●●●●●●●●●●●●●●"
     crossorigin="anonymous"></script>
　　 <ins class="adsbygoogle"
       style="display:block; text-align:center;"
       data-ad-layout="in-article"
       data-ad-format="fluid"
       data-ad-client="●●●●●●●●●●●●●"
       data-ad-slot="●●●●●●●●●●●●●●●●●●●●">
     </ins>
     <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  </div>
<?php
});

② 広告タグに登録した広告をショートコードで呼び出す

add_action( 'swell_before_post_thumb', function( $post_id ) {
  echo do_shortcode('広告タグのショートコード');
});

実際の使用例

add_action( 'swell_before_post_thumb', function( $post_id ) {
  echo do_shortcode('※ IDを指定してください。');
});

ちなみに「広告タグ」は管理画面サイドメニューの以下の部分から登録可能です。

ケケンタ

以上の手順により、アイキャッチ画像の上に広告を表示させることが可能です。

SWELLの子テーマのfunctions.phpにソースコードを追加する方法

まずは管理画面の「外観」→「テーマファイルエディタ」をクリックします。

すると以下のような画面が表示されるので、右側にある「Theme Functions（functions.php）」をクリックします。

このとき、念のため右上の「編集するテーマを選択」が「SWELL CHILD」になっていることをご確認下さい。
※もしなっていなければ、「SWELL CHILD」を選び、「選択」ボタンをクリックして下さい。

続いて、エディタの末尾にソースコードを追加します。

ケケンタ

ソースコードを追加したら、最後に画面左下の「ファイルを更新」をクリックして完了です。

まとめ

以上がSWELLでアイキャッチ画像の上に広告を表示させる方法でした。

この記事がお役に立ったなら何よりです。

ケケンタ

最後までご覧いただきありがとうございました！

SWELLのその他の記事はこちら

 SWELL記事一覧

今回ご紹介した内容のテーマ 

＼　19,800円・買い切り　／

今すぐSWELLを購入する　>>

ケケンタ

SWELLでサイト制作をしてるけど、特定の投稿タイプではアイキャッチ画像を表示しないようにしたいんだよな……

ケケンタ

アイキャッチ画像の設定は使いつつ、記事上では非表示にする方法って無いのかな……

今回はこのようなお悩みをお持ちの方に

SWELLで特定の投稿タイプでのみアイキャッチ画像を非表示にする方法

をご紹介します。

この記事でご紹介する方法ではfunctions.phpを編集します。
作業の際は必ずバックアップをお取りいただき、自己責任のもとで作業を行ってください。

※SWELLでfunctions.phpを編集する方法がご不明な方はこちらをご覧ください（本ページ内の説明箇所に移動します）。また、以下の記事でも詳しく解説しています。

あわせて読みたい

【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点 WordPressで機能カスタマイズをする際は、必ずと言っていいほどfunctions.phpを編集することになります。 しかし、functions.phpを編集したことで何らかのエラーが発生…

特定のカスタム投稿タイプでアイキャッチ画像を非表示にする

まずは「特定のカスタム投稿タイプでアイキャッチ画像を非表示にする方法」ですが、以下のソースコードをfunctions.phpに追加します。

functions.phpに追加するソースコード

add_filter( 'swell_parts_post_thumbnail', function( $html, $post_id, $is_youtube ) {
    
    // 特定のカスタム投稿タイプのアイキャッチ画像を非表示にする
    if ( get_post_type( $post_id ) === 'カスタム投稿タイプのスラッグ' ) {
        return '';
    }

    // それ以外の場合は通常通りアイキャッチ画像を表示
    return $html;
}, 10, 3 );

４行目の「カスタム投稿タイプのスラッグ」には文字通りカスタム投稿タイプのスラッグを記述します。

実際の使用例

add_filter( 'swell_parts_post_thumbnail', function( $html, $post_id, $is_youtube ) {
    
    // 投稿タイプ「sample_post_type」の場合、アイキャッチ画像を非表示にする
    if ( get_post_type( $post_id ) === 'sample_post_type' ) {
        return '';
    }

    // それ以外の場合は通常通りアイキャッチ画像を表示
    return $html;
}, 10, 3 );

ケケンタ

たったこれだけの記述で「特定のカスタム投稿タイプ」でアイキャッチ画像を非表示にすることが可能です。

SWELLでfunctions.phpを編集する方法はこちら（本ページ内の説明箇所に移動します）

投稿ページや固定ページでアイキャッチ画像を非表示にする

WordPressには様々な「ページ判定ができるテンプレートタグ」が用意されており、その中には

• 投稿ページ
• 固定ページ

を判定できるものもあります。

それらを利用することで、先ほどと同様にアイキャッチ画像を好きなページで非表示にすることが可能です。

具体例（投稿ページでアイキャッチ画像を非表示）

add_filter( 'swell_parts_post_thumbnail', function( $html, $post_id, $is_youtube ) {
    
    // 投稿ページの場合、アイキャッチ画像を非表示にする
    if ( is_single() ) {
        return '';
    }

    // それ以外の場合は通常通りアイキャッチ画像を表示
    return $html;
}, 10, 3 );

具体例（固定ページでアイキャッチ画像を非表示）

add_filter( 'swell_parts_post_thumbnail', function( $html, $post_id, $is_youtube ) {
    
    // 固定ページの場合、アイキャッチ画像を非表示にする
    if ( is_page() ) {
        return '';
    }

    // それ以外の場合は通常通りアイキャッチ画像を表示
    return $html;
}, 10, 3 );

個別ページを指定したい場合（カスタム投稿タイプかどうかに関係なく）

また、もしも「個別ページを指定したい」という場合には以下のソースコードで同様にアイキャッチ画像の出力を制御することが可能です。

add_filter( 'swell_parts_post_thumbnail', function( $html, $post_id, $is_youtube ) {
    
    // 特定のページのアイキャッチ画像を非表示にする
	global $post;
  	$slug = $post->post_name;
    if ( $slug === 'アイキャッチ画像を非表示にしたいページのスラッグ' ) {
        return '';
    }

    // それ以外の場合は通常通りアイキャッチ画像を表示
    return $html;
}, 10, 3 );

４行目の「カスタム投稿タイプのスラッグ」にはアイキャッチ画像を非表示にしたいページのスラッグを記述します。

実際の使用例

add_filter( 'swell_parts_post_thumbnail', function( $html, $post_id, $is_youtube ) {
    
    // スラッグが「sample_post」のページのアイキャッチ画像を非表示にする
	global $post;
  	$slug = $post->post_name;
    if ( $slug === 'sample_post' ) {
        return '';
    }

    // それ以外の場合は通常通りアイキャッチ画像を表示
    return $html;
}, 10, 3 );

SWELLの子テーマのfunctions.phpにソースコードを追加する方法

まずは管理画面の「外観」→「テーマファイルエディタ」をクリックします。

すると以下のような画面が表示されるので、右側にある「Theme Functions（functions.php）」をクリックします。

このとき、念のため右上の「編集するテーマを選択」が「SWELL CHILD」になっていることをご確認下さい。
※もしなっていなければ、「SWELL CHILD」を選び、「選択」ボタンをクリックして下さい。

続いて、エディタの末尾にソースコードを追加します。

ケケンタ

ソースコードを追加したら、最後に画面左下の「ファイルを更新」をクリックして完了です。

SWELLには様々なフィルター・アクションフックが用意されている

ケケンタ

以上が特定の投稿タイプや特定のページでのみアイキャッチ画像を非表示にする方法でした！

実はSWELLには独自のフィルターフックやアクションフックが用意されています。

元々カスタマイズ性に優れているSWELLですが、こうしたフックを利用することでさらにできることの幅が広がります。

この記事をご覧になった方も、もしご興味があればご自身でSWELLの各フックについて調べてみるのもおもしろいかもしれません。

ケケンタ

この記事がお役に立ったなら何よりです！
最後までご覧いただきありがとうございました！

SWELLのその他の記事はこちら

 SWELL記事一覧

今回ご紹介した内容のテーマ 

＼　19,800円・買い切り　／

今すぐSWELLを購入する　>>