[コピペで簡単!]静的に構築したウェブサイトにワードプレスの新着記事を動的に吐き出してみました

# WEB制作

2020.01.25

このポートフォリオを作った時、ただ制作実績をアップロードしていくだけでは物足りないと思ったので、ブログページを作成し、学習した知識をアウトプットすることに決めました。

そこで考えたのが、

  • ワードプレスでサイト構築
  • 静的ジェネレータを用いたサイト構築
  • 静的に1からサイト構築

の3パターン。

「ワードプレスはセキュリティが弱いからNG」
とかなんとか文句を吐きつつ、ただただワードプレス、静的ジェネレータで構築した経験がなかったので、静的に構築することにしました。

消極的な選択ですが、
納期、技術的なことも考えなくてはいけないので仕方ありません。

ただ、「なにかを作るときは、何か新しいことに挑戦する」という思いで制作をしていますので、
今回は初めてのワードプレスとの連携を行ってみました。

もし同じようにブログページはワードプレスにしたいが、トップページは静的にしたいという方の参考になりますように。

静的サイトにワードプレスの新着記事を吐き出す手順

わたしは「エックスサーバー」を使用しているので、
ほかのレンタルサーバーをでは違う方法を要することがあるかもしれません。

まず簡単に手順をまとめますね。

  1. 「.htaccess」を編集する。
  2. 「.html」でPHPが動くようにする。
  3. WordPress関数を用いて記事を吐き出す。

とまあこんな具合。

ちなみにわたしはこの方法を具体的に理解できているわけではないので、うまく説明はできません。
……すみません。

ただコピペをすれば動くと思いますので、動いたうえで色々試してみてください。

作成した際の状況

まずコピペしても動かなかったというひとが続出しないように、作成した際の状況をできるだけ上げだしてみることにしました。

  1. サーバーはエックスサーバーを使用。
  2. PHPのバージョンは「PHP7.2.17」。
  3. ワードプレスは「/article/」以下にインストール。

ひとつひとつ説明しますと、

まずサーバーはエックスサーバーを使用。
わたしは本サイトも含め2つのサイトを使っていますが、どちらもエックスサーバーを使っています。
標準でワードプレスのインストール機能も付いていますし、このサーバーを使い困ったことはありません。

レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】

次にPHPのバージョンですが、「PHP7.2.17」を使用しています。
こちらもエックスサーバーであれば簡単に確認できますので、事前に確認してみてください。

エックスサーバーでPHPのバージョン確認をする方法を調べました

最後にワードプレスのインストール箇所ですが、「/article/」以下にしました。

そのため

https://progblog-web.com/article/

ブログは上記URLになりました。

それでは実装方式のご紹介になります。
すべてコピペすれば大丈夫ですので、ぜひお試しください。

ここからはすべての条件が同一のものとしてご説明させていただきますので、環境が違う方は上記方法を見て同一の環境に設定してみてください。

1.「.htaccess」を編集する

まずは使用しているサーバーに格納されている「.htaccess」に、下記ソースを追加します。

上記のソースをもとからある記述の1番下に追記してください。

つまりこんな感じになると思うのですが、なりましたか?

ソースの説明ですが、

つまるところ、1番下に書けばそれで問題ありません。

2.「.html」でPHPが動くようにする。

拡張子が「.html」の時、本来であればPHPが動きませんので、動かす処理を書かなければいけません。

それが、

という記述。

「Wordpressを格納したディレクトリ」という文言はワードプレスをインストールしたディレクトリに変換してください。

つまり、わたしの環境だと

こんな具合。

そしてこちらを記述する箇所ですが、
1番上に書いて下さい。HTMLソースの1行目。

こんな感じで記述してください。

ソースでエラーが出ると思いますが、この後も大量に出るので構う必要はありません。
ブラウザ上でソースが展開されることによりなくなりますので、気にしないでください。

3.WordPress関数を用いて記事を呼び出す

これは正直わたしも理解していないのですが、コピペをすれば呼び出して吐き出すことができますので、ひとまず真似をしてみてください。

記述するコードはこんな具合。

これが展開されると、

こんな感じになりました。

前述しましたが、わたしよく理解できていません。
ただHTMLソースは自分で編集したので、これを試しながら行うことで、いろいろな記述ができるようになるかもしれません。

ワードプレスの関数レファレンス

というサイトもありますので、ぜひ勉強してみてください。

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~