背景
もともと静的HTMLで作ったサイトに、更新コンテンツなど一部ディレクトリだけWordPressを導入するってケース、あると思います。
フルで全ページWordPressで作ったサイトでは、ヘッダーやフッターなどの共通部分はWordPressテーマだけで管理できますよね。
でも、一部ディレクトリだけWordPressだと、そうはいかない。
ヘッダーフッターなど共通部分に更新が入ったら、HTML内の該当部分を編集して、WordPressテーマのheader.phpとfooter.phpも編集して…って効率がよろしくない。ミスもありそう。
一括管理したい！！！！
ということで、一括管理できるようにしました。
ファイル構成
こんな感じの構成のサイトだとしましょう。
.
├── index.html
├── about
│ └── index.html
├── assets //画像やCSSはここに格納
└── wordpress // wordpressディレクトリ
└── wp-content
手順
PHPが動くようにする
まず、index.htmlとabout/index.htmlの拡張子を.phpに変えるか、下記記事を参考にPHPが動くようにしておきます。
共通部分用のファイルを用意する
そして、assetsフォルダ以下に共通部分を記載したphpを用意します。
inc.phpとしておきましょう。
<?php
// ヘッド部分の記述
function head($title,$keywords,$description,$css,$url) { //title、keywords,description,og:url部分と、ページ固有で読むCSSを変数として受け取りたいので、設定しておく。
print <<< CAL
<!doctype html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
//og情報の設定
<meta name="description" content="$description">
<meta name="keywords" content="$keywords">
<meta property="og:title" content="$title">
<meta property="og:type" content="website">
<meta property="og:url" content="$url">
<meta property="og:image" content="{ogpのURL}">
<meta property="og:site_name" content="{サイトのタイトル}">
<!--twittercard-->
<meta name="twitter:description" content="$description">
<meta name="twitter:title" content="$title">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{ogpのURL}">
<!--iOS-->
<meta name="format-detection" content="telephone=no">
<link rel="apple-touch-icon" href="/images/favicon.ico">
<link rel="icon" href="/assets/images/favicon.ico" type="image/png">
<!--title-->
<title>$title | サイトタイトル</title> // ページタイトルを変数で受け取る
<link rel="icon shortcut" href="/images/favicon.ico">
// その他共通で読み込むCSSなどを記述。パスはルートパスで記述する。
<link rel="stylesheet" href="/assets/style.css">
//ページ固有で読み込むCSSを変数で受け取る
$css
<!-- Global site tag (gtag.js) - Google Analytics -->
//gaのタグなどをここに記載
</head>
CAL;
}
function body($body) { //bodyにページ固有のclassを当てたい設計なので、受け取れるようにしておく。
print <<< CAL
// body部分の記述
<body class="$body">
<header>
//ヘッダーなど共通部分の記載
</header>
<main>
CAL;
}
function foot($js) { //ページ固有で読み込むjsも受け取れるようにしておく
print <<< CAL
</main>
<footer>
//フッターなどの記載
</footer>
</body>
//共通で読み込むjsのパスをルートパスで記載
<script src="/assets/js/script.js"></script>
$js //ページ固有で読み込むjsを受け取る
</html>
CAL;
}
?>
HTMLファイルを書き換える
もともとあった静的HTMLを書き換えて、inc.phpから共通部分を読み込むようにします。
こんな感じです。
<?php
include("{ここはフルパスになるように記載}/assets/inc.php"); //inc.phpの位置を、サーバーのフルパスになるように記述する。/var/www/html/など。
$title = 'ページタイトルを記述';
$keywords = 'ページのkeywordsを記述';
$description = 'ページのdescriptionを記述';
//ページ固有で読み込みたいCSSを<link rel="">から記述。なければ空で
$css ='<link rel="stylesheet" href="/assets/unique.css">';
$url ='og:urlに入れるページのURLを記述';
//上記の変数を入れてinc.phpのhead部分を呼び出している
head($title,$keywords,$description,$css,$url);
?>
<?php
$body = 'bodyに当てたいclassを記述';
body($body);
// ここからmain以下のbodyのコンテンツを記述
<section class="hoge">
// 略
</section>
?>
<?php
//ページ固有で読み込みたいjsを記載。なければ空で
$js= '<script src="/assets/js/unique"></script>';
foot($js);
?>
wordpressのテーマファイルを編集する
inc.phpを読み込むようにWordPressのテーマファイルを編集します。
ここではsingle.phpを例にしましょう。
<?php
include("{ここはフルパスになるように記載}/assets/inc.php"); //inc.phpの位置を、サーバーのフルパスになるように記述する。/var/www/html/など。
//HTMLの方は、titleやdescriptionを変数として渡したが、WordPressの機能で書き換えてくれるのでここでは空でOK
$title = '';
$keywords = '';
$description = '';
//ページ固有で読み込みたいCSSを<link rel="">から記述。なければ空で
$css ='<link rel="stylesheet" href="/assets/unique.css">';
$url ='';
head($title,$keywords,$description,$css,$url);
?>
<?php
$body = 'bodyに当てたいclassを記述';
body($body);
// ここからmain以下のbodyのコンテンツを記述
<section class="hoge">
// 略
</section>
?>
<?php
//ページ固有で読み込みたいjsを記載。なければ空で
$js= '<script src="/assets/js/unique"></script>';
foot($js);
?>
WordPressのテーマファイルを作成するに当たって
themesフォルダ以下のstyle.cssは必須ですよね。
今回の設計だと、完全にそれは必要ない形になるのでダミーでまっさらなファイルを置いておきましょう。
コメントアウトで「使ってないっす！」って書いておくと親切です。
改善余地
wp_head()とwp_footer()が呼ばれない
上記の方法だと、ヘッダーフッターの一括管理はできますが、テーマファイル内でwp_head(),wp_footer()のコードが出力されません。
そのせいでWordPressプラグインが動かなかったりします。
プラグインもWordPressツールバーもいらないぜ！！！シンプルマイテーマファイルイズベスト！！！って場合に使いましょう。
このあたりが解決できたらまた追記します。
テーマファイルの方で空の変数を定義しまくっててなんかキモい
PHPの引数の仕組みがよくわかっとらんで、、、
NULLの場合は飛ばすみたいな処理ができれば多分いいんですよね。
スマートな書き方ができたら追記します。
次回予告
サイトのデザイン上、ヘッダーメニュー上の今いるディレクトリだけスタイル変えたいとかあると思います。
静的HTMLでそこをしこしこマークアップしていたのに、PHPでincludeとかしてたらできなくなるじゃん！どうするよ！という時の解決法を書こうと思います。
jQueryでやります。