• WordPress

    【WordPressオリジナルテーマ作成記録③】 index.phpのヘッダーまでを完成させる

    前回までで、index.phpにCSSを読み込ませ、レイアウト通りのページが表示されました。

    さらにindex.phpにテンプレートタグなどを組み込み、ヘッダーを完成させていきます。

     

    前回までのindex.php

    まずはheadタグ内を。

    1.言語属性の設定

    index.php 2行目

    HTML要素のlang属性で言語を設定していましたが、

    WordPressの設定に合わせて自動的に言語属性が設定されるよう、

    テンプレートタグlanguage_attributes()を使って下記のように書き直します。

    これで

    WordPressを日本語で使っている場合には html lang=”ja”

    英語を使っている場合には html lang=”en” が出力されるようになります。

     

    2.文字エンコーディングの設定

    メタデータについても変更していきます。

    index.php 4行目

    メタタグのcharset属性もWordPressに合わせるようにします。

    テンプレートタグ bloginfo()を使います。

    サイトの情報を表示させる関数です。情報の殆どは、プロフィールや一般設定などの、WordPress 管理画面で入力されたものです。この関数はテンプレートファイルの至るところで使うことができ、その結果は常にブラウザーに表示されます。

    とあり、()内に様々なパラメータを渡すことにより、その情報を引き出すことが出来ます。

    ここでは charset を呼び出したいので

    とします。

    WordPressのデフォルトの文字エンコーディングはUTF-8なので bloginfo( ‘charset’ ) では常に UTF-8を出力します。

     

    3.タイトルタグ

    HTMLファイルではhead内にtitleタグにてドキュメントタイトルを設定していましたが、

    WordPressはタイトルを自動的に呼び出す機能が用意されているので、それを使うようにします。

    index.php 7行目

    まずこのtitileタグを削除します。

    次にfunctions.php開き、テーマサポートを追加していきます。

    これはテーマ作成者が任意に有効化することができる機能で、関数 add_theme_support()に引数を与えて実行すると、

    様々な機能をそのテーマに追加することが出来ます。

    functions.php

    portfolioテーマのセットアップなので関数名はportfolio_setupとしました。

    その中で関数 add_theme_support に title-tagという引数を与えることにより、

    タイトルタグを呼び出します。

    フックはテーマ設定・オプションを初期化するために使われるアクションフック after_setup_themeを、

    第二引数には上記で指定したportfolio_setupを渡すことで、titileタグが自動的に挿入されます。

     

    headタグ内の記述は以上で、次はbodyタグ以降の記述です。

    4.body_class()の設定

    WordPressにはより効果的にCSSで装飾出来るように、ページによって異なるクラス名が自動で付与される

    テンプレートタグbody_class() が使われています。

    index.php 13行目

    HTMLでは body だけだったところにPHPで body_class() を埋め込んでいきましょう。

    こうすることによって、トップページでは <body class=”home blog”> というクラスが与えられています。

     

    5.サイトのタイトルとキャッチフレーズ

    ここでもテンプレートタグ bloginfo() を使います。

    サイトタイトルにはnameを、キャッチフレーズにはdescriptionを、それぞれ引数として与えます。

    index.php 18行目

    サイトタイトルを<h1> タグで表示していましたが、ここも呼び出すことが出来ます。

    こうすることによって、サイトタイトルを変える時にコードを書き換えなくても、

    管理画面でタイトル名だけ変更すれば反映されるので、柔軟に対応出来るようになりました。

    ※私はキャッチフレーズをサイト上に表示させていないのですが、もし表示させるのなら、

    上記タグを表示したい場所に差し込んでください。

     

    ホーム画面へのリンク

    サイトタイトルのリンク先がindex.htmlのままになってしまっているので、関数を使い書き換えていきます。

    ホームへのURLを取得するには関数home_url()を使いますが、

    この関数は値を返すのみでhtmlに出力するわけではないので、echoで出力してあげないといけません。

     

    echo文を使う時の注意点

    WordPressからデータを取得しechoを使って出力する場合、テーマのセキュリティ脆弱性に繋がることがあるそうです。

    第三者がechoで出力されるデータに悪意のあるコードを紛れ込ませることが出来るとか。。

    その対策として、出力されるデータを無害化するため適切にエスケープする必要があり、

    WordPressにはそういったエスケープ関数も用意されている。

    ここでは悪意のあるパラメータが渡されないようにするため関数esc_url()を使い、

    第一引数にエスケープしたいURLを与えることで、無害化されたURLが返されます。

    なのでindex.php 18行目は

    と書くことが出来ます。

     

    ヘッダーまでを書き換えたindex.phpはこうなりました

     

    次は記事の一覧表示について書いていきます!