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セクションのボタンをクリックしてください。

 

詳細ボタン

 

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

  • スタイル: 4つの定義済みスタイル

    • デフォルト

    • 概説

    • 二乗

    • 四角いアウトライン

  • ボタンリンク:

    • リンクURL

    • 新しいタブで開く:オン/オフ。

 

adv-button-settings

 

  • テキストの色:

    • 文字サイズ

    • 背景色

    • テキストの色

 

テキスト色ボタン設定

 

  • 境界:

    • ボーダー半径

    • 境界線スタイル:実線、点線、尾根、...

    • ボーダの色

    • ボーダー幅

 

adv-button-border

 

  • マージン: 上、右、下、左。

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

 

高度なボタンパディング

 

  • ホバー:

    • 色設定:背景色、テキスト色、影色。

    • シャドウ(H(水平)オフセット、V(垂直)オフセット、ブラー、スプレッド)、不透明度、遷移速度。

 

高度なボタンホバー

 

高度なリストブロック

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

 

詳細リスト

 

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

  • テキスト設定

    • 文字サイズ

  • アイコン設定

    • アイコン(リスト、色、サイズ)

    • 行の高さ

    • マージン

    • パディング

 

詳細リスト設定

 

要約ブロック

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

 

summary-gutenberg-content

 

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

  • 最小化された負荷 デフォルトで概要を表示/非表示にする

  • 要約ヘッダーのタイトル: Summaryのヘッダテキスト。 最小負荷 オプションが有効

  • アンカーカラー: 要約の色を選ぶ

 

サマリー設定

 

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

 

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

 

カウントアップ

 

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

  • カラー設定: ヘッダーの色、カウントアップの色、説明の色

  • 列: 1-3

  • カウンター番号のサイズ: 数字のサイズを設定する

  • カウンターアップシンボル: カウンターの前後に文字を追加する

  • 切り替えボタン: シンボルの位置を設定します(Onはシンボルが数字の後に来ることを意味します)

 

カウントアップ設定

 

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

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

 

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

 

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

  • クリック時のアクション: ライトボックスで画像を開くか、カスタムURLを開く

  • リンク先URL: 新しいタブでリンクを開く(トグルボタン)

  • 新しいタブでリンクを開く: オンオフ

  • 画像サイズ: 画像を全角で表示するか、カスタムの高さと幅で表示するか

 

高度な画像設定

 

  • 焦点選択ツール: 画像に焦点を合わせるポイントを選択するか、水平/垂直位置を設定します

  • オーバーレイの不透明度のデフォルト

  • 不透明度ホバーのオーバーレイ

  • カラー設定: タイトルの色、サブタイトルの色、オーバーレイの色

  • テキストの配置: 垂直方向の配置(上、中央、下)、水平方向の配置(左、中央、右)

 

adv-image-hover

 

証言ブロック

をクリックして、コンテンツに紹介文を挿入できます。 お客様の声 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カテゴリのボタン。 その後、2つのグループアコーディオン要素がデフォルトで表示されます。

 

adv-accordion-block

 

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

  • アコーディオン設定:

    • 下の間隔: 各アコーディオン間のスペースを定義する(フロントエンドビューのみ)

    • 最初の折りたたみ: デフォルトですべてのアコーディオンを折りたたみます。

  • ヘッダ設定

    • ヘッダーアイコンのスタイル

    • カラー設定: 背景色、テキスト色、アイコン色

 

adv-accordion-header

 

  • ボディカラー設定

    • 背景色

    • テキストの色

  • 枠線の設定

    • ボーダースタイル: 実線、破線または点線

    • カラー設定

    • 境界線の幅、半径

 

adv-accordion-settings

 

高度なタブブロック

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

 

タブブロック

 

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

  • タブスタイル
    • デスクトップ、タブレット、またはモバイル
    • 水平または垂直
  • タブ設定
    • 最初に開くタブ

 

adv-tab-settings

 

  • タブの色

    • 背景色

    • テキストの色

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

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

 

タブ設定

 

  • ボディカラー

    • 背景色

    • テキストの色

  • 枠線の設定

    • スタイル:実線、破線または点線

    • 境界線の幅、半径

 

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)

    • コンテンツの最大の高さ(px、vw、vh)

 

column-settings-2

 

ログイン/登録フォームブロック

Webサイトのログインフォームまたは登録フォームを作成できます。 クリックして ログイン/登録フォーム Advanced Gutenbergセクションのボタン。

 

ログインフォームブロック

 

また、このブロックのナビゲーションバーまたは右側のパネルで、ログインから登録にビューを切り替えることができます。

 

ログイン登録フォーム

 

そして、右側のパネルに移動して、フォームに関する詳細を調整できます。

  • 初期フォーム: ログインまたは登録

  • ログイン後のリダイレクト: ホーム、ダッシュボードまたはカスタム

  • フォーム幅 (px)

  • ロゴを表示

  • ロゴ幅 (px)

  • 入力フィールドアイコンを表示

  • 登録/ヘッダーリンクを表示

  • ヘッダーの色

  • パスワード紛失リンクを表示

 

フォーム状態設定

 

  • 入力プレースホルダー

    • ログイン入力プレースホルダー

    • ユーザー名入力プレースホルダー

    • メール入力プレースホルダー

  • テキスト/入力色

    • 入力背景色

    • 入力色

    • テキストの色

  • 枠線の設定

    • ボーダの色

    • ボーダースタイル

    • ボーダー幅

 

入力プレースホルダー設定

 

  • 送信ボタンの設定

    • ボーダーとテキスト

    • バックグラウンド

    • ボタンの境界線の半径

    • ボタンの位置

  • 送信ボタンホバー

    • ホバー色: 背景、テキスト、影の色

    • 影: 不透明度、移行速度、影(H(水平)オフセット、V(垂直)オフセット、ぼかし、広がり)

  • 通知: Google reCaptchaを有効にして、スパムボットを回避することを強くお勧めします。 次のフォームのRecaptchaで有効にできます。 前売 Gutenberg>メールとフォーム .

 

送信ボタン設定

 

検索バーブロック

フロントエンドで検索テキストボックスを作成するには、 検索バー Advanced Gutenbergカテゴリのボタン。

 

検索バーブロック

 

右側のパネルで検索バーの設定を調整できます。

  • スタイル: 2つの定義済みスタイルがあります:デフォルトとクラシック

  • 検索バーの状態

    • 全幅:オン/オフ

  • 検索アイコンの設定

    • 右側の検索アイコン:オン/オフ

    • 検索アイコン

 

検索バーの設定

 

  • 検索入力設定

    • プレースホルダーを検索

    • 入力色:背景とテキストの色

 

検索入力設定

 

  • 検索ボタンの設定

    • 送信ボタンを表示:オン/オフ

    • 左側の検索ボタン:オン/オフ

    • 背景とテキストの色

    • ボーダー半径

  • ホバー色: 背景、テキスト、影の色

  • ホバーシャドウ: 不透明度、移行速度、影(H(水平)オフセット、V(垂直)オフセット、ぼかし、広がり)

 

検索ボタン設定

 

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]フィールドで直接編集できます。

 

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

 

行ったすべての変更は、ページの左側に表示されます。 これらは、「サンプルテキスト」を使用して文字列に適用されます。 文字列の上下のテキストは、残りの要素の中でスタイルがどのように見えるかを示します。 カスタムスタイルを編集したら、を使用して保存します 「スタイルを保存する」 ボタン。


エディタで要素にスタイルを適用するには、要素を選択してドロップダウンリストからスタイルを選択します。 「カスタムスタイル」。 デフォルトのスタイルに戻してすべてのカスタムスタイルを削除するには、 「段落」 オプション。

 

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