「WordPressと静的ページが混在したWebサイトを立ち上げる」には。その2。WordPressをEC2へインストール

EC2にファイルをアップロードする方法の記事では、AWSを使って静的サイトを立ち上げたときのファイルをFTPクライアント経由でアップロードする方法をご紹介しました。

本記事は続編で、静的ページのWebサイトの上にWordPressをインストールするという話です。

本来、静的Webサイト用サーバーを立ち上げて上からWordPressをインストールするようなことはしないと思うのですが、諸般の事情により混在させたかったので、その時のメモです。

WordPressと静的ページが混在したWebサイトを立ち上げる

前回はEC2に静的サイト用のファイル一式をアップするところまででした。

MySQL インストール、Apache インストール、PHP インストール

→は、本家AWSのチュートリアルどおりに。

WordPress インストール

→はAWSのこちらのチュートリアル

ここまでは良いが、今回やりたいのは「静的サイトでWordPressのコンテンツの一部を表示させる(WordPressは簡単にブログ更新のようにサイトの更新ができるようにするためのツールとしてだけ利用する。)」ということ。

.htaccessを書き換えることにより、Wordpressを更新すると静的サイトの方へ反映されるリンクを作るところで詰まりまして、そのときの解決メモです。

.htaccess

WordPressが生成する.htaccessをindex.htmlと同じ階層へコピー。

.htaccess書き換え

黄色文字部を足します。AddTypeのところは、Wordpressは.phpなので.htmlにファイル名揃えるくらいの意味。

ブログの内容部分はWordPressにログインし、内容を入力します。

 

ec2-upload10

静的サイトのページの編集

index.html(というかWordpressからの内容を表示したい静的サイトのページ)には、次のような感じで組み込めばOK.

<div class="container-fluid col-xs-offset-1"  style="margin-top:5%;">
   <div class="container-fluid col-xs-offset-1"  style="margin-top:5%;">
   <h2 style="font-weight:bold;">Travel Blog</h2>
   <hr style="margin-top:4%;">
   <?php    $posts = get_posts('numberposts=5&category=1');    global $post;    ?>  
   <?php    if($posts): foreach($posts as $post): setup_postdata($post); ?>
  <div> 
     <h3><?php the_title(); ?></h3> 
       <h4> <?php the_time( 'Y/m/d' ); ?>:</h4> 
         <div> <?php the_content(); ?></div>
          <hr style="margin-top:4%;">
  </div>  
 <?php endforeach; endif;  ?>
</div>

結果

こんな感じで静的サイト内にWordPressで編集した内容が合体されました!

おわりに【後日談】

その後もしばらく今回の記事でご紹介したWebサイト含めて、複数のサイトをEC2で運用していましたが、結局AWSは解約するに至りました。

AWSの仕様の問題ではなくて、企業姿勢に少々モヤっとしてしまいまして・・。

解約理由を記事にしましたので、同じようなお悩みを持っていらっしゃる方、よろしければご参照くださいね。

【AWS解約しました】Amazon RDSダッシュボードがリダイレクトしてしまう話
アマゾン ウェブ サービス(AWS)を解約しました。理由はAmazon RDSのダッシュボード画面が勝手にリダイレクトするからです。

 

タイトルとURLをコピーしました