Advanced Gutenbergのドキュメント

I. ADVANCED GUTENBERGのインストール

1.1インストール

私たちのプラグインをインストールするためには、標準のWordPressインストーラを使うか、/ wp-content / pluginの中のフォルダにすべてを解凍して置いてください。

 

install-wp-media-folder


それからをクリックしてください プラグインを有効にする、WordPressの左メニューにAdvanced Gutenbergメニューが表示されるのを確認します。

Advanced Gutenbergはグーテンベルクメニューからアクセスできます。 また、 "設定"メニューの下にパラメータがあります。

1.2プラグインを更新する

Advanced Gutenbergを更新するためには、WordPressのデフォルトのアップデータを使用することができます。 からダウンロードした.zipファイルから新しいバージョンを削除してインストールすることもできます。 www.joomunited.com。 いずれにせよ、すべてがデータベースに格納されているため、コンテンツを失うことはありません。

 

update-gutenberg

 

セキュリティと安定性の問題を避けるために、常に最新版を入手してください。

II。 共通の機能

2.1。 ブロックリスト

私たちのプラグインを使用することによって、あなたはいくつかのプロファイルを作成し、そしてどのブロックを選択することができます。 ブロックリスト 各プロファイルで利用可能になります。

あなた自身のプロフィールを設定するには、 「プロフィールの帰属」 のタブ 「Advanced Gutenberg」 メニュー。 いずれかのプロファイルを選択すると、プロファイル設定が表示されます。

 

ユーザーエディタプロファイル

 

あなたはそれらをクリックしてグーテンベルクでブロックを有効/無効にすることができます。 終了したら、リストの更新ボタンを押して新しいブロックアイコンを更新します。

 

ブロックリスト

 

blocks-list-2

 

保存すると、ブロックはエディタで利用できるようになります。

 

ブロック使用

 

高度なボタンブロック

あなたが作成することができます 詳細ボタン Advanced Gutenbergセクションのボタンをクリックしてください。

 

詳細ボタン

 

右側のパネルでは、ボタンの設定をいくつか調整できます。

  • ボタンリンク: URLをリンクし、新しいタブで開きます(トグルボタン)。
  • テキストの色: 文字サイズ
    • カラー設定: テキストの色と背景の色。

 

advanced-button-settings1

 

  • 境界: 半径、スタイル、色、幅。

 

高度なボタン境界

 

  • パディング: 上、右、下、左。

 

高度なボタンパディング

 

  • ホバー:
    • 色設定:背景色、テキスト色、影色。
    • シャドウ(H(水平)オフセット、V(垂直)オフセット、ぼかし、スプレッド)および遷移速度。

 

高度なボタンホバー

 

アドバンストリストブロック

あなたが作成することができます 詳細リスト Advanced Gutenbergカテゴリのボタンをクリックしてください。

 

詳細リスト

 

内容を入力したら、右側のパネルから設定を調整できます。

  • テキスト設定
    • 文字サイズ
  • アイコン設定
    • リストアイコン
    • アイコンの色
    • アイコンサイズ
    • 行の高さ
    • マージン
    • パディング

 

詳細リスト設定

 

要約ブロック

あなたが作成することができます 概要 投稿またはページに少なくとも1つの見出しタグを設定した後で、Advanced Gutenbergカテゴリのボタンをクリックしてブロックします。 要約は、左、中央、または右に配置できます。 更新するには、Update Summaryボタンを使用してください。

 

summary-gutenberg-content

 

右側のパネルには、調整できるオプションがいくつかあります。

  • 最小化された負荷 デフォルトで概要を表示/非表示にする
  • 要約ヘッダーのタイトル: Summaryのヘッダテキスト。 最小負荷 オプションが有効
  • アンカーカラー: 要約の色を選ぶ

 

サマリー設定

 

カウンター(カウントアップ)ブロック

 

あなたが作成することができます カウントアップ Advanced Gutenbergカテゴリのボタンをクリックして、場合によっては記号でブロックします。

 

カウントアップ

 

次に、右側のパネルからカウンターのいくつかのオプションを調整できます。

  • カラー設定: ヘッダーの色、カウントアップの色、説明の色
  • 列: 1-3
  • カウンター番号のサイズ: 数字のサイズを設定する
  • カウンターアップシンボル: カウンターの前後に文字を追加する
  • 切り替えボタン: シンボルの位置を設定します(Onはシンボルが数字の後に来ることを意味します)

 

カウントアップ設定

 

アドバンストイメージブロック

高度な画像 ブロックを使用して画像を作成できます。 追加するには、をクリックしてください。 高度な画像 Advanced Gutenbergカテゴリのボタンをクリックし、挿入するイメージを次に選択します。

 

アドバンストイメージボタン

 

次に、画像のタイトルとその字幕を変更できます。 右側のパネルから画像の設定を調整できます。

  • クリック時のアクション: ライトボックスで画像を開くか、カスタムURLを開く
  • リンク先URL: 新しいタブでリンクを開く(トグルボタン)
  • 新しいタブでリンクを開く
  • 画像サイズ: 画像を全角で表示するか、カスタムの高さと幅で表示するか
  • カラー設定: タイトルの色、サブタイトルの色、オーバーレイの色
  • テキストの配置: 垂直方向の配置(上、中央、下)、水平方向の配置(左、中央、右)

 

高度な画像設定

 

お客様の声

をクリックして、コンテンツに紹介文を挿入できます。 お客様の声 Advanced Gutenbergカテゴリのボタン。 その後、紹介文のアバター、名前、職位、説明を変更できます。

 

紹介ボタン

 

最後に、右側のパネルでお客様の声の設定を調整できます。

  • スライダー表示: トグルボタン
  • 列: 標準ビューの列範囲は1〜3、スライダービューの列範囲は4〜10です。
  • アバター: アバターのサイズ、背景色、罫線の設定(色、半径、幅など)
  • テキストの色
    • 名前の色
    • ポジションカラー
    • 説明の色

 

紹介文の設定

 

マップブロック

を使用するために 地図 ブロックするには、設定にGoogle APIキーを追加する必要があります。 その後、あなたはこれに従うべきです リンク、 クリック APIとサービスを有効にする ボタンをクリックし、Geolocation API、Maps JavaScript APIを検索して有効にします。

追加したら、をクリックしてマップを作成できます。 地図 Advanced Gutenbergカテゴリのボタン。

 

マップブロック

 

右側のパネルから、緯度と経度を入力するか、住所を入力してから[場所を取得]ボタンを押すことで、場所を挿入できます。

地図の追加オプションがいくつかあります。

  • ズームレベル
  • 高さ
  • マーカーアイコン
  • マーカーのタイトル
  • マーカーの説明
  • マップスタイル: 銀、レトロ、夜、そしてあなたもあなたのカスタムスタイルを追加することができます。

 

マップ設定

 

アドバンストビデオブロック

をクリックして、投稿へのビデオを作成できます。 高度なビデオ Advanced Gutenbergセクションのボタン。 その後、YoutubeやVimeoからURLを貼り付けるか、サーバーからローカルビデオを使用できます。 プレビュー画像を変更するには、左上隅から[編集]ボタンをクリックします。

 

アドバンストビデオ

 

次に、右側のパネルでビデオの設定を調整できます。

  • ライトボックスでビデオを開く: ライトボックスには追加の表示オプションがあります
  • 全角: オフの場合は、ビデオの幅をカスタマイズする必要があります。
  • ビデオの高さ
  • カラー設定: オーバーレイの色と再生ボタンの色
  • 再生ボタン:アイコンのスタイル、再生ボタンのサイズ

 

高度なビデオ設定

 

アドバンストテーブルブロック

をクリックしてテーブルを作成できます。 高度なテーブル Advanced Gutenbergカテゴリのボタン。

 

高度なテーブルボタン

 

列と行の数を設定した後、テーブルを編集できます。

 

アドバンストテーブル

 

その後、テキストを入力したり、テーブルブロックのすぐ上にあるエディタ自体から行と列を調整したりできます。 右側のパネルで他の設定を変更できます。

  • スタイル
    • デフォルト
    • ストライプ

 

スタイルテーブル

 

  • テーブル設定
    • 最大幅: max-widthを100%にするには、これを0に設定します。
    • 固定幅テーブルセル
    • テーブルヘッダ
    • テーブルフッター
    • 境界線が折りたたまれました

 

advanced-table-settings1

 

  • セル設定
    • カラー設定: 背景色、テキスト色
    • 境界: 境界線のスタイル、色、幅
    • パディング: 上下左右の余白
    • テキストの配置: 水平方向と垂直方向の配置

 

単一セル設定

 

Shiftキーを使ってセルを結合したり、結合したセルを 高度なテーブル ブロック。

アコーディオンブロック

あなたが作成することができます アコーディオン をクリックして小さな領域にもっと多くのコンテンツを表示する必要がある場合 アコーディオン Advanced Gutenbergカテゴリのボタン。

 

アコーディオンブロック

 

作成したら、右側のパネルからヘッダー、本文、または枠のオプションを調整できます。

  • アコーディオン設定:
    • 下の間隔: 次のブロックへのスペースを定義します。 これはブロック間隔オプションを上書きします(フロントエンドビューのみ)。
  • ヘッダ設定
    • ヘッダーアイコンのスタイル
    • カラー設定: 背景色、テキスト色、アイコン色

 

アコーディオンヘッダ

 

  • ボディカラー設定
    • 背景色
    • テキストの色
  • 枠線の設定
    • ボーダースタイル: 実線、破線または点線
    • カラー設定
    • ボーダー幅
    • ボーダー半径
  • アコーディオン州: この設定を有効にすると、すべてのアコーディオンが折りたたまれます。

 

アコーディオン設定

 

タブブロック

同様に、あなたは タブ 小さな領域にもっと多くのコンテンツを表示する必要がある場合はブロックします。 挿入するには、 タブ Advanced Gutenbergカテゴリのボタン。

 

タブブロック

 

その後、右側のパネルからタブ、本文、または枠のオプションを調整できます。

  • タブの色
    • 背景色
    • テキストの色
    • アクティブなタブの背景色
    • アクティブなタブのテキストの色

 

タブ設定

 

  • ボディカラー
    • 背景色
    • テキストの色
  • 枠線の設定
    • スタイル: 実線、破線または点線
    • 半径

 

tab-settings1

 

ソーシャルリンクブロック

あなたはできる を使用して非常に簡単にあなたのソーシャルリンクを共有する ソーシャルリンク これは、Advanced Gutenbergカテゴリのボタンをクリックして作成できます。

 

ソーシャルリンク

 

既成のアイコンを使用するか、独自のアイコンをアップロードして、右側のパネルからさらにいくつかのオプションを調整できます。

  • プリセットアイコン: あなたはあなたのカスタムアイコンをアップロードすることができます
  • プリセットアイコンの色
  • アイコン設定
    • アイコンサイズ
    • アイコンスペース

 

ソーシャルリンク設定

 

最近の投稿ブロック

最近の投稿を表示するために使用できる3つのレイアウトがあります。グリッド、リスト、およびスライダービューです。 をクリックして、これらのビューのいずれかを作成できます。 最近の投稿 Advanced Gutenbergカテゴリのボタン。

 

最近の投稿ブロック

 

あなたは、ブロックがどのようにフロントエンドに表示されるかを上の画像または私たちの中で見ることができます。 Advanced Gutenbergデモ.

右側のパネルから、各レイアウトの設定を調整できます。

  • 並び替え

注文順

  • カテゴリー
  • アイテム数
  • (グリッド表示のみ)
  • 注目の画像を表示
  • 投稿投稿者を表示
  • 投稿日を表示
  • 表示続きを読むリンク
  • もっと読む
  • 投稿の抜粋を表示
  • 抜粋として最初の投稿テキスト: 投稿にある最初のテキストの一部を抜粋として表示します。

 

最近の投稿設定

 

ウー製品ブロック

に利用できる2つのレイアウトがあります ウー製品 ブロック:標準ビューとスライドビューでは、WordPressブログにWooCommerce商品を表示できます。 をクリックしてこのブロックを挿入できます。 ウー製品 Advanced Gutenbergカテゴリのボタン。

 

ウーブロック

 

あなたは、ブロックがどのようにフロントエンドに表示されるかを上の画像または私たちの中で見ることができます。 Advanced Gutenbergデモ

右側のパネルで、各レイアウトの設定を調整できます。

  • 製品設定
    • 製品の状況
    • カテゴリー
  • レイアウト設定
    • 製品数
    • 注文

 

ウー設定

 

画像スライダーブロック

多数の画像をスライドとして表示する場合は、をクリックします。 画像スライダー Advanced Gutenbergカテゴリのボタン。

 

新しい画像スライダ

 

次に押す 画像を追加 スライドに表示されている画像を選択するためのボタン。 その後、あなたはテキストを入力することができます タイトルとテキスト 各画像の説明

 

イメージスライダー

 

右側のパネルのスライダの設定を編集できます。

画像設定

  • クリック時のアクション
    • 無し
    • ライトボックスで画像を開く
    • カスタムリンクを開く
  • 全幅
  • オートハイト
  • 常にオーバーレイを表示

カラー設定

  • ホバーカラー
  • タイトルの色
  • テキストの色

slide-settings-1

 

テキストの配置

  • 垂直方向の配置
    • センター
  • 水平方向の配置
    • センター

slide-settings-2

 

お問い合わせフォーム

このブロックで顧客のEメール連絡通知を受け取ることができます。 あなたはをクリックしてそのフォームを作成することができます お問い合わせフォーム Advanced Gutenbergカテゴリのボタン。

 

お問い合わせフォーム

 

あなたはの設定を編集することができます お問い合わせフォーム 右側のパネルにあります。

  • 通知: 設定でreCAPTCHAオプションを有効にした場合は表示されません。
  • メール送信者: あなたは設定で変更することができます。 連絡フォームが送信されるたびに、(デフォルトでは)Eメールが管理Eメールに送信されます。
  • テキストラベル:
    • 名前入力プレースホルダー
    • メール入力プレースホルダー
    • メッセージ入力プレースホルダ
    • テキストを送信する
    • 空のフィールド警告テキスト
    • 成功テキストを送信する

 

contact-settings1

 

  • 入力色: 背景色とテキスト色
  • ボーダー設定: 枠の色、枠のスタイル、枠の半径
  • 送信ボタンの設定
    • カラー設定: 枠線とテキスト、背景
    • ボタンの境界線の半径
    • ボタン位置 左、中央、そして右

contact-settings2

 

ニュースレターブロック

クライアントのメールアドレスを取得するには、をクリックしてメールブロックを作成します。 ニュースレター Advanced Gutenbergカテゴリのボタン。

 

ニュースレター

 

右側のパネルでニュースレターの設定を編集できます。

  • 通知: 設定でreCAPTCHAオプションを有効にした場合は表示されません。
  • フォーム設定:
    • フォームスタイル:デフォルト/代替
    • 用紙の幅(ピクセル)
  • テキストラベル:
    • メール入力プレースホルダー
    • テキストを送信する
    • 空のフィールド警告テキスト
    • 成功テキストを送信する

 

newsletter-settings1

 

  • 入力色: 背景色とテキスト色
  • ボーダー設定: 枠の色、枠のスタイル、枠の半径
  • 送信ボタンの設定
    • カラー設定: 枠線とテキスト、背景
    • ボタンの境界線の半径

 

newsletter-settings2

 

列マネージャ

内部に他のブロックを含むブロックを作成したい場合は、あなたが選ぶべきです 列マネージャ Advanced Gutenbergカテゴリにあります。 新しいブロックを作成すると、ブロックのスタイルが表示されます。

 

列管理マネージャ追加ブロック

 

その後、各列に任意の種類のブロックを追加できます。 これは、2つの列を含む列マネージャーブロックです。左側の列は詳細画像、右側の列は段落、詳細リストです。

 

列管理ブロック

 

そして右側のパネルで、Column Managerブロックの設定を調整できます。

  • レスポンシブ設定
    • 各デバイスタイプのスタイル:デスクトップ、タブレット、モバイル
    • 列間のスペース
    • パディング
    • マージン

 

column-settings-1

 

 

  • 行設定
    • 折り返された列:列がオーバーフローした場合、それは新しい行に分割されます(例:これを列間隔で使用します)。
    • ラッパータグ:Div、Header、Main、...
    • コンテンツの最大幅(px vw、%)
    • コンテンツの最大の高さ(px、vw、vh)

 

column-settings-2

 

2.2。 設定

画像にライトボックスとキャプションの機能を使用するには、有効にする必要があります。 ライトボックスでギャラリーを開く そして 画像キャプション それぞれオプション Advanced Gutenbergの[構成]タブ 設定で。

 

adv-gutenberg-settings

 

  • ライトボックスでギャラリーを開く: ライトボックススタイルのポップアップとしてギャラリー画像を開く
  • 画像の説明: ライトボックス画像のキャプションとして画像(alt)属性を読み込む
  • 自動停止を削除します。 いくつかのブロックに不要な段落が追加されるのを防ぐために使用されていたWordPress関数のautopを削除します。
  • Google APIキー: このAPIキーはMap Blockを使用するために必要です

ブロック設定

  • ブロック間隔を有効にします。 最小の垂直ブロック間隔を自動的に適用します - デフォルトはnoneです、そして値はピクセルで与えられるべきです
  • ブロックアイコンの色: 管理上のブロックアイコンの色を設定、Advanced Gutenbergブロックにのみ適用
  • エディタの幅: 管理グーテンベルグエディタの幅のサイズを定義します
  • デフォルトのサムネイル: Recent Postsブロックで使用するデフォルトの投稿サムネイルを設定する
  • 列ビジュアルガイドを有効にする: 境界線を有効にして前立腺を実現 グーテンベルクコラムブロック

また見つけることができます 前編 グーテンベルク設定 エディタの右上隅、の隣に 設定 アイコン。

 

editor-adv-gutenberg-settings

 

2.3デフォルトブロック設定

 

Advanced Gutenbergのブロックを調整するためには、メニューに行くことができます Advanced Gutenberg> 設定>デフォルトブロック設定タブ.

 

default-blocks-config

 

ブロックごとに、隣のをクリックしてデフォルト設定を編集できます。 設定 アイコン。

 

ブロック編集

 

2.4メールとフォーム

メール設定

送信者と受信者の情報を設定できます。 お問い合わせフォーム ブロック:

 

メール設定

 

フォームキャプチャー

まず、あなたのサイトにreCaptchaを登録してください ここにをクリックして 管理コンソール 情報を入力するためのボタン。

その後、reCAPTCHAサイトとreCAPTCHA秘密鍵を入力してください。 reCAPTCHAオプションを必ず有効にしてください。 reCAPTCHAの言語とテーマも選択できます。

 

フォーム要約

 

フォームデータ

こちらからダウンロードできます お問い合わせフォーム そして ニュースレターフォーム データ。 .CSVファイルまたは.JSONファイルをエクスポートできます。

 

フォームデータ

 

2.5カスタムスタイル

Advanced Gutenberg 設定では、エディタやHTMLタグオプションで使用できるカスタムCSSスニペットを定義することもできます。 カスタムスタイルを使用するには、 カスタムスタイル からのページ Advanced Gutenbergの左メニューです。

新しいスタイルを作成するには、をクリックしてください。 “新しいクラスを追加する” スタイルリストの下部にあるボタンをクリックします。 自分のCSSは[カスタムCSS]フィールドで直接編集できます。

 

カスタムスタイルグーテンベルク

 

行った変更はすべてページの左側に表示されます。 それらは「Example text」で文字列に適用されます。 文字列の上と下のテキストは、スタイルが残りの要素の間でどのように見えるかを表示します。
カスタムスタイルを編集したら、を使用して保存します。 「スタイルを保存する」 ボタン。
エディタで要素にスタイルを適用するには、要素を選択してドロップダウンリストからスタイルを選択します。 「カスタムスタイル」。 デフォルトのスタイルに戻してすべてのカスタムスタイルを削除するには、 「段落」 オプション。

 

カスタムCSSスタイルブロック