ぺらラボ 
WordPressのテーマ「SANGO」に関する記事です。
作成したサイト名の横に「キャッチフレーズ」、または「詳しい説明」を表示する方法です。
※「SANGO」バージョン 1.3.1
完成形
タイトルのみ
タイトル ＋ キャッチフレーズ
タイトル ＋ 詳しい説明
タイトルなどの設定箇所
「外観」から「カスタマイズ」を選択し、サイト基本情報から設定します。
PHPの編集
「サイトのタイトル」はテーマファイルの header.php に記述されています。
編集する場合は子テーマを導入し、header.phpを親テーマからコピーしたものを編集するようにしてください。
参考
WordPressで子テーマを活用して安全にカスタマイズを行う方法サルワカ
サイトのタイトル名などは下記の方法で取得ができます。
header.phpで「サイトのタイトル」を表示している箇所は、何も変更していなければ38〜41行目です。
<<?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 ファイルを編集します。
/* キャッチフレーズの装飾 */
#custom-desc{
font-size: 70%; /* 文字サイズを70％に小さく */
font-style: italic; /* イタリック体 */
color:black; /* 文字色を黒 */
}
上記をstyle.cssの適当な箇所に記述します。
「キャッチフレーズ」「詳しい説明」どちらの場合もidは #custom-desc にしているので共通です。
このようになります。
これも画面が変わらない場合はキャッシュの削除をお試しください。
モバイルとパソコンで表示を分ける
モバイル機器では横幅が狭いので、表示はスッキリさせたいです。
そこで、モバイルでは「タイトル」のみ。
パソコンでは「タイトル＋キャッチフレーズ」で表示されるようにします。
<<?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;?>>
モバイルだと「タイトル」のみが表示されるようになりました。
