バズ部さんが無料配布しているWordPressのテーマ「Xeory Base」のカスタマイズをしました。
忘れないように備忘録としてアップします。
固定ページをトップページにした際のtitleタグ表示、同じくトップページのパンくずリストの削除などについて掲載しています。
皆さんこんにちは、よしぞう(@otonahack)です。
バズ部さんが無料配布しているWordPressのテーマ「Xeory Base」のカスタマイズ方法をまとめておきます。
自分が作業したものだけを備忘録として残します。
Xeoryの詳細については公式サイトをどうぞ
↓↓↓
公式サイト
Xeory-無料WordPressテーマ-
目次:バズ部WPテーマXeoryのカスタマイズ備忘録
注意点:子テーマを作って使っています
カスタマイズをするのでオリジナルの「.php」ファイルはいじらずに、「Xeory Base」の子テーマを作って作業しています。
下記で変更している「.php」ファイルは、全て子テーマフォルダの中に複製したものをいじっています。
トップページ(固定ページ)のtitleタグをサイト名にしたい
固定ページをトップページにして利用しています。
この場合、ソースを見るとtitleタグに表示される内容が、下記のようにトップページに指定した固定ページの記事タイトルになってしまいます。
<title>トップページに指定した固定ページの記事タイトル</title>
これを以下のように修正します
<title>サイト名</title>
修正する場合は「header.php」を修正します。
「header.php」の中にある
<title><?php bzb_title(); ?></title>
という部分を
<title> <?php if ( is_home() || is_front_page() ) : ?> <?php bloginfo('name'); ?> <?php else : ?> <?php echo trim(wp_title('', false)); ?> | <?php bloginfo('name'); ?> <?php endif; ?> </title>
に変更します。
条件分岐を使って、トップページの場合は「サイト名」を表示、それ以外の固定記事ページでは「記事タイトル | サイト名」という形で表示されます。
<title>サイト名</title>(トップページの場合) <title>記事タイトル | サイト名</title>(固定記事ページの場合)
通常、記事タイトルを表示させる場合は
<?php wp_title( '' ); ?>
を使いますが、これだと何故か先頭にスペースが入るので、
<?php echo trim(wp_title('', false)); ?>
を使っています。上記コードを使うことで、以下のように先頭のスペースを削除できます。
<title> 記事タイトル | サイト名</title>(スペースが入るので) ↓ <title>記事タイトル | サイト名</title>(スペースを削除した)
トップページ(固定ページ)のパンくずリストを消したい
固定ページをトップページにして利用すると、トップページにもパンくずリストが表示されてしまいます。
しかも、トップページであるにもかかわらず、
と表示されてしまうので、トップページの1階層下にあるページのように見えてしまいます。
ですので、トップページのみパンくずリストを消しました。
先ほどの条件分岐を使ってもできると思います。
しかし、トップページはいろいろと他の固定ページと違うデザインにする場合も多いので、固定ページのテンプレートである「page.php」を複製し「front-page.php」というファイル名で子テーマフォルダにアップしました。
固定ページをトップページに指定すると、トップページは「page.php」よりも「front-page.php」が優先されます。
その他の固定ページは「page.php」が利用されます。ですので「front-page.php」のパンくずリストを削除すればOKです。
参考:WordPress Codex 日本語版
静的フロントページの作成
作業方法は以下です。
「front-page.php」を子テーマにアップしたら、
<?php bzb_breadcrumb(); ?>
を削除します。これだけです。
これでトップページからパンくずリストが消えます。
終わりに
以上、「バズ部WPテーマXeoryのカスタマイズ備忘録」でした。
今後もカスタマイズが増えたら、追加していきます。
Xeoryを配布しているページのサンプルサイトを見ると、いろいろなデザインのサイトがあるので、インストールしただけで凄いデザインが出来るのかと思ってしまいました。
インストールしてみると、とてもシンプルなデザインなので、あのようなデザインにするには相当な工夫が必要ですね。
Xeoryの詳細については公式サイトをどうぞ
↓↓↓
公式サイト
Xeory-無料WordPressテーマ-