[オリジナル]ブログカードブロックの機能

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

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

このブロックコンテンツは、指定されたWebページ(URL)のOGPデータを解析し、ページタイトル、概要、サムネイルをまとめたブログカードを表示します。

一度取得されたデータはデータベースにキャッシュされるため、対象ページのサイトへの負荷を気にすることなく利用できます。

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

表示デモURLのみ指定した場合

DigiPress Ex – Blocks : 標準ブロックの拡張と独自ブロックを追加する必須プラグイン

WordPress のブロックエディターの標準ブロックを拡張し、さらに DigiPress テーマにプリセット済みの CSS をベースに、直感的な操作で利便性の高い様々なオリジナルのブロックを追加する DigiPress テーマ専用のプラグインです。HTML や CSS セレクタを一切記述せず、実際のページと同じ表示で本文を意のままに作成でき、Webコンテンツ制作の自由度を一気に広げます。メンテナンス効率のため、本プラグインの機能はテーマには組み込まずプラグイン化しています。このため、無料版は最低限 DigiPress テーマと併用する必須プラグインとしてぜひご利用ください。ダウンロードは…

表示デモサムネイル左側、配色をカスタムした場合

DigiPress Ex – Blocks : 標準ブロックの拡張と独自ブロックを追加する必須プラグイン

表示デモ上部にラベルを表示した場合(アイコン対応)

DigiPress Ex – Blocks : 標準ブロックの拡張と独自ブロックを追加する必須プラグイン

表示デモグラデーション背景

DigiPress Ex – Blocks : 標準ブロックの拡張と独自ブロックを追加する必須プラグイン

ブロックの追加

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

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

編集イメージ

編集中のエディターでは、以下のように実際のブロックコンテンツの表示と同じ状態でカスタマイズができ、ブロック下部にあるURL欄にブログカードを表示したいURLを貼り付けるだけで瞬時にブログカードが描画されます。

サイト内の記事を対象とする場合は、キーワード(投稿タイトルなど)でリアルタイム検索ができます。

ブロック追加→URL貼り付け

リンクを新規タブで開く

ブログカードをクリックした際に、ブラウザの新規タブで対象ページを開くようにするには、URL欄の右隣にある「その他の設定」ボタンをクリックして表示された「新規タブで開く」のトグルをオンにします。

ブロックオプション(右側サイドバー)

ブログカード設定

右側の設定サイドバーにある「ブログカード設定」にて表示するブログカードの配色やラベルなどのデザインのカスタマイズが行えます。

ラベルの先頭にアイコンを表示する

ブログカードの上部にラベルを表示する場合、さらにラベルのテキストの先頭にアイコンを表示することができます。
ラベルアイコンの入力フォームにカーソルを置くと、テーマにプリセット済みのアイコンがランダムに100個表示されます。
目的のアイコンが100個の中にない場合は、キーワードを直接入力して検索します。

検索ワードは日本語にも対応しています。

ラベルアイコンの検索

ブログカードを更新する

対象ページの情報が更新された場合など、一度取得したブログカードのデータ(OGP)を更新する場合は、「キャッシュを無効(削除)」トグルを一旦オンにした後、再びトグルをオフに戻します。

ブログカードが表示される度にOGPデータを取得してしまうため、「キャッシュを無効(削除)」トグルはブログカードを更新する際に一時的にオンにするのみで、通常はオフの状態にしておいてください。

その他Tips

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

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

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

再利用コンテンツ機能

WordPress のブロックエディターの使い勝手を大幅に向上させる DigiPress Ex – Blocks プラグインの「再利用コンテンツ」機能を紹介しています。

注意事項・仕様

「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示された場合

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

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

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

WordPress 5.9〜にてブロックエディターの動作が重たい(しばらくフリーズする)場合

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

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

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

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

Gutenberg プラグインはこちら