[コピペで簡単！]静的に構築したウェブサイトにワードプレスの新着記事を動的に吐き出してみました
2020.01.25
このポートフォリオを作った時、ただ制作実績をアップロードしていくだけでは物足りないと思ったので、ブログページを作成し、学習した知識をアウトプットすることに決めました。
そこで考えたのが、
- ワードプレスでサイト構築
- 静的ジェネレータを用いたサイト構築
- 静的に1からサイト構築
の3パターン。
「ワードプレスはセキュリティが弱いからNG」
とかなんとか文句を吐きつつ、ただただワードプレス、静的ジェネレータで構築した経験がなかったので、静的に構築することにしました。
消極的な選択ですが、
納期、技術的なことも考えなくてはいけないので仕方ありません。
ただ、「なにかを作るときは、何か新しいことに挑戦する」という思いで制作をしていますので、
今回は初めてのワードプレスとの連携を行ってみました。
もし同じようにブログページはワードプレスにしたいが、トップページは静的にしたいという方の参考になりますように。
静的サイトにワードプレスの新着記事を吐き出す手順
ほかのレンタルサーバーをでは違う方法を要することがあるかもしれません。
まず簡単に手順をまとめますね。
- 「.htaccess」を編集する。
- 「.html」でPHPが動くようにする。
- WordPress関数を用いて記事を吐き出す。
とまあこんな具合。
ちなみにわたしはこの方法を具体的に理解できているわけではないので、うまく説明はできません。
……すみません。
ただコピペをすれば動くと思いますので、動いたうえで色々試してみてください。
作成した際の状況
まずコピペしても動かなかったというひとが続出しないように、作成した際の状況をできるだけ上げだしてみることにしました。
- サーバーはエックスサーバーを使用。
- PHPのバージョンは「PHP7.2.17」。
- ワードプレスは「/article/」以下にインストール。
ひとつひとつ説明しますと、
まずサーバーはエックスサーバーを使用。
わたしは本サイトも含め2つのサイトを使っていますが、どちらもエックスサーバーを使っています。
標準でワードプレスのインストール機能も付いていますし、このサーバーを使い困ったことはありません。
レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】
次にPHPのバージョンですが、「PHP7.2.17」を使用しています。
こちらもエックスサーバーであれば簡単に確認できますので、事前に確認してみてください。
エックスサーバーでPHPのバージョン確認をする方法を調べました
最後にワードプレスのインストール箇所ですが、「/article/」以下にしました。
そのため
https://progblog-web.com/article/
ブログは上記URLになりました。
それでは実装方式のご紹介になります。
すべてコピペすれば大丈夫ですので、ぜひお試しください。
１．「.htaccess」を編集する
まずは使用しているサーバーに格納されている「.htaccess」に、下記ソースを追加します。
|
1 |
AddHandler fcgid-script .html |
上記のソースをもとからある記述の1番下に追記してください。
|
1 2 3 4 5 6 7 8 9 10 |
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule> SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off SetEnvIf Request_URI ".*" Ngx_Cache_StaticMode SetEnvIf Request_URI ".*" WpCommentNoLimit SetEnvIf Request_URI ".*" WpCommentDeny AddHandler fcgid-script .html |
つまりこんな感じになると思うのですが、なりましたか？
ソースの説明ですが、
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule> //上記記述はリダイレクト処理 SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off SetEnvIf Request_URI ".*" Ngx_Cache_StaticMode SetEnvIf Request_URI ".*" WpCommentNoLimit SetEnvIf Request_URI ".*" WpCommentDeny //上記記述はデフォルト？ AddHandler fcgid-script .html //新規追加ソース |
つまるところ、１番下に書けばそれで問題ありません。
２．「.html」でPHPが動くようにする。
拡張子が「.html」の時、本来であればPHPが動きませんので、動かす処理を書かなければいけません。
それが、
|
1 |
<?php include_once("./Wordpressを格納したディレクトリ/wp-load.php"); ?> |
という記述。
「Wordpressを格納したディレクトリ」という文言はワードプレスをインストールしたディレクトリに変換してください。
つまり、わたしの環境だと
|
1 |
<?php include_once("./article/wp-load.php"); ?> |
こんな具合。
そしてこちらを記述する箇所ですが、
1番上に書いて下さい。HTMLソースの1行目。
|
1 2 3 |
<?php include_once("./article/wp-load.php"); ?> <!doctype html> <html lang="ja"> |
こんな感じで記述してください。
ソースでエラーが出ると思いますが、この後も大量に出るので構う必要はありません。
ブラウザ上でソースが展開されることによりなくなりますので、気にしないでください。
３．WordPress関数を用いて記事を呼び出す
これは正直わたしも理解していないのですが、コピペをすれば呼び出して吐き出すことができますので、ひとまず真似をしてみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php $toplist = array( 'post_type' => array('post'), 'showposts' => 1, ); ?> <?php query_posts($toplist); ?> <?php if (have_posts()):while(have_posts()):the_post(); ?> <div class="wp-new-entry-1-data"> <?php the_time('Y.m.d'); ?> </div> <div class="wp-new-entry-1-title"><a href="<?php the_permalink() ?>"> <?php the_title(); ?> </a></div> <?php endwhile; endif; wp_reset_query(); ?> |
記述するコードはこんな具合。
これが展開されると、
|
1 2 |
<div class="wp-new-entry-1-data"> 2019.09.10 </div> <div class="wp-new-entry-1-title"><a href="https://progblog-web.com/?p=264"> SCSSを使用してみた感想。SCSSは爆速コーティングにもってこいでした </a></div> |
こんな感じになりました。
前述しましたが、わたしよく理解できていません。
ただHTMLソースは自分で編集したので、これを試しながら行うことで、いろいろな記述ができるようになるかもしれません。
というサイトもありますので、ぜひ勉強してみてください。
