SWELLではタイトルの下にアイキャッチ画像が表示されます。
デザインを差別化するにあたって、逆の順序にしたいことはないでしょうか？
本記事ではSWELLでタイトル上にアイキャッチ画像を表示する方法を紹介します。
目次
SWELLでタイトル上にアイキャッチ画像を表示する方法
やり方は簡単です。
SWELLにはフックというものが用意されているので、タイトル上に画像を追加してあげて、下のアイキャッチをを非表示にしてあげるだけです。
functions.php
まずは管理画面 ＞ テーマエディタ ＞functions.phpに下記のコードを挿入します。
function motoki_eyecatch_above_title() {
// アイキャッチ画像のURLを取得
$thumbnail_url = get_the_post_thumbnail_url(get_the_ID(), 'full');
// アイキャッチ画像が存在する場合、画像を出力
if ($thumbnail_url) {
echo '<img src="' . esc_url($thumbnail_url) . '" alt="' . esc_attr(get_the_title()) . '" class="my-eyecatch">';
}
}
add_action('swell_before_post_head', 'motoki_eyecatch_above_title');この状態だと、タイトルの上下にアイキャッチ画像が表示されてしまうので、アイキャッチ画像を非表示にしてあげましょう。
function motoki_remove_swell_thumbnail($return) {
return ''; // $returnを空にする
}
add_filter('swell_parts_post_thumbnail', 'motoki_remove_swell_thumbnail');上記でタイトル上にアイキャッチ画像を表示するカスタマイズが完了します。
応用
特定の記事だけアイキャッチ画像を非表示にしたい場合は下記のように記述します。
function motoki_remove_swell_thumbnail($return) {
if (is_single('23094')) { // 特定の記事だけに適応する
return ''; // $returnを空にする
}
return $return; // それ以外の場合は、元の$returnを返す
}
add_filter('swell_parts_post_thumbnail', 'motoki_remove_swell_thumbnail');実は初期はCSSで非表示にしていたのですが、
.p-articleThumb {
display: none;
}フックを使ったアイキャッチの非表示方法をかんたさんに教えていただきました。
CSS
my-eyecatchというクラスも追加しているので、見た目も調整します。
今回はアイキャッチ画像とタイトルの間隔も調整しました。
.my-eyecatch {
margin-bottom: 2em;
}確認
記事を確認してみましょう。
タイトル上にアイキャッチ画像が表示されているのが確認できました。
まとめ
昨今、WordPressテーマはSWELLだらけなのですが、せっかくの自分のサイト、見た目の差別化をするなら
よく目にする箇所の要素を大きく変えてあげると効果的です。
気になった方はぜひ試してみてください。