HOW TO USE

WordPressのブロックテーマは、まだ日本では情報も少なく、ブロックテーマも普及が遅れているため、操作に慣れるまでには多少の時間がかかるかもしれません。

ブロックテーマの操作方法一般については、日本語公式サイトほか、書籍やインターネットの情報を参考に、まずはいじってみるのがよいでしょう。

「FullSite-Patterner」の制作にあたっても、最初は慣れない作業を何度もやり直しました。
ブロックテーマのカスタマイズでの注意点は別記事でも述べましたが、特に下記の点に注意が必要です。

テンプレートをエディターでカスタマイズして、サイトの表示が変更されても、それだけでは実際にはテンプレートは変更されていない

テンプレートの変更は、サーバーのデータベースに保存されています。
テンプレートが更新されたと思ってFTPでダウンロードしても、バックアップしたことにはなりません。

サイトの変更をテンプレートの更新に反映させるには、次の方法があります。

エディター画面から、テンプレートのエクスポートを行う

「エクスポート」は、更新を反映したテンプレートのダウンロードメニューです。
しかしサーバーの環境などによってはエラーが出る場合があります。

ほかにも次のような方法がいくつかあります。

「テーマファイルエディター」にコードをコピーする

「外観」－「エディター」メニューで、更新したテンプレートやテンプレートパーツを、コードエディターで表示させ、コード全体をコピーします。

「ツール」－「テーマファイルエディター」メニューから、更新したテンプレート、テンプレートパーツを選択してコードを表示させます。

コピーした変更後のコードを、「ツール」－「テーマファイルエディター」メニューで表示させたテンプレート、またはテンプレートパーツに貼り付けて、そっくり内容を入れ替えます。

「ファイルを更新」ボタンをクリックして保存します。

更新されたファイルは、FTPでダウンロードすればバックアップにもなります。

プラグイン「Create Block Theme」を使って、更新後のファイルをエクスポートする

WordPress公式プラグイン「Create Block Theme」をインストールすると、「外観」メニューに「Create Block Theme」メニューが表示されます。

「エクスポートする」メニューは、更新を反映したテンプレートのダウンロードメニューです。
しかしサーバーの環境などによってはエラーが出る場合があります。

オリジナルテーマを制作する場合には、「Create Block Theme」がほとんど必須です。

WordPress公式プラグイン「Create Block Theme」を、「外観」メニューから選択します。

テーマに「上書きする」メニューをクリックすると、データベースに記憶していたファイルの更新が、テンプレートまたはテンプレートパーツに上書きされ、データベースの方は消去されます。

ブロックテーマでは、クラシックテーマとは異なり、テンプレートはphpファイルではなく、しかもhtmlファイルのテンプレートにはhead内のコードがありません。

WordPressのシステム側でhead内のコードを生成するため、functions.phpやプラグインなどを使ってhead内にコードを加えることは可能です。

しかしこれらのファイルに記述し、操作するのはハードルが高く、失敗のリスクもあります。

「FullSite-Patterner」では、head内にスクリプトタグ、検索エンジンのアクセス解析などのコードを挿入するためのメニューを、下記のように用意しました。

「外観」－「ウィジェット」で、「head内タグ」の項目に、「カスタムHTML」ブロックを挿入し、そこにコードを張り付けるなどして記載します。

スクリプトタグ、検索エンジンのアクセス解析などのコード以外にも、cssのスタイルなどを記述することもできます。

ウィジェットで指定したタグ等のコードは、テーマフォルダ内の「functions/head-style.php」に挿入され、ページのhead内に挿入されます。

うまく挿入されたかどうか、ブラウザでサイトを表示させ、ページのソースを確認してみましょう。

ブロックテーマでは、グループ（div）などの要素の背景色などを、エディター画面で指定して、カスタマイズすることが可能です。

要素により、文字色、ボーダーライン色、スタイルなどを指定することができます。

しかしサイト全体などの背景画像の指定ができません。

これを実現するためにはいくつかの方法が考えられますが、「FullSite-Patterner」では、サイトの背景画像の指定などの一部のスタイル設定メニューを、下記のように用意しました。

背景画像にしたい画像をアップロードし、「外観」－「ウィジェット」で、「背景画像」の項目に、「カスタムHTML」ブロックを挿入し、そこに画像のURLを張り付けるなどして記載します。

サイトのヘッダー直後の部分の背景画像を指定することができます。

ウィジェットで指定した画像URLは、テーマフォルダ内の「functions/head-style.php」に挿入され、ページのhead内に挿入されます。

記入したら「更新」ボタンをクリックすると、サイトにロゴが表示されるので、確認しましょう。

なお、「外観」－「ウィジェット」で保存したデータは、サーバーのデータベースに保存されます。

バックアップするためには、プラグインが必要です。
ウィジェットのエクスポート、インポートには、プラグイン「Widget Importer & Exporter」がおすすめです。

また「FullSite-Patterner」では、初期設定のテンプレートセットをはじめ、多数のページ全体のテンプレート、ヘッダーやフッター、その他のパーツのブロックパターンを用意しています。
テンプレートや、テンプレートパーツをカスタマイズして変更してしまっても、いつでもブロックパターンから元に戻すことが可能です。

「FullSitePatterner」の最大の特徴の一つは、ページ全体を差し替えることができるブロックパターンが設定されていることです。

サイトのさまざまなレイアウト、デザインごとに、ブロックパターンはテンプレートセット（FrontPage、
Single、Index、Page、Search、404）として複数用意されています。

初期設定では、1カラム・フレームあり・背景画像あり（1column-frame-backimg）がテンプレートセットとなっています。

ここでは、ページ全体を別のレイアウト、デザインに差し替える操作を説明します。

上記が初期設定の1カラム・フレームあり・背景画像あり（1column-frame-backimg）を、2カラム・左サイドバー・フレームあり・背景画像なし（FrontPage-2column-L-frame-noimg）に差し替える操作を行います。

「外観」－「エディター」メニューから、変更するテンプレートを開きます。
ここでは「フロントページ」です。

左上の「リスト表示」アイコン（横3本線）をクリックし、リストを表示させるとわかりやすくなります。

ページ全体が「グループ」ブロックとなっており、表示崩れを避けるために移動禁止のロックがかかっています。
しかし削除は可能です。

縦3点のマークをクリックし、ブロックを操作するメニューを表示させると、一番下に「削除」メニューがあります。

なお、差し替えは、先に削除をしてから、差し替え後のブロックパターンを挿入してもかまいません。

逆に同じ階層に入れる場合などには、先に挿入してから、差し替え前のブロックを削除する方が間違いが少ないかと思います。

ここでは、先にページ全体のブロックを削除しました。
空の段落だけがある状態となっています。

空の段落にブロックパターンを挿入するため、メイン画面の段落右側の「＋」マークをクリックします。

挿入するブロックパターンは下記画面で検索することもできますが、ブロック、パターンを「すべて表示」するボタンをクリックすると、左側に「ブロック」「パターン」のメニューが表示されます。

ページ全体のブロックパターンや、テーマ独自のヘッダー、フッター、その他のパーツは、「パターン」の方にあります。

パターンは「ヘッダー」「ボタン」などのカテゴリーごとに分類されています。

ページ全体の分類は、レイアウトやデザインごとのテンプレートセットとして、1つのテンプレートセットで１つのカテゴリーとなるように、それぞれ分類してあります。

2カラム・左サイドバー・フレームあり・背景画像なし（FrontPage-2column-L-frame-noimg）を、ドロップダウンメニューで選択します。

ページ全体のサムネイルが、FrontPage、Single、Indexなどのページごとに表示されます。

サムネイルの下にページの種類で始まるブロックパターンのラベルが表示されます。
上の画像は「FrontPage-2column-L-frame-noimg」です。

選択状態で上の画像のように、青い線で囲まれて表示されます。

クリックすると、先ほど「＋」ボタンで選択した場所に、ブロックパターンが挿入されます。

エディター画面右上の「保存」ボタンをクリックすると、ページ全体のブロックパターンを挿入し、差し替えられたテンプレートが保存されます。

サイトを表示させて確認すると、2カラム・左サイドバー・フレームあり・背景画像なし（FrontPage-2column-L-frame-noimg）に変更されました。

サイト全体を差し替えるためには、同じ作業を、FrontPage、Single、Indexなどのページそれぞれについて行います。

「FullSitePatterner」には、ヘッダー、フッター、ボタンやボックスなどのさまざまなブロックパターンが用意されていることです。

ここでは、ヘッダーをテーマ独自の初期設定（header-navbar）から、WordPressデフォルトナビゲーション（header-WP-navigation：デザインはカスタマイズ済）に差し替える操作を説明します。

「外観」－「エディター」メニューから、変更するヘッダーのあるページを開きます。
ここでは「フロントページ」です。

ページの構造、デザインにもかかわるため、表示崩れなどの間違いが起きないよう、差し替え前と同じ階層に入れる場合には、先に挿入してから、差し替え前のブロックを削除する方が間違いが少ないかと思います。

ここでは、先に差し替え後のヘッダーを、差し替え前のヘッダーの前に挿入します。
差し替え前のヘッダーは最終的に削除するため、前でも後でもどちらでもかまいません。

ブロックを追加すると空の段落が表示され、ここにブロックパターンを挿入するため、段落右側の「＋」マークをクリックします。

挿入するヘッダーは上の画面で検索することもできますが、ブロック、パターンを「すべて表示」するボタンをクリックすると、左側に「ブロック」「パターン」のメニューが表示されます。

テーマ独自のヘッダー、フッター、その他のパーツは、「パターン」の方にあります。
パターンは「ヘッダー」「ボタン」などのカテゴリーごとに分類されています。

ヘッダーのカテゴリーをドロップダウンメニューで選択し、サムネイル表示される差し替え後のヘッダーをクリックすると、先ほど「＋」ボタンで選択した場所に、ブロックパターンが挿入されます。

差し替え前のヘッダーもあるため、ヘッダーが重複しています。

差し替え前のヘッダーを削除します。
表示崩れを避けるために移動禁止のロックがかかっていますが、削除は可能です。

縦3点のマークをクリックし、ブロックを操作するメニューを表示させると、一番下に「削除」メニューがあります。

差し替え前のヘッダーを削除すると、下記のようにヘッダーの差し替えが完了です。

エディター画面右上の「保存」ボタンをクリックすると、ページ全体のブロックパターンを挿入し、差し替えられたテンプレートが保存されます。

サイトを表示させて確認すると、ヘッダーが変更されました。
下記の画面ではわかりにくいものの、特にスマホ表示のハンバーガーメニューなどが大きく異なります。