2014
6
09

サイトの一部をWordPressにして、WP外のテンプレートを読み込む

サイトの1階層下のディレクトリにWordPressをインストールして、サイト全体のテンプレートを適用させたい、というときにやったことをまとめました。


構造を決定

このように構築したLinuxのWebサーバに、こんな構造のサイトを想定しました。

140609-1

/moduleというディレクトリにheader.phpなどの部品を入れておいて、サイト全体で適用させます。シンプルな内容なのでfooterは今回つくりませんでした。

定期的に発行される社内報をブログ形式で閲覧できるようにしたい、という要望により/infoというディレクトリにWP(ver3.9.1)をインストールしました。このWPも/moduleのテンプレートを適用させます。

LinuxへのWPインストールのメモはこちら

固定ページをトップにした、サイトまるごとWPっていうのもやったことがあるのですが、やはり一長一短ですよね。WPは使うけど、WP外からのテンプレートを読み込み、WP外のトップページへ新着記事を出力する、という形もやってみたらとても勉強になりました。

メインのテンプレートをつくる

WPへ取り掛かる前に、まずは他のページを作ってテンプレートの動作確認をしておかねば。

各ページ構想

例として、こんな感じのphpファイルにしたいと思います。

まず1~4行目は何をしているかというと、現在のURL(http://を除く)を「/」で分割して$slugという配列に入れると、1番めの配列にディレクトリ名が入るはずなので、それを取得しておきます。

140609-2

イメージはこんな感じ。ここを取得しておけば、そのディレクトリ内のページならば、下層のページでも同じ文字列が取得できます。(トップページのみ空白になるので、空白ならhomeという文字列を入れてやります。)これをハイライトしてある18行目でクラス名として出力してやれば、ナビの実装が簡単になります。

この形でCSSを使った実装の詳細はこちらで書いています

で、好みの表示になるように/module/style.cssにCSSを記述していきます。11行目でそれを読み込んでいるわけですが、後で部品化して、どの場所からheader.phpが読み込まれても大丈夫なように、絶対パスで指定しておきます。

動作確認出来たら、分割します。

/module/header.php

ヘッダーの共通部分はここまでかな?お好みですが。

/index.php

トップページ。1行目でheader.phpを読み込んで、残りを記述します。

/aaa/index.php

各ディレクトリ内の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テーマ内)

最低限、先頭にこれだけ書いておけばOK。WPだけ適用したいようなCSSがあればこの下に書いていきます。

index.php(WPテーマ内)

メインループの中身は簡単に端折りますが、ざっくりこんな感じ。1行目でWP外のヘッダーを読み込んであげます。13行目は、プラグインを使っても良いしfunctions.php に自分で書いても。サイドバーも欲しい方はお好みで。

17行目は footer.php の有無に関わらず必須です。これと、ヘッダーにもwp_head();がないといけません。

/module/header.php(WP外)

先ほど作ったWP外のヘッダーにハイライト部分を追記します。ナビ実装のために作った変数を利用して、/infoディレクトリ内のページ(WPページ)の時だけ、WPのスタイルシートとwp_head();を読み込みます。

今回は作りませんでしたが、footerも部品化したい場合はこれと同じようにWPページの時だけwp_footer();を出力してやるように書けば良いと思います。

single.php と page.php については、index.php をコピーしてベースに使えば、普通のWPサイトを作るのと変わらないので、以下割愛。

WP外のトップページへ新着記事を表示

こちらにドンピシャな内容が!いつもありがとうございます(*´ω`*)

/index.php(WP外)

WPがインストールされているディレクトリを指定してハイライト部分のように書けば、Wordpressのタグがそのまま使えるんですって!なんて素敵な!!!

あとはよくある形で、get_posts() 使ってやれば簡単ですー!これ使えば、他のページにもいろいろできそうですね!(*゚Д゚*)

以上です!自分備忘録ではありますが、どなたかのお役に立てたら幸いです。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2014/06/09


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top