WordPressのセットアップ

いよいよWordPress(ワードプレス)の導入を行います。
本記事ではWordPressのインストールから初期のセットアップ、導入したいプラグインをまとめています。

• 親記事：ブログ環境の構築作業まとめ
• 前記事：UbuntuでMySQL8.0のセットアップ

ドキュメントルートにWordPressファイルを配置する

まず独自ドメインのドキュメントルートに移動します。
前々回の記事の手順に沿っている場合は次の場所となります。

cd /var/www/your-domain.tld/public

次にWordPressの最新版を取得します。

wget https://ja.wordpress.org/latest-ja.tar.gz

ファイルの取得が完了したら、次のコマンドを順に実行します。
取得した圧縮ファイルを解凍し、ドキュメントルート直下に展開します。

tar -zxvf latest-ja.tar.gz
rm latest-ja.tar.gz
mv wordpress/* ./

最後に不要な空ディレクトリーを削除すれば準備完了です。

rmdir wordpress

WordPressの設定ファイルを編集する

ファイルの展開が完了したら、DB接続情報などを設定ファイルに書き込みます。
この作業はWebブラウザ経由でも可能ですが、Webブラウザでは編集できない項目もあるため、引き続きCLIで作業を行います。
次のコマンドで設定ファイルサンプルをコピーした後、編集を行います。

cp wp-config-sample.php wp-config.php

/var/www/your-domain.tld/public/wp-config.php・・・
// ** Database settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define( 'DB_NAME', 'database_name_here' );
define( 'DB_NAME', 'databasename' );

/** Database username */
define( 'DB_USER', 'username_here' );
define( 'DB_USER', 'username' );

/** Database password */
define( 'DB_PASSWORD', 'password_here' );
define( 'DB_PASSWORD', 'userpassword' );

/** Database hostname */
define( 'DB_HOST', 'localhost' );

/** Database charset to use in creating database tables. */
define( 'DB_CHARSET', 'utf8' );

/** The database collate type. Don't change this if in doubt. */
define( 'DB_COLLATE', '' );
・・・
/* Add any custom values between this line and the "stop editing" line. */

define('WP_POST_REVISIONS', 0);

if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) &&
    $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https'
) {
    $_SERVER['HTTPS'] = 'on';
    $_SERVER['REQUEST_SCHEME'] = 'https';
}

/* That's all, stop editing! Happy publishing. */
・・・

DBの設定項目については前回のDB作業で入力した内容をそのまま用いればよいので、説明を省きます。

define('WP_POST_REVISIONS', 0);

の設定項目ですが、未定義状態のデフォルトの場合は無限にリビジョン(編集履歴)を作成する設定となっています。 長くブログ運営を続けると、画面表示が遅くなるなどパフォーマンス面に問題が出てしまうため、リビジョン数を絞る設定を加えるのが望ましいです。
運用方法にもよりますが、リビジョンは2～3個あれば十分です。
また、設定例のように「0」を指定すると、リビジョンを一切作成しない状態となります。

その次にあるif文の

if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) &&
    $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https'
) {
    $_SERVER['HTTPS'] = 'on';
    $_SERVER['REQUEST_SCHEME'] = 'https';
}

ですが、nginx経由で設定したヘッダー情報をみて、WordPressが生成するURIスキームが適切になるようにサーバー変数を変更します。
なお、常にHTTPSで接続される前提でサーバー側の設定を済ませている場合、このif文は記述しなくてかまいません。

WordPressのインストールを実行する

設定ファイルの編集が完了したらWebブラウザから自ブログへアクセスします。

https://your-domain.tld

なお、最初に入力するユーザー名はWordPressのログインにも用いるため、画面表示する予定の名称とは別の文字列を指定することをおすすめします。
画面表示でインストール完了したらOKです。
そのまま管理者画面に移動します。

インストール完了後に管理画面でやること

ユーザー名をニックネーム表示に変更する

WordPressインストール時に入力したユーザー名はログインIDとしても使用するため、サイト表示用のニックネームを登録します。
管理画面左メニュの「ユーザー」を選び、一覧から現在ログインしている自分のアカウントを選択します。
編集画面が表示されたら「ニックネーム (必須)」に設定されているログインIDをブログ表示用のものに変更します。
次に「ブログ上の表示名」で先程入力したニックネームを選択して、プロフィールを更新すれば対応完了です。

パーマリンクの形式を確定させる

次に行うのは「パーマリンク」の形式設定です。管理画面左メニューより
設定 ＞ パーマリンク
を選び、パーマリンク構造のラジオボタンで「カスタム構造」を選ぶと自由に編集することが可能です。

ブログの運用を開始するとSNS等で記事のURLをシェアすることもありますが、URLの形式が度々変わってしまうと過去のシェアが無駄になってしまいます。
形式変更の度にリダイレクト設定を増やすのも面倒です。

また、URLからどのような内容の記事であるか想像できる形式だと、SEOの観点でも評価が高くなるとされています。
パーマリンクの形式は大きくわけて、次の3つのうちのどれかがおすすめです。 なお、URL最後の「%postname%」ですが、日本語の場合はURLエンコードされた文字列となってしまうため、投稿画面からパーマリンクを再編集する運用にしましょう。

日記スタイルで気軽に運用する場合

設定値：https://your-domain.tld/%year%/%monthnum%/%day%/%postname%
↓
表示例：https://your-domain.tld/2024/05/15/setup-wordpress

カテゴリー変更の可能性を考慮する場合

設定値：https://your-domain.tld/%postname%
↓
表示例：https://your-domain.tld/setup-wordpress

カテゴリー固定で運用する場合 (SEO評価は最も高い)

設定値：https://your-domain.tld/%category%/%postname%
↓
表示例：https://your-domain.tld/note/web/setup-wordpress

使用するテーマを決める

次にWordPressで使用するテーマを決めます。 テーマによって有償なものから無償なもの、商用利用可能なものから不可のものまで、種類は様々です。自分の創りたいブログに適したものを探し、テーマファイルをダウンロードしましょう。

テーマファイルをダウンロードしたら、管理画面左メニューより
外観 ＞ テーマ を選び、テーマファイルをアップロードし有効化しましょう。

テーマ決めで悩まずとりあえず無難に始めるなら、利用者も多い「Coccon」で問題ありません。私も気になったものをひと通り試してみましたが、最終的にCocconで落ち着きました。
CSSやPHPの知識があれば、それなりに改造も可能です。
次の公式サイトから親テーマと子テーマの2つをダウンロードし、両方アップロードしたら子テーマを有効化しましょう。

テーマのダウンロード

Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。

wp-cocoon.com

投稿者情報を隠蔽する

https://your-domain.tld/?author=1
と入力すると
https://your-domain.tld/author/USER_NAME/
という形で投稿者アーカイブページにリダイレクトされます。
ここのURLに表示されるユーザー名はWordPressのログインIDにもなるため、セキュリティの面でも隠蔽したいです。

匿名参加型の複数人運用ブログを実現したい場合、投稿者アーカイブを利用したいケースもあると思います。その場合は後ほどプラグインの項でも紹介しますが、「Edit Author Slug」を導入するのがよいでしょう。

個人運用のブログである場合、投稿者アーカイブ自体必要ない機能であるため、封印してしまう方向で対策します。 テーマディレクトリー配下にある「functions.php」を編集します。
仮にCocoonを選んでいる場合、ドキュメントルート基準で次のファイルとなります。

./wp-content/themes/cocoon-child-master/functions.php//以下に子テーマ用の関数を書く

// 投稿者情報を隠す
if (!function_exists('author_archive_redirect')) {
    function author_archive_redirect()
    {
        if (is_author()) {
            wp_redirect(home_url().'/404-not-found');
            exit;
        }
    }
    add_action('template_redirect', 'author_archive_redirect');
}

if (!function_exists('filter_rest_endpoints')) {
    function filter_rest_endpoints($endpoints)
    {
        if (isset($endpoints['/wp/v2/users'])) {
            unset($endpoints['/wp/v2/users']);
        }
        if (isset($endpoints['/wp/v2/users/(?P[\d]+)'])) {
            unset($endpoints['/wp/v2/users/(?P[\d]+)']);
        }

        return $endpoints;
    }
    add_filter('rest_endpoints', 'filter_rest_endpoints');
}

・・・

上記PHPコードの追加により、投稿者アーカイブおよびユーザー情報取得APIが無効化されます。

使用するエディタを理解する

WordPressでは大きくわけて、次の3つのエディタが存在します。

テキストエディタ

HTMLやVSCodeなどのエディタ作業に慣れている人向けのエディタとなります。
Markdown文章のまま記事を管理したい人もこのエディタを利用しましょう。
後述するプラグイン「Classic Editor」を導入することにより、煩わしい自動整形から解放されます。

ブロックエディタ

記事内のセクションをブロック単位で区切り、視覚的に編集作業を行えるため、PC作業に不慣れな人向けのエディタとなります。
WordPress最新版で標準搭載されているGutenberg(グーテンベルク)がブロックエディタであるため、そのまま利用できるのもポイントが高いです。
マウス操作がそれなりに必要となるため、PC作業に慣れている人ほどおすすめはできません。

ビジュアルエディタ

テキストエディタとブロックエディタの中間的立ち位置のエディタとなります。
入力したHTMLやMarkdownが即座に視覚化されるため、初級者・中級者向けのエディタと言えます。
大枠を自動補完で作り、微調整でHTMLタグを編集したい人におすすめです。
再編集作業時、意図しない自動整形が起きる点には注意しましょう。

導入したいプラグインの紹介

Classic Editor

テキストエディタをメインに投稿作業したい人向けのプラグインとなります。
エディタの違いについては前項で説明したとおりです。
Classic Editorをインストールして有効化したら、

1. 管理画面左メニューのユーザーをクリック
2. ユーザー一覧から現在のログインユーザーをクリック
3. 「ビジュアルリッチエディターを使用しない」にチェックを入れる
4. 設定を保存

とすることでビジュアルエディタが封印され、再編集時にHTMLを破壊されずに済みます。

XML Sitemap & Google News

旧名：Google XML Sitemaps
主に検索エンジン向けに必要なXMLサイトマップを自動作成してくれるプラグインとなります。

Edit Author Slug

投稿者アーカイブのURLから漏洩するログインユーザー名を隠蔽する設定が可能なプラグインとなります。
投稿者アーカイブを利用予定の方は導入しましょう。 詳細はプラグイン情報ページをご確認ください。

Edit Author Slug

管理者 (または資格のあるユーザー) にユーザーの author slug を編集したり Author Base を変更することを許可。

ja.wordpress.org

XO Security

固定IPによる管理者機能アクセス制限が行えない場合に導入すべきプラグインです。 詳細はプラグイン情報ページをご確認ください。

XO Security

XO Security はログイン関連のセキュリティを強化するためのプラグインです。

ja.wordpress.org

Contact Form 7

ブログにお問い合わせフォームを簡単に設置するため、広く利用されているプラグインとなります。
Googleアドセンスなどの導入を考えている場合、必須となるプラグインのひとつです。

Flamingo

先ほど紹介したContact Form 7と同じ制作者様によるプラグインとなります。
お問い合せフォームで送信した内容をWordPress管理画面内でも確認できるようになります。
メールの受信・送信サーバーの不備・不具合などにより、メールが消失した場合でもお問い合わせ内容が確認できるため、セットで導入するようにしましょう。

WP Mail SMTP

自前でメールサーバーを構築しない場合に必須となるプラグインとなります。
GmailなどSMTP設定可能なメールサービスと連携することで、WordPressから送信されるメールが迷惑メールに判定されにくくなります。

EWWW Image Optimizer

適度に画像をアップロードする人におすすめのプラグインとなります。
WordPressにアップロードする画像の画素数を指定サイズまでリサイズする機能を提供してくれます。
使用するテーマにもよりますが、横1280px, 縦720pxでリサイズ設定するのが容量・画素数の面でバランスがいいです。
他にも位置情報などのメタ情報自動削除やWebP形式の画像変換など、ブログ用に加工する時間を短縮できます。

おわりに

以上でWordPressのセットアップは完了し、ブログ環境の構築作業は全て終了となります。お疲れ様でした。
WordPressはテーマやプラグイン、独自の改造で様々なコンテンツを作ることができるので、気になる方はいろいろ弄ってみることをおすすめします。

ブログ環境の構築が終わった後は運営となりますが、スローペースでも長く続けていくことが大事だと思っています。
この記事で紹介していない便利なプラグインはたくさんあるため、ブログ投稿の敷居を下げる自分に合ったセッティングを行ってみてください。

それでは！