over the sky

WordPressをhttps化する。さくら公式の解説はこちら。

WordPressサイトのSSL化方法

本ブログはさくらのサブドメインなので、始めに共有SSLを有効にする。

1. さくらのコントロールパネルにログインする。
2. ［ドメイン/SSL］－［ドメイン/SSL］をクリック。
3. 本ブログのサブドメインの［設定］をクリック。
4. ［共有SSLを使用する］を選択。
5. ［HTTPSに転送する］を選択。
6. ［保存する］をクリック。

次にWordPressをhttps化する。

1. ［ダッシュボード］－［ツール］－［サイトヘルス］をクリックし、「サイトヘルス」画面を開く。
2. ［サイトで HTTPS を使用していません］をクリック。
3. ［サイトを更新して、HTTPS を使用する］をクリック。
   WordPressから自動でログアウトする。
4. WordPressに再ログイン。
   「サイトヘルス」画面が表示される。
5. 「サイト URL は HTTPS に切り替わりました。」と表示されていることを確認。

サイトヘルスで「古いデータベースサーバー」と表示される改善事項を解消するため、MySQLを5.5から5.7にアップグレードする。環境によって細かい手順が異なるらしく、さくら公式の解説はこちら。

データベースアップグレード機能

本ブログでの手順は下記のとおり。

1. さくらのコントロールパネルにログイン。
2. ［Webサイト/データ］－［データベース］をクリック。
3. ［アップグレード設定］をクリック。
4. ［データベースのアップグレード］をクリック。
5. ［同意する］を選択。
6. 「予約日時の設定」で時間を選択。
7. ［予約する］をクリック。
   　予約完了画面が表示される。この画面は［Webサイト/データ］－［データベース］から［アップグレード設定］をクリックすると再度表示できる。また、予約確認メールが登録してあるメアドに届く。
   データベースのアップグレードが完了すると、同じメアドに完了メールが届く。今回は予約時刻から10分後に届いた。
8. さくらのコントロールパネルにログイン。
9. ［Webサイト/データ］－［データベース］をクリック。
   データベースのホスト名が旧新2つ（MySQL 5.5と5.7）表示されていることを確認する。
10. 新データベースのホスト名を控えておく。
11. ［Webサイト/データ］－［ファイルマネージャー］をクリック。
12. WordPressのインストール先から「wp-config.php」を探し、右クリックして［ダウンロード］をクリックし、念のためローカルにバックアップしておく。
13. 「wp-config.php」を右クリックして［編集］をクリック。
14. 下記を探す。
    /** MySQL のホスト名 */
    define(‘DB_HOST’, ‘mysql***.db.sakura.ne.jp’);
15. 上記の「mysql***.db.sakura.ne.jp」を、さっき控えた新ホスト名に変更する。
16. ［保存］、［閉じる］を順にクリック。
17. ブログにアクセスし、正常に表示されることを確認する。また、［ダッシュボード］－［ツール］－［サイトヘルス］で「古いデータベースサーバー」が表示されないことを確認する。

WordPressのサイトヘルスの「1つ以上の推奨モジュールが存在しません」で「オプションのモジュール imagick がインストールされていないか、無効化されています。」と表示される。ネットで調べると、 imagick 拡張モジュール自体はさくらのレンタルサーバーに既にインストールされており、これをPHPで使えるように設定してやれば良いらしい。以下手順。

1. さくらのコントロールパネルにログイン。
2. ［スクリプト設定］－［php.ini設定］を選択。
3. テキストボックス内に下記コードを記入。
   extension = imagick.so
4. ［保存する］をクリック。
5. WordPressの［ダッシュボード］－［ツール］－［サイトヘルス］で上記の要改善事項が表示されないことを確認。

WordPressのサイトヘルスで5件ほど要改善事項があり、それらを解消しておく。

まず、停止中のプラグインの削除。

1. ［ダッシュボード］－［プラグイン］－［インストール済みプラグイン］で「プラグイン」画面を開く。
2. 無効化されているプラグインを一つ一つ削除。

次に、停止中のテーマを削除。

1. ［ダッシュボード］－［外観］－［テーマ］で「テーマ」画面を開く。
2. 使用していないテーマを同様に一つ一つ削除。

残りのimagick未インストール、古いデータベースサーバー、https未使用、についてはそれぞれ別投稿にする。

スマホで閲覧しやすくするため、WP Responsive Menuでレスポンシブメニューを追加する。

まず、WP Responsive Menuのインストール手順。

1. ［ダッシュボード］－［プラグイン］－［新規追加］で「プラグインを追加」画面を開く。
2. 右上の「プラグインの検索」に「WP Responsive Menu」と入力。
3. 「WP Responsive Menu」の［今すぐインストール］をクリック。
4. ［有効化］をクリック。

次に、WP Responsive Menuで表示するメニューを作成する。

1. ［ダッシュボード］－［外観］－［メニュー］で「メニュー」画面を開く。
2. 右上の［表示オプション］をクリックして、表示されるチェックボックス全部にチェックを入れておく。
3. 「メニュー名」テキストボックスにメニュー名を入力する。今回は「smartphone_menu」とした。
4. ［メニューを作成］をクリック。
5. メニューの先頭に本ブログの投稿「プロフィール」と「飛行記録」へのリンクを入れるため、「メニュー項目を追加」の［投稿］をクリック。
6. ［検索］をクリックし、「プロフィール」を検索し、チェックボックスを選択して［メニューに追加］をクリック。
7. 同様に「飛行記録」も追加。
8. 次にカテゴリーのリンクをメニューに追加する。［カテゴリー］をクリック。
9. ［すべて表示］をクリック。
10. ［すべて選択］を選択後、［プロフィール］と［未分類］を解除。
11. ［メニューに追加］をクリック。
12. 右下の［メニューを保存］をクリック。

作成したメニューを元に、WP Responsive Menuでレスポンシブメニューを作成する。

1. ［ダッシュボード］－［WPR Menu］－［WPR Menu］をクリック。
2. 以下のように設定する。
   　［General］タブ
   　　Select Menu：smartphone_menu（背景色が緑色になっていないと選択されていないので注意）
   　　Menu Title Text：over the sky
   　［Appearance］タブ
   　　Menu Icon Direction：Right
   　　Menu Open Direction：Right
   　　Menu Item Text Style：None
   　　Menu elements position：Search→Menu→Social
   　［Color］タブ
   　　Menu Bar Background：#0f0f0f
   　　Menu Bar Text Color：#ffffff
   　　Menu Container background：#ffffff
   　　Menu Item Text：#0f0f0f
   　　Menu Item Hover Background：#cccccc
   　　Active Menu Item Background：#cccccc
   　　Menu Icon Color：#ffffff
3. ［SAVE SETTINGS］をクリック。

1. ［ダッシュボード］－［更新］で「WordPressの更新」画面を開く。
2. プラグインのリストをざっと確認して［すべて選択］を選択し、［プラグインを更新］をクリック。
3. 更新完了後、［ダッシュボード］－［更新］を再度クリック。
4. テーマのリストを確認して［すべて選択］を選択する。
   テーマをカスタマイズしてある場合、更新するとカスタマイズが消えてしまうらしく要注意。本ブログで使用している「Twenty Seventeen」も更新対象だったが、今回は特に影響なかった。
5. ［テーマを更新］をクリック。
   更新完了後、念のためブログを表示させて異常がないか確認。

（翌日追記）

テーマに影響ないと思っていたのだが、ブログタイトルの小文字化が解除されてしまっていた…ので、修正した。

WordPressを5.8にアップグレード後、PHPが古いとメッセージがダッシュボードに表示された。アップグレード手順は以下の通り。

1. さくらのコントロールパネルにログイン。
2. ［スクリプト設定］－［言語のバージョン設定］で「言語バージョン設定」画面を開く。
3. 「PHPのバージョン」で［PHP7.4 [推奨]］を選択。
   最新のPHP8.0とWordPress 5.8の互換性が不明で、今回は7.4にしておく。
4. ［保存する］をクリック。
5. WordPressのダッシュボードで、PHPのメッセージが消えたことを確認。