Tag Archive ブロックエディタ

Wordpress デザインテンプレート
このページはWordPressご利用の方が対象です

このページは、2024年05月11日に作成したページです。
このページに掲載しているWordPressの仕様・機能・操作手順は、現在リリースされている最新バージョンのWordPressと異なる場合がございます。

このページに掲載している
WordPressのバージョン:
WordPressver6.3以降

WordPressのver6.3以降に実装されたパターン(旧再利用ブロック)で同期パターンとして登録されているパターンを非同期パターンに登録し直して利用する方法を説明します。

~ver6.2までの再利用ブロックを利用されていたお客様

WordPress5以降で実装されているブロックエディタでは、再利用ブロックという機能がありましたが、この機能はパターンという機能に置き換えられました。

 

パターンになった事で、従来登録されていた再利用ブロックは、同期パターンとして登録され、再利用ブロックを配置して通常ブロックへ変換した上で再編集するという方法が変更となりました。詳しくは以下をご覧ください。

 

 

従来通り、通常ブロックへ変換(パターンでは解除)する方法もございますが、パターンの機能として新たに非同期パターンとして登録する事で、「通常ブロックへ変換」する必要が無く編集が出来ます。これにより、再利用ブロックの様に「通常ブロックへ変換を忘れて、配置した内容がすべて最後に修正した内容になっている」というミスが発生しなくなります。~ver6.2までの再利用ブロックとして登録していたものは、同期パターンとして登録されていますので、よく使うものは非同期パターンに登録し直して利用する事をお勧めいたします。

同期パターンを非同期パターンに登録しなおす方法

同期パターンを、非同期パターンに登録しなおすには以下の方法でとなります。

  1. パターンを配置して非同期パターンへ変換

    こちらの「同期パターンを配置した後、非同期パターン変更して内容編集する方法」の手順で、再登録したい同期パターンを非同期パターンに変換します。

  2. 配置したパターン全体を選択状態にする

    配置したパターンは、クリックした場所のカラムやブロックが選択されます。パターンは入れ子(カラムやブロックの階層構造)になっているものが多いので、適当なカラムやブロックを選択してもその一部分しか選択されていません。もし適当に選択したものを非同期ブロックに登録した場合、登録されるパターンはそのカラムやブロックのみとなってしまいます。

    従って、全てのカラムやブロックを選択した状態(グループ)を選択した状態にする必要があります。

     

     

    適当に選択したカラムやブロックをクリックするとツールバーが表示されるので、赤枠部分をクリックします。
    親ブロックの選択

     

    更に上位カラムがある場合は、赤枠部分のボタンが表示されています。再度こちらをクリックします。
    以下は、右側カラムグループが選択されている状態です。
    親ブロックの選択

     

    この状態で全て選択されている様に見えますが、更に上位カラムやカラムグループがある場合がございます。赤枠部分にポインターを当ててください。
    親ブロックの選択

     

    更に上位カラムやカラムグループがある場合は、以下の様に「親ブロックを選択」と表示されます。クリックして選択します。
    親ブロックの選択

     

    これより上にカラムやカラムグループがない場合は、以下の様に「グループ」のみ表示(親ブロックを選択が無い)されます。この状態で次の手順に進みます。
    誤って別の場所をクリックしてしまうと選択状態が解除されてしまいますので、やり直します。
    グループ選択
  3. ハンバーガーボタンをクリックして、「パターンを作成」をクリック

    全てのグループを選択した上で、表示されているツールメニューのハンバーガーをクリックすると、オプションが表示されますので「パターンを作成」をクリックします。

    パターンを作成
  4. パターン名を設定して、同期をクリックして非同期に

    パターン名を設定して、同期をクリックして非同期
  5. 生成をクリック

    生成をクリック
  6. 非同期パターンの登録完了

    登録が完了すると画面左下に以下のメッセージが表紙されます。

    非同期パターンの登録完了
  7. パターン登録されている事を確認

    こちらの手順1~5の方法で遷移して、マイパターンの中に登録された非同期パターンが表示されている事を確認してください。

    これで同期パターンだったパターンが非同期パターンとして利用できます。

    パターン登録されている事を確認

同期パターンを非同期パターンに登録しなおす方法の関連記事

この記事には、以下の関連記事がございます。合わせてご覧ください。

Wordpress デザインテンプレート

WordPressのver6.3以降に実装された同期パターンとして登録されているパターンを非同期パターンに変更して、配置したパターンの内容を編集して利用する方法を説明します。

~ver6.2までの再利用ブロックを利用されていたお客様

WordPress5以降で実装されているブロックエディタでは、再利用ブロックという機能がありましたが、この機能はパターンという機能に置き換えられました。

 

パターンになった事で、従来登録されていた再利用ブロックは、同期パターンとして登録され、再利用ブロックを配置して通常ブロックへ変換した上で再編集するという方法が変更となりました。詳しくは以下をご覧ください。

 

同期パターンを配置した後、非同期パターン変更して内容編集する方法

同期パターンを配置した後、非同期パターン変更して内容編集には、同期を以下の手順で解除します。

同期を解除して利用する

  1. ブロックを追加

    「+」をクリックします。

    ブロック追加ボタン
  2. すべて表示をクリック

    よく使うブロックリスト
  3. パターンをクリック

    パターンをクリック
  4. マイパターンをクリック

    マイパターンをクリック
  5. 目的のパターンをクリック

    以前再利用ブロックとして登録されていたものが表示されます。

    目的のパターンをクリック
  6. 配置されたパターンをクリックして、ハンバーガーボタンをクリック

    配置されたパターンをクリックすると、枠が表示されツールメニューが表示されるのでハンバーガーボタン(赤枠の部分)をクリックします。

    ハンバーガーボタンをクリック
  7. 解除をクリック

    解除をクリック
  8. 非同期パターンに変更される

    非同期パターンに変更され、内容の編集が出来る様になります。

    非同期パターンに変更される

同期パターンを配置した後、非同期パターンに変更して内容編集する方法の関連記事

この記事には、以下の関連記事がございます。合わせてご覧ください。

Wordpress 再利用ブロック パターン
このページはWordPressご利用の方が対象です

このページは、2024年05月11日に作成したページです。
このページに掲載しているWordPressの仕様・機能・操作手順は、現在リリースされている最新バージョンのWordPressと異なる場合がございます。

このページに掲載している
WordPressのバージョン:
WordPressver6.3以降

WordPress5以降で実装されているブロックエディタでは、再利用ブロックという機能がありましたが、この機能はパターンという機能に置き換えられました。

 

 

パターン置き換わった事で、従来の再利用ブロックを利用して作成した記事や固定ページに問題はありません。しかし、Wordpress6.3からパターンになった事で、従来登録されていた再利用ブロックを配置して通常ブロックへ変換した上で再編集する事が出来ません。

全く使えなくなったわけではなく、従来の再利用ブロックを以下の手順で再登録する事で、再び利用する事が出来ます。また、「通常ブロックへ変換」という作業が必要無くなったので、誤って通常ブロックへ変換を忘れて、再利用ブロックそのものを変えてしまったというミスも発生しなくなります。

WP6.3から再利用ブロックはパターンに

元々、再利用ブロックは予め作成したパーツを複数のページで使いまわす為の機能です。例えば、会社のキャンペーン情報のパーツを用意しておいて、再利用ブロックとして配置します。この再利用ブロックを利用する事で、その内容に変化があった場合でも、配置した全てのページを編集する必要は無く、どれか一つを編集すればそのブロックを配置した全てのページの内容が編集した内容変わるという機能です。

 

つまりそのままでは、新しく配置したページで異なる内容に編集した際に、既に配置されているそのパーツの内容も変わっているという事になります。

ただこの再利用ブロックは、お客様自身で作成するページを作る際の定型パーツとして利用する事が出来る為、通常ブロックに変換してから編集するという手順をお知らせした上で、予め定型パーツ(再利用ブロック)の利用をお願いしていました。

 

再利用ブロックの難点として通常ブロックへの変換忘れのまま配置してしまい、既に配置したブロックの内容が変わってしまうというミスが起こりやすい機能でもありました。

おそらく、多数のWordpressユーザーから同様のミスの報告があったのかと思いますが、Wordpress6.3でこの再利用ブロックの機能は、このようなミスを起こさない為の機能変更がされました。それが、同期パターンと非同期パターンです。

 

同期パターンと非同期パターン

同期パターン

従来の再利用ブロックと同様です。パーツの内容を編集すると、他に配置しているページの内容も変更(同期)されます。但し従来だと、配置したページ上でそのまま編集できたものが、そのパーツの編集画面に移動しないと修正できない様になっています。その他ロック機能が新たに追加され誤って内容を変えたり、移動したり削除する事を防ぎます。

 

非同期パターン

パーツ自体を配置してそのまま内容を編集できるパターンです。そのページ上で編集が出来て、元のパーツには影響を与えません。この機能追加により従来の再利用ブロックで「通常ブロックに変換」する手間が無くなりました。

 

既に登録されている再利用ブロック

ver6.2以前で登録されている再利用ブロックは「同期パターン」として登録されています。

従って、そのままだと編集ができずパーツを配置して内容を変更するという事が出来ません。これを編集するには以下の手順を行ってください。

~ver6.2まで登録していた再利用ブロック(同期パターン)を非同期パターンとして利用する

以前の再利用ブロックを利用する場合は、以下の2つの方法の何れかで利用できます。

同期を解除して利用する

~ver6.2まで登録していた再利用ブロックを同期ブロックとして配置してから、非同期ブロックに変更する事で、従来同様の方法で編集できる様になります。以下リンクをご覧ください。

 

 

再利用ブロック(同期パターン)を非同期パターンとして再登録する

同期パターンとして、登録されている以前の再利用パターンを非同期パターンとして再登録しておけば、今後、都度上記の解除を行う事をしないでパターンを利用できます。

 

Wordpress ブロックエディタ
このページはWordPressご利用の方が対象です

このページは、2024年05月20日に作成したページです。
このページに掲載しているWordPressの仕様・機能・操作手順は、現在リリースされている最新バージョンのWordPressと異なる場合がございます。

このページに掲載している
WordPressのバージョン:
WordPress5.0以上

このページでは、ブロックエディタでページを構成する要素である、ブロック・カラム・グループについて説明します。

ブロックエディタを使ってページを作る場合は、この3要素を配置してページを構成します。それぞれの役割を理解して、ページ制作や既存ページの更新を行ってください。

ブロックエディタで作るページ

ブロックエディタは、その名の通りブロックを積み上げていく様に、ページをレイアウトする為の機能です。

ブロックエディタの各ブロックを使って制作したページでは下の図の様に、カラムやグループを使ってレイアウトを決定して、その中に画像やテキストなどの要素を配置して行きます。

この様にブロック化された事で、WYSIWYGエディターではできなかったページ内のコンテンツの細分化が出来る様になりました。細分化されている事で、その一つ一つのコンテンツ単位での順序の入れ替えや、一括削除などエディタで出来る事が増えました。

Wordpressブロックエディタの構成要素

ブロックエディタのブロックとは

まずは、ブロックエディタで言うブロックとは、それぞれ目的や使い方の違う部品の様なものです。

これらのブロックは、見出しや段落などテキストに関するブロック、画像や動画などメディアに関するブロック、それ以外にもデザインブロック、ウィジェト、テーマ、埋め込みコードなど…様々なブロックが用意されています。

カラムやグループ、パターンも、このブロックの中に含まれます。

テキスト系ブロック
Wordpress テキストブロック
メディア系ブロック
Wordpress メディアブロック
デザイン系ブロック
Wordpress デザインブロック

 

全てがそのまま利用できるブロックではありません。

上記の通り、ブロックエディタでは沢山のブロックが用意されていますが、そのまま利用する事は出来ません。それはお客様のウェブサイトに合わせた調整をしてあるもの・していないものがある為です。詳しくは以下をご覧ください。

 

ブロックエディタのカラムとは

上記の通りカラムは、デザインブロックの中にあるブロックの一つですが、各ブロックを囲んだ枠を意味します。当社で制作する際は、色々な使い方をしますが、お客様自身が使う場合は、このカラムを使う事で左に画像・横にテキストなど横並びのレイアウトを作る事ができます。

左側のコンテンツ、右側のコンテンツという風にコンテンツ毎に分けて横に並べる事ができる。
Wordpressブロックエディタの構成要素

 

カラムで囲む事で出来ること

ブロックエディタのグループとは

カラム同様に、デザインブロックの中にあるブロックの一つですが、各ブロックをグループ化する為の機能です。

例えば、右・左で別れたコンテンツを作る為には、右と左を一つのグループとして囲む必要があり、2カラムブロックを選択すると、自動的に2つのカラムはグループで囲まれます。

カラムをまとめたグループ
カラムをまとめたグループ
段落のグループなど細分化する為に設定したグループ
段落のグループなど細分化する為に設定したグループ

 

お客様がグループ機能を使う場合

当社が制作したページでこの各ブロックをグループでまとめるという事は、ページ内の内容をグループ分けする為やHTMLコーディング上の事情の為に使う事が多いです。従って、お客様が記事を投稿する際に利用しても構いませんが、既存のページ(当社で制作したページ)の既に配置されている各ブロックをグループで囲ってしまう事はお止めください。指定しているHTMLの構造が適応されなくなって、体裁崩れが発生してしまう場合がございます。

Wordpress 再利用ブロック パターン
このページはWordPressご利用の方が対象です

このページは、2022年04月16日に作成したページです。
このページに掲載しているWordPressの仕様・機能・操作手順は、現在リリースされている最新バージョンのWordPressと異なる場合がございます。

このページに掲載している
WordPressのバージョン:
WordPress5.9

※ この手順はWordpress 6.2までとなります。

WordPress5以降で実装されているブロックエディタでは、再利用ブロックという機能があります。

当社で制作したWordpressを使ったウェブサイトでは、この再利用ブロックを使ってコンテンツの更新を推奨する事がございます。

このページでは、この再利用ブロックの使い方と注意点を説明します。

再利用ブロックとは

再利用ブロックとは記事の中で、予めデザインやレイアウトが決まっている「レイアウト(パーツ)」を繰り返し使ったり、好きな場所に挿入する為の機能です。

 

WordPressのブロックエディタは、ページを作る為の色々な機能があり、HTMLなどの知識が無くても簡単にページを作る事が可能です。

当社で制作時には、見出しや文字等の基本的な装飾は、サイトデザインに合わせて設定してありますが、サイト内のCMS化していないページで使われている様な特殊なレイアウト(パーツ)を標準の機能で作る事は簡単ではありません。

 

このようなサイトデザインに合わせた一部のレイアウト(パーツ)をお客様ご自身でページ内の好きな場所に挿入できる様に、再利用ブロックを予め設定して提供している場合がございます。

※全てのお客様に提供している訳ではございません。お客様のご要望やサイトの事情によって想定し、予め見積提出した上で提供しています。

再利用ブロックの利用例

同じ内容のものを異なるページに挿入する場合

予め設定された内容が全く一緒のブロック)をお客様が作成するページの好きな部分に設置したい場合に利用できます。

例えば、料金表を複数の記事内に表示したい場合などに使います。

 

内容は異なるが、同じレイアウトのパーツを挿入したい場合

以下の様な、レイアウトをお客様の更新するページで使いたい場合、HTMLやCSSの知識が無いと簡単に実装できるものではありません。

再利用ブロックの利用例

上記の様な、タイトル・画像・テキストを1セットとして、同じレイアウトで表示する為に再利用ブロックを利用します。

この再利用ブロックを挿入した場所では、異なる内容で上のレイアウトと同じ様に表示されます。

再利用ブロックの使い方

記事の登録画面において次の手順で再利用ブロックを挿入してください。

  1. 登録済のページを更新する場合は、必ず更新前に複製を取っておく

    ブロックエディタは、高機能である反面、使い勝手が悪い部分もあり誤操作により、余計なブロックの挿入や削除をしてしまい体裁崩れとなってしまう事があります。特に再利用ブロックを使用する場合は、誤操作しやすいので、いつでも元の状態に戻せる様に更新するページの複製を下書き状態で取っておきましょう。

  2. 再利用ブロックをセットする

    まず、通常ブロックの追加と同じ様に、ブロック追加ボタンをクリックします。

    ブロック追加ボタン

     

    よく使うブロックリストが表示されますが、『表示』をクリックします。

    ※ここで、利用したい再利用ブロックが表示されている場合もございます。

    よく使うブロックリスト

     

    画面左側にブロックリストが表示されますので、『再利用可能』をクリックします。

    ブロックリスト

     

    使用できる再利用ブロックが表示されます。

    再利用ブロック

     

    オンマウスすると、その再利用ブロックのサムネイルが表示されます。利用したい再利用ブロックをクリックしてください。

    ※ここで表示されるサムネイルは、実際の表示レイアウトではありません。

    再利用ブロックのサムネイル

     

    再利用ブロックがセットされます。

    再利用ブロックがセット

     

    同じ内容のものを異なるページに挿入する場合は、ここまでとなります。

  3. 通常ブロックへ変換する

    内容は異なるが、同じレイアウトのパーツを挿入したい場合は、次の手順を進めてください。

    この後の修正は、必ずこの通常ブロックへ変換を行ってから進めてください。

     

    セットされた再利用ブロックにオンマウスしてブロック全体が水色に変わったら、クリックしてください。

    水色に変わったら、クリック

     

    「再利用ブロック名」のツールバーが表示されたら、このツールバーの一番右をクリックします。

    ツールバーの一番右をクリック

     

    『通常のブロックへ変換』をクリックします。

    通常のブロックへ変換

     

    ツールバーが次の様に変わったら変換完了です。

    変換完了
  4. 必要ならば、ブロックのIDを変更する

    利用する再利用ブロックによっては、ブロックに付与されているIDを変更する様にお願いする事があります。

    特に再利用ブロックは、グループ化していて、そのグループに対してIDを付与している事が多いです。

    IDを変更するには次の手順で行います。

     

    右側の設定が出ている事が前提です。

    設定が出ていない場合は、左上の歯車アイコンをクリックしてください。

     

     

    グループのIDを変更する

     

    ツールバーの次のアイコンをクリックします。

    グループのIDを変更

     

    設定の部分が、ブロック設定に変わった事を確認したら『高度な設定』を開きます。

    高度な設定

     

    『HTMLアンカー』にあるIDを変更してください。

    ここに入れる文字は、必ず半角英数字で入れてください。また、ケースによっては、命名ルールをお伝えしている場合もございます。

    HTMLアンカー

     

    また、HTML要素や追加CSSクラスは、変更しないでください。変更してしまうと、体裁崩れが発生します。
  5. 内容を修正する

    内容を修正してください。

    修正したい部分をクリックすると、編集モードに変わります。

    高度な設定
  6. 更新して確認する

    全て完了したら『更新』してください。

    更新したら、必ず該当ページを表示確認しましょう。

    もし、体裁崩れなどが発生していたら、設置した再利用ブロックを削除して、再度やり直してください。

アイキャッチ URL
このページはWordPressご利用の方が対象です

このページは、2020年06月30日に作成したページです。
このページに掲載しているWordPressの仕様・機能・操作手順は、現在リリースされている最新バージョンのWordPressと異なる場合がございます。

このページに掲載している
WordPressのバージョン:
WordPress5.0以上

 

WordPressでは、記事投稿のURLをタイトルから自動で引用して命名されます。

※制作したサイトによっては、POST ID(自動でナンバリングされる記事ID)を命名する様に設定している場合もあります。

当社では、パーマリンクに日本語を使う事を推奨していません。、

 

 

自動命名されたパーマリンクは、以下の方法で半角英数字で設定し直してください。

Welcartの商品登録などの場合

Welcartの商品登録など、プラグインで追加されている投稿画面は、WYSIWYGエディターを利用している場合が多いです。その場合は、以下の変更手順では無く、WYSIWYGエディタ版の変更手順をご覧ください。

パーマリンクの変更手順

  1. 右側メニューが出ていない場合は、表示させる

    もし右側のメニューが表示されていない場合は、右上にある赤枠部分のアイコンをクリックして表示させます。

    Wordpressブロックエディタ 右メニュー表示
  2. URLをクリック

    URLの赤枠部分をクリックしてください。

    もし、下の画面の表示じゃない場合は、『投稿』をクリックしてください。

    ※この部分は投稿タイプによって異なります。(固定ページだと「固定ページ」と表示)

    Wordpressブロックエディタ 右メニュー リンク
  3. パーマリンクに新しいリンク名を入力

    パーマリンク(赤枠部分)に新しいパーマリンク名を入力して右上の×をクリックします。

    パーマリンクは、半角英数字+ハイフンを使って命名してください。

    Wordpressブロックエディタ 右メニュー URL
    入力フォームが出ない場合

    入力フォームが表示されず、下の様な表示になる場合は、パーマリンクを変更できないタイプの投稿です。

    この場合は、上で注意書きのある様にPOST IDや日付を自動で設定している場合です。

    Wordpressブロックエディタ 右メニュー URL
  4. 更新をクリックすれば変更完了

    右上にある更新をクリックすれば変更完了です。

    Wordpressブロックエディタ 更新
  5. 必要ならばリダイレクトの設定

    もし修正したURLが、既存のページのものならば、古いURLにアクセスされても今回修正したURLにリダイレクト出来る様にリダイレクト設定をしましょう。検索エンジンに登録されているURLが古いままの場合や、ブックマークされているユーザーの訪問対策の為に必要です。

     

    インストール済ブラグインの中に「Redirection」がインストールされている場合は、簡単に設定が出来ます。

    「Redirection」がインストールされているか確認するには、こちらをご覧ください。

     

HTML Snippets Powered By : XYZScripts.com