MENU

【SWELL】投稿ページで日付やカテゴリーをタイトルの上に表示する

PR

【SWELL】投稿ページで日付やカテゴリーをタイトルの上に表示する

SWELLのタイトル部分の表示方法はカスタマイザーから色々といじれるのですが、日付やカテゴリーの表示とタイトル文の位置を変えることはできません。

そこでこの記事ではここの表示順を変えるカスタマイズをご紹介します。

before

after

  • 【タイトルの表示位置】で「コンテンツ内」が選択されていることが前提条件です
  • 「タイトル横に日付を表示する」には対応していません

このカスタマイズを使ったデザイン例はこちら（※今回のカスタマイズ以外のCSSも適用しています）

タイトルがこの位置にあった方が、全体的に見た目がスッキリするような気がします！

カスタマイズする際の注意事項
  • 作業前にバックアップを取ることを推奨します。
  • カスタマイズは自己責任でお願いします。
CONTENTS

カスタマイズ方法

functions.phpとCSSを変更していきます。

①以下のコードをfunctions.phpの一番下に追記

function custom_articleHead() {
	$title = the_title(null, null, false);
	echo '<div class="p-articleHead c-postTitle soramaru_custom">
					<h1 class="c-postTitle__ttl">' . $title . '</h1>
				</div>';
}
add_filter('swell_before_post_thumb', 'custom_articleHead');

②カスタマイズ＞追加CSS　に以下のコードをコピペ

.p-articleHead.c-postTitle:not(.soramaru_custom) {
	display: none;
}
.p-articleHead.c-postTitle {
	margin-top: 1em;
}
.p-articleMetas.-top {
	margin-top: 0;
}
.p-articleThumb {
	margin-top: 1em;
}

ちょっと解説

元々あったタイトルを非表示にし、フックを使ってアイキャッチ前にタイトルを挿入しています。

アイキャッチをどうにかする場合はフックがあるので結構スマートにコードを書けるのですが、タイトルに関するフックが（たぶん）無いと思われるので結構力業になってしまいました。

個人的にdisplay: none;は多用したくないので、少しモヤモヤ；；

あと正直あんまり意味はないのですが、一応元々SWELLで付いていたクラスはそのまま同じにしてあります。

表示順を変えたことで上下の間隔がおかしくなるので、その微調整だけCSSでやっています！

カスタマイザーで表示を変更したらどうなる？

「タイトル横に日付を表示する」には対応していないと冒頭で言いましたが、カテゴリーやタグの表示をさせても特に問題はありません。

PR表記も例では「小」になっていますが、「大」を選択しても大丈夫です。

「大」にした場合はここに表示されます。

おわり！

SWELL
CONTENTS