自作テーマのTOPページ（index.php）を固定ページに入れる方法
index.php上にTOPページのHTMLソースを入れている場合は、サブページと同様に一旦固定ページ（HOMEなど）に流し込みましょう。
Wordpressの表示設定でホームページに固定ページのHOMEを選択すれば、そこがTOPページになってくれます。
通常のテンプレートpage.phpを使わず、専用のpage-front.phpなどを用意しましょう。固定ページ内ではPHP出力が使えないので、別途PHP出力用ファイルを用意して、それを稼働させるように設定する必要があります。
TOPページが固定ページから編集できない
以前、HTMLテンプレートをWordpressのテーマテンプレートに変換する方法についての記事を書きました。
テンプレート化するまでの基本的な流れは、こちらの記事をご参照下さい。
TOPページのソースはindex.php内
上記記事でテーマを自作した際、WEBサイトのTOPページとなるソースは全てindex.php内に入れています。
index.php内に入れたTOPページのHTMLソース
それに対しサブページのHTMLソースは全て固定ページに入れている訳ですから、page.phpで出力しています。
となるとTOPページの内容を変更する場合、直接index.phpファイルの編集が必要な訳です。
本記事では、index.phpにあるTOPページのコンテンツを、固定ページに移動させる方法について紹介します。
TOPページ用の固定ページを作成
固定ページ内にindex.phpのソースを流す
まずはTOPページ用に、固定ページを準備します。
名前はとりあえず「HOME」等で良いでしょう。
その中にindex.phpの上部<?php get_header(); ?>と、下部<?php get_footer(); ?>の間に入った部分丸ごとコピペします。
コピペするのは「テキスト」タブの方にして下さい。TOPページはかなり長くなるでしょうが、とにかく丸ごと貼り付けましょう。
固定ページ内に入れたTOPページのHTMソース
これでTOPページ専用の固定ページができましたね。
設定メニューの表示の切り替え
Wordpressの設定メニューから「表示設定」を開きます。
ホームページの表示の欄は現在、「最新の投稿」の方にチェックがついているはずです。
対象固定ページの選択
これをその下の「固定ページ（以下で選択）」の方にチェックを付け替えます。
さらにその下のホームページ：の選択ボックスで、先程決定したTOPページのタイトル「HOME」を選択します。
ここまで終了したら、一番下の「変更を保存」ボタンを押しましょう。
同じTOPでもソースは固定ページのもの
これでTOPページは、固定ページ「HOME」内のHTMLソースが表示されているはずです。
固定ページの一覧を開くと、HOMEのタイトル欄に「フロントページ」と表示されるようになります。
通常のpage.phpが使えない場合
ここで一つ修正が必要になる場合があります。
TOPページを固定ページ化したという事は、page.phpがベースのテンプレートファイルになる訳です。
気を付けないといけないのは、index.phpとpage.phpとで必要なレイアウトの差です。
TOPとサブページのレイアウトの違い
例えばTOPページはメインにスライドが表示されまずが、それ以外のページではスライドは表示されません。
代わりにサブではタイトルとパンくずリスト等が表示されるなど、TOPとそれ以外で明確な違いが出てきます。
同一page.phpでカバーできない部分へ対応する
もしpage.php内にタイトルとパンくずリスト部分があると、TOPページでもそこが表示されてしまう訳ですね。
他にもTOPだけのオリジナルな部分が出てくる可能性もあります。
その様な時に備え、TOPページ専用のテーマファイルを準備しておくとよいでしょう。
page-front.php の作成
まずはpage.phpを複製しましょう。
複製ファイルを、page-○○○.phpの名前に変更します。○○○部分は自由です。
ここではpage-front.phpとしています。これがTOPページ専用のテーマファイルになります。
page-front.phpのレイアウトを、TOPページ専用に調整しましょう。
このファイルはTOPページ専用ですから、気兼ねせずに編集してOKです。
コメントの設置
次にpage-front.phpファイル最上部に、以下の様にコメントを入れます。
<?php /** * Template Name: TOPページ用 * Description: パンくずリスト部分削除版 */ ?>
日本語部分は自由に表記できますが、phpファイルの文字コードはUTF8にしておいて下さい。
Template Nameは、Wordpressの固定ページ上に表示される「項目名」となります。
Descriptionの部分は特に使わないのですが、他ファイルとの違いなどを書いておくとわかりやすいと思います。
ここまで済ませたら、サーバー上のテーマフォルダの中にアップロードしましょう。
固定ページのメインテーマとして選択する
アップロードしたら、固定ページでTOPページとなった「HOME」の編集画面を開き直します。
すると右の「ページ属性」欄にあるテンプレートが、選択できるようになっているはずです。
選択ボックス欄に、先程page-○○○.php上部のコメントで設定したTemplate Nameの名称が出てきますので、それを選択します。
終わったら更新ボタンを押しましょう。
これでTOPページには、page-front.phpのレイアウトが反映されているはずですので、確認して下さい。
TOPページ内に投稿記事の出力がある場合
さらにもう一つ修正が必要な事があります。
それはこれまでindex.phpで出力していたTOPページに、「新着情報」など投稿記事の出力がある場合です。
TOPページであればほとんどの場合、phpで出力した新着情報があるのではないでしょうか。
固定ページではPHP情報が出力できない
今回は丸ごと固定ページに入れてしまった訳ですが、このままでは機能しません。
固定ページ内で投稿記事が表示される様に、仕組みを用意する必要があるのです。
固定ページ上では、<?php から?>で囲まれたコードは反映されません。新着情報に限らずphpを使ったコードは固定ページ上に書いても動きませんので、注意して下さい。
参考記事はこちら
固定ページ内で投稿記事を表示させる方法については以下の記事をご参照下さい。
上の記事でもいくつか方法を解説していますが、今回はプラグインを使わない方法で実装してみましょう。
投稿記事専用phpの作成
まずは記事の出力部分を専用phpファイルに分けます。
今回はファイル名をnews.phpとしています。
固定ページのTOPページ部分（HOME）を開いて、新着情報が出力されている箇所を丸ごと消します。
それをnews.php内にそのまま貼り付けましょう。
PHP出力部分の切り取り例
news.php内にペースト
<?php $args = array( 'orderby' => 'date', 'order' => 'DESC', 'posts_per_page' => 9, ); $query = new WP_Query( $args ); if( $query->have_posts() ) : ?> <?php while ( $query->have_posts() ) : $query->the_post(); ?> //ここに出力HTMLが入ります。 <?php endwhile; else : ?> //該当記事が無い場合 <?php endif; wp_reset_postdata(); ?>
ペーストしたら、このファイルをテーマフォルダにアップしておきます。
functions.phpの記述
次は固定ページ内で投稿記事を出力できる様にコードを追記します。
コードは、テーマ内のfunctions.phpに追記します。
functions.php内追記コード
//固定ページhome内でnews.phpを稼働させる function Include_my_php($params = array()) { extract(shortcode_atts(array( 'file' => 'default' ), $params)); ob_start(); include(get_theme_root() . '/' . get_template() . "/news.php"); //newsは自身のファイル名に変更 return ob_get_clean(); } add_shortcode('myphp', 'Include_my_php');
ショートコードの名称は「myphp」としています。
上記ではphp名を「news」としていますが、名称は自由です。
追記ができたら、サーバー上に上書きアップロードします。
TOPページソース内に追記
固定ページ内のHOMEで、先程消した新着情報が出力されている箇所に以下を追記します。
[myphp file="news"]
これでTOPページを更新して確認してみましょう。
以前と同じように新着情報が出力されているはずです。
その後のindex.phpファイルについて
この作業が一通り終了したら、index.php内にあるTOPページコンテンツ部分は全て消して構いません。
ヘッダーとフッターの記述は残します。
これでTOPページを固定ページ化する方法は終了になります。
