DigiPress

Highly Flexible WordPress Theme

メニュー

[オリジナル]メニュー表ブロックの機能

[オリジナル]メニュー表ブロックの機能

ここで紹介する機能を利用するには、DigiPress 専用プラグイン「DigiPress Ex – Blocks」が必要です。

DigiPress Ex – Blocks」プラグインを利用することで、WordPress のブロックエディターにプラグインオリジナルの「説明リスト」ブロックが追加されます。

このブロックでは、商品名とその価格の一覧を掲載したメニュー表を作成することができます。
飲食店などで見かけるメニュー表のようなデザインを様々なオプションによってカスタムできます。

その他のエディター機能については以下をご覧ください。


ブロックコンテンツ表示サンプル

最もシンプルな表示例カスタマイズなし

2列で表示した場合1〜3カラムに対応

説明文を表示した場合
  • あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
  • あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
  • あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

画像を表示した場合画像クリックでポップアップ可
  • あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
  • あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
  • あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

縦書きにした場合はみ出した部分は横スクロールします
  • あのイーハトーヴォのすきとおった風、
    夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、
    郊外のぎらぎらひかる草の波。
  • あのイーハトーヴォのすきとおった風、
    夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、
    郊外のぎらぎらひかる草の波。
  • あのイーハトーヴォのすきとおった風、
    夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、
    郊外のぎらぎらひかる草の波。

縦書きにした場合画像あり
  • あのイーハトーヴォのすきとおった風、
    夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、
    郊外のぎらぎらひかる草の波。

メニュー表コンテンツの作成

オリジナルブロックは、ブロック追加ボタンから「DigiPress ブロック」グループを開いて追加します。

「DigiPressブロック」から「メニュー表」を追加

「メニュー表」ブロックを追加すると、エディター上で以下の初期状態のコンテンツが表示されます。

ブロック追加直後の状態

編集中のエディターでは、以下のように実際のブロックコンテンツの表示と同じ状態でカスタマイズができます。

編集中のエディターの状態

続けてメニュー表アイテムを追加する

「メニュー表」に次のメニューの項目を追加するには、ブロックの下部にある「+」バーをクリックすると、「メニュー表」に追加可能な専用ブロックである「メニュー表アイテム」が表示されます。

新規メニュー項目の追加

この「メニュー表アイテム」ブロックを選択することで同じメニュー表ブロック内の新規として続けて追加されます。

追加できるメニュー項目の個数に制限はありません。

メニュー表アイテムを入れ替える

メニュー表に追加した各アイテム(メニュー)は移動ボタンで自由に入れ替えができます。

ブロック専用オプション

メニュー表ブロックのデザインや表示スタイルのカスタマイズを行うには、ブロックの外側をクリックして右側の設定サイドバー(ブロックオプション)を表示し、ここから様々なカスタマイズを行ないます。

ブロックオプション

メニュー表 全体の設定

全体設定」では、メニューの縦書き化、カラム数変更、明朝体化などのメニュー表 全体に関する設定が行えます。

全体設定
メニューを縦書きにする

「全体設定」の「メニューを縦書きにする」トグルをオンにすると、メニューの文字が縦書きで表示されます。

Noto Sans JPなど、一部の日本語Webフォントでは縦書きにならない文字があります。

メニューの縦書き変更

縦書きモードを有効にすると、カラム指定オプションが非表示になり、「半角英数字も縦書きにする」オプションが表示されます。

以下はブロックエディター上での操作イメージです。

エディター上での縦書き変更
縦書き表示例半角英数字は横向き(規定)
  • Drip Coffee
  • Café Americano
  • Espresso
  • Café Latte
  • Café mocha
  • Cappuccino
  • Macchiato
  • Matcha Latte
縦書き表示例半角英数字も縦書き
  • Drip Coffee
  • Café Americano
  • Espresso
  • Café Latte
  • Café mocha
  • Cappuccino
  • Macchiato
  • Matcha Latte
カラム数の変更

メニューのカラム数を 1〜3カラムの間で指定できます。

2カラム表示例
  • Drip Coffee
  • Café Americano
  • Espresso
  • Café Latte
  • Café mocha
  • Cappuccino
  • Macchiato
  • Matcha Latte

メニュー名の共通設定

「メニュー名設定」では、対象のメニュー表ブロックに表示されるメニュー名エリアすべてに一括で反映される共通のカスタマイズが行えます。

メニュー名と価格の間のラインの設定

「中間ライン設定」では、メニュー名と価格の間に表示される連結線のカスタマイズが行えます。

中間ラインを表示しない場合は、ボーダー(ライン)の太さを「0」にします。

価格の共通設定

「価格設定」では、対象のメニュー表ブロックに表示される価格表示用のエリアすべてに一括で反映される共通のカスタマイズが行えます。

キャプションの共通設定

「キャプション設定」では、対象のメニュー表ブロックに表示される詳細説明用のエリアすべてに一括で反映される共通のカスタマイズが行えます。

メニュー表の背景設定

「背景設定」では、対象のメニュー表ブロックの背景全体に対するカスタマイズが行えます。

メニューごとのカスタマイズ

追加したメニューアイテムのブロック選択すると、対象のメニューに対する商品説明(キャプション)と、商品画像などの「画像表示」の有無を指定できます。

キャプション(詳細説明)を表示する

対象のメニューに対して補足説明など、何かアピールしたい情報がある場合は、「メニュー表アイテム設定」「キャプションを表示」トグルをオンにすると、メニュー名の下にキャプション入力欄が表示されます。

メニュー(商品)に画像を表示する

対象メニューに関する画像を表示する場合は、「メニューアイテム表設定」「画像を表示」トグルをオンにすると、メニュータイトルの前に画像エリアが表示されます。
ここをクリックしてメディアライブラリを開き、商品画像をアップロード、または既存の画像を選択します。

画像をポップアップで拡大表示可能にする

さらに、サムネイル画像をクリック可能にしてポップアップで商品画像の拡大表示を可能にする場合は、「画像のポップアップ表示を有効」トグルをオンにします。

表示例
ポップアップ表示有効時

ブロック共通オプション

間隔調整

一部のコアブロックおよび「DigiPress Ex – Blocks」のオリジナルブロックに対して組み込まれるブロック共通オプションの一つである「間隔調整」オプションでは、このブロックの前後(上下)、左右に設けるマージン(外余白)、およびパディング(内余白)のサイズを調整できます。

スクロールフェードイン

ブロック共通オプションの一つである「スクロールフェードイン」オプションを使用すると、スクロールしてブロックが可視エリアに到達した時点で、指定したアニメーション方向や時間に従ってフェードインで表示させることができます。

設定したアニメーションは、「プレビュー」ボタンをクリックしてエディター上で事前にチェックが行なえます。

無料版ではブロックによって本オプションは無効の場合があります。

「スクロールフェードイン」オプションの概要は、以下の動画をご覧ください。

概要

その他Tips

ブロックコンテンツを本文以外(ウィジェットエリア)で表示する方法

DigiPressのオリジナルブロックを含め、WordPressのブロックエディターによるコンテンツを記事本文以外のウィジェットエリアに表示するには、「DigiPress Ex – Blocks」プラグインの「再利用コンテンツ」機能を利用することで実現できます。

詳しくは以下をご覧ください。

仕様・注意事項

ブロックのリカバリーを試行(復元)を実行

本プラグインのアップデート後、エディター上のブロックで「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示された場合、旧バージョンから仕様が変更された可能性があります。

この場合は、HTML やクラシックブロックに変換せずに、必ず「ブロックのリカバリーを試行」を選択してアップデート後のバージョン仕様として更新してください。

「ブロックのリカバリーを試行」を実行しない限り、既存のブロックは従来のバージョンの状態のままで表示されます。

WordPress 5.9 にアップデート後、「DigiPress Ex – Blocks/Blocks Free」を利用すると段落や見出しブロックなどを追加したり、ブロックの選択時にアクティブな状態になるまでしばらくフリーズする現象が確認されています。

段落や見出しブロックは、多くの「スタイル」(装飾)が用意されていますが、WordPress 5.9 でのブロックエディターでは、ブロック追加や選択時に全スタイルのプレビュー処理(レンダリング)がその都度行われ、恐らくこの処理の待ち時間が長いことが原因と思われます。

この場合は、将来のブロックエディター(ベータ版)を試せる「Gutenberg」プラグインに置き換えると、「スタイル」はテキストの項目のみとなり、スタイルごとにカーソルを合わせた際に、はじめて対象スタイルのプレビュー(レンダリング)を行う仕様のため、WordPress 5.9 のブロックエディターに比べてはるかにレスポンスが早くストレスなく編集作業ができます。

WordPress のエディターがこのスタイルプレビューの仕様にアップデートされるまでは、「Gutenberg」プラグインに置き換えてご利用ください。