ステップ１「ドメイン設定からWPインストールまで」
・ドメイン取得
Xserverで1円
・ドメイン設定
Xserver > ドメイン設定 > ドメイン設定追加
無料独自SSLとアクセラレーターはオン(奨励)のまま
・WordPressインストール
Xserver > WordPress > WordPress簡単インストール
（バージョンは5.8.2）
確認メッセージ：www.hapito55.comでもアクセス可。
メモ：インストール後「www」はURLから自動で除かれる。
ステップ２「テーマをインストールからSSLの設定まで」
・ワードプレスの管理画面にログイン
管理画面URL：http://(あなたのサイト)/wp-admin/ から
インストール時に指定したユーザー／パスワードで
・テーマをインストール
使い慣れている無料「Cocoon」にしました。
https://wp-cocoon.com/theme-install/
親テーマは「開発者によるアップデート」
子テーマは「ぼくたちがカスタマイズする」
ので、親子の両方をインストールします。
どちらもPCにダウンロードしてから
WordPressへアップロードする感じです。
WordPressのメニューは
ダッシュボード > 外観 > テーマ > 新規追加 >
テーマのアップロード > ファイル選択 > 今すぐインストール
ファイルのアップロードに時間がかかる場合は
しばらく待ちましょう。
子テーマを「有効化」します。
これでカスタマイズは子テーマにやれます。
・スキンを設定します
Cocoonの「着せ替え」機能ですね。
WordPressのメニューは
ダッシュボード > Cocoon設定 > スキンタブ >
スキンを選んで > 変更をまとめて保存
hapito55.com では、作者アオイさんの
「Fuwari -御召茶(おめしちゃ)」を選びました。
・http > https へのリダイレクト
①ダッシュボード > 設定 > 一般
http を https の記述に変更する。
②ダッシュボード > Cocoon設定 > その他タブ >
内部URLをSSL対応（簡易版）をチェックオン >
変更をまとめて保存
③.htaccessを編集する
.htaccessの先頭部分に次の5行を入れます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
Xserverのファイルマネージャを使って
.htaccessをダウンロードし、
テキストエディタで編集して、
更新ファイルをアップロードして戻します。
※.htaccessはサイトが正常動作するために
とても重要なファイルなので、編集前には
かならずコピーを取っておいてください。
これでサイト内のどのページに http で
アクセスしても https にリダイレクト
されるようになりました。
ステップ３「プラグインのインストールと設定」
ひとまずデフォルトで入ってるプラグインを全部アンインストール。
・必須なプラグインをインストールして有効化
WordFence Security
プレミアムではなく無料だけで使う。
ウィザードにしたがってWordFence Wep Application Firewall の設定を完了させる。
BackWPup
週１回フォルダーにバックアップをとるcronを設定。
EWWW Image Optimizer
遅延読み込みとWebP変換をオンに。
（CocoonのLazy Loadはオフにすること。）
追記：2021/1/7 ヘッダーのロゴ画像が表示されない。
EWWW Image Optimizerの遅延読み込みもオフに。
・あとで使うだろうプラグインもインストールして有効化
Category Order and Taxonomy Terms Order
カテゴリーの表示順序を変えたいときに、
ダッシュボード > 投稿 > Taxonomy Order から使う。
(Google) XML Sitemaps
作者: Auctolloさんのもの。
サーチコンソールを使うため。
このプラグインでサイトの更新が
Googleに自動的に通知されるようになる。
設定：
HTML形式でのサイトマップを含める – オフ
優先順位を自動的に計算しない – オン
カテゴリーページを含める – オン
Change Frequencies と優先順位の設定は、適宜。
Contact Form 7
問い合わせページを作成。
https://hapito55.com/contact/
補足：EWWW Image Optimizer ＋ Xserver環境 で WebP対応するとき
ダッシュボード > 設定 > EWWW Image Optimizer > WebP の配信方法
このサイトには mod_headers が抜けているようです。この Apache モジュールを有効化するよう、ホスティング会社やシステム管理者にご連絡ください。
とエラーメッセージがでますが、無視してOK。
こことか、こことか、ここで、
説明されているので、エラーはスルーして先に進みます。
Xserverを使っていると
こういう情報がいっぱい発信されているので
ほんと助かります。
ステップ４「Cocoonと高速化の設定」
Cocoon設定をしていきます。
見た目はあとで整えることにして、
まずは機能面の設定をしちゃいます。
以下は「Cocoon設定」のタブから：
SEO ー「タグページの2ページ目以降をnoindexとする」をオフ
タグをつかってポストプライム投稿を整理する予定なので。
アクセス解析・認証 ー「サイト管理者も含めてアクセス解析する」をオフ
投稿 ー「コメント設定」ー「コメントを表示する」をオフ
ポストプライムと連携して運用しようと思ってるので、
ブログのコメント欄は不要ですね。
（ダッシュボード > 設定 > ディスカッション > コメント表示条件 > 「コメントの手動承認を必須にする」がオフになっていることも確認。ハローワールドの投稿は削除するか、個別設定で「コメントを許可」「ピンバックとトラックバックを許可」をオフにする。）
本文 ー 「投稿情報表示設定」ー「投稿者名の表示」をオフ
ひとりで運用するので。
SNSシェア ー トップとボトムの、シェアボタンの表示をオフ
SNSフォロー ー「本文下のフォローボタンを表示する」をオフ
モバイル ー「モバイルボタン時コンテンツ下のサイドバーを表示」をオン
その他 ー「内部URLをSSL対応（簡易版）」をオン
AMP ー「AMP機能を有効化する」をオン
（問い合わせページで「AMPページを生成しない」をオンにする。
入力フォームがあると正しく表示されないし、
サーチコンソールでエラーになっていた経験があるので。）
次に
ダッシュボード > Cocoon設定 > 高速化
「ブラウザキャッシュの有効化」をオン
「HTMLを縮小化する」をオン
「CSSを縮小化する」をオン
「JavaScriptを縮小化する」をオン
※ 「Lazy Load」はオフのままにしておく。
CocoonのLazy Loadは、WordPressのLazy Loadの
補完機能で今後廃止されるかもしれない。また、
EWWW Image Optimizer との機能バッティングで
予期せぬ不具合を予防するためにオフにしておく。
ーーー
これで今回のブログの最大プライオリティ
「高速化」の設定が完了。
・AMP対応、WebP対応、データ縮小化、
画像最適化、遅延読み込み(WP標準で)、
キャッシュ利用、くらいかな。
記事投稿をたくさんやってから設定変更すると
エラーが頻発する可能性があるので、
プログ立ち上げ時にやってしまうのが良策です。
AMPをオフにしなければならないページが
のちのち出てくる可能性がありますが、
できるだけAMP利用を優先する方向でいくつもりです。
ステップ５「忘れがちな表示設定」
「思わぬところでヘンな表示に…」
ということを防ぐため、
・外部から参照される画像
・URLの表記
を整えておきます。
・パーマリンク(URL表示)
ダッシュボード > 設定 > パーマリンク設定 >
カスタム構造に「/%category%/%postname%」を入力。
・画像の設定
ダッシュボード > 外観 > カスタマイズ > サイト基本情報 > サイトアイコン
（ブラウザタブ用のアイコンを設定する）
Cocoon設定 > OGP > ホームイメージ
（外部から参照されるときのデフォルト画像）
Cocoon設定 > 画像 > NO IMAGE画像
（アイキャッチがないときのサムネ用）
Cocoon設定 > AMP > AMPロゴ
Cocoon設定 > 404ページ > 404ページ画像
ステップ６「画面上部のデザイン」
画面上部あたりのデザインをしていきます。
・Cocoon設定 > ヘッダー > ヘッダー設定 >
キャッチフレーズの配置 > 表示しない
ヘッダーロゴの画像ファイルをアップロード
・Cocoon設定 > アピールエリア >
アピールエリアの表示 > 全ページで表示
高さ > 200
ボタンメッセージとボタンリンク先を入力
・エリア背景色
・ボタン色
・コードの中の背景色
この３つの色を揃えることでエリア全体が
ボタンとして機能することになるんですね。
外観 > テーマエディター > スタイルシート
でカスタマイズ用のコードを挿入します。
こちらのコードを参考にさせてもらいました。
https://yujiblog.org/wordpress-appeal-area
（よい情報がまとまった優良サイト！）
※ スタイルシートも編集前にコピーして
バックアップするのをおすすめします。
うまく動作しなくて元に戻すことが
まあまああります。
次にメニューを作成していきます。
・事前準備
この段階で、ある程度ブログの
構成を決めておきます。
初めてのWPブログの人は、
10個くらい記事を書いてから
メニューに取りかかっても
遅くないと思います。
コンテンツのイメージがないと
カテゴリ・タグ・メニューなどの
どうやって分類するか
考えづらいので。
・まずはヘッダーメニュー
PCなど大きい画面でトップに表示されるとこです。
ダッシュボード > 外観 > メニュー >
新しいメニューの作成
メニュー名：「ヘッダーメニュー」としておきます。
メニューの位置：ヘッダーメニュー
「ポスプラ検索、リアルFIRE物語、DeFi」
とりあえず３つ作成しました。
・モバイル用のヘッダーボタン
https://wp-cocoon.com/mobile-header-buttons/
Cocoonの公式サイトのやり方を参照。
#menu、#logo、#search のコマンドを
カスタムリンクでボタンとしてメニューを作成。
それをモバイルヘッダーの場所に配置する
という感じです。
#menu コマンドで、前述のヘッダーメニューが
左側からスライドイン表示されます。
・ここまでのヘッダー部分の表示を
カスタマイズします。
また yuji さんのブログをお世話になります。
このあたりのコードや設定：
https://yujiblog.org/menu
https://yujiblog.org/cocoon-menu-mobile
を使わせてもらって、適宜調整します。
表示調整はスキンにも依存するので
なかなか一筋縄にはいきませんね…
まだ途中ですが、時間がかかりすぎるので
いったん切り上げました。
ステップ７「コンテンツの追加開始」
コンテンツの追加を開始しました。
色合いのバランスを考えて、
画面上部あたりの色を調整したり
いらない要素を非表示にしました。
・Cocoon設定 > ヘッダー > ヘッダー設定 >
グローバルナビメニュー色
画面上部あたりの色を調整。
・ラベルを非表示。
外観 > テーマエディター > スタイルシート
/* カードやアイキャッチ上のラベルを非表示 */
.cat-label {
display: none;
}
ある程度コンテンツが追加できたら
次はタグがらみのことをやっていきます。
ステップ８「サイドバーにタグを設置」
・外観 > ウィジェット > サイドバー
サーチ／プロフィール／タグ／人気記事
をサイドバーに表示するように変更。
・外観 > ウィジェット > サイドバースクロール追従
にタグを追加。
・ユーザー > プロフィール
とりあえず簡単なものを。
これで一気に目的の投稿にアクセス
しやすくなりました✨
「無料投稿」とか「株式投資」とかで
投稿を絞り込めるのはホント便利！
ステップ９「Google アナリティクスと Search Console の設定」
そのうちSEOで、いくつかのキーワードの
検索上位を狙うことになると思うので、
GoogleのアナリティクスとSearch Consoleの
設定をしておきます。
どちらも他のサイトでは利用しているので、
設定で hapito55.com を追加する感じですね。
・Google アナリティクスにログイン
管理 > プロパティを作成
データストリームのウェブに hapito55.com を入力
Google アナリティクス４になったので
UAで始まるトラッキングIDはなくなりました。
なので、gtag.js のコードを、
Cocoon設定 > アクセス解析・認証 >
その他のアクセス解析・認証コード > ヘッド用コード
に追加します。
・Google Search Console にログイン
プロパティを追加 > ドメイン > URLプレフィックスで追加
「確認方法：Google Analytics」で自動認識されました。
設定 > 所有権の確認 > HTMLタグ
から content＝”xxx” の値の部分だけコピー。
それを、
Cocoon設定 > アクセス解析・認証 >
Google Search Console ID に入力します。
設定 > 所有権の確認 > HTMLタグ
に戻って「確認」をすると２つめの認識が完了です。
通知メールには「http や www も追加して」とありますが
経験上「httpsでwwwなし」しかアクセスないので追加せず。
あとはすでにインストールした
XML Sitemaps プラグインが sitemap.xml を
Google に適宜送信してくれるのでOKですね。
補足：
AMP対応しているので、Search Console からエラーや
要ページ修正のメールがそのうち来るかもしれません。
もしそうなったらその都度対応していくことになります。
注意：
2022年1月現在 GA4とSearch Consoleの連携はできません。
他サイトでは以前から UAとSearch Console を連携して
使っていたので不便に感じますが、ムリに連携しなくても
クエリに関する必要な情報は手に入るので、最新のGA4を
使うことにしました。
GA4はUAよりも、ユーザーのプライバシーに配慮しつつ
Web上の行動をより詳しく集計できるらしいので。
フッターを作成
BCG関連の記事でPVが増えてきたので
アドセンスを申請することにしました。
フッターに
HOME／問い合わせ／プライバシーポリシー／運営者
を追加。
やり方は
外観 > カスタマイズ > メニュー >
メニューを新規作成、
フッターメニューを作成。
申請は難なく通過して
ads.txt を指示にしたがって配置。
