WordPressを使用したWebサイト構築メモ
WordPressで本格的にWebサイトを製作するのは初めてだったので、今後の参考にできるよう本サイトを構築したときのメモを残しておきます。
本ページでは、具体的な構築手順については触れず、どのような構成、機能を選択したか全体方針について記録します。
今後も変更があれば都度追記していこうと思います。
インフラ構成
料金を抑えつつ、今後の運用やサーバ拡張で楽をしたかったので、インフラ基盤にはAWSを選びました。
| 種別 | サービス名 |
|---|---|
| Web/DBサーバ | EC2 |
| DNS | Route53 |
| SES | |
| CDN | CloudFront |
| 証明書管理 | ACM |
サーバ構成
EC2サーバ上では以下ソフトウェアをインストールしました。
| 種別 | ソフトウェア名 |
|---|---|
| OS | Amazon Linux |
| Web | Apache |
| Database | MySQL |
| 言語環境 | PHP |
| CMS | WordPress |
常時SSL化
SEOを考慮し、以下の手順でWebサイトの常時SSL化を行いました。サイト構築後に設定して非常に苦労したので、これから作ろうという人は、事前にこの準備をしておいたほうが良いかも知れません。
- ACMで自ドメイン(densan-hoshigumi.com)用の証明書を取得
- CloudFrontに証明書を設定
- Route53でオリジン、CloudFront用URLをCNAME登録
[参考サイト]
https://www.nishi2002.com/18842.html
https://blog.freedom-man.com/wordpress-cloudfront/
https://eikatou.net/blog/20170610.html
https://qiita.com/Ichiro_Tsuji/items/38592e737257cb45ca13
WordPress設定
テーマ
Lightning
WordPress公式テーマをいくつかインストールしてみて、デザインが一番好みだったLightningを選択しました。
プラグイン
Akismet Anti-Spam
Blogコメントのスパムコメントを防止します。
Google XML Sitemaps
Google Serach Consoleに登録するサイトマップのXMLファイルを作成します。
JP Markdown
Markdown記法で高速に記事を書くことができます。
Lightning Advanced Unit
Lightning専用の拡張プラグインです。テーマのデザインについて拡張を行います。
VK All in One Expansion Unit
Lightning以外にも使用できる汎用拡張プラグインです。インストールしたテーマを自前でカスタマイズせずとも、このプラグインひとつでさまざまなパーツをテーマに追加できます。
Google AdSense、Google Analyticsのコード挿入、ページ部品の自動生成等に使用しています。
WP Multibyte Patch
WordPress のマルチバイト文字の取り扱いに関する不具合を修正するためのプラグインです。
Table of Contents Plus
Blog記事の冒頭に、自動で目次を表示させることができます。
WordPress HTTPS
Webサイトを常時SSL化する際に使用します。全てのページに対して、HTTPのアクセスをHTTPSにリダイレクトさせます。
Simple Page Ordering
固定ページの表示順序を変更する際に使用します。WordPressの管理画面にてドラッグ&ドロップで直接変更できます。
パーマリンク
Blog記事の各ページについて、WordPress標準のURLだと何のページかわかりづらいので、パーマリンクを変更しました。カテゴリと投稿ページ名(postname)を記載しています。投稿ページ名は標準で日本語表記になってしまうので、記事を投稿するときパーマリンク用の英数表記も設定しています。
http://densan-hoshigumi.com/%category%/%postname%
Webサイト概観
Webサイトの概観は、WordPress標準の概観カスタマイズで実施しました。
ヘッダーとフッターにメニューを追加し、トップページ内のパーツはLightning Advanced UnitとVK All in One Expansion Unitで用意されているものを利用しています。
Webサイトの運用
アクセス解析
本サイトのアクセス解析にはGoogle Analyticsを使用しています。自前でコードは埋め込まず、VKExUnitのGoogle Analytics設定に自分のトラッキングコードを設定しています。
固定ページ
体系化したい情報は固定ページで作成しています。
固定ページは、親ページから各子ページへ分岐していく木構造にしました。
WordPressの標準設定では、Webサイトにアクセスした直後のTopページがBlog記事となってしまうため、Top画面用の固定ページを用意しました。
Blog記事
単発の情報はBlog記事として作成しています。
Blog記事は、あらかじめ用意しておいたカテゴリに記事を所属させることで整理をしています。
ページ共通の編集ルール
- JP Markdownをインストールしているので、記事はMarkdown形式で編集しています。
- Webサイト内のHTML構造を保つ為、記事内の見出しは
<h2>以下を使用しています。
画像の追加
Webサイト内で使用する画像は、CC0 ライセンスに基づいた画像を素材サイトから取得して使用しています。特によく利用するのがPixabayさんです。
