【SWELL】固定ページのサブタイトルの線とスペースを消したい

当サイトは広告を含んでいます。

2025-05-02

サブタイトルのデザインをカスタマイズしたい・・・

WordPressの人気テーマ「SWELL」では、固定ページのサブタイトルを設定することができ、自動的にページタイトルの右側に設定されます。

配置や文字の大きさはCSSでカスタマイズ可能ですが、サブタイトルの両脇の「-」はCSSでは消すことが出来ません。

今回はSWELLのサブタイトルの両脇の線の消し方をご紹介します！

【SWELL】サブタイトルの両脇の線を消す

一旦理屈は省き、やることを紹介させていただきます。

以下のphpコードを、「外観」→「テーマファイルエディタ―」→「子テーマ」→「functions.php」に追加してください。

このままコピペOK！

if ( ! function_exists( 'swl_parts__page_title' ) ) :
	function swl_parts__page_title( $args ) {
		$title     = $args['title'] ?? '';
		$subtitle  = $args['subtitle'] ?? '';
		$has_inner = $args['has_inner'] ?? false;
		$nowrap    = $args['nowrap'] ?? false;

		// サブタイトル（「–」を削除）
		if ( $subtitle ) {
			$title .= '<small class="c-pageTitle__subTitle u-fz-14">' . $subtitle . '</small>';
		}

		if ( $nowrap ) {
			echo wp_kses( $title, \SWELL_Theme::$allowed_text_html );
			return;
		}

		$title = wp_kses( $title, \SWELL_Theme::$allowed_text_html );

		$title_style = '';
		if ( $has_inner ) {
			$title       = '<span class="c-pageTitle__inner">' . $title . '</span>';
			$title_style = is_archive() ? \SWELL_Theme::get_setting( 'archive_title_style' ) : \SWELL_Theme::get_setting( 'page_title_style' );
		}

		if ( $title_style ) {
			echo '<h1 class="c-pageTitle" data-style="' . esc_attr( $title_style ) . '">' . $title . '</h1>';
		} else {
			echo '<h1 class="c-pageTitle">' . $title . '</h1>';
		}
	}
endif;