ドメインの取得
二つ目の記事として、「古きを知り新しきを学ぶ」このブログの立ち上げについて、簡単に説明します。新しく WordPress のサイトを立ち上げる方の参考になればと思います。
このブログは、ロリポップ！レンタルサーバーのハイスピードプランで、二つめに立ち上げたものです。
ロリポップ！レンタルサーバーでは、ハイスピード・エンタープライズプランで長期利用の場合は更新費用無料でドメインを一つ取得できるのですが、現在は二つめのドメインも無料で取得できます。契約中は更新料も無料です。これを利用してムームードメインで lftp-dsn.space のドメインを取得しました。
自動応答チャットボットではなくオペレータに必要事項を連絡してクーポンコードを送って頂き、ムームードメインでのドメイン取得の際に入力する形です。前日の夕方に申請し翌日朝イチには回答を頂きましたので、予想よりも早く届きました。
クーポンコードを頂いてから、lftp-dsn.space のドメインを取得し、DNS (ネームサーバー) をロリポップ！へ移行しました。この移行に20分ほど要しました。
SSL の設定
DNS がロリポップ！へ移動したら、先ずはSSL の設定です。
ロリポップ！レンタルサーバーでは、
- 独自ドメイン ... lftp-dsn.space
- www.独自ドメイン ... www.lftp-dsn.space
の二つが初期設定で有効になっています。
DNS 移行の影響なのか、SSL を有効に出来るまで少し時間を要しました。先に lftp-dsn.space、次に www.lftp-dsn.space、と順番に両方の独自 SSL を有効にしました。
前回のサイトの立ち上げの際には、WordPress のインストールを先に行って、後で SSL を有効にした為に、少し遠回りしました。先に独自 SSL を有効にした方がスムーズに作業が捗ります。
WordPress 簡単インストール
本当に簡単でした。
- サイト URL
- 利用データベース ... 新規に作成 (MySQL Version up があった為)
- サイトのタイトル
- ユーザー名、パスワード
- メールアドレス
- LiteSpeed Cache プラグインを利用するか ... yes
- 使用するテーマ ... Cocoon (有料テーマの場合は事前に購入)
を入力すると、10分程度でトップページが表示されます。Cocoon テーマ、LiteSpeed Cache プラグインも事前にインストール・設定されていました。
私は Password の管理に KeePassXC を使用していますので、26文字ランダムで設定したら WordPress の最初のログインに失敗しました。文字数の制限があるのでしょうか？パスワード再設定では26文字でも OK でした。
WordPress の最初の起動直後に行った事
実施した内容を順不同で列記します。
- WordPress アップデート
- Cocoon テーマ アップデート
- 不要プラグインの削除
- LiteSpeed Cache プラグイン アップデート
- Sitekit by Google プラグイン アップデート
- Contact Form 7 プラグイン インストール
- Google reCAPTCHA の設定
とりあえずは、ここまで実施しておけば一安心です。
Cocoon grayish スキン
2023年11月に Cocoon テーマに同梱されるようになった grayish スキンを選択しました。新しく WordPress のサイトを立ち上げる時には grayish スキンを使用すると決めていました。
これまで立ち上げたサイト、見た目より内容重視でしたので、少々野暮ったい古い印象のブログでした。grayish スキンは、グレーが基調の落ち着いた配色で、トップページの網点の装飾も気に入っています。
これまでのスキンとは異なり、Cocoon の設定のかなりの割合をスキンで固定していますので「自分色に染め切りたい」という方には向かないと思います。grayish スキンの枠の中で自分の色を出すように、少しずつ作りこんでいる最中です。
先ずは白猫をサイトアイコンとトップページに配置しました。
プラグインの設定
兄弟ブログの経験がありますので、プラグインの選択・設定は参考にしながら進めました。
- Sitekit by Google で Google Analytics と Google Search Console を設定
- Contact Form 7 プラグインで reCAPTCHA (設定済) とお問い合わせフォームの作成
- Flamingo プラグインで reCAPTCHA が機能しているか確認 (プラグイン選択画面には出なかったので直接インストールしました)
- BackWPup プラグインで定期バックアップ & 自宅 NAS へ rsync
- XML Sitemap & Google News プラグインで sitemap.xml を作成し Google Search Console へ登録
- WP Crontrol プラグインのインストールと、ロリポップ！レンタルサーバーの cron で定期実行
- functions.php と style.css の必要な部分のコピペ
1年前に立ち上げた兄弟ブログには、上記の内容が書かれています。
一つずつ調べながらまとめていた事が、一年後の今になって役立ちました。
アクセス速度の高速化
アクセス速度の高速化については、Cocoon テーマの標準機能を使うか、これまで通り LiteSpeed Cache プラグインを使用するか、両方を試して決める事にしました。
初期状態では、PageSpeed Insight (PSI) のスコアは、Mobile 51 PC 94 でした。
- Cocoon テーマの高速化は、全てチェックを入れると grayish スキンでは何も表示しない状態になりました。
- CSS と JavaScript 縮小化の除外項目に grayish スキンの directory を設定すると表示されました。
- Google reCAPTCHA についても、JavaScript 縮小化の除外項目に入力する必要がありました。
この状態で再度 PSI を測定すると、Mobile 44 PC 93 でした ... あまり変化がありません。
Cocoon の高速化の機能では、画像の最適化 (tiny化、webp化) までは行ってくれません。手元で最適化させた画像を upload する必要があります。
そのような手間まで含めると、LiteSpeed Cache プラグインを使用する方が良いかと感じます。
Cocoon の高速化を全て OFF にしてから、LiteSpeed Cache プラグインの設定を一つずつ詰めました。
- domain key 取得、QUIC.cloud ID に紐付け
- 画像の最適化を自動で行う
- モバイル最適化
- HTML 圧縮化
- CSS 圧縮・結合・インライン化・遅延読み込み、Uniq CSS (UCSS) 作成
- JS 圧縮・結合・インライン化・遅延読み込み (reCAPTCHA に関する JavaScript 除く)
- jQuery.min.js の遅延読み込み
と、PSI に特化したゲストモードを除いた項目について、不具合がないかどうかを確認しながら設定しました。
LiteSpeed Cache プラグインの設定が終わり、UCSS が生成された後の状態で、PSI のスコアは Mobile 97 PC 100 と兄弟ブログと遜色ない結果となりました。
特に効果的だったのは JS の最適化と jQuery.min.js の遅延読み込みです。場合によっては不具合が出易い項目ですが、reCAPTCHA 周りを除外しておけば大丈夫でした。
未だ Google AdSense は導入していませんが、この位の PSI のスコアであれば問題ないでしょう。
LiteSpeed Cache プラグインについても兄弟ブログで色々と取り組んでいます。
アクセス速度の高速化 (修正)
前記の兄弟ブログでもあったトラブルですが、LiteSpeed Cache プラグインを使用している際に、ログイン状態では正常に表示されていても、ログアウト状態で表示が乱れる現象が、このブログでも発生しました。
- サイドバーが空白になる
- アイコン下の文字が表示されない
- フロントページで「検索」アイコンが表示されてスクロールすると消える
- フロントページ上部の「ホーム」アイコンが中央に表示される
- などなど
JavaScript と CSS の最適化を調整して、一先ず表示が安定する条件を見つけました。
Cocoon テーマの grayish スキンを使用している場合の LiteSpeed Cache プラグインの設定は、
- 「JS の遅延読み込み」を Defferd にする (Delay では NG)
- 「CSS の外部とインラインを組み合わせる」を OFF にする
この2点が重要です。
ゲストモードを有効にして、Mobile 96 PC 100 になりました。暫くはこの条件で運用してみます。
もしご要望があれば
- ロリポップ！レンタルサーバーの LiteSpeed Cache プラグインの初期設定
- Cocoon テーマ + grayish スキン使用時の LiteSpeed Cache プラグインの設定
を記事として公開します。
固定ページの作成
お問い合わせフォームとプライバシーポリシーは固定ページで作成しました。兄弟サイトがあると転用できる事が多く便利です。
アフィリエイトサイトへ登録
A8.net と Amazon アソシエイトに登録し、1月29日には、楽天アフィリエイトとバリューコマースにも登録しました。
残りは Google AdSense ですが、もう少し記事数がないと難しいでしょうから、10記事程度まで投稿したら申請してみます。
結び
立ち上げて二日目、概ね設定したいと考えていた項目は完了しました。やはり兄弟ブログで色々と取り組んだ効果が明確に現れていると感じます。
以上でブログの構成、立ち上げについてのまとめは終わりです。これからは記事の内容の充実に力を注ぎます。
Synology の NAS の活躍する場面が増えました。このブログのバックアップは rsync で NAS にも同期されます。
コメント