神奈川県伊勢原市在住のkusuのサイトです!ホームページ制作のご依頼等承っております!

WordPressで作ったオリジナルサイトの各パーツを読み込ませるには?

2015.04.29
WordPress

 オリジナルサイトをWordPressで制作した時、更新を効率よく行うにはheadersidebarなどの各パーツを別ファイルとしてわけて、それを読み込ませる方法がオススメです!
 何故かというと、例えば5ページあるサイトの
「headerに表記されている文言を変更したい」
となった時に1つのPHPファイルに全て記述していた場合は5つのPHPファイルのheaderを変更しなければいけません。それでも悪い訳ではないのですが、そのぶんの作業時間を考えるとなかなか大変です…。
 そこで各パーツを別々のPHPファイルとしてわけて保存し、それをWordPressのテンプレートタグを使って読み込ませることで、header部分を更新したい時はheader.phpを更新するだけでそれを読み込んでいるページのheader部分も自動的に更新される…という仕組みになっています!

 そこで今回はindex.phpにある各パーツをわけて、それを読み込ませるテンプレートタグを紹介しつつ解説したいと思います!ちなみに今回はサンプルページを元に紹介します!
 見本のソースコードは以下になります。

<!DOCTIPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="UTF-8">
<wp_head(); ?>
</head>

<body>

<div id="header">

<header>
ヘッダー
</header>

<nav>
<ul>
<li>ナビ</li>
<li>ナビ</li>
<li>ナビ</li>
<li>ナビ</li>
</ul>
</nav>

</div>

<div id="content">
コンテンツ
</div>

<sidebar>
サイドバー
</sidebar>

<footer>
フッター
</footer>

<wp_footer(); ?>
</body>
</html>

1. header.phpを作成

 まず、header部分を読み込ませるためにheader.phpを作成したいと思います!
 該当部分は見本ソースでいう

<!DOCTIPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="UTF-8">
<wp_head(); ?>
</head>

<body>

<div id="header">

<header>
ヘッダー
</header>

<nav>
<ul>
<li>ナビ</li>
<li>ナビ</li>
<li>ナビ</li>
<li>ナビ</li>
</ul>
</nav>

</div>

この部分になります。
この部分をindex.phpから切り取り、切り取ったものを貼り付けた新規ファイルをheader.phpとして保存します。これでheader.phpが完成です!

2. sidebar.phpを作成

 続いてsidebar.phpを作りたいと思います!見本のソースコードの

<sidebar>
サイドバー
</sidebar>

上記部分を切り取り、新規ファイルにペーストしてsidebar.phpとして保存してあげます。

3. footer.phpを作成

 続いてfooter.phpを作成したいと思います!見本のソースコードでいう

<footer>
フッター
</footer>

<wp_footer(); ?>
</body>
</html>

この部分を切り取り、新規ファイルに貼り付けたあとにfooter.phpとして保存してあげて完成となります!

4. 各パーツを読み込ませる

 以上で各パーツを分割できたので、これを読み込ませる作業に入っていきます!ここまでの作業を行うと、index.phpは

<div id="content">
コンテンツ
</div>

という風になっていると思います。
ここから、各パーツを読み込ませる作業に移っていきます。

 header.phpを読み込ませるには
<php get_header(); ?>
このテンプレートタグを読み込ませたい部分に記述してあげます。
 続いてsidebar.phpを読み込ませるには
<php get_sidebar(); ?>
を記述してあげます。
 そして最後にfooter.phpを読み込ませるには
<php get_footer(); ?>
を記述してあげます。

 以上のテンプレートタグをindex.phpに記述してあげると

<?php get_header(); ?>

<div id="content">
コンテンツ
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

このようになると思います!
そしてこのように記述してあげることで各パーツを読み込み、表示してくれるようになります。
※ここまでの作業を行い、編集する前のindex.phpの時と同じデザインでサイトが表示されるようになればOKです!

 WordPressでサイトを制作する上で、今回紹介したような各パーツを読み込ませるにはテンプレートタグを使えば実現可能なので、実際に使ってみてはいかがでしょうか(^-^)

スポンサーリンク
検 索