Jetpackブロック

Jetpackブロックは、コンテンツの作成、サードパーティサービスのコンテンツの統合、サイトの収益化、サイトのインタラクティブ性や魅力の向上に役立つソリューションを提供します。

Jetpackブロックについて

2018年、WordPress 5.0では、Gutenbergエディターとも呼ばれる、デフォルトのブロックベースエディターが正式に導入されました。ブロックは、ページや投稿を構成する要素です。段落、見出し、引用、画像、動画、ボタンなどが含まれます。ページ上の各項目はそれぞれ独立したブロックであり、個別に編集・移動してカスタムレイアウトを作成できます。

Jetpackは、WordPressブロックエディターの標準機能を拡張し、魅力的なページや投稿を作成するためのさまざまな追加ブロックを利用できるようにします。

ブロックはWordPressクラシックエディターとは互換性がありません。ただし、クラシックエディターの使い慣れた操作感を維持しながらブロックの利用を試したい場合は、次のセクションにあるおすすめの方法をご覧ください。ブロックとクラシックエディターの使用。

サイトでJetpackブロックを有効化する方法

Jetpackブロックはデフォルトで有効になっています。有効化または無効化するには、 Jetpack → 設定 → 執筆のあるWP Adminで、下にスクロールして作成セクションまで移動し、「Jetpackブロック…」の横にある切り替えボタンをクリックします。

エディターにJetpackサイドバーのパネルが表示されませんか?ブロックエディターのJetpackのパネルを固定する方法、環境設定、パネルの表示については、こちらをご覧ください。

サイトの投稿やページにJetpackブロックを追加する方法

ブロックを追加するには、+ ブロックインサーターとも呼ばれるボタンをクリックします。詳しくはこのガイドをご覧ください。次に、JetpackブロックはJetpackの緑色で見分けることができます。また、Jetpackブロックカテゴリーの下からすべて見つけることもできます。

検索ボックスでブロック名を検索するか、スラッシュに続けてブロック名を入力してブロックを検索することもできます。例:/payments。

一部のJetpackブロックでは、特定のJetpack機能を有効にする必要があり、別のブロックではJetpackプランが必要です。詳細については、以下のリストをご覧ください。

Jetpackブロックまたは特定の機能が有効になっていない場合、関連するブロックのプレースホルダーは管理者権限のないユーザーには表示されません。これには、関連する投稿、ブログ統計、人気の投稿、広告、お問い合わせフォーム、VideoPressなどのブロックが含まれます。

これらのブロックを使用するには、まず管理者が関連するJetpack機能を有効にする必要があります。有効にすると、作成者や編集者など、他のユーザー権限でもブロックを利用できるようになります。

ブロックインサーターにJetpackブロックが表示されない場合は、管理者としてログインし、その機能を有効化する必要があるか確認してください。

サイトでJetpackブロックを使用できない場合は、カスタムテーマや別のプラグインのエディターが原因となっている可能性もあります。その場合は、該当するプラグインまたはテーマの作成者にお問い合わせください。

Jetpackブロックとその機能の概要

ブロックの詳細については、WordPressブロックエディターに関するWordPress.comガイドをご覧ください。

以下にJetpackブロックの一覧を示します。

テキスト

文章の作成や編集に役立つブロックです。

  • ブログ統計 -サイトのフロントエンドにサイト統計を表示できます。個々の投稿やサイト全体の閲覧数、訪問者統計を表示できます。
  • Jetpack AI Assistant - AIを活用して、新規および既存のコンテンツの下書き、変換、翻訳を行えます。
  • Jetpack AI検索 - 訪問者が質問し、AIとサイトのコンテンツを利用した回答を受け取れるようにします。
  • LaTeX-ライブプレビュー付きでLaTeXを作成・表示します。
  • Markdown - 通常の文字と一部の句読点だけを使って、書式付きのコンテンツを作成します。
  • トップ投稿と固定ページブロック-サイトで人気のコンテンツを紹介できます。
  • 執筆プロンプト - 執筆を始めるためのプロンプトを取得し、同じテーマで他の人が書いた記事へのリンクをWordPress.comリーダーに含めます。

メディア

サイトでメディアをさまざまな方法で表示するためのブロックです。

  • 画像比較 - 2つの画像を横並びに表示し、違いを比較します。
  • タイルギャラリー - 画像ギャラリーをタイル状のモザイク、円形グリッド、正方形タイル、またはタイル状の列として表示します。
  • スライドショー - 投稿やページに画像のスライドショーを挿入します。
  • ストーリー - 写真と動画を組み合わせて、魅力的でタップ操作に対応した全画面スライドショーを作成します。
  • VideoPress -VideoPressを使ってメディアライブラリの動画を埋め込むか、新しい動画をアップロードします。

ウィジェット

サイトに独自の機能を追加するためのブロックです。

  • Cookie同意ブロック -Cookieを使用していることを訪問者に知らせる同意バナーをサイトに表示します。
  • 再訪問者 - 訪問者がページを訪れた回数に応じて、内包されたブロックの表示を制御します。
  • 星評価 - サイトの作成者が視覚的なレビュー評価をサイトに追加できます。

埋め込み

サードパーティサービスを簡単に統合するためのブロックです。

  • Descript - Descriptの音声または動画のリンクを埋め込みます。
  • Eventbriteチェックアウト - Eventbriteのイベントを埋め込みます。
  • Facebook - FacebookのコンテンツをJetpackのAPIを使って埋め込みます。
  • GIF - GiphyからアニメーションGIF画像を検索して、サイトに直接埋め込みます。
  • Googleカレンダー -投稿または固定ページにGoogleカレンダーを埋め込みます。
  • Googleドキュメント -Googleドキュメントを埋め込みます
  • Goodreads - Goodreadsのプロフィールをサイトに統合します。
  • Instagram - Instagramのコンテンツを、JetpackのAPIを使って埋め込みます。
  • 最新のInstagramの投稿 - Instagramの最新画像を表示します。
  • Loom - Loom動画を埋め込みます。
  • マップ -サイトの投稿または固定ページにマップを追加します。
  • Pinterest -Pinterestのピン、ボード、またはユーザーを埋め込みます。
  • ポッドキャストプレーヤー -ポッドキャストの最新エピソード一覧を表示し、サイトから直接再生できます。
  • 関連記事 -訪問者が読んでいる投稿に関連する追加の投稿を提案します。

フォーム

さまざまな目的のフォームを簡単に設定できます。

「フォームブロック」を追加すると、次のすぐに使えるテンプレートから1つを選んで追加できます。

  • 予約フォーム-希望する予約日時を選択できるフォームを追加します。
  • お問い合わせフォーム-投稿または固定ページ用のシンプルなお問い合わせフォームです。
  • フィードバックフォームは、サイトで訪問者からのフィードバックを収集するフォームです。
  • 出欠確認フォーム-訪問者が今後開催されるイベントへの参加を確認できるフォームです。
  • 登録フォーム-訪問者が会員、クラブ、グループなどに登録できるようにします。
  • Salesforceリードフォーム-送信内容をSalesforceに直接送信するフォームです。

フォームテンプレートをカスタマイズしたり、次のフォームフィールドブロックを使って独自のフォームを作成したりすることもできます。

  • チェックボックス
  • 日付選択
  • ドロップダウンフィールド
  • メールフィールド
  • 非表示フィールド
  • 名前フィールド
  • 複数行テキストフィールド
  • 複数選択(チェックボックス)
  • 電話番号フィールド
  • 評価フィールド(星とハート)
  • 単一選択(ラジオボタン)
  • スライダーフィールド
  • 利用規約への同意
  • テキスト入力フィールド
  • URLフィールド

収益化

収益の創出に役立つブロックです。

  • 広告 -投稿、固定ページ、ウィジェットエリアのコンテンツ内の任意の場所に広告ユニットを挿入します。
  • 寄付フォーム - Stripeを利用して、寄付のクレジットカードおよびデビットカード決済を受け付けます。
  • OpenTable - OpenTable経由で予約を追加します。
  • PayPalで支払う -実物またはデジタル商品、あるいは寄付の支払いを受け付ける支払いボタンを追加します。
  • 決済 - Stripeを利用して、クレジットカードまたはデビットカード決済を処理する支払いボタンを追加します。
  • 支払いボタン - Stripeを利用して、1つのブロック内にさまざまな料金プラン用の支払いボタンを追加します。
  • ペイウォール -投稿の一部を表示し、残りのコンテンツをすべての購読者または有料購読者だけに制限します。
  • Tock -レストランのサイトにTock経由の予約フォームを追加します。

成長

サイトの成長に役立つブロックです。

  • ブログロール -サイトを訪れた人におすすめのサイトを表示します。
  • 営業時間 -サイトにビジネスの営業時間を表示します。
  • Calendly – 訪問者はウェブサイトから、1対1の予約、グループイベント、チームミーティングを直接スケジュールできます。
  • 連絡先情報 –投稿や固定ページに連絡先情報(メールアドレス、住所、電話番号)を追加します。
  • いいね –ページテンプレートに「いいね」ブロックを挿入すると、読者が投稿や固定ページへの評価を示せるようになります。
  • Mailchimp – 訪問者はMailchimpリストに登録できます。
  • Nextdoor – Nextdoorソーシャルプラットフォームの投稿をウェブサイトに埋め込みます。
  • 有料コンテンツ – Stripeを利用して、作成したコンテンツへの限定アクセス向けにさまざまな料金プランを受け付け、サイトを収益化できます。
  • レシピ– 構造化されたレシピコンテンツ(画像、材料、手順)を追加します
  • 共有ボタン –共有ボタンを追加すると、訪問者は数回クリックするだけでソーシャルメディア上で投稿や固定ページを共有できます。
  • 購読 –購読フォームを挿入すると、新しい投稿を公開した際に読者が通知を受け取れるようになります。
  • 購読者ログイン –メンバーや購読者がログインして、アカウントや購読の詳細にアクセスできるようになります。
  • 音声からコンテンツへ– 音声の言葉をAIを使って投稿に変換します
  • WhatsAppボタン –サイト訪問者が商品やサービスについて問い合わせたり、サポートを依頼したりするメッセージを送信できるようにします。

個別のJetpackブロックを無効にする方法

サイトにJetpackブロックを配置したい一方で、個々のブロックは有効にしたくない場合があります。個々のJetpackブロックを無効にするには、ユーザーインターフェースが用意されていないため、カスタムコードを使って操作する必要があります。個々のJetpackブロックを無効にする方法については、開発者向けドキュメントでご案内しています、さらにこちらもご覧いただけます。

当社のサポート範囲に従い、開発者向けドキュメントに記載されている内容を超えるカスタムコードの実装についてはサポートできません。

ブロックとクラシックエディターの使用

WordPressのクラシックエディターはブロックに対応していません。ただし、クラシックエディターの使い慣れた操作性とWordPressブロックの強力な機能を両方活用する方法があります:

クラシックブロックを使用します。クラシックエディタープラグインをインストールしている場合は、まず無効化する必要があります。管理画面のプラグイン → インストール済みプラグインで、デフォルトのWordPressブロックエディターにアクセスできます。そこにはクラシックブロックが含まれています。クラシックブロックはクラシックエディターに似ており、ブロック内にカスタムTinyMCEボタンツールバーがあります。

クラシックエディタープラグインでブロックエディターを有効にします。クラシックエディタープラグインでは、ブロックエディターを有効にするオプションを利用できます。このため両方のエディターを使用でき、WP管理画面の設定 → 投稿設定で有効にできます。ブロックエディターをすべてのユーザーのデフォルトエディターに設定し、次にユーザーによるエディターの切り替えを許可では、はいを選択します。

Still need help?

Please contact support. We’re happy to advise.

All ブロック articles