WordPressは一度デザインを決めて制作を始めたら結構デザイン変更がやっかいだ・・。とか感じていませんか。Wordpressで表示するトップページをindex.htmlにして表示させることができます。サイトトップのA/Bテストなどでとりあえず静的HTMLでガッツリテストしたい。という場合や、フリーのテンプレートを入れたけどトップだけが気に入らない！という場合におすすめです。

また、フロントページにindex.htmlを指定しておくことでWordpressのメンテナンスやテーマ変更、様々なWordpressの仕様変更を表に出さずに作業することも可能になりますね。

WordPressのトップページをindex.htmlにする

PHPファイルをまずは設置しよう

まずは以下のソースコードをテキストファイルで template_toppage.php という名前で保存します。

<?php
/*
Template Name: Top Page
*/
readfile(ABSPATH . '/index.html');
?>

このtemplate_toppage.phpというファイルを wp-content/themes/テーマ名　フォルダにアップロードします。パーミッション設定を適切に行うようにしてください。サーバーによりけりなのですが、他のPHPファイルと同じパーミッション設定をしておけばよいでしょう。

WordPress側の設定をしよう

次に新規固定ページをWordpress管理画面から制作します。タイトルは　Top Pageとしましょう。

管理画面の設定・表示設定からフロントページを先ほど作った「Top Page」に設定増します。

これでwww直下に配置したindex.htmlが表示できるようになります。
サーバーにindex.htmlファイルをアップロードしたら完成となります。

index.htmlにWordpressの新着を表示する場合

index.htmlになったことでWordpressのブログの新着が出ないじゃないか！という場合はJavascriptでWordpressのRSSを読みに行きましょう。Googleさんが提供しているAPIを使用すればとても簡単に仕上がります。

 <script src="http://www.google.com/jsapi" type="text/javascript"></script>

      <script type="text/javascript">
      google.load("feeds", "1"); //APIを読み込みます

      function initialize(){

        var feed = new google.feeds.Feed("https://www.jiriki.co.jp/blog/feed");
        var noPhoto = ("<img src='img/logo-dark.png' />");

        feed.setNumEntries(3);
        feed.load(dispfeed);

        function dispfeed(result){

          if(!result.error){
            var container = document.getElementById("feed");

            for (var i = 0; i < result.feed.entries.length; i++) {

              var entry = result.feed.entries[i];

              var entryDate = new Date(entry.publishedDate);
              var entryYear = entryDate.getYear();
              if (entryYear < 2000){
                entryYear += 1900;
              }
              var entryMonth = entryDate.getMonth() + 1;
              if (entryMonth < 10) {
                entryMonth = "0" + entryMonth;
              }
              var entryDay = entryDate.getDate();
              if (entryDay < 10) {
                entryDay = "0" + entryDay;
              }
              var date = entryYear + "/" + entryMonth + "/" + entryDay;

              var entryImg = "";
              var imgCheck = entry.content.match(/(src="http:)[\S]+((\.jpg)|(\.JPG)|(\.jpeg)|(\.JPEG)|(\.gif)|(\.GIF)|(\.png)|(\.PNG))/);
              if(imgCheck){
                entryImg += '<img ' + imgCheck[0] + '" width=\"200px\">';
              } else {
                entryImg += noPhoto;
              }

              container.innerHTML += '<div class=\"3col\"><p class=\"sub alt-font\">'
              + date
              + '</p><h3><a href="' + entry.link + '">'
              + entry.title + '</a></h3>'
              + entryImg
              + '<p>'
              + entry.contentSnippet.substring(0,120)
              + '<br><a href="' + entry.link + '" class=\"link-text\">Read more</a></p><hr></div>';
            }

          }
        }
      }
      google.setOnLoadCallback(initialize);
      </script>

<p id="feed"></p>

上記は当社のホームページ index.html 内の記述になりますが、

var feed = new google.feeds.Feed("https://www.jiriki.co.jp/blog/feed");
var noPhoto = ("<img src='img/logo-dark.png' />");

この部分を書き換えればOKです。ブログフィードを設定し、もしRSS情報にimgがなければ別の画像をもってくる。という設定です。GoogleAPIではキャッシュを利用しているのですぐさま反映されないのがネックといえますが、回避策もありますのでお試しください。