[WP02]テンプレートの分割とfunctions.phpの作成

お役に立ったらポチっとな

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

「WordPressの教科書」でサイトを作成する企画の2回目です。今回はテンプレートの分割とfunctions.phpの作成を行いました。

wordpress

「本格ビジネスサイトを作りながら学ぶWordPressの教科書」で勉強をします

これは「本格ビジネスサイトを作りながら学ぶWordPressの教科書」を頭から順にできるところまで自力でやっていこうという企画です。
WordPressでブログではなくてサイトを作りたくて始めました。
テキストを進めながら、私がつまずいたところや理解したことを書いていきたいと思います。

今日は昨日の「WordPressの教科書」第1章勉強開始しましたの続きです。
第1章「まず表示させてみよう」の、1-3「テンプレートを分割しよう」からです。

1-3では1-2で作成したindex.phpを役割毎に分割します。
分割したファイルの呼び出しは以下のようになります。

1-4ではテンプレートタグを追加していきます。
サイト名称、キャッチフレーズの自動出力

テーマ作成時に必ず記述すべきテンプレートタグ

サイトのホームURLを出力

最後にダッシュボードからキャッチフレーズを修正してひとまずできあがり。
ここまで勉強開始から31分でした。

次の1-4は「カスタムヘッダーでメインイメージを表示させよう」です。
ここではfunctions.phpを作成します。
functions.phpはテンプレート内で利用する独自のテンプレートタグや関数を定義するための重要なファイルです。

functions.phpをアップロードしただけで、「ヘッダー」が設定できるようになりました。

wptextbook 1

用意されているヘッダーの画像をアップロードして灰色の枠を差し替えます。

あとはheader.phpにテンプレートタグを記述して、funcions.php内で定義した内容が出力されるようにします。

サイトを表示させたらトップ画像が変わって、完成イメージに一歩近づきました。

wptextbook 2

ここまでで勉強開始から53分でした。
これで1章の「まず表示させてみよう」が終了になりました。

次回は2章の「基本サイトの構築」です。

今日のポイント

  • テンプレートはヘッダーやフッター、サイドバーを別ファイルに分割する
  • 分割したファイルの呼び出しは <?php get_header(); ?> のようにする
  • サイト名称・キャッチフレーズは直書きではなく <?php bloginfo(‘ほにゃらら’); ?> を使う
  • <?php wp_head(); ?> と <?php wp_footer(); ?> はテンプレートに必ず入れる
  • functions.phpはテンプレート内で利用する独自のテンプレートタグや関数を定義するためのファイル
  • functions.phpで定義したものは <?php echo HEADER_IMAGE_WIDTH; ?> のように呼び出す

今回は特に難しいところはありませんでした。

テキストについて


最終的にできあがるのはショッピングモール開発会社のサイトです。
サンプルサイト↓
http://pacific.prime-strategy.co.jp/
パシフィックモール開発株式会社 | 世界の地域と人とを結ぶ、パシフィックモール開発株式会社

私と一緒に勉強を進めたい方はどうぞ!ブログじゃなくてサイトを作る教科書です。

この記事を書いたのは

しゅうまい(@shumai)です。 新しいこと楽しいこと不思議なこと、わくわくすることが大好きです。MacBook Pro 15inchとiPhone 7 Plusの大画面コンビでブログを更新しています。→ 詳しいプロフィール

お役に立ったらポチっとな

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

最新情報はフォローしてね♪