
WordPressはヘッダー・サイドバー・フッターなどをパーツ化して読み込んで1つのページとして構成してから表示しています。
そこで今回は、前回ご紹介した「静的HTMLサイトの共通部分をPHPによるパーツ化する方法」の発展版として、WordPressのテンプレートテーマ作成の初期段階である、静的HTMLサイトの共通部分をパーツ化して読み込む方法をご紹介したいと思います。
既存の静的HTMLファイル
まず、WordPressでテンプレートテーマを制作する静的HTMLサイトをコーディングします。
下記に、今回使用する静的HTMLファイルを示したいと思います。
<!doctype html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>無題ドキュメント</title> <link rel="apple-touch-icon" href="./images/touch-icon.png" /> <link rel="shortcut icon" href="./images/favicon.ico" /> <link rel="stylesheet" type="text/css" media="all" href="./style.css" /> </head> <body class="home"> <div id="wrap"> <header> <h1><a href="#"><img src="./images/logo.png" alt="ロゴ" /></a></h1> </header> <!--グローバルナビゲーション部分--> <nav> <ul id="menu"> <li><a href="index.html">TOP</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="company.html">COMPANY</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </nav> <!--グローバルナビゲーション部分--> <article> <h2>コンテンツ部分</h2> <p>テキスト・テキスト・テキスト・テキスト・テキスト</p> </article> <section id="sidebar"> <aside> <ul id="side-menu"> <li><a href="index.html">TOP</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="company.html">COMPANY</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </aside> </section> <!-- #sidebar end --> <div id="footer-container"> <footer> <p id="copyright"><small>Copyright © 2015 <a href="#">BUBURIN</a> All rights reserved.</small></p> </footer> </div> <!-- #footer-container end --> </div> <!-- #wrap end --> </body> </html>
静的HTMLファイルの分割
次に既存の静的HTMLファイルを分割して、下記のようにphpの別ファイルとして保存する。
<!doctype html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>無題ドキュメント</title> <link rel="apple-touch-icon" href="./images/touch-icon.png" /> <link rel="shortcut icon" href="./images/favicon.ico" /> <link rel="stylesheet" type="text/css" media="all" href="./style.css" /> </head> <body class="home"> <div id="wrap"> <header> <h1><a href="#"><img src="./images/logo.png" alt="ロゴ" /></a></h1> </header> <!--グローバルナビゲーション部分--> <nav> <ul id="menu"> <li><a href="index.html">TOP</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="company.html">COMPANY</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </nav> <!--グローバルナビゲーション部分-->
<article> <h2>コンテンツ部分</h2> <p>テキスト・テキスト・テキスト・テキスト・テキスト</p> </article>
<section id="sidebar"> <aside> <ul id="side-menu"> <li><a href="index.html">TOP</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="company.html">COMPANY</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </aside> </section> <!-- #sidebar end -->
<div id="footer-container"> <footer> <p id="copyright"><small>Copyright © 2015 <a href="#">BUBURIN</a> All rights reserved.</small></p> </footer> </div> <!-- #footer-container end --> </div> <!-- #wrap end --> </body> </html>
必須テンプレートタグ
「WordPressの管理画面・ダッシュボードとサイト表示を切り替えるツールバーの表示」、「メタタグの出力」、「Javascriptライブラリの読み込み」、「フックポイントによるプラグイン動作の為」などテーマ作成には必ず記述すべきテンプレートタグです。
<?php wp_head(); ?>
上記のコードを‹/head›の直前に記述する。
<?php wp_footer(); ?>
上記のコードを‹/body›の直前に記述する。
パスに関するテンプレートタグ
WordPressのテンプレートタグを用いて、パスやURLやスタイルシートなどの出力する。
<?php bloginfo('stylesheet_url'); ?>
上記のコードで、現在有効化されているテーマのディレクトリ内のスタイルシート「style.css」までのURLを自動的に出力する。
<?php bloginfo('template_url'); ?>
上記のコードで、現在有効化されているテーマのディレクトリのURLを出力する。
<?php echo home_url('/'); ?>
上記のコードで、トップページへのリンクを出力する。
その他のテンプレートタグ
WordPressのテンプレートタグを用いて、サイト名やキャッチフレーズなどの出力する。
<?php bloginfo('name'); ?>
上記のコードで、サイト名を出力する。
<?php bloginfo('description'); ?>
上記のコードで、サイトのキャッチフレーズ・descriptionを出力する。
テンプレートタグによるPHPファイルの修正
次に既存の静的HTMLファイルを修正して、下記のようにphpの別ファイルとして保存する。
<!doctype html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title><?php bloginfo('name'); ?></title> <link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/images/touch-icon.png" /> <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" /> <?php wp_head(); ?> </head> <body class="home"> <div id="wrap"> <header> <h1><a href="<?php echo home_url('/'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" /></a></h1> </header> <!--グローバルナビゲーション部分--> <nav> <ul id="menu"> <li><a href="index.html">TOP</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="company.html">COMPANY</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </nav> <!--グローバルナビゲーション部分-->
<div id="footer-container"> <footer> <p id="copyright"><small>Copyright © 2015 <a href="<?php echo home_url('/'); ?>">BUBURIN</a> All rights reserved.</small></p> </footer> </div> <!-- #footer-container end --> </div> <!-- #wrap end --> <?php wp_footer(); ?> </body> </html>
PHPファイルの読み込み
<?php get_header(); ?>
上記のテンプレートタグを用いたコードで、分割したPHPファイルを読み込みます。
<?php get_sidebar('top'); ?>
上記のようにテンプレートタグに引数を持たせて読み込み、ファイル名を一部変更して分割したPHPファイルを読み込みます。
分割ファイルの読み込み
次に分割したPHPファイルを下記のように読み込みます。これにより、WordPress上にサイト・テーマを構築することができます。
<?php get_header(); ?> <article> <h2>コンテンツ部分</h2> <p>テキスト・テキスト・テキスト・テキスト・テキスト</p> </article> <?php get_sidebar('top'); ?> <?php get_footer(); ?>
参考サイト
参考にさせていただいたサイトを下記に示したいと思います。