FileMaker以外にWordPress、node.jsなど興味あることを発信するページ!

FileMakerマニアが語るプログラミング雑学

WordPress

オリジナルテーマから深掘りするWordPress その4

投稿日:

今回はテンプレートファイルのお作法について学習したことを書きます。お作法を施すことでよりWordPressっぽくなります。

miku-nosuke

この記事を読むことでwp_head()、bloginfo()などを利用したWordPressの作法が分かります。

テンプレートファイルのお作法

 前回、header.php、footer.phpのようにテンプレートファイルを作りました。こちらはもともとあったindex.phpをカット&ペーストしただけのモノでした。こちらにお作法を施こします。

wp_head と wp_footer

wp_head()
 フック。何らかのアクションをおこすための目印。

まずは、wp_head()を分割したheader.phpに追記します。追記する場所はheadタグ終了直前です。ちなみに、()もお作法の一種と言って良いでしょう。() をつけると実行するという意味になります。この場合ですと、wp_head関数を即実行しろという意味になります。phpに限らず開発言語の多くで使われています。

<head>
  省略
<?php wp_head(); ?>
</head>
<body>

wp_head()はフックになります。以前の記事(WordPressカスタマイズ その2 初心者でもわかる、子テーマをつくる方法)で説明しました。フックとはきっかけという意味です。この場合だと、headタグ内に書いてあることを読み終わった後に、というきっかけを作ります。したがって、wp_head()をきっかけにするような別の関数を使用する事(例えば何かのプラグイン)が出来なくなります。

wp_head()について詳しく知りたいのであれば、 API/アクションフック一覧/wp headに書いてありますので参照下さい。

wp_footer()も同様にフックになります。こちらは</body>の直前に追記します。

</footer>
<?php wp_footer(); ?>
</body>

ちなみに、<php wp_footer();?>を付けた後にブラウザで確認すると、下図のように帯が付きました(ログインしている場合)。wp_footer()をフックにして何かの関数が実行されたようです。このようにお作法を施すことででより、もともとWordPress側で準備していた機能が働きよりWordPressっぽくなります。

WordPressでwp_footerを付けると帯がついた
fig1 wp_footerを付けると帯が付く
fig2 帯が付く

 こちらもWordPressが用意した関数です。前にも説明しましたが、このようにWordPressがphpを使って定義した関数をテンプレートタグといいます。

文書タイトル

 WordPressというよりはhtmlのお作法になります。一般的に<head>タグ内にある<title></title>に記述されます。お作法としてトップページにはサイトタイトルをその他のページではそのページのタイトルを記述します。

bloginfo

bloginfo()
 サイト情報を取得する。引数により取得情報が異なる。
 bloginfo(‘name’) サイトタイトルを取得
 bloginfo(‘description’) サイトのキャッチフレーズを取得

 文書タイトルはSEOやOGPに用いられる他、ブラウザのタグに表示されます。下図ではDocumentと表示されます。
 これはhead内に<title>Document</title>と記述されているためです。これをbloginfoを使って指定のタイトルに変えます。このページはトップページですのでサイトタイトルを取得するようにします。

fig3 pぺぺーぺ

 下図のようにDocumentとなっている部分を<?php blogingo(‘name’); ?> に置き換えます。

fig4 title
fig5 bloginfo(‘name’)

つづいて、WordPressのダッシュボード > 設定 > 一般 からタイトルをsampleからLa・Madeleine と変更します。ついでにキャッチフレーズも変更します。

fig6 タイトル変更

すると、タブ部分にあるタイトルが変わりました。
サイトタイトルをsampleからLa・Madeleineに変えて、その部分が反映されたことからも分かるようにbloginfo(‘name’)は一般設定にある『サイトのタイトル』の情報を取得します。

fig7 titelが変わった

wp_title関数

 お作法ではトップページ以外ではそのページのタイトルを表示するでしたね。ページタイトルを表示するにはwp_titleを使います。

wp_title
 ページのタイトルを取得する。

 現状では bloginfo(‘name’)となっているため、どのページにもサイトタイトルが表示されてしまいます。これを回避するためif文により条件分岐させましょう。私が愛用している教科書には以下の様に書いてあります(一部修正)。

  <title>
    <?php if (!is_home()) {
      wp_title();
    } else {
      bloginfo('name');
    }
    ?>
  </title>

if文中にある is_home とは トップページかどうか判定する関数のようです。その前にあるびっくりマークは反対という意味になります。つまり、!is_home はトップページではないという意味です。その時は、wp_title によりページタイトルを表示することになります。そうでは無い場合、つまり、トップページの場合にはbloginfo(‘name’)によりサイトタイトルが表示されます。

 ちなみに、ページタイトルとは下図にあるタイトルになります。

fig8 ページタイトル

疑問あり

 ここでいくつか疑問がわいてきました。いろいろと調べたのですが分かったもの分からなかったものがあります。その疑問とは。

疑問1:トップページとは?

いままで、さんざんトップページと言ってきました。しかし、WordPressでいうところのトップページとは何なんでしょうか?「このページはトップページですので・・・」って私が言っているだけでWordPress的にはどのように判定しいるのか疑問です。

私の調べた限りでは、ダッシュボード > 設定 > 表示設定 とたどり、ここにあるホームページの表示 で定めたページがトップページとなるようです。

fig9 ホームページ設定

疑問2:なぜ、トップページとなるのか?

 現時点でのファイルはindex.php、header.php、footer.php、sidebar.php だけです。疑問1で私が出した答が正しければ、ここで設定できないものはトップページではないという判定になります。
 しかし、実際にはLa・Madeleine というタイトルが表示されます。なぜでしょう?わかりません。index.phpしか表示ページが無いからなのでしょうか?わかりません。

疑問3:そもそも記事はどこにあるのか?

 そもそも、Hello World や Sample Page など予め用意された記事はどこにあるのでしょうか?わかりません。

まとめ

  • wp_head()、wp_footer() はフックのきっかけ作りに用いられる
  • bloginfo() は引数によりサイトタイトルまたはキャッチフレーズを取得する。
  • wp_title() はページタイトルを取得する。
  • is_home()はトップページかどうかを判断する。
  • トップページはダッシュボードの一般設定のホームページで決まる。

 今回はここまで。疑問も湧き出てきますがとりあえず先へ進みましょう。このまま教科書を読み進めていけばきっと謎は解けるのでしょう。読み進めながら、調べながらブログを更新していきたいと思います。

Follow me!

-WordPress

執筆者:


comment

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

関連記事

オリジナルテーマ作成から深掘りするWordPress その1

今回はオリジナルテーマの作成を取り上げます。cocoonなどのテーマをカスタマイズする方法について調べる一方、オリジナルテーマを作るってどうやるんだろうと思いを巡らせていたところ意外にも簡単だったので …

WordPressカスタマイズ その2 初心者でもわかる、子テーマをつくる方法

前回は子テーマの必要性について記事にしました。今回は実際に子テーマを作ってみます。必要なスキルとしては以下になります。 htmlの基礎知識(コードを書いたことがある)cssの基礎知識VS codeなど …

オリジナルテーマ作成から深掘りするWordPress その3

今回は、テンプレートファイルについてです。htmlでwebサイトを構築する際に「面倒だな〜」と思うことがあります。それを解決すべくWordPressには便利な機能が備えられています。その一つがテンプレ …

WordPress カスタマイズ その1

2020年現在、ホームページの25%はWordPressで作られていると言われているほど勢いのあるWordPress(以下WP)。そんなWPについて、いま、まさに学習しています。学習してみるといろいろ …

no image

シンプルな例でFLOCSSについて考えた

皆さんこんばんは。RasieTechのWordPressコースmiku-nosukeです。今回の記事はCSS設計です。いままで見て見ぬふりをしてきました。しかし、CSS設計は避けては通れない道。ココを …

プロフィール

miku-nosuke

職業:web制作者
生息地:東京都
趣味:ジョギング、コーディング、ガーデニング

もの作り大好き!FileMakerは25年の経験で多くの業務システムを作成。html、cssなどフロントも大好き!
まったくの別業界から好きなことに没頭したい、好きなことを仕事にしたいと思いプログラミングを学習する。それまではノンコードデータベースソフトFileMakerに没頭する。はまりすぎてFileMaker選手権で受賞しFileMakerを中心に活動する。
どの言語を学ぶにもhtml、css を知らないと話にならないと気づく。html、css、WordPress、サーバー構築などを語ります。

50歳を過ぎてふと思ったんだ、自分のやりたい事って今の仕事だったのか?
そんな時にたまたま見た日本人3Dグラフィックデザイナーの成田さんを題材にした番組。彼は45歳でグラフィックデザイナーを志、ついにはStarWarsの制作を手がける。そんな彼の言葉「人生に失敗していたんだ。この年になってはじめて自分のやりたいことに気付き、やり直したい」に感銘を受ける。

PAGE TOP