見出し画像

WordPressでのテンプレートの仕組み

羊 
<html>
    <head></head>
    <body>
        <header></header>
        <footer></footter>
    </body>
</html>

Dreamweaverのテンプレート機能

今までのサイト制作ではDreamweaverを使用していました。Dreamweaverでは、body要素以外の共通項目をテンプレートファイルに記述し、そのテンプレートファイルから新規にファイルを作成し、各ページを作り込んでいく仕様になっています。帽子と靴だけ同じものを見につけている原型となるものからクローンを複製して、服だけ着せ替えるようなイメージですね。上記のbody要素だけページごとに書きかえていく感じ。なので原型の帽子を変更すると、すべてのクローンの帽子も一括で変更される。Dreamweaverのとても便利な機能です。


WordPressではどうやってテンプレートを実装するの？

WordPressのテンプレート構造でポイントとなるのは「共通項目は外部ファイルとして読み込む」ということみたいです。イメージはこう。

画像1

まずはheader.phpとfooter.phpを作成し、該当箇所をコードに記述しておきます。header.phpにはグローバルメニューやヒーローエリアまでとなる<header>タグまでを記述。footer.phpには<footer>以降から最後まで。それらをindex.php内で呼び出す仕組みとなっているわけです。
ヘッダーを呼び出すコードはget_header()
フッターを呼び出すコードはget_footer()
これらをindex.phpに記述するとこのようになります。

<?php get_header(); ?>
<?php get_footer(); ?>

え？これだけ？そうこれだけです。これがサーバー内で処理されてページに出力された結果がこちら。

<html>
    <head></head>
    <body>
        <header></header>
        <footer></footer>
    </body>
</html>

ちゃんとした構造で出力されていますね。外部ファイルの読み込みなんてcssの読み込みとかで普通に行っていたことなんですが、僕としてはhtmlのコードをパーツに切り分けてそれを読み込むことでテンプレート構造を成立させているということは「ほっほー！」と、血湧き肉躍る体験でした。


共通パーツの細分化

Dreamweaverのテンプレート機能を使いこなしていなかっただけかもしれませんが、WordPressでは、ヘッダーとフッターを別ファイルで管理するなど、共通パーツを細分化できるので、管理がとてもしやすいのではないかと。今後はDreamweaverをコードエディタとしてのみ使って、テンプレート機能はWordPressでという流れに持っていける・・・のかな？


まとめ

共通項目はget_ファイル名で外部ファイルからパーツとして読み込む。
ヘッダーは　get_header()
フッターは　get_footer()


この初心者めにご指導などいただける神様のような方がいらっしゃいましたら、ぜひコメントをお願いいたします。ご意見やご質問なども大歓迎です。

この記事が気に入ったらサポートをしてみませんか？