Diviプラグインのハイライト–ACショートコード

公開: 2017-06-09

別のDiviモジュール内にDiviモジュール、または完全なレイアウトを配置する必要があったことはありますか？テキストエディタを使用して、マップ、フォーム、カウンター、宣伝文、紹介文、またはその他のモジュールを他のモジュール内に配置する設計の可能性を想像してみてください。これらのモジュールをサイドバー内に配置できるとしたらどうでしょうか。 ACショートコードと呼ばれるサードパーティのプラグインはまさにそれを行います。

AC Shortcodesは、Diviモジュールをショートコードに変換して別のモジュール内に配置できるようにするAyanizeのサードパーティプラグインです。単一のモジュールまたはレイアウトでショートコードを作成し、そのショートコードをモジュールのテキストエディタ内に貼り付けます。 Divi、Extra、およびDiviBuilderプラグインを使用する任意のテーマで動作します。

このプラグインの概要では、ACショートコードを試してみて、それを使用して実行できるいくつかのことを確認し、使いやすさを確認します。サンプルページの画像はUnsplash.comから取得したものです。

ACショートコードプラグインのインストール

通常どおりプラグインをアップロードしてアクティブ化します。プラグインがアクティブになると、パーマリンクを再保存するためのメッセージが表示されます。これにより、プラグインが正しく機能するようになります。メッセージ内の[パーマリンクの更新]をクリックします。これにより、パーマリンクの設定に移動します。ページの下部にある[変更を保存]をクリックし、メッセージ内で[完了]をクリックします。メッセージが消え、ACショートコードを使用できるようになります。

ショートコードの作成

新しいメニュー項目がダッシュボードのDiviメニューに追加されます（[ダッシュボード]、[Divi]、[ACショートコード]に移動します）。これをクリックすると、ショートコードを作成できるACショートコードメニューが開きます。作成したショートコードはすべて、ここのリストに表示されます。新しいショートコードを作成するには、[ショートコードの作成]をクリックします。

これにより、DiviBuilderを使用してビルドすることを選択できるエディターに移動します。ショートコードは右側にあります。これをコピーして、別のモジュールのコンテンツに貼り付けることができます。 Divi Builderを使用してレイアウトを作成し、[作成]をクリックして保存するだけです。

ショートコードを作成すると、ダッシュボードメニューのリストに表示されます。ここでは、コンテンツに貼り付けるためのショートコードを編集、削除、およびコピーできます。ショートコードは、Divi Builderモジュール内、標準のWordPressエディター内（DiviまたはExtraを使用する場合）、またはテキストウィジェット内（DiviまたはExtraが必要）で使用できます。

ACショートコードの例

私の例では、全幅のヘッダーを持つ標準のDiviブログページを作成しました。セクションのグラデーションの背景を作成しました。

全幅ヘッダー

これはサンプルページです。通常はヘッダー領域内に配置できないモジュールを使用して、標準ヘッダーを新しいヘッダーに置き換えたいと思います。

これがschortcodeのレイアウトです。これには、マップ、ギャラリー、およびCall to Actionモジュールと、全幅セクションの全幅メニューが含まれます。ページ自体のスタイルが表示されるように背景を透明にし、全幅メニューモジュールに背景のスタイルの上に表示するグラデーションの背景を指定しました。

ページ自体には、ショートコードを配置したテキストモジュールとブログモジュールが含まれています。これらのセクションは、背景のスタイルを提供します。

新しいヘッダーを見てみましょう。このヘッダーでできることの可能性を想像するのは簡単です。

タブ

Tabsモジュールは、ショートコードがどのように機能するかを確認するのに最も簡単なモジュールの1つです。通常、Tabsモジュールを使用すると、エディター内に配置できるタブに任意のタイプのコンテンツを配置できます。これには、画像、ビデオなどのテキストとメディアが含まれます。マップ、連絡フォーム、CTA、またはその他のDiviモジュールを配置する場合はどうなりますか？やってみましょう！

モジュールのショートコードをいくつか作成し、それぞれを別々のタブに貼り付けました。一部のモジュールには、独自の背景スタイルが含まれています。

モジュールは、私がモジュール用に作成したものと同じデザイン機能で表示されます。この例では、セクションにグラデーションの背景を使用しました。

このタブはお問い合わせフォームを使用します。特別なスタイリングはしていません。

このタブにはブログ投稿が表示されます。ページにはグラデーションの背景を使用しましたが、ブログ投稿のショートコードには使用していません。各タブは個別に作成されるため、独自の背景色と個別のスタイルがあります。

ショートコードとして表示する完全なレイアウトを作成することもできます。

このレイアウトでは、画像、ブログ、ポートフォリオ、お問い合わせフォームを含む専門セクションを使用しています。 [レイアウト]タブに配置しました。

タブ内のショップモジュールを見てみましょう。タブ内でモジュールを使用すると、情報、フォーム、CTAなどを表示するためのいくつかの機会が開かれます。

サイドバーとウィジェット

テキストウィジェット内にショートコードを貼り付けることで、サイドバーでショートコードを使用することもできます。

ここでは、地図が左側のサイドバーに表示されています。あなたはそれがまだその背景のスタイリングを持っているのを見ることができます。これは簡単に変更できます。

ショートコードを更新するには、ACショートコードリストからショートコードをロードして変更を加えるだけです。変更は、そのショートコードが使用されるすべての場所に反映されます。この例では、マップショートコードのセクションに追加した背景を削除しました。背景を透明に設定しました。マップが背景なしで表示されるようになりました。

ここでは、サイドバーにモジュールを備えたウィジェットをさらにいくつか追加しました。

WooCommerce製品ページ

ACショートコードの私のお気に入りの用途の1つは、WooCommerce製品ページ内にそれらを配置することです。

製品の説明領域に2つのスライドがあるスライダーのショートコードを配置しました。各スライドは独自の設定を使用します。

この例では、製品の簡単な説明内にテキストモジュールとギャラリーモジュールを含むレイアウトを配置しました。そして、ええ、私は再び背景のグラデーションで遊んでいます。

ExtraでのACショートコードの使用

Extraのタブモジュールを見てみましょう。マップと連絡先フォームモジュールを表示するために、いくつかのテキストウィジェットでショートコード付きのサイドバーを使用しています。すべてが期待どおりに機能しました。

DiviBuilderプラグインでのACショートコードの使用

これは、TwentySeventeenテーマのDiviBuilderプラグインを使用したマップモジュールです。これは実際には、マップショートコードを含むタブショートコードです。ショートコード内のショートコード。どうすれば抵抗できますか？

サイドバーのショートコードは、DiviまたはExtraテーマを使用している場合にのみ機能します。 DiviまたはExtraを使用しない限り、ショートコードもDiviBuilderモジュール内に配置する必要があります。 Divi Builderプラグインを使用すると、ダッシュボードの[外観]の下に[ACショートコード]メニューが表示されます。

ドキュメンテーション

ドキュメントは、ACショートコードメニュー内にあります。画面の右上隅に、ヘルプという単語が表示されます。これをクリックしてヘルプ画面を開きます。これにより、左側に4つのタブが表示されます。

概要
ドキュメンテーション
互換性
テンプレートの使用法

右側には、ビデオとブログ投稿を表示するためのリンクがあります。

ライセンス

ACショートコードには無制限のライセンスが含まれています。あなたはあなたとあなたのクライアントのためにあなたが望むだけ多くのウェブサイトにそれをインストールすることができます。これには、ライフの更新と6か月のサポートが含まれます。

購入するには–このサードパーティのプラグインは、多くのDiviマーケットプレイスおよびサプライヤのWebサイトで入手できます：Ayanize

最終的な考え

Diviモジュールを他のモジュールやサイドバー内のショートコードとして使用できることで、デザインの可能性の新しい世界が開かれます。このプラグインのハイライトで作成した例は、表面を傷つけているだけです。プラグイン自体は使いやすく、DiviBuilderのスキルとショートコードをコピーして貼り付ける機能のみが必要です。 Diviモジュールの有用性を拡張することに興味がある場合は、ACショートコードを一見の価値があります。

ご連絡をお待ちしております！ ACショートコードを試しましたか？ コメントであなたの経験について教えてください。

Photoroyalty /shutterstock.com経由の注目の画像