テキストアクション(共通文字列)の使い方

sbp sample text actions

テキストアクションは、よく使う文字列(電話番号、営業時間、キャンペーンの一文、注意書き、価格など)に名前を付けて登録しておき、エディターのテキストから呼び出す仕組みです。本文に保存されるのは「どのテキストアクションか」という参照だけで、文字列そのものは表示するときに差し込まれます。そのため、設定で文字列を変えると、サイト内で使っているすべての場所が一度に変わります。shitate pro blocks 1.9.0 で追加されました。

実際の表示

このマニュアルは shitate pro blocks が動いているサイト上にあるので、次の 1 文は画像ではなく本物のテキストアクションです。本文には参照だけが書かれていて、文字列は設定から差し込まれています。

→ この文字列はテキストアクション「マニュアル用デモ」から差し込まれています(設定で変えると、この場所もまとめて変わります)

こんなときに

  • 電話番号や住所、営業時間など、複数のページに同じものを書いていて、変更のたびに探し回りたくない
  • 期間限定のキャンペーン文言を、終了後にまとめて差し替えたい
  • 価格や在庫数など、PHP で計算した値を本文の途中に出したい(後述「PHP から供給する」)
  • 定型の注意書きを、文言のブレなく統一したい

登録する

  1. 管理画面サイドバーの「shitate pro blocks」(「ツール」の下)を開き、「テキストアクション」タブを選びます
  2. 「テキストアクションを追加」で行を増やし、名前・ID・文字列を入力します
  3. 「保存」を押します
「テキストアクション」タブ。1 行に名前・ID・テキストを入力し、「保存」を押します。
「テキストアクション」タブ。1 行に名前・ID・テキストを入力し、「保存」を押します。

名前・ID・文字列

  • 名前:エディターの一覧に表示される名前です。日本語で構いません。
  • ID:本文が参照する識別子です。英数字の名前からは自動で入り、日本語の名前では短い自動 ID(ta-xxxxxx)になります。自分で付けるなら半角の英数字・ハイフン・アンダースコアで。使い始めた ID は変えないでください。変えると、その ID を参照している場所に文字列が出なくなります。
  • 文字列:表示する内容です。改行は br、強調は strong / em、リンクは a、装飾は span が使えます。それ以外のタグは保存時に取り除かれます。空のままにして PHP から供給することもできます。

エディターで挿入する

  1. 段落など、文字を入力できるブロックで、挿入したい位置にカーソルを置きます
  2. ツールバーの shitate pro blocks ボタン(太字・リンクの並び)→「テキストアクション…」を選びます
  3. 一覧から目的のものをクリックします。名前や文字列で絞り込めます
ブロックツールバーの shitate pro blocks ボタンを開いたところ。「テキストアクション…」を選びます。
ブロックツールバーの shitate pro blocks ボタンを開いたところ。「テキストアクション…」を選びます。
「テキストアクションを挿入」ダイアログ。名前や文字列で絞り込んで、目的のものをクリックします。
「テキストアクションを挿入」ダイアログ。名前や文字列で絞り込んで、目的のものをクリックします。

挿入された部分は、編集画面では下線付きの色で表示されます。この部分はインライン画像と同じ「ひとかたまり」として扱われるので、中の文字を書き換えたり一部だけ消したりはできません。Backspace や Delete で消すと参照ごと消え、公開ページからもその場所の文字列が消えます。

挿入した部分は、編集画面では下線付きの色で表示されます。
挿入した部分は、編集画面では下線付きの色で表示されます。

エディターから文字列を変える

管理者は、挿入済みの部分にカーソルを置いて shitate ツールバー →「このテキストアクションを編集…」を選ぶと、その場で名前と文字列を変更できます。保存すると設定にも反映され、開いているページ内の同じ参照はすぐに更新されます。他のページは表示するときに新しい文字列になります。PHP から供給している項目には、この編集ボタンは出ません。

挿入済みの部分にカーソルを置くと、メニューに「このテキストアクションを編集…」が増えます。
挿入済みの部分にカーソルを置くと、メニューに「このテキストアクションを編集…」が増えます。
「テキストアクションを編集」ダイアログ。名前と文字列をその場で変更できます。
「テキストアクションを編集」ダイアログ。名前と文字列をその場で変更できます。

表示の仕組み

本文に保存されるのは次のような空の span だけです。表示時にプラグインが現在の文字列を中に入れます。

<!-- 本文に保存される形(文字列は含まれない) -->
<span class="sb-text" data-sb-text="phone" data-sb-label="03-1234-5678"></span>

<!-- 表示時(現在の文字列が差し込まれる) -->
<span class="sb-text" data-sb-text="phone">03-1234-5678</span>
  • data-sb-label は編集画面の表示用で、挿入した時点の文字列が入ります。フロントの表示には使いません。
  • 登録されていない ID を参照している場合は、保存時の文字列をそのまま出します。
  • 置き換えは、ブロックで描画されるすべての場所(投稿本文、テンプレート、テンプレートパーツ、同期パターン)とテキストウィジェットで行われます。
  • ページキャッシュを使っているサイトでは、文字列を変えたあとにキャッシュの削除が必要です。

PHP から供給する

文字列を空のまま登録し、フィルター sb_text_action_text で値を返すと、その値が表示されます。価格・営業時間・残席数など、計算した値や外部から取ってきた値を本文の途中に出すときに使います。戻り値にも設定画面と同じタグ制限がかかります。PHP から供給している項目は、設定画面の行に「PHP から供給: 現在の値」、エディターの一覧に「PHP から供給」と表示されます。

// 空のテキストアクション「price」(ID: price)の文字列を PHP で供給する
add_filter( 'sb_text_action_text', function ( $text, $id, $item ) {
	if ( 'price' === $id ) {
		return '¥' . number_format( get_option( 'my_price', 1980 ) );
	}
	return $text; // ほかの項目は設定の文字列のまま
}, 10, 3 );

フィルターと REST API

名前用途
sb_text_actions(フィルター)一覧全体(ID をキーにした配列。各要素は id / name / text)を加工します。項目の追加・削除・並べ替えに。
sb_text_action_text(フィルター)1 件の文字列を差し替えます。引数は 文字列・ID・項目の配列。
sb/v1/text-actions(REST)GET で一覧(投稿の編集権限)、POST で 1 件の更新(管理者)。エディターの編集ダイアログが使っています。

注意点

  • 保存先はオプション sb_text_actions です。サイトの引っ越しやステージングから本番への反映では、このオプションも一緒に持っていってください。
  • テキストアクションの参照は、文字を入力できるブロック(段落・見出し・リストなど)の中に挿入します。ブロックとして単独で置くものではありません。
  • 1.9.0 より前のバージョンにはこの機能がありません。古いバージョンのプラグインでは参照の span が空のまま表示されます。

タイポグラフィスケール

変更はこのページに即時反映され、あなたのブラウザ内にだけ記憶されます。サイト側には何も保存されません。

比率が大きいほど見出し間のコントラストが強くなります(typescale.com と同じ考え方)。

画面幅 375px で使う比率。1260px までにメイン比率へなめらかに変化し、メディアクエリなしでスマホでは文字も余白も引き締まります。

本文の文字サイズ。スケール全体はここから計算されます。

すべての文字段を偶数ピクセル(2px)にスナップします。

Small / X-Small / XX-Small を比率で割らず 0.95rem / 0.8rem / 0.75rem に固定します(比率で割ると小さすぎて読みにくくなる場合の対策)。

この画面幅での実サイズ
Display / H1 –
Huge / H2 –
Extra Large / H3 –
Large / H4 –
Medium / 本文 –
Small / H6 –
X-Small –
XX-Small –