Tag Archive 固定ページ

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. 更新して確認する

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

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

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

Wordpress
このページはWordPressご利用の方が対象です

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

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

※ 上記バージョンでClassic Editorプラグイン利用

 

このマニュアルは、Wordpress4又はClassic Editorプラグインご利用の場合のマニュアルです。WordPress 5.0からは、新しいエディタ「Gutenberg」となりました。Classic Editorを利用していない場合は、以下の操作は手順が異なる場合がございます。

 

WordPressの投稿フォームには、『ビジュアルモード』『テキストモード』がございます。

モードの切り替え

エディタの右上にある、タブで切り替えてください。

ビジュアルモード、テキストモードの切り替え

 

モードの違い
ビジュアルモード

文書作成ソフトのWordの様な操作で、ページの装飾(色を変える、太字にするなど)を簡単に行えるモードです。
HTMLやスタイルシートの知識が無くても、簡単に記事装飾が出来ます。

ビジュアルエディタご使用時の注意
投稿画面での装飾と実際の画面での装飾

投稿画面では、実際のページと全く同じ装飾はされません。投稿画面で表示されるものは、簡易的なもので実際のページに適応されるものと異なります。
従って、新規投稿・更新したら必ずパーマリンクから、実際のページを確認してください。

弊社が作成した固定ページをビジュアルモードで更新する場合

弊社が制作(コーディング)したページをお客様サイドで更新する場合、ビジュアルモードで更新してしまうと体裁崩れする場合がございます。必ず、テキストモードで修正してください。

テキストモード

html編集が出来るモードです。

弊社で固定ページを制作する場合は、独自のタグやスタイルを使っている関係で、このテキストモードで登録しています。

お客様サイドで更新する場合は、このHTMLタグ等を誤って削除してしまわない様に注意して編集してください。

<や>を一つ削除してしまうだけでも体裁崩れの原因になります。

 

 

 

モードが切り替わらない場合

WordPressの自動整形機能は、自動でbrタグ(改行タグ)、pタグ(段落タグ)を挿入する機能です。この機能の為に本来pタグを入れるべきでない部分にpタグが入るなどの関係で、弊社がコーディングしたページの体裁が崩れてしまう場合がございます。その様な場合は、プラグインで自動整形機能を無効にしています。このプラグインを有効にすると、自動整形は無効になりますがビジュアルモード、テキストモードの切り替えが出来なくなります。

このプラグインを無効にする

一時的にテキストモードに切り替えたい場合は、『プラグイン』→『インスートル済プラグイン』の『PS Disable Auto Formatting』を停止にします。

 

更新したら

このプラグインで自動整形機能を使用しているサイトは、テキストモードでの更新が終わったら、

  1. 『投稿』→『新規追加』でテキストモードからビジュアルモードに変更 ※
  2. 『プラグイン』→『インスートル済プラグイン』の『PS Disable Auto Formatting』を有効化

してください。

※更新を終えた固定ページで、ビジュアルモードに切り替えてしまうと、その時点で自動整形が働きそのページが体裁崩れする可能性があります。

エディタでのビジュアルモード、テキストモードの切り替えの関連記事

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

WordPress

当社が登録した固定ページを修正する場合のご注意

WordPressにおける固定ページは、カテゴリーとの紐付けやトップページとの連動のない独立したページを作る機能という位置付けのWordPressの基本機能ですが、当社ではサイト内のページにおいてお客様が修正する事の無いページで使用しています。

 

これらの固定ページも、投稿ぺージやお客様用に用意した投稿ページ同様、Wordpressの管理画面から更新が出来ますが※1 これらの固定ページはエディタだけで更新できる様には作っておらず、独自のデザイン指定や、HTML文法、JavaScriptなどを使っています。従って、これらのページをお客様がエディタで更新してしまうと体裁崩れを起こしたり、動作エラーを起こす可能性があります。2

 

1 お客様によっては、固定ページ自体を修正できない様にしている場合もございます。

2 もしお客様が固定ページを更新した事で、体裁崩れや動作エラーを起こしたものを復旧する場合は、有償作業となります。予めご了承ください。

 

既に登録されている固定ページを修正したい場合

文章の一部分を変える・追加する程度は、更新していただいて問題ありません。

例えば、固定ページ内にテキストで『担当者 根尾太郎』という部分があり『根尾太郎』の箇所を変える程度なら、お客様で更新していただいて構いません。

その他、文章を差し替える・追加するなど主に文字に関する部分であれば、ほぼ問題はございません。※3

 

3 但し、修正は自己責任でお願いいたします。

 

 

必ずテキストモードで修正してください。

既存の固定ページのテキストを修正する場合は、必ずテキストモードで修正してください。

エディターのモード切替方法はこちらをご覧ください。

 

 

お客様サイドで更新した結果、体裁崩れや動作エラーを起した時、その原因

お客様サイドで更新した結果、何故体裁崩れや動作エラーを起こすのか?
それは、HTMLタグを誤って削除してしまう為です。HTMLタグとは<~>で囲まれた英語の文字列で、ページの各要素の配置方法などを文法に従って記述しています。誤って、削除した場合この文法が崩れる事で、その部分の指定が無効となるので体裁崩れなどを起こす結果になります。

 

 

もし失敗してもリビジョン機能で戻せる場合もあります

WordPressには、リビジョン機能という投稿バックアップを定期的にバックアップする機能がございますので、もし失敗しても元に戻せる事がほとんどです。

リビジョン機能については、こちらをご覧ください。

HTML Snippets Powered By : XYZScripts.com