サイトの一部をWordPressにして、WP外のテンプレートを読み込む
サイトの1階層下のディレクトリにWordPressをインストールして、サイト全体のテンプレートを適用させたい、というときにやったことをまとめました。
構造を決定
このように構築したLinuxのWebサーバに、こんな構造のサイトを想定しました。
/moduleというディレクトリにheader.phpなどの部品を入れておいて、サイト全体で適用させます。シンプルな内容なのでfooterは今回つくりませんでした。
定期的に発行される社内報をブログ形式で閲覧できるようにしたい、という要望により/infoというディレクトリにWP（ver3.9.1）をインストールしました。このWPも/moduleのテンプレートを適用させます。
固定ページをトップにした、サイトまるごとWPっていうのもやったことがあるのですが、やはり一長一短ですよね。WPは使うけど、WP外からのテンプレートを読み込み、WP外のトップページへ新着記事を出力する、という形もやってみたらとても勉強になりました。
メインのテンプレートをつくる
WPへ取り掛かる前に、まずは他のページを作ってテンプレートの動作確認をしておかねば。
各ページ構想
<?php
$slug = explode('/', $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]);
$navi = ($slug[1] == '') ? 'home' : $slug[1];
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ページタイトル</title>
<link rel="stylesheet" href="/module/style.css">
</head>
<body>
<div id="wrapper">
<!-- Header -->
<div id="header">
<ul class="<?php echo $navi; ?>">
<li class="home"><a href="/">HOME</a></li>
<li class="aaa"><a href="/aaa/">aaa</a></li>
<li class="bbb"><a href="/bbb/">bbb</a></li>
<li class="info"><a href="/info/">ブログ</a></li>
</ul>
</div><!-- /#header -->
<!-- Contents -->
<div id="contents">
<h1>タイトル</h1>
<p>コンテンツ</p>
</div><!-- /#contents -->
</div><!-- /#wrapper -->
</body>
</html>
例として、こんな感じのphpファイルにしたいと思います。
まず1～4行目は何をしているかというと、現在のURL（http://を除く）を「/」で分割して$slugという配列に入れると、1番めの配列にディレクトリ名が入るはずなので、それを取得しておきます。
イメージはこんな感じ。ここを取得しておけば、そのディレクトリ内のページならば、下層のページでも同じ文字列が取得できます。（トップページのみ空白になるので、空白ならhomeという文字列を入れてやります。）これをハイライトしてある18行目でクラス名として出力してやれば、ナビの実装が簡単になります。
で、好みの表示になるように/module/style.cssにCSSを記述していきます。11行目でそれを読み込んでいるわけですが、後で部品化して、どの場所からheader.phpが読み込まれても大丈夫なように、絶対パスで指定しておきます。
動作確認出来たら、分割します。
/module/header.php
<?php
$slug = explode('/', $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]);
$navi = ($slug[1] == '') ? 'home' : $slug[1];
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ページタイトル</title>
<link rel="stylesheet" href="/module/style.css">
</head>
<body>
<div id="wrapper">
<!-- Header -->
<div id="header">
<ul class="<?php echo $navi; ?>">
<li class="home"><a href="/">HOME</a></li>
<li class="aaa"><a href="/aaa/">aaa</a></li>
<li class="bbb"><a href="/bbb/">bbb</a></li>
<li class="info"><a href="/info/">ブログ</a></li>
</ul>
</div><!-- /#header -->
<!-- Contents -->
<div id="contents">
ヘッダーの共通部分はここまでかな？お好みですが。
/index.php
<?php include("module/header.php"); ?>
<h1>タイトル</h1>
<p>コンテンツ</p>
</div><!-- /#contents -->
</div><!-- /#wrapper -->
</body>
</html>
トップページ。1行目でheader.phpを読み込んで、残りを記述します。
/aaa/index.php
<?php include("../module/header.php"); ?>
<h1>タイトル</h1>
<p>コンテンツ</p>
</div><!-- /#contents -->
</div><!-- /#wrapper -->
</body>
</html>
各ディレクトリ内のindexページ。ヘッダーの読み込み先がトップと違うので注意。
追記：コメントで質問をいただいて調べてみたら、インクルードは絶対パスのほうが楽ですね！ こちらの記事が参考になります！
謎の余白にハマる
さて。これでいけると思ってたのに、アップロードしてブラウザで見てみるとinclude("module/header.php");しているところで謎の余白がががが((└(:3」┌)┘))
しばらくハマってたのですが、こういうことだったみたいです。
わたし、エディタはTeraPadを使ってるんですが、文字コード UTF-8 でやってた！！！！ UTF-8N で書き直したら直ったぁぁぁぁ｡･ﾟ･(ﾉД`)･ﾟ･｡ そういう違いがあるのですね…。今までPHPはWP管理画面のテーマ編集からいじってて、イチから作ったのは初めてだったので勉強になりました。
WP外からテンプレートを読み込む
WPで自作テーマを作って、そこへ外部のテンプレートを読み込むように書いていきます。
テーマを作るときは毎回こちらを熟読させていただいてます。いつもありがとうございますー！
まずは wp-content/themes 内にテーマ名のディレクトリを作って、その中に必要なモノを用意。
- style.css（必須）
- index.php（必須）
- single.php（単一記事ページを使う場合）
- page.php（固定ページを使う場合）
- functions.php（あると便利）
- screenshot.png（お好みで）
style.css（WPテーマ内）
/* Theme Name: テーマ名 */
最低限、先頭にこれだけ書いておけばOK。WPだけ適用したいようなCSSがあればこの下に書いていきます。
index.php（WPテーマ内）
<?php include("../module/header.php"); ?>
<?php if (have_posts()) : //該当記事の有無 ?>
<?php while (have_posts()) : the_post(); //記事の該当回数、繰り返し ?>
<div class="post">
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<p><?php the_time('Y年m月d日'); ?></p>
</div><!-- /.post -->
<?php endwhile; //繰り返し処理終了 ?>
<?php else : //該当記事がなかった場合 ?>
<p>記事がありませんでした</p>
<?php endif; ?>
<?php //ページナビを呼び出す記述 ?>
</div><!-- /#contents -->
</div><!-- /#wrapper -->
<?php wp_footer(); ?>
</body>
</html>
メインループの中身は簡単に端折りますが、ざっくりこんな感じ。1行目でWP外のヘッダーを読み込んであげます。13行目は、プラグインを使っても良いしfunctions.php に自分で書いても。サイドバーも欲しい方はお好みで。
17行目は footer.php の有無に関わらず必須です。これと、ヘッダーにもwp_head();がないといけません。
/module/header.php（WP外）
<?php
$slug = explode('/', $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]);
$navi = ($slug[1] == '') ? 'home' : $slug[1];
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ページタイトル</title>
<link rel="stylesheet" href="/module/style.css">
<?php if( $navi == 'info' ): //WPを読み込む ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
<?php endif; ?>
</head>
<body>
<div id="wrapper">
<!-- Header -->
<div id="header">
<ul class="<?php echo $navi; ?>">
<li class="home"><a href="/">HOME</a></li>
<li class="aaa"><a href="/aaa/">aaa</a></li>
<li class="bbb"><a href="/bbb/">bbb</a></li>
<li class="info"><a href="/info/">ブログ</a></li>
</ul>
</div><!-- /#header -->
<!-- Contents -->
<div id="contents">
先ほど作ったWP外のヘッダーにハイライト部分を追記します。ナビ実装のために作った変数を利用して、/infoディレクトリ内のページ（WPページ）の時だけ、WPのスタイルシートとwp_head();を読み込みます。
今回は作りませんでしたが、footerも部品化したい場合はこれと同じようにWPページの時だけwp_footer();を出力してやるように書けば良いと思います。
single.php と page.php については、index.php をコピーしてベースに使えば、普通のWPサイトを作るのと変わらないので、以下割愛。
WP外のトップページへ新着記事を表示
こちらにドンピシャな内容が！いつもありがとうございます(*´ω`*)
/index.php（WP外）
<?php
require('info/wp-load.php');
include("module/header.php");
?>
<h1>タイトル</h1>
<p>コンテンツ</p>
<h2>新着記事</h2>
<ul>
<?php
global $post;
$myposts = get_posts( 'posts_per_page=5' );
foreach( $myposts as $post ) {
setup_postdata($post);
?>
<li><?php the_time('Y.m.d') ?>：<a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php
}
wp_reset_postdata();
?>
</ul>
</div><!-- /#contents -->
</div><!-- /#wrapper -->
</body>
</html>
WPがインストールされているディレクトリを指定してハイライト部分のように書けば、Wordpressのタグがそのまま使えるんですって！なんて素敵な！！！
あとはよくある形で、get_posts() 使ってやれば簡単ですー！これ使えば、他のページにもいろいろできそうですね！(*ﾟДﾟ*)
以上です！自分備忘録ではありますが、どなたかのお役に立てたら幸いです。
9件のコメント
コメント失礼します。
同じような構造でサイトを作っており、wp外のトップページに新着記事が表示したかったのですがやり方がわからず、RSS表示ツールを使ったら広告まで表示されるようになってしまい困っていました。
ですがこの記事のおかげで無事に解決しました！とても助かりました。ありがとうございます(*^^*)
たまさん、コメントありがとうございます！ 完全に自分のためのメモと思って書いてたので、お役に立てて光栄ですー(*ﾟДﾟ*)
とても参考になります。
１つご質問ですが、新着情報は無事wp外のトップページに表示することができましたが、新着情報のsngleページはどうしたらいいんでしょうか？
もっふさん、コメントありがとうございます。
single.php の具体的な中身は？ という意味でよいでしょうか。だいたい index.php と同じで、メインループの中に書きます。
<?php include("../module/header.php"); ?> <?php if (have_posts()): ?> <?php while (have_posts()): the_post(); ?> <div class="post"> <h1><a href="<?php the_permalink(); ?><?php the_title(); ?></a></h1> <p><?php the_time('Y年m月d日'); ?></p> <?php the_content(); ?> </div><!-- /.post --> <?php endwhile; ?> <?php endif; ?> </div><!-- /#contents --> </div><!-- /#wrapper --> <?php wp_footer(); ?> </body> </html>ざっくりですがこのような感じですかね。
the_content()で記事の中身を出力するのと、コメントが必要ならcomments_template()も書くと出てきます。ちなみに single.php と page.php を共通にしたければ、WP4.3 以降なら singular.php というのができたので便利ですよー。
望んでいた構造のサイト制作を色々と調べていた中でこちらのサイトを拝見し、大変参考にさせていただいております。
お聞きしたいことがあります。
初歩的なことで大変恐縮なのですが
category/news（newsの一覧ページ）へのリンクを
/module/header.php（WP外）のナビに加えたい場合、どう記述すれば良いのか？（おそらくリンク先はcategory-news.phpであったりすると思われますが。）
カテゴリーを2つ使用したいと考えております（仮にですがnewsとgallery）そのカテゴリーの一覧ページの（タイトル、画像、本文、日付のような）具体的なphpの中身をご教授していただけないでしょうか。
よろしくお願いいたします。
ロッソさん、コメントありがとうございます。動作検証してないので確実じゃないですが、概ね以下のような形になると思います。
まず、/module/header.php（WP外）では、ナビに記述するのはURLなので、
<?php $slug = explode('/', $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); $navi = ($slug[1] == '') ? 'home' : $slug[1]; ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ページタイトル</title> <link rel="stylesheet" href="/module/style.css"> <?php if( $navi == 'info' ): //WPを読み込む ?> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"> <?php wp_head(); ?> <?php endif; ?> </head> <body> <div id="wrapper"> <!-- Header --> <div id="header"> <ul class="<?php echo $navi; ?>"> <li class="home"><a href="/">HOME</a></li> <li class="aaa"><a href="/aaa/">aaa</a></li> <li class="bbb"><a href="/bbb/">bbb</a></li> <li class="info"><a href="/info/">ブログ</a> <ul> <li><a href="/info/category/news/">ニュース</a></li> <li><a href="/info/category/gallery/">ギャラリー</a></li> </ul> </li> </ul> </div><!-- /#header --> <!-- Contents --> <div id="contents">ベタで書くとこんな感じでしょうか。リストの入れ子構造やCSSは調整ください。変数を使えば、スラッグが変更されたときにそのまま対応することもできます。
次にWPテーマ内に書くアーカイブページのテンプレートですが、これを書くファイルは目的によって異なります。
カテゴリーのアーカイブページにアクセスされたとき、上記階層図の左から順番に存在するphpファイルを読んでいくので、各アーカイブページを独自のスタイルにしたいのであれば、category-news.php または category-gallery.php を用意してそれぞれ書くことになりますし、カテゴリーアーカイブが共通でよければ category.php です。カテゴリーだけでなく、タグや日付などのアーカイブページひっくるめて共通でよければ archive.php です。さらにはブログのトップページのアーカイブと共通でよければ、最終的には index.php に行き着きます。
どのファイルにするか決まったら中身は、タイトル、日付、サムネイル、（moreタグがあれば）記事の序文、のような内容を出力すると、以下のような内容になるかと思います。
<?php include("../module/header.php"); ?> <?php if (have_posts()) : //該当記事の有無 ?> <?php while (have_posts()) : the_post(); //記事の該当回数、繰り返し ?> <div class="post"> <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p> <p><?php the_time('Y年m月d日'); ?></p> <div><?php the_post_thumbnail(); ?></div> <p><?php the_content('続きを読む'); ?></p> </div><!-- /.post --> <?php endwhile; //繰り返し処理終了 ?> <?php else : //該当記事がなかった場合 ?> <p>記事がありませんでした</p> <?php endif; ?> <?php //ページナビを呼び出す記述 ?> </div><!-- /#contents --> </div><!-- /#wrapper --> <?php wp_footer(); ?> </body> </html>なお、蛇足かもですが以前書いたこちらの記事も参考になるかもしれません。
お返事いただきありがとうございました。
色々とご配慮ありがとうございます！
書いていただいたコードを参考に試作して動作検証ができましたらご報告させていただきます。
本当にありがとうございました。
まさにこのことをやろうと思って、とても参考にさせていただいております！
ありがとうございます！
WP内の、index.phpでincludeする場合は、絶対パスから読む方法ってありますでしょうか。
include(“../module/header.php”);
この場合だと、たとえばカスタム投稿を利用する際は、相対パスが変わってくるので、
include(“/module/header.php”)として入れたいが、認識されないですね。。
もしご存知でしたら教えていただけると助かります。
よろしくお願いいたします。
れいさん、コメントありがとうございます。
こちらに書かれている内容が良いのではないかと思います。そもそも絶対パスのほうがよさそうですね。私も勉強になりました！
コメントは承認制ですので、反映までしばらくお待ち下さい。（稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。）
YouTubeでQ&Aコンテンツを企画しています
運営しているYouTubeチャンネルで、ご相談やご質問を募集しています。動画のコメントやお問い合わせページからお気軽にご相談をお寄せください。