【AFFINGER4-カスタマイズ】titleのサイト名と説明を逆にする。

この記事は有料テーマ『AFFINGER4』のカスタマイズについて記載しております。
1月末にメインサイトのデザインを大幅に変更し、今まで使用していた無料テーマ『STINGER3』から卒業し、有料テーマ『AFFINGER4』を購入しました。
ただ、デフォルトのデザインはあまりにも寂しいのでカスタマイズ。
様々なカスタマイズを行ったので、備忘録として記事にしておきます。
参考になる方がいれば、どうぞ。
titleのサイト名と説明を逆にする
導入して気になったのが、これ。
そう。サイト名と説明が逆になっている!?
どうしても気になったので、原因を解析し修正を行いました。
修正するファイルは『st-title.php』
※テーマを編集する時は子テーマにアップロードし、親テーマは編集しないことを推奨します。
「st-title.php」の137行目~147行目辺りを編集します。
1 2 3 4 5 6 7 8 9 10 11 |
if ( is_front_page() ) { if ( trim( $GLOBALS["stdata33"] ) !== '' ) { $title = esc_html( $GLOBALS["stdata33"] ); }elseif(is_front_page() && !is_home()){ $title = single_post_title( '', false ); //記事タイトル }else{ $title .= get_bloginfo( 'description', 'display' ) . ' ' . st_get_document_title_separator() . ' ' . get_bloginfo( 'name', 'display' ); } return $title; } |
というロジックがあればOKです。

いつも通り、コメントを付けていくと…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
//1,フロントページだったら~ if ( is_front_page() ) { //2,タイトルタグが空白じゃなければ~ if ( trim( $GLOBALS["stdata33"] ) !== '' ) { //3,$titleにタイトルタグの内容を取得して格納するよ! $title = esc_html( $GLOBALS["stdata33"] ); //4,タイトルタグが空白で、フロントページが固定ページを使ったら~ }elseif(is_front_page() && !is_home()){ //5,$titleに固定ページのタイトルを取得して格納するよ! $title = single_post_title( '', false ); //記事タイトル //6,タイトルタグが空白で、フロントページが固定ページじゃない、それ以外だったら~ }else{ //7,$titleに「ブログ説明 - サイト名」を格納するよ! $title .= get_bloginfo( 'description', 'display' ) . ' ' . st_get_document_title_separator() . ' ' . get_bloginfo( 'name', 'display' ); } //8,$titleをリターン(返す)よ! return $title; } |
って感じ。
一つずつ、紐解いていくと…
「is_front_page()」って?
「設定」→「表示設定」
にある「フロントページの表示」のこと。

このページだったら~ってことですね。
trim( $GLOBALS[“stdata33”] ) って?
『AFFINGER4』の機能として、投稿ページにタイトルタグを設定出来ますよね。

この設定があればってこと。
「trim」はただ、空白を除去しているだけなので、”あ あ あ”⇒”あああ”に直しているだけ。
!== ”
は「空白じゃなければ~」っていう意味ですね。==がイコールなので、!が付くことによって否定形になります。
最後の”は条件になりますね。”が’あ’だったら、「あ じゃなければ~」ということになります。

$title = esc_html( $GLOBALS[“stdata33”] );って?
ただ、タイトルタグを取得して、$titleっていう変数に格納しているだけです。
is_front_page() && !is_home()って?
フロントページかつ、最新の投稿じゃなければ~ってことですね。
is_front_page()は先ほど説明した通りで、その後に&&がくっついてます。
&&はアンドですね。ちなみにorは || になります。
&&が付いたら、「プラスこれだったら~」になり、||が付いたら、「または、これだったら~」になるわけです。

ていうツッコミはそういうモノだから。としか言いようがありません。。
single_post_title( ”, false );って?
ループ以外で投稿ページのタイトルを取得できる関数です。
1 |
single_post_title(); |
でも取得できるのですが、後ろの” と falseにも意味があります。
”はタイトル取得して、先頭に文字を付与できます。
例えば、single_post_title(‘最高の‘);と記載した場合…
最高の書きタレ
というタイトルが取得できるわけです。
後ろのfalseについては、デフォルトはtrueなんです。
trueは基本的にそのまま表示形式として出力出来るのですが、今回は$titleっていう変数に格納するのでfalseを使い、値として取得し格納しているわけです。
分かり難いようであれば、
- 画面に出力したいのならtrue
- ロジックに組み込んで、様々な状況で使用したい(動的に変更したい)のならfalse
と覚えといてください。
get_bloginfo( ‘description’, ‘display’ ) . ‘ ‘ . st_get_document_title_separator() . ‘ ‘ . get_bloginfo( ‘name’, ‘display’ );って?
get_bloginfo( ‘description’, ‘display’ )
でサイトの説明(description)を取得しています。
. は足し算です。+みたいなもの。
‘ ‘は半角スペースを足してますね。
st_get_document_title_separator()
は – の部分でしょう。
get_bloginfo( ‘name’, ‘display’ )
でサイトの名前(name)を取得しています。
つまり、ここを修正すれば、今回の目的を達成できますね!
修正方法は後ほどご説明いたします!
return $title;って?
このロジックの全体はst_get_document_title()というfunctionに覆われています。
その後、st_legacy_render_title_tagというfunctionに<title>タグ付きでセットされ、最終的にはwp_headというアクションにセットされます。
このwp_headは『header.php』にて呼び出されていますね。

で、肝心のreturn $title;は、$titleに格納された値をst_get_document_title()というfunctionにセットしてあげる。
というイメージです。
で、st_get_document_title()は色んな状況を経て、ヘッダーに出力されています。
イメージ
$title = ‘書きタレ’
↓
st_get_document_title() = $title = ‘書きタレ’
↓
st_legacy_render_title_tag() = <title> st_get_document_title() = $title = ‘書きタレ’ </title>
↓
wp_head = st_legacy_render_title_tag() = <title> st_get_document_title() = $title = ‘書きタレ’ </title>

修正の完成系
実際に修正後の完成系はこれです。
1 2 3 4 5 6 7 8 9 10 11 |
if ( is_front_page() ) { if ( trim( $GLOBALS["stdata33"] ) !== '' ) { $title = esc_html( $GLOBALS["stdata33"] ); }elseif(is_front_page() && !is_home()){ $title = single_post_title( '', false ); //記事タイトル }else{ $title .= get_bloginfo( 'name', 'display' ) . ' ' . st_get_document_title_separator() . ' ' . get_bloginfo( 'description', 'display' ); } return $title; } |
ただ、descriptionとnameを逆にしただけ。
これで、サイトに反映すると…
はい。これで、無事にサイトタイトルと説明を逆にすることが出来ました。
『AFFINGER4』はカスタマイズしなくても、高機能なことは間違えないのですが、やはり自分の求めるサイトデザインにするならカスタマイズせざるを得ないですね。
