FileMaker以外にWordPress、node.jsなど興味あることを発信するページ!

FileMakerマニアが語るプログラミング雑学

WordPress

オリジナルテーマ作成から深掘りするWordPress その3

投稿日:

今回は、テンプレートファイルについてです。
htmlでwebサイトを構築する際に「面倒だな〜」と思うことがあります。それを解決すべくWordPressには便利な機能が備えられています。その一つがテンプレートパーツによるページ生成です。

miku-nosuke

このページを読むことで、

  • 動的サイト、静的サイトについて
  • テンプレートパーツ
  • テンプレートファイルについて

がわかるようになります。

面倒だと思うこと

 htmlでサイト構築する時に面倒だな〜と思うこと。その一つが同じ記述を何度もすることです。webサイトは複数ページで構成されることがほとんどです。通常はトップページから各リンク先へ飛んでいきます。トップページにはほとんどの場合ヘッダー、メインコンテンツ、フッターで構築されています。
 ヘッダーにはロゴマークや企業名、ナビゲーションメニューが配置されているのが一般的でしょう。多くの場合、トップページ以外にも同様にロゴマークや企業名、ナビゲーションメニューが配置されています。つまり、同じコードが複数ページに記述されていることになります。
 面倒なこととはコードを修正する場合、複数回同じ作業をしなければならないと言うことです。また、このようなことはバグの温床になること請け合いです。

動的サイト

 そこで、ヘッダーや、フッターなどを一つの部品として考え、各ページはその部品を呼び出すという方法をとれば作業効率が上がります。なにしろ、修正するのは部品であるコードだけで済むのですから。
 下図を見てください。例えば、図中のaaaaと書いてあるところをaaaAに書き換えるには各ページ毎にコードを書き換えていかなければなりません。一方、ヘッダーを一つの部品として扱い、各ページでそれを読み込む方式にすると修正は部品の部分だけコードを書き換えれば良いことになります。

fig1 上図:ページ毎にコードを記述 下図:ヘッダーを部品とした場合

 例では2ページしかありませんのでそれほど差はありません。しかし、これが10倍の20ページともなるとその労力は・・・、心が折れてしまいます。
 ヘッダーの他にフッターやサイドバーなども同様に部品として扱い、表示するページによって部品の構成を変えて一つのページを生成していく方法を動的サイトと呼びます。実際の仕組みはこの部品をデータベースに保管しておき、phpがどのデータが必要か命令します。例えばこのページにはヘッダー、メイン、サイドバー、フッターが必要とphpが命令を出し、データベースから指定された部品(データ)を取り込みページを生成します。仕組みとしてはrailsやDjangoなどのフレームワークと同じですねぇ。

それで、テンプレートパーツとは何だよ

結論から言います。
テンプレートパーツとは上述のようにヘッダーやフッターなどを部品としたファイルのこと。

では、実際にトップページを見てみます。

fig2 Top Pageの例

fig2ではfooter部分が見えませんが実際には下図のように各sectionで構成されています。テンプレートパーツとは各section、つまりheader、main、footer、sidebarを部品とみなすことです。それで、トップページ以外でも部品として使い回し、各々のページを生成することとなります。

fig3 トップページの構成

次の章ではこの構成をもとに各ブロックをパーツ化していきます。

テンプレートパーツを作る

 テンプレートパーツを作るということは、各パーツとして新しくphpファイルを作るということになります。headerをパーツとして作るにはheader.phpを作ります。同様にfooterならfooter.phpをというように。
 それでは、下記 index.phpのコードをパーツ化していきましょう。あらかじめエディタソフトでheader.phpファイルを作成しておきます。その後、header.phpに<!DOCTYPE html>から</header>までをカット&ペーストします。

fig4 VS codeでheader.phpとfooter.phpを作成したところ
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.7.1/gridlex.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header>
    <div class="header__logo"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt=""></a></div>
    <div class="header__MainVisual">
      <img src="<?php echo get_template_directory_uri(); ?>/images/MV.jpg" alt="">
    </div>
    <div class="container">
      <div class="header__nav grid-center">
        <ul class="header__nav__items col-10 grid">
          <li class="header__nav__item col-3"><a href="/">お店紹介</a></li>
          <li class="header__nav__item col-3"><a href="/">お知らせ</a></li>
          <li class="header__nav__item col-3"><a href="/">アクセス</a></li>
          <li class="header__nav__item col-3"><a href="/">お問合せ</a></li>
        </ul>
      </div>
    </div>
  </header>

<main class="main">
  <div class="global__container grid-center">
    <div class="main__container col-7">
      <div class="osusume grid">

カット&ペーストで出来たheader.phpは当然下のようになりやンす。

<!DOCTYPE html>
<html lang="ja">

<head>
    省略
</head>

<body>
  <header>
    省略
  </header>

そして、index.phpは下コードのようになっています。このままではカット&ペースト下部分が欠損していますのでこれを補います。

<main class="main">
  <div class="global__container grid-center">
    <div class="main__container col-7">
      <div class="osusume grid">
      省略

インクルードタグ

 index.phpのカット&ペーストにより欠損部分を読み込みます。それは先ほどのheader.phpに書かれていますね。これを読み込むことで補うことが出来ます。そのためにはインクルードダグを使います。インクルードダグとはテンプレートパーツを読み込むためにWordPressが用意した関数です。
 index.phpに下のように<?php get_header(); ?>を付けます。

<?php get_header(); ?>
<main class="main">
  <div class="global__container grid-center">
    <div class="main__container col-7">
      <div class="osusume grid">
      省略

同じようにfooterやsidebarに対してもテンプレートパーツで部品化しインクルードダグで読み込むという事を行います。ちなみに、インクルードダグには以下のものがあるようです。詳しく知りたい方はWordPressのオフィシャルサイトにあるインクルードタグ – WordPress Codex 日本語版を覗いてみて下さい。

  • get_header()
  • get_footer()
  • get_sidebar()
  • get_template_part()

まとめ

では、今日のまとめです。

  • 動的サイトとは、ヘッダーやフッターなどを部品として扱い、表示するページによって部品の構成を変えて一つのページを生成していくサイト。
  • テンプレートパーツとは上述のようにヘッダーやフッターなどを部品としたファイルのこと。
  • インクルードダグとはテンプレートパーツを読み込むためにWordPressが用意した関数

このようにWordPressはphpを組み合わせて動的にページを生成しているんですね。今回はここまでです。次回ヘッダーとかの作法です。

Follow me!

-WordPress

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

オリジナルテーマ作成から深掘りするWordPress その1

今回はオリジナルテーマの作成を取り上げます。cocoonなどのテーマをカスタマイズする方法について調べる一方、オリジナルテーマを作るってどうやるんだろうと思いを巡らせていたところ意外にも簡単だったので …

オリジナルテーマ作成から深掘りするWordPress その2

前回、index.htmlからindex.phpへ変更した時にstyle.cssやimgのパスを変更しました。パスをエディタソフトで書き換えましたが、WordPressには便利な関数があります。今回は …

オリジナルテーマから深掘りするWordPress その4

今回はテンプレートファイルのお作法について学習したことを書きます。お作法を施すことでよりWordPressっぽくなります。 miku-nosuke この記事を読むことでwp_head()、blogin …

WordPressカスタマイズ その2 初心者でもわかる、子テーマをつくる方法

前回は子テーマの必要性について記事にしました。今回は実際に子テーマを作ってみます。必要なスキルとしては以下になります。 htmlの基礎知識(コードを書いたことがある)cssの基礎知識VS codeなど …

no image

シンプルな例でFLOCSSについて考えた

皆さんこんばんは。RasieTechのWordPressコースmiku-nosukeです。今回の記事はCSS設計です。いままで見て見ぬふりをしてきました。しかし、CSS設計は避けては通れない道。ココを …

プロフィール

miku-nosuke

職業:web制作者
生息地:東京都
趣味:ジョギング、コーディング、ガーデニング

もの作り大好き!FileMakerは25年の経験で多くの業務システムを作成。html、cssなどフロントも大好き!
まったくの別業界から好きなことに没頭したい、好きなことを仕事にしたいと思いプログラミングを学習する。それまではノンコードデータベースソフトFileMakerに没頭する。はまりすぎてFileMaker選手権で受賞しFileMakerを中心に活動する。
どの言語を学ぶにもhtml、css を知らないと話にならないと気づく。html、css、WordPress、サーバー構築などを語ります。

50歳を過ぎてふと思ったんだ、自分のやりたい事って今の仕事だったのか?
そんな時にたまたま見た日本人3Dグラフィックデザイナーの成田さんを題材にした番組。彼は45歳でグラフィックデザイナーを志、ついにはStarWarsの制作を手がける。そんな彼の言葉「人生に失敗していたんだ。この年になってはじめて自分のやりたいことに気付き、やり直したい」に感銘を受ける。

PAGE TOP