テーマを一から作成する 第3回目
前回はindex.phpとstyle.cssに具体的にコードを記述したので、今回はindex.phpテンプレートをヘッダー（header）/サイドバー（sidebar）/フッター（footer）に分割していきます。またCSSをリンクさせる際にテンプレートに記述する方法ではなく、functions.phpに記述する方法を説明します。
第2回目 style.cssのテーマ詳細[bloginfo(‘stylesheet_url’)]
スポンサーリンク
以下はこれから分割していくindex.phpのコードです。
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><?php bloginfo('name'); ?></title> <meta name="description" content="<?php bloginfo('description'); ?>" /> <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>"> </head> <body> <header> <h1><?php bloginfo('name'); ?></h1> </header> <main> メインコンテンツ </main> <aside> サイドバー </aside> <footer> フッター </footer> </body> </html> |
index.phpは実際にページを見てみると、以下のように表示されます。
一般的なサイトの多くはheaderやsidebarなどに分割することができ、それを別々のテンプレートで作成しておけばWordPressでの作業も効率的になります。これから具体的な作業に入ります。
まずは新たに 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><?php bloginfo('name'); ?></title> <meta name="description" content="<?php bloginfo('description'); ?>" /> <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>"> </head> <body> <header> <h1><?php bloginfo('name'); ?></h1> </header> |
sidebar.php
|
1 2 3 |
<aside> サイドバー </aside> |
footer.php
|
1 2 3 4 5 6 |
<footer> フッター </footer> </body> </html> |
次にindex.phpにおいて header.php/sidebar.php/footer.php のそれぞれのテンプレートを読み込むようにします。
index.php
|
1 2 3 4 5 6 7 8 9 |
<?php get_header(); ?> <main> メインコンテンツ </main> <?php get_sidebar(); ?> <?php get_footer(); ?> |
これで3つのファイルをindex.phpに取り込む込むことができましたが、header.phpとfooter.phpにはそれぞれ以下の関数を必ず記述しなくてはいけません。以下の関数を記述することによって、WordPress内のJavaScript等が実行されるようになります。
wp_head()
wp_footer()
wp_head()はheader.phpの</head>の前の部分、
|
1 2 |
<?php wp_head(); ?> </head> |
wp_footer()はfooter.phpの</body>の前の部分に記述します。
|
1 2 3 |
<?php wp_footer(); ?> </body> </html> |
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に以下のコードを記述して下さい。
|
1 2 3 4 5 6 |
<?php function sample_scripts(){ wp_enqueue_style('style', get_stylesheet_uri() ); } add_action('wp_enqueue_scripts', 'sample_scripts'); |
上記のコードを説明すると、定義した sample_scripts関数 を wp_enqueue_scriptsアクションフックのタイミングで呼び出しています。
add_action(A, B) → AアクションフックのタイミングでB関数を呼び出す
sample_scripts関数には wp_enqueue_style 関数を登録しています。
実際にブログ画面を表示させてソースコードを確認すると、wp_head()で表示されている領域に下記のようにstyle.cssへのリンクが貼られているのが分かります。
|
1 |
<link rel='stylesheet' id='style-css' href='ワードプレスのディレクトリ/wp-content/themes/sample/style.css?ver=〇〇' type='text/css' media='all' /> |
wp_enqueue_styleのパラメータの一つ目の ‘style’ は id=’style-css’の 「style」名部分に反映され、二つ目のパラメータにはCSSのアドレスを登録しています。
以下、本記事内で変更のあった最終的なコードを記載します。
header.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><?php bloginfo('name'); ?></title> <meta name="description" content="<?php bloginfo('description'); ?>" /> <?php wp_head(); ?> </head> <body> <header> <h1><?php bloginfo('name'); ?></h1> </header> |
CSSへのリンクを外し、wp_head関数を追加。
footer.php
|
1 2 3 4 5 6 7 |
<footer> フッター </footer> <?php wp_footer(); ?> </body> </html> |
wp_footer関数を追加。
今回作成したテーマファイルは以下のリンクからダウンロードできます。
次回は「記事」の部分を作成していきます。
第4回目
参照ページ・文献
WordPress
Codex日本語版
スポンサーリンク
