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

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

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

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

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

をご紹介します。

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

ケケンタ

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

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

＼Web制作を仕事にしたいなら／

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE

まずは無料相談してみる >>

￣￣￣

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス 

　Amazon Prime　

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る　
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法 

• Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
• 会員の自動更新を解除しておく＝期限が来たら自動解約
• １～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも３回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

Amazonで買い物をする　>>

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

以下の２つのソースコードを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記事一覧

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

SWELLを見てみる　>>