• WordPress

    【WordPressオリジナルテーマ作成記録②】スタイルシートを反映させる

    1つ前の記事ではWordPressにテーマを認識させ有効化をさせたが、

    スタイルシートが反映されてないページが表示されていた。

    HTMLではlinkタグで読み込み反映されていたが、

    なぜWordPress上では表示されなくなってしまったのか?

    ますはそこから理解していく。

     

    スタイルシートが反映されなかったのはなぜか?

    結論から言うと、CSSファイルへのパスが変わったから

     

    HTMLファイルでは

    こう記述していました。このスタイルシートへの相対パスは”style.css”です。

    これはhttp://localhost:8888/wordpress/にアクセスした際のページから見ると、

    絶対パスがhttp://localhost:8888/wordpress/style.cssであることを指している(=wordpressディレクトリ直下に置かれたstyle.cssファイルを指している)

    しかし実際にはそこにファイルはありません。

    反映させたいstyle.cssファイルはportfolioディレクトリ内に存在しているので、

    正しい絶対パスはhttp://localhost:8888/wordpress/wp-content/themes/portfolio/style.cssとならなければいけない。

    かといって、相対パスを正しい絶対パスに書き換えればいいということではなく、

    WordPressには有効化しているテーマのメインスタイルシートへのパスを判別して取得するためのPHP関数が存し、それを正しく読み込むための方法がある。

     

    それらを使う前に、まずはfunctions.phpフックを理解しておかなければいけない。

     

    functions.phpとは

    1つ1つのテーマのためのPHP関数を管理するためのファイル

    自分のテーマで使いたいオリジナルの関数はこのファイル内に記述し定義していく。

    テーマフォルダportfolioの直下にfunctions.phpファイルを新規作成することで適用される。

    functions.phpでは関数を作成し、フックに登録することで、

    指定したタイミングで作成した関数が実行され、WordPressに対して様々な変更を行うことが出来る

     

    フックとは?

    コアファイルを編集せずに初期設定の動きを変えるもの。

    WordPressの初期設定の動きは基本的に「wp-content」ディレクトリ以外のコアファイルと呼ばれている部分に書かれている。

    初期設定の動きを変更する為に直接コアファイルを書き換えることも出来るが、

    WordPressをアップデートするとその変更内容は全て上書きされて消えてしまう。

    そこでwordPressには他のファイルから初期設定の動きを変更できる仕組みがあり、それがフックである。

    フックには2つの種類がある。

     

    アクションフック

    特定のポイントもしくは特定のイベント発生時に起動されるフック。

    そのタイミングで任意のPHP関数を実行させることができる。

     

    フィルターフック

    データベースへの保存時や読み出し時にその値を改造するためのフック。

     

    フックの使い方

    テーマディレクトリ直下のfunctions.phpにて実行させたいPHP関数を作成

    アクションフックの場合はadd_action()、

    フィルターフックの場合はadd_filter()を呼び出し、

    特定のフックに作成した関数を登録する。

     

    ここまで理解したところで、index.phpに記述をしていく。

     

    スタイルシートを読み込む為にindex.phpにする記述

    index.php

    9~10行目でreset.cssとstyle.cssを読み込んでいる下記2行を削除。

    その代わりに関数wp_head()を記述する。

    関数wp_head()とは?

    wp_headという名前のアクションを呼び出し、HTMLの<head>内に必要なスタイルやスクリプト、メタなどのHTMLタグを、functions.phpのファイルやデータベースから取得して挿入するもの。

    WordPress本体や多くのプラグインでもwp_head()が使われているため、

    基本的にテーマを作る上では</head>タグ直前に記述する。

     

    ということで、</head>タグ直前に下記コードを記述。

     

    関数wp_footer()もある

    </body>タグ直前にスクリプトを追加する関数wp_footer()は、

    </body>タグ直前に下記のコードを記述。

     

    index.phpからスタイルシートを読み込んでいたリンクタグを削除、

    さらにwp_head()とwp_footer()を記述し、index.phpは下記のようになった。

    index.php

    ここまで出来たところで、functions.phpにて関数を作成しフックに登録する記述へ移る。

     

    functions.phpにする記述

    まず、スタイルシートを読み込むためのPHP関数を作っていく

    関数の作り方

    関数名は任意につけることができるが、他の関数名とかぶることのないよう、テーマ名を頭につけるといいらしい。

    スタイルやスクリプトを読み込む関数だということがわかるように”script”と、

    テーマ名”portfolio”を繋げて”portfolio_script”とする。(ハイフンは使えないのでアンダーバーで)

    functions.phpに記述するときにはPHPの開始タグ<?phpを記述することで、

    それ以降に書かれた任意のPHPコードを自動的に実行してくれる。

    functions.php

    これでportfolio_scriptsという名前の関数を作ることができ、その中身を書いていく。

     

    スタイルシートを読み込むための関数を記述

    WordPressにはスタイルシートを読み込むための関数wp_enqueue_style()が用意されている。

    関数wp_enqueue_style()は5つの引数を取ることが出来る。

    【第一引数(必須)】各スタイルシートを識別するハンドル(ニックネームのようなもの)

    ここでは”portfolio-style”とします。

    【第二引数】スタイルシートのURL

    WordPressにはテーマのメインスタイルシートのURLを取得する関数get_stylesheet_uriもあるので、これを使う。

    【第三引数】そのスタイルを読み込む前に読み込むべきスタイルがある場合、そのハンドル

    【第四引数】バージョン番号の指定

    【第五引数】<link>タグのmedia属性の指定

    指定した引数を与え関数wp_enqueue_style()を定義する。

    functions.php

     

    フックに登録

    作成した関数portfolio_script()をフックに登録すると、<head>タグ内に追加されるようになる。

    スタイルシートやスクリプトの登録にはアクションフックwp_enqueue_scriptsを使う。

    アクションフックの場合はadd_action()で呼び出して作成した関数を登録する。

    add_action()は4つの引数を取ることが出来る。

    【第一引数(必須)】フックされるアクション名

    ここではアクションフックのwp_enqueue_scripts

    【第二引数(必須)】フックに登録する関数名

    作成した関数portfolio_scripts

    それ以降の引数はオプションのため省略。

    functions.php

    これでメインスタイルシートが呼び出されるのだが、

    私の場合はメインスタイルシートよりも前にreset.cssを読み込んでいる為、

    それもfunctions.phpに記述していかなくてはならない。

     

    functions.phpにする記述(追加)

    1. reset.cssを読み込む
    2. reset.cssを読み込んでからstyle.cssを読み込む

    この2つの動作を行わなくてはならない。

    reset.cssを読み込む

    スタイルシートを読み込むための関数wp_enqueue_style()を使うのだが、

    reset.cssはメインスタイルシートではないので、メインスタイルシートを読み込む関数get_stylesheet_uri()は使うことが出来ない。

    そこで、有効化しているテンプレートディレクトリの URI を取得する関数get_template_directory_uri()を使用する。

    ハンドル名を”reset-style”とした時

    functions.php

    となる。

     

    reset.cssを読み込んでからstyle.cssを読み込む

    これに関しては関数wp_enqueue_style()の第三引数(そのスタイルを読み込む前に読み込むべきスタイルがある場合、そのハンドル)を取らなくてはいけない。

    reset.cssを読み込んだハンドル名reset-styleを第三引数に与え定義し、フックに登録する。

    functions.php

     

    これでreset.cssもstyle.cssも反映された。

     

    画像が表示されていない

    CSSは反映されたが画像だけがまだ表示されていない…

    それはスタイルシートが反映されなかった理由と同様、パスが変わったから。

    関数get_template_directory_uri()は有効化しているテンプレートディレクトリの URI を取得するということは、画像へのパスにも使うことが出来る。

    index.php

    このようにして画像を表示していたパスの部分をPHPで書くことで画像を表示させる。

    ここではURLの取得だけではなく出力もしなくてはいけないのでechoを使って

    index.php

    と書くことが出来る。

     

    陥りやすいエラー

    PHPは開始タグ<?phpで始まり閉じタグ?>で終わるのだが、

    functions.phpでは閉じタグを記述するとエラーが起きてしまう。

    理由についてはこちらを PHPの最後の終了タグ ?> は付けないでおこうねというお話

    私も閉じタグを記述してしまいエラーが起き、デバッグモードでfunctions.phpに問題があるとわかったのですが、

    指摘された箇所は空白の行を指していて、どこが間違っているのか全然わかりませんでした。

    これにハマってしまう人も多いようなのでご注意を!

     

    これでトップページ(テンプレート階層から言うとトップページではないのだが)が表示されるようになりました!

    次回の記事ではテンプレート階層のheader.phpを作成した際の内容にします。

     

    参考と引用

    世界一わかりやすいWordPress 導入とサイト制作の教科書

    テーマにスタイルシート(cssファイル)を正しい方法で読み込む

    関数リファレンス