Blog

WordPressでトップページを静的サイトに index.htmlを共存させる簡単なやりかた

2015.07.09 | WordPress | 3298views


ダウンロード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」に設定増します。

スクリーンショット 2015-07-09 12.38.15

これで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("http://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("http://www.jiriki.co.jp/blog/feed");
var noPhoto = ("<img src='img/logo-dark.png' />");

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

このエントリーが役に立ったらシェアしてください


LLC JIRIKI HOME

この記事を書いた人

淵上 喜弘

著者:LLC JIRIKI

合同会社ジリキ 代表社員兼、業務執行社員。
1979年生まれ 兵庫県尼崎市出身・明石市育ち。

川崎医療福祉大学を卒業後、日産サティオ岡山に就職し初年度新人賞をカルロス・ゴーンCEOより受賞。その後NTT関連フレッツ販売会社に再就職し、地域賞2位を受賞。OCN販売表彰2位も同時受賞するとともにBフレッツ単独販売数の記録を打ち立てる。2006年合同会社ジリキ設立。SEO、WEBサイト制作業を開始する。

SEOで「大阪 探偵」や「離婚 行政書士」などのキーワードや「子ども 教材」「スマートフォンケース」など各種キーワードで1位を獲得。サイト制作でも毎日コミュニケーションズ・マイナビ女子オープンのサイトを制作。その後ECサイト運営サポートに着手し、売上月商50万のストアを1年半で1700万の月商に成長させる。

スマートフォンケースなどの商品企画開発も手がけ、楽天ランキングでも1位獲得、家電ジャンルMVPなどECサイトコンサルティングでも実績あり。

現在、グロースハックに注力しており様々な業種のサイトのCVアップをサポート中。チームとしてのグロースハック実績ではKaizenグロースハッカー総合 Top 20%、不動産 Top 10などを頂いています。

プログラミングは本業ではなくあくまでも趣味の一環として取り組んでいます。月1回ペースで東京へ出張へ行っておりますので、機会があれば是非お話をしましょう。

LLC JIRIKI