[WP02]テンプレートの分割とfunctions.phpの作成
「WordPressの教科書」でサイトを作成する企画の2回目です。今回はテンプレートの分割とfunctions.phpの作成を行いました。
「本格ビジネスサイトを作りながら学ぶWordPressの教科書」で勉強をします
これは「本格ビジネスサイトを作りながら学ぶWordPressの教科書」を頭から順にできるところまで自力でやっていこうという企画です。
WordPressでブログではなくてサイトを作りたくて始めました。
テキストを進めながら、私がつまずいたところや理解したことを書いていきたいと思います。
今日は昨日の「WordPressの教科書」第1章勉強開始しましたの続きです。
第1章「まず表示させてみよう」の、1-3「テンプレートを分割しよう」からです。
1-3では1-2で作成したindex.phpを役割毎に分割します。
分割したファイルの呼び出しは以下のようになります。
|
1 2 3 |
<?php get_header(); ?>; <?php get_sidebar('top'); ?>; <?php get_footer(); ?>; |
1-4ではテンプレートタグを追加していきます。
サイト名称、キャッチフレーズの自動出力
|
1 2 |
<?php bloginfo('name'); ?>; <?php bloginfo('description'); ?>; |
テーマ作成時に必ず記述すべきテンプレートタグ
|
1 2 |
<?php wp_head(); ?>; <?php wp_footer(); ?>; |
サイトのホームURLを出力
|
1 |
<?php echo home_url('/'); ?>; |
最後にダッシュボードからキャッチフレーズを修正してひとまずできあがり。
ここまで勉強開始から31分でした。
次の1-4は「カスタムヘッダーでメインイメージを表示させよう」です。
ここではfunctions.phpを作成します。
functions.phpはテンプレート内で利用する独自のテンプレートタグや関数を定義するための重要なファイルです。
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php // カスタムヘッダー add_custom_image_header('', '__return_false'); define('NO_HEADER_TEXT', true); define('HEADER_TEXTCOLOR', ''); define('HEADER_IMAGE', '%s/images/top/main_image.png'); define('HEADER_IMAGE_WIDTH', 950); define('HEADER_IMAGE_HEIGHT', 295); |
functions.phpをアップロードしただけで、「ヘッダー」が設定できるようになりました。
用意されているヘッダーの画像をアップロードして灰色の枠を差し替えます。
あとはheader.phpにテンプレートタグを記述して、funcions.php内で定義した内容が出力されるようにします。
|
1 |
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; >" alt=""; /> |
サイトを表示させたらトップ画像が変わって、完成イメージに一歩近づきました。
ここまでで勉強開始から53分でした。
これで1章の「まず表示させてみよう」が終了になりました。
次回は2章の「基本サイトの構築」です。
今日のポイント
- テンプレートはヘッダーやフッター、サイドバーを別ファイルに分割する
- 分割したファイルの呼び出しは <?php get_header(); ?> のようにする
- サイト名称・キャッチフレーズは直書きではなく <?php bloginfo(‘ほにゃらら’); ?> を使う
- <?php wp_head(); ?> と <?php wp_footer(); ?> はテンプレートに必ず入れる
- functions.phpはテンプレート内で利用する独自のテンプレートタグや関数を定義するためのファイル
- functions.phpで定義したものは <?php echo HEADER_IMAGE_WIDTH; ?> のように呼び出す
今回は特に難しいところはありませんでした。
テキストについて
最終的にできあがるのはショッピングモール開発会社のサイトです。
サンプルサイト↓
パシフィックモール開発株式会社 | 世界の地域と人とを結ぶ、パシフィックモール開発株式会社
私と一緒に勉強を進めたい方はどうぞ！ブログじゃなくてサイトを作る教科書です。
以上、しゅうまい(@shumai)でした。
— しゅうまいさん (@shumai) 2013年6月3日
しゅうまい(関連記事
