OrigamiUI

メニュー

閉じる

>

パターンの作成と使い方

WordPressではブロックを使って作成したレイアウトやボタンなどのパーツをパターンとして登録し、何度でも使いまわせる機能があります。

ここではパターンの作成と使用方法などについて以下の通り解説します。

  • パターンの作り方
  • パターンの使用方法
  • パターンの編集方法
  • パターンの解除方法
  • パターンの削除方法

パターンの作り方

WordPressでパターンは以下の手順で作成できます。

  1. ブロックのメニューを開く
  2. メニューの「パターンを作成」を選択
  3. パターンの設定
  4. パターンの登録完了

まずはパターンに登録したいブロックを選択してメニューを表示します。

メニューくと下の方に「パターンを作成」があるのでこれを選択します。選択すると設定画面が出てくるのでパターンの名前やカテゴリを選びます。

設定は全て後から変更可能です。

これで問題なければ追加ボタンを押します。追加ボタンを押すとパターンが登録され、紫色に変化します。

これでパターンの作成は完了です。作成したパターンは別のページやテンプレートで使用したり、編集することができます。

パターンの使用

WordPressで作成したパターンを使うには、通常のブロックの配置と同じ要領で画面内に配置することができます。

一般的なブロックの配置方法についてはこちらをご覧ください。

サイドバーからパターンを配置する

パターンをサイドバーから配置する場合は、編集画面の左上にある「+」アイコンのボタンを押し、表示されたサイドバーの上にある「パターン」タブを選びます。

するとパターンのカテゴリ一覧が出てくるので、パターンを登録したときに選んだカテゴリ、もしくは「マイパターン」から作成したパターンを選んで配置します。

「+」アイコンからパターンを配置する

こちらも通常のブロック配置とやり方は同じです。

ブロックを選択した際に出てくる「+」アイコンのついた黒いボタンを押して表示されるブロックを配置できます。

ブロック一覧にパターンが表示されない場合は検索フォームからパターン名を検索することで表示されるようになります。

パターンの編集

WordPressで作成したパターンは作成した後に編集することができます。手順は以下の通りです。

  1. 配置したパターンを選択し、「オリジナルを編集」をクリック
  2. パターンの編集ページに移動するのでそこで編集
  3. 編集画面の右上にある「保存」ボタンを押す

まずは画面に配置したパターンを選択してツールバーの「オリジナルを編集」をクリックします。

すると選択したパターンだけが表示された編集画面に移動します。

ここでは背景色を変えてみます。変更できたら編集画面の右上にある「保存」ボタンで保存します。

保存した後は自動的に元のページに戻らないので、手動で移動して確認してみます。

変更内容が反映されているのが確認できます。

パターンの編集で同期したくない場合

パターンの登録時に「同期」にチェックを入れた場合、編集内容は全てのパターンに適用されます。

もし、パターンを編集しても設置したものに影響を与えたくない場合は、パターン登録時に「同期」のチェックを外すか、パターン設置時に以下の方法でパターンの解除を行なってください。

パターンの解除

同期したくない場合や、パターを設置した後そのブロックだけ編集したい場合はパターンの解除を行います。

以下の手順でパターンを解除できます。

  1. 設置したパターンを選択
  2. メニューから「解除」を選択

まずは設置したパターンを選択して、メニューを開きます。

メニューの下の方にある「解除」を選択します。

これでパターンが解除されました。レイヤーパネルでも紫色のパターン名から通常のブロックに戻っているのがわかります。

パターンの削除

画面に設置したパターンは通常のブロックと同じようにメニューから削除することができます。

ただし設置したパターンを削除しても登録したパターンそのものが消えるわけではありません。

パターンの登録を削除するには以下の手順を行います。

  1. WordPressメニューの「外観->エディター」を選択
  2. エディターメニューの「パターン」を選択
  3. 「マイパターン」から作成したパターンを表示
  4. パターンの右下にあるメニューボタンを押して「削除」を選択

まずはWordpressのエディターページを開きます。

左にあるメニューから「パターン」を選択します。

左にあるメニューから「マイパターン」を選択し、表示されたパターン一覧から削除したいパターンの右下にあるメニューボタンを押して、表示されたメニューから「削除」を選びます。

再度削除するか質問されるので「削除」を選んで削除します。

ノーコードでWordpressサイト作るなら

OrigamiUI