旅に出るのでWordPressでブログを立ち上げてみた

リサリサ

2023.04.28

こんにちは、リサリサです。世界一周旅行に行ってくることになったので、WordPressブログを立ち上げてみました。 アーキテクチャはシンプルなものですが、WordPressのテーマの設定など、色々大変だったのでブログとして使えるようになるまでにしたことを備忘としてまとめておきます。

手順として全部書き上げるととんでもない分量になってしまうので、リンク集的な形でまとめていきます。

先に、完成品はこちら。なかなか見栄えするものがお手軽にできてしまうので、WordPressはほんと便利ですよねww

※サイトの中身は個人の見解によるブログです。弊社との関係は全くありません。

アーキテクチャ

アーキテクチャはこちら。そんなにお金もかけられないので、とりあえずのSimple構成です。もし万が一アクセスが増える事があったらスケーリングも考えたいと思います。CloudFront は付けようと思ってますが、この記事公開までに間に合いませんでした。あとで付けると思います。

AWSでWordPressを構築するメリットがまとまっていたので、貼っておきます。

インフラ構築

AWS部分の構築はこちら参考にほぼ一発で作らせて頂きました。

せっかくだったので、Amazon Linax 2023で。

EC2AMIId:
    Description: AMI ID
    Type: "AWS::SSM::Parameter::Value<String>"
    Default: "/aws/service/ami-amazon-linux-latest/al2023-ami-kernel-default-x86_64"

他、SSMから操作できるようにAIM追加と、SSL対応のためにHTTPS開けるなど変更し、UserDataはいったん削除させてもらって、WordPressの構築自体は↓の手順に沿って対応しました。(template公開する余裕があったら後で追記します)

この手順だと英語版がインストールされてしまうので、日本語版をインストールするように変更しました。

DBはEC2内にたてる手順になっているので、そこは読み替えて、RDSにします。

私は最初↑の手順通りにEC2に立ててみて動作確認してからRDSに変更したので、こちらの手順を参考に、EC2 → RDS へデータ移行しました。

SSL化

ドメインは元々Route53で管理していたので、サブドメイン用のホストゾーンを作り、ACMで証明書を発行。

発行した証明書をALBに設定。

/var/www/html 配下の wp-config.php に下記を追記。

if (empty($_SERVER['HTTPS'])) {
$_SERVER['HTTPS'] = 'on'; $_ENV['HTTPS'] = 'on';
}

その際、↓より上に追記します。

require_once(ABSPATH . 'wp-settings.php');

下に追記してしまうと、「このページにアクセスする権限がありません。」と表示され、管理画面に入れなくなります。 追記自体をしないと、リダイレクトループが発生し、管理画面自体が開かなくなりました。

FTP を使わない設定

WordPressを使用する上で、テーマやプラグインなどをダウンロードする機会があります。

その際に、この設定をしないと、都度FTP接続を求められとてもめんどうなので、FTPを利用せずにダウンロードができるように下記の設定を追加します。

/var/www/html 配下の wp-config.php に下記を追記します。

define('FS_METHOD', 'direct');

WordPress内部の設定

テーマの設定

ここまでで、インフラ自体はだいたい完成で、ブログとしては機能しています。 ですが、可愛くないので、ここから可愛いブログにしていくために色々カスタマイズをしていきます。

WordPressにはテーマと言うデザインテンプレートがたくさん用意されています。無料の物から有料の物まであります。自作する事もできますが、今回は無料でカスタマイズもしやすい Cocoon というテーマを使いました。

こちらの手順通りに設定しました。

上記ページにも記載ありますが、そのまま設定しようとすると、「辿ったリンクは期限が切れています。もう一度お試しください。」が発生してしまったので、低サイズ版でインストールしました。

Cocoonの基本設定

Cocoonをインストールすると、管理画面に「Cocoon設定」という項目が追加されます。ここから色々なデザイン的な設定ができます。

細かい設定内容は割愛しますが、

①「スキン」から好みのデザインを選択しました。見た目の着せ替えができます。オリジナルで作らなくても、GPLライセンスで色んなかわいいデザインが利用できます。

②「SNSシェア」と「SNSフォロー」の「表示ページ」から「固定ページ」のチェックを外しました。この設定をしておかないと後述のトップページに「SNSシェア」と「SNSフォロー」のボタンが表示されてとても邪魔です。

プラグインのインストール

プラグインはたくさんあるのですが、私は楽に可愛い下線を引きたかったので、「Advanced TinyMCE Configuration」というのをインストールしました。シンプルで使いやすくてお気に入りです。三色のマーカーが追加されます。可愛い！！

ただ、Gutenbergエディターでしか使えないようで、他の何かに変えようか悩み中。※「Cocoon設定」の「エディター」で「Gutenbergエディターを有効にする」のチェックを外すと投稿画面が旧ビジュアルエディター形式(DevIOの投稿画面と同じ)になるのですが、そうするとこのプラグインはうまく動きませんでした…。

固定ページの作成

記事一覧ページとトップページを作ります。

記事一覧ページ

「記事一覧」という空の固定ページを作ります。タイトルだけ入力して保存します。

トップページ

トップページは拘り始めるときりがないので…。私は最初の一言と、新着記事と人気記事を5件ずつ表示するようにしました。その下の「もっと見る」から全ての記事が見れるようにしてみます。

このショートコードと言うのが便利で、[new_list count=5]と書くと、新着記事最新を5件表示してくれます。他にも色々なショートコードが用意されてます。便利！！自作もできます。

「もっと見る」のボタンには↑で作成した「記事一覧」へのリンクを貼っておきます。

外観→カスタマイズの設定

最後に、サイトの基本設定をします。

管理画面の「外観」⇒「カスタマイズ」を押すと以下のようなメニューが開きます。

「サイト基本情報」からサイトのタイトル、キャッチフレーズ、アイコン(ファビコン)  を設定し、「ホームページ設定」から先ほど作成した固定ページを設定します。

そうすると、空っぽだった「記事一覧」に新着の投稿が一覧で表示されるようになります。

完成

できました！まとめてしまうと簡単なようですが、色々と詰まったり、テーマやプラグインなど悩むことだらけだったので、意外と時間がかかりました…。やっとできた……。可愛くできて満足ですww

AWS