Amazonランキング大賞2018

SANGOのタイトルにキャッチフレーズを表示

WordPressのテーマ「SANGO」に関する記事です。

作成したサイト名の横に「キャッチフレーズ」、または「詳しい説明」を表示する方法です。
※「SANGO」バージョン 1.3.1

完成形

タイトルのみ

タイトル + キャッチフレーズ
タイトル|キャッチフレーズ+スタイル

タイトル + 詳しい説明
タイトル|詳しい説明+スタイル

タイトルなどの設定箇所

「外観」から「カスタマイズ」を選択し、サイト基本情報から設定します。

サイトの基本情報

タイトル設定

PHPの編集

「サイトのタイトル」はテーマファイルの header.php に記述されています。
編集する場合は子テーマを導入し、header.phpを親テーマからコピーしたものを編集するようにしてください。

参考 WordPressで子テーマを活用して安全にカスタマイズを行う方法サルワカ

サイトのタイトル名などは下記の方法で取得ができます。

サイトのタイトル
get_bloginfo('name')
キャッチフレーズ
get_bloginfo('description')
詳しい説明
get_option('home_description')

header.phpで「サイトのタイトル」を表示している箇所は、何も変更していなければ38〜41行目です。

header.php
<<?php echo $title_tag;?> id="logo" class="h1 dfont">
	<a href="<?php echo home_url(); ?>"><?php $logo = esc_url(get_option('logo_image_upload'));
		if($logo){ ?><img src="<?php echo $logo; ?>" alt="<?php bloginfo('name'); ?>"><?php } if(!get_option('onlylogo_checkbox')) bloginfo('name'); ?></a>
</<?php echo $title_tag;?>>

赤字の部分が「サイトのタイトル」を表示している所になっています。
ここを編集して、「キャッチフレーズ」や「詳しい説明」をタイトルの横に並べます。

タイトル名 + キャッチフレーズ

コード
<<?php echo $title_tag;?> id="logo" class="h1 dfont">
	<?php
		//サイト名 | キャッチフレーズ
		$rname = get_bloginfo('name') . '|' . '<span id="custom-desc">' . get_bloginfo('description') . '</span>';
	?>
	<a href="<?php echo home_url(); ?>"><?php $logo = esc_url(get_option('logo_image_upload'));
		if($logo){ ?><img src="<?php echo $logo; ?>" alt="<?php bloginfo('name'); ?>"><?php } if(!get_option('onlylogo_checkbox')) echo $rname; ?></a>
</<?php echo $title_tag;?>>

赤字が追加、変更箇所です。
「キャッチフレーズ」の周囲はCSSで装飾がしやすいように<span>タグで囲ってidを付けています。
このようにな表示になります。
タイトル|キャッチフレーズ

変わらない場合は、ブラウザのキャッシュを削除してみてください。

タイトル名 + 詳しい説明

コード
<<?php echo $title_tag;?> id="logo" class="h1 dfont">
	<?php
		//サイト名 | 詳しい説明
		$rname = get_bloginfo('name') . '|' . '<span id="custom-desc">' . get_option('home_description') . '</span>';
	?>
	<a href="<?php echo home_url(); ?>"><?php $logo = esc_url(get_option('logo_image_upload'));
		if($logo){ ?><img src="<?php echo $logo; ?>" alt="<?php bloginfo('name'); ?>"><?php } if(!get_option('onlylogo_checkbox')) echo $rname; ?></a>
</<?php echo $title_tag;?>>

赤字が追加、変更箇所です。
「詳しい説明」の周囲はCSSで装飾がしやすいように<span>タグで囲ってidを付けています。
このようにな表示になります。
タイトル|詳しい説明

変わらない場合は、ブラウザのキャッシュを削除してみてください。

CSSによる装飾

このままでもよいのですが、キャッチフレーズなどはタイトルよりも長くなるので、若干文字を小さくしたり装飾します。

装飾は style.css ファイルを編集します。

style.css
/* キャッチフレーズの装飾 */
#custom-desc{
	font-size: 70%; /* 文字サイズを70%に小さく */
	font-style: italic; /* イタリック体 */
	color:black; /* 文字色を黒 */
}

上記をstyle.cssの適当な箇所に記述します。
「キャッチフレーズ」「詳しい説明」どちらの場合もidは #custom-desc にしているので共通です。
このようになります。

タイトル|キャッチフレーズ+スタイル

これも画面が変わらない場合はキャッシュの削除をお試しください。

モバイルとパソコンで表示を分ける

モバイル機器では横幅が狭いので、表示はスッキリさせたいです。
そこで、モバイルでは「タイトル」のみ。
パソコンでは「タイトル+キャッチフレーズ」で表示されるようにします。

header.php
<<?php echo $title_tag;?> id="logo" class="h1 dfont">
	<?php
		if(wp_is_mobile()){	//モバイルの場合はサイト名のみ
			$rname = get_bloginfo('name');
		}
		else{	//パソコンでは サイト名 + キャッチフレーズ
			$rname = get_bloginfo('name') . '|' . '<span id="custom-desc">' . get_bloginfo('description') . '</span>';
		}
	?>
	<a href="<?php echo home_url(); ?>"><?php $logo = esc_url(get_option('logo_image_upload'));
		if($logo){ ?><img src="<?php echo $logo; ?>" alt="<?php bloginfo('name'); ?>"><?php } if(!get_option('onlylogo_checkbox')) echo $rname; ?></a>
</<?php echo $title_tag;?>>

モバイルだと「タイトル」のみが表示されるようになりました。
モバイルはタイトルのみ

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です