header/saidebar/footerに分割する[wp_head][wp_enqueue_style]

2016年6月17日

テーマを一から作成する 第3回目

 

前回はindex.phpとstyle.cssに具体的にコードを記述したので、今回はindex.phpテンプレートをヘッダー(header)/サイドバー(sidebar)/フッター(footer)に分割していきます。またCSSをリンクさせる際にテンプレートに記述する方法ではなく、functions.phpに記述する方法を説明します。

 

第2回目 style.cssのテーマ詳細[bloginfo(‘stylesheet_url’)]

 

スポンサーリンク

 

以下はこれから分割していくindex.phpのコードです。

 

index.php

 

index.phpは実際にページを見てみると、以下のように表示されます。

 

サンプル

 

一般的なサイトの多くはheaderやsidebarなどに分割することができ、それを別々のテンプレートで作成しておけばWordPressでの作業も効率的になります。これから具体的な作業に入ります。

 

 

indexを分割

 

 

まずは新たに header.php/sidebar.php/footer.php の3つのテンプレートファイルを用意して、index.phpのあるテーマディレクトリ(/wp-content/themes/sample/以下)にアップロードして下さい。これらのテンプレートは、モジュールテンプレートと呼びます。外観>テーマの編集 で見てみるとテーマフッターやテーマヘッダーのように認識されていることが分かります。

 

テーマ編集

 

 

次にindex.phpに記述されているコードのheader/sidebar/footer部分をコピーして、それぞれ header.php/sidebar.php/footer.php にペーストしていきます。

 

header.php

 

sidebar.php

 

footer.php

 

 

次にindex.phpにおいて header.php/sidebar.php/footer.php のそれぞれのテンプレートを読み込むようにします。

 

index.php

 

これで3つのファイルをindex.phpに取り込む込むことができましたが、header.phpとfooter.phpにはそれぞれ以下の関数を必ず記述しなくてはいけません。以下の関数を記述することによって、WordPress内のJavaScript等が実行されるようになります。

 

wp_head()

wp_footer()

 

wp_head()はheader.phpの</head>の前の部分

 

wp_footer()はfooter.phpの</body>の前の部分に記述します。

 

wp_head及びwp_footer関数を読み込むと、ログイン状態において画面の上部にツールバーが表示されるようになります。

 

ツールバー

 

ツールバーは各ユーザの編集画面において、ツールバーのチェックを外せば非表示にすることが可能です。

 

ツールバーチェック 

 

 

wp_enqueue_styleについて


 

これまでの説明において、スタイルシート(style.css)へのリンクはheader.phpテンプレートに直接記述してきましたが、functions.phpに記述する方法を説明します。この理由としては、テンプレートにそのままCSSのリンクを記述すると将来的に導入するプラグインによってはCSSが書き換えられてしまうといった問題が発生する恐れがあるからです。

 

functions.phpに wp_enqueue_style 関数を記述することによって、CSSへのリンクをwp_head()の部分に表示させることができます。

 

まずは functions.phpファイル を用意し(/wp-content/themes/sample/以下)にアップロードしたら、functions.phpに以下のコードを記述して下さい。

 

 

上記のコードを説明すると、定義した sample_scripts関数 を wp_enqueue_scriptsアクションフックのタイミングで呼び出しています。

 

add_action(A, B) → AアクションフックのタイミングでB関数を呼び出す

 

sample_scripts関数には wp_enqueue_style 関数を登録しています。 

 

実際にブログ画面を表示させてソースコードを確認すると、wp_head()で表示されている領域に下記のようにstyle.cssへのリンクが貼られているのが分かります。

 

wp_enqueue_styleのパラメータの一つ目の ‘style’ は  id=’style-css’の 「style」名部分に反映され、二つ目のパラメータにはCSSのアドレスを登録しています。

 

以下、本記事内で変更のあった最終的なコードを記載します。

 

 

header.php

CSSへのリンクを外し、wp_head関数を追加。

 

footer.php

wp_footer関数を追加。

 

 

今回作成したテーマファイルは以下のリンクからダウンロードできます。

 

ダウンロード

 

次回は「記事」の部分を作成していきます。

第4回目

投稿記事一覧を表示させる[ループ]

 

 

参照ページ・文献


 

WordPress

Codex日本語版

関数リファレンス/wp enqueue style 

 

 

 

 

スポンサーリンク

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー