ブログテーマを変更しました。
ずっとAuthorというブログテーマを使用していましたが、先日ブログの環境を丸ごとアップデートしたついでにデザインも変更しました。
左にサイドバーをつけたデザインでしたが、今回は1カラムにしてサイドバーを廃止しました。コンテンツに集中できるスタイルになったと思います。
読者もほとんどがPCではなくモバイルからのアクセスですので、文字と写真をメインにしたデザインです。
初めてブロックパターンを触ってみましたが、自由度が高すぎるがゆえに「パーツどこで共通化するんだ？、余白どう制御すんだい？と格闘し、沼から抜け出すのに半日溶けました。
今回は超名門の無料ブロックテーマ「Björk（ビョーク）」を使いシンプルでモダンな1カラムサイトを構築する手順を解説します。
テスト環境での検証から、本番環境へデータを壊さずに安全にデプロイしていきます。
本番環境をバックアップ
定番のバックアッププラグインのAll in One WP Migration and Backupをインストールして、エクスポート画面を開きます。
検索と置換の項目で、
検索: https://kuimal.com
置換: http://kuimal-test.local
と入力します。インポートできる際の容量制限が300MBのため、高度なオプションを開いて、任意の項目を除外します。
私の場合はメディアライブラリをGoogle Cloud Storageに保管しているため、メディアライブラリを除外、またプラグインも除外しました。
サイトのエクスポート先をファイルに選択して出力します。
ローカル検証環境
まずは、本番サイトに適用する前にローカル検証環境を作成して弄り倒しましょう。ブロックパターンを初めて触る方や色々試すのに最適です。
ローカル検証環境の構築には、Local（旧Local by Flywheel）を使います。
まずは以下のリンクからdownload for freeをクリックします。
すると入力フォームが表示されるので、適当な値を入れてGET IT NOW!ボタンをクリックします。
インストーラーがダウンロードされるので、インストーラーを起動してアプリケーションを起動します。
最初の画面でCreate a new siteをクリックします。（スクリーンショットはMac環境です）
次にサイト名を先ほど置換したドメイン名にします。
Preferredを選択します。
usernameとpasswordを適当な値で設定します。（後ほどバックアップファイルをインポートした際に本番環境のユーザー名とパスワードで上書きされます。）
Add Siteをクリックすると環境構築が始まるので、少し待ちます。
画面が変わったら、WP Adminボタンをクリックします。
管理サイトが開いたら先ほど作成したユーザー名とパスワードでログインします。
設定 > 一般設定から言語を日本語に変えておきましょう。私は先述の通り画像をGoogle Cloud Storageに保管していたので、WP-Statelessプラグインだけインストールして画像を表示させました。
本番環境をローカル検証環境に反映
Pluginの追加からAll-in-One WP Migration and Backupをインストールして有効化（Active）します。
有効が完了したらImportを開き、先ほどエクスポートしたzipファイルを放り込みます。
するとログアウトされるため、本番環境と同じユーザー名とパスワードでログインします。
テーマの追加からBjörkをインストールしておきます。
これでローカル検証環境の構築は完了です。次からは実際にテーマを弄り直していきます。
テーマを入れる
ここからがいよいよ本番です。フルサイト編集（FSE）の機能を使い、サイトをシンプルにモダンなデザインに近づけていきます。
管理画面の 外観 ＞ エディター ＞ テンプレート ＞ フロントページを開いてください。
次に画面左上にある三本線をクリックしてリストビューを開いてください。（重要）
これを開かないとどこを編集しているのかわかりにくくなるため、表示しておきましょう。
次に右上のサイドバーボタン（下記画像の左端）をクリックして設定項目を表示してください。
1カラムにする
初期状態のテンプレートにはサイドバーを作るためのカラムブロックが配置されています。まずはこれを削除します。サイドバーを選択して、deleteキーを押します。
削除して1カラムにすると全体のコンテンツが左によってしまうので、次は中央揃えにしましょう。
- リストビューで、コンテンツ全体を包んでいる一番外側の
グループブロックを選択します。 - 画面右側の設定パネル（歯車マーク）にある
レイアウトの項目からインナーブロックに幅を設定するのトグルを【オン】 にします。 - 数値はデフォルトのままでOKです（コンテンツ幅: 650px〜800px / 幅広: 1100px〜1200px）。
テンプレートパーツを量産する
フロントページ（トップページ）でヘッダーとフッターが完成したら、他のページ（個別記事や404ページなど）にもそのデザインを適用させましょう。
ブログの中で、主要な画面は以下の通りです。すべて同じ見た目に統一していきます。
- 個別投稿（Single Post）： ブログの命。記事本文のページです。
- すべてのアーカイブ（Archive）： カテゴリー一覧などのページです。
- 検索結果（Search）： サイト内検索をしたときに出るページです。
- ページ: 404（ページが見つかりません）： リンク切れの時に出る迷子ページです。
パーツを作る
ヘッダーやフッターを作成して他の画面でも使いまわせるようにします。
テンプレートページで作成した部品をパーツ化したい時は、リストビューから要素を選び、三点アイコンをクリックします。テンプレートパーツを作成をクリックします。
次に、適当な名前をつけて、エリアを選択します。今回はヘッダーを選択します。
追加が完了すると、紫色のパーツになります。
作成したパーツを配置する
作成したパーツを配置するには、左上の青い➕ボタンから、パターンタブを選択して、作成したパーツを探します。
私の環境ではヘッダーの項目になかったため、検索から「ヘッダー」と入力して適用しました。
ヘッダーは一番上に配置すると、カラムの制約なしに一番上に配置されます。
すでに配置されているパーツを置換することもできます。置換の手順は以下の通りです。
- エディターの
テンプレート一覧から、404を開きます。 - 一番上にある古いヘッダーブロックを選択すると、ツールバーに 「置換（Replace）」 というボタンが出現します。
- それをクリックし、先ほどフロントページ用にカスタムした「共通ヘッダー」を一覧から選んで差し替えます。フッターも同様の手順で差し替えます。
余白をなくす
画面左右や上下に余白がある場合は以下手順で余白を削除してください。
右上のスタイルアイコンをクリックして、レイアウトを選択します。
次に、パディングの左右と上下を0pxにします。
子テーマ化して本番にデプロイ
そこそこ納得のいくテーマが完成したら、次はローカル検証環境から本番環境にデプロイします。凝りすぎると終わらないので注意。
絶対にやってはいけないのが、ローカルのデータベース（DB）を丸ごとエクスポートして本番にインポートすることです。本番サイトにある過去の大切な記事データが上書きされて消滅します。
今回はデザイン（テンプレートの配置やスタイル）だけを移行したいので、データを「子テーマ」としてファイル化して書き出すのが適切な方法です。
- Create Block Themeを導入する（ローカル検証環境）
ローカル検証環境の管理画面からWordPress公式プラグイン「Create Block Theme」をインストールして有効化します。
2. 子テーマをエクスポートする
管理画面の外観 > Create Block Themeを開き、Create a Child of "Björk"をクリックします。
THEME NAMEを入力してCreate Child Themeをクリックします。
すると、テーマ一覧に子テーマが追加されます。
続いて、Export "bjork-child" as a Zip Fileをクリックして子テーマをダウンロードします。
これで子テーマのエクスポートは完了です。
本番環境へアップロード
ようやく本番環境へ適用するフェーズです。本番環境の管理画面（あるいはFTPやサーバーのファイルマネージャー）から、wp-content/themes/ ディレクトリに先ほどのZIPファイルをアップロードして解凍します。
次に本番サイトの管理画面でBjörkテーマをインストールして有効化します。
外観 ＞ テーマ を開き、送り込んだ bjork-child を見つけて 有効化 をクリックすれば、本番環境に適用されます。
お疲れ様でした。フルサイト編集（FSE）の構造を一度理解してしまえば、自分好みのサイトにカスタマイズできると思います。デザインの凝りはそこそこにして楽しみましょう！
子テーマをカスタマイズしたため、親テーマのbjorkがアップデートされてもデザインが崩れることなく最新化できます。
メモ：Docker環境の場合
私の環境ではGCEインスタンスでDockerコンテナを起動しています。その場合は、ホスト側に子テーマフォルダを解凍し、docker-compose.yml の wordpress サービスの volumes: に以下のように1行追記（バインドマウント）するのがおすすめです。
- './bjork-child:/var/www/html/wp-content/themes/bjork-child'
次に、以下のコマンドでフォルダの所有権をDockerが読める形に修正します。
sudo chown -R 33:33 ./bjork-child
これをやっておけば、今後デザインを少し修正してファイルを上書き転送するだけで、コンテナを再起動せずともリアルタイムに本番に反映されます。
トラブルシューティング
- テーマ一覧に「子テーマ」が出てこない、または壊れていると怒られる 本番環境に、親テーマであるBjörkがインストールされているか確認してください。
- 有効化したのにデザインが変わらない
そブラウザや、CloudflareなどのCDN、キャッシュプラグインが古いデザインを保持してるので、キャッシュを削除してください。 - GCE環境で「sudo: I’m sorry…」と冷たく拒絶されて権限変更できないGoogle Compute Engine（GCE）環境で、フォルダの所有権を変更しようとして
sudoコマンドを叩いた際、「sudo: I’m sorry [ユーザー名]. I’m afraid I can’t do that（申し訳ありません、それを実行することはできません）」 とOS側から拒絶されてしまうケースがあります。
これはGCPのセキュリティ機能である「OS Login機能」が有効になっていることが原因です。GCPコンソールからIAMを開き、自分のアカウントをクリックします。Compute OS 管理者ログイン（Compute OS Admin Login）を追加すればsudoコマンドが使えるようになります。
コメントを残す