WordPressの記事をHTMLサイトに表示させる方法



2016/03/28

 

既存のホームページ(htmlなど)にWordpressでブログを追加したい方にはオススメ

  • 既存のホームページ(HTMLなどで制作)は持っている
  • リニューアルする必要はない
  • ブログ形式のページをホームページに組み込みたい(外部ではなく)

こんな要望、あると思います。
もちろん、既存のページと同じようにhtmlでブログを作ることもできますが、ここで、Wordpressが使えると、更新がとても簡単になるのです。
そして、トップページに「最新記事」や「ニュース」など、Wordpressの記事の一覧を表示できたら、ユーザーにとっても非常に使いやすいサイトになるはずです。
ここで、問題になるのは、WordpressがPHPで書かれているということ。
そこを解消して、htmlページとWordpressを連携する方法をまとめておきます。

完成形 既存のページのURLは変えずにブログもサイト内で一体化

20160328_1
Wordpressは、お知らせ、ニュース、ブログだけに使用します。 その他のページは、そのまま。
既に運用し始めてから長い場合は、URLを変えたくない場合も多いと思います。

WordPressをインストール

名前は何でもいいですが、新しく、「news」というフォルダを作って、Wordpressをインストールします。
index.htmlなどがあるルートディレクトリにWordpressをインストールしても構いませんが、Wordpressのプログラム自体のファイル数が多いので、今後の管理のためにも、Wordpress専用のフォルダを作ってインストールすることをお勧めします。

html ファイルでphpが作動するように設定する

前述の通り、Wordpressはphp言語で書かれています。そのため、htmlファイルにphpのWordpressを読み込むためには、htmlファイル内でもphpが動くようにしなければなりません。
具体的には、以下のソースをindex.html の1行目に書きくわえます。

今回は、wordpressをインストールしたフォルダ名を「news」としたので、このような階層構造になります。newsの部分は、それぞれ、自分が設定した名前に書き換えてください。
”wordpressファイルを読み込みます”、というおまじないのソースです。

WordPressの記事を読み込むための記述を書きこむ

同じくindex.html内に、Wordpressの記事を実際に読み込むためのコードを書き込みます。
このコードは、Wordpressの書き方に従って自由に書いてください。 例として、簡単な一例を載せておきます。 20160328_2
例えば、このように、最新記事を5件表示させる場合は

日付と記事のタイトルの表示ですが、アイキャッチ画像などの設定も可能です。 アイコンなどは、CSSで指定してください。

.htaccessを設置する

html上でphpを実行するために、もうひと手間、.htaccessを作ります。
この.htaccessをindex.htmlと同じフォルダにアップします。

この記述は、サーバーによって異なります。同じサーバーでもPHPのバージョンなどによっても異なるようですので、これで上手くいかないようなら、調べてみてください。
ちなみに、お客様のサーバー、ロリポップで設定した場合は、以下の記述で上手くいきました。

以上で設定は完了です。
快適で活発なホームページ運用になりますように。

ちょっと相談してみる