WordPressを使用したWebサイト構築メモ

WordPressで本格的にWebサイトを製作するのは初めてだったので、今後の参考にできるよう本サイトを構築したときのメモを残しておきます。
本ページでは、具体的な構築手順については触れず、どのような構成、機能を選択したか全体方針について記録します。
今後も変更があれば都度追記していこうと思います。

インフラ構成

料金を抑えつつ、今後の運用やサーバ拡張で楽をしたかったので、インフラ基盤にはAWSを選びました。

種別 サービス名
Web/DBサーバ EC2
DNS Route53
Mail 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登録

[参考サイト]

WordPress + HTTPS + リバースプロキシ = このページにアクセスする権限がありません。


https://www.nishi2002.com/18842.html

wordpressの前段にCloudFrontを置いたときの備忘録

http://blog.serverworks.co.jp/tech/2016/06/30/acm-auth-method/
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さんです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です