スタッカブル：ブロックのロックを解除するプラグイン

80年代を覚えていますか？ ニューウェーブの到来、ボラのヘアカットの出現、シンディローパー、マイケルジャクソン、マドンナ、プリンス、ホイットニーヒューストン、デュランデュランなどの成功。 80年代には、それはビデオゲームの爆発的増加でもあり、私たちが親指のスナップに近づいていた多くのゲーム、テトリスのリリースでもあります。

このゲームは、その単純な原理で、利用可能なスペースを最適化しながら、さまざまな形状のブロックを積み重ねることで構成されていました。

ジャーナリストのビル・カンケル（別名ゲームドクター）が言ったように、この概念は1行にまとめることができます。

WordPressのような多くのプログラムに適用できるステートメント。

WordPressと言えば、テトリスと言えば、今日分析するプラグインはStackableと呼ばれているからです。 そして、正当な理由で、このプラグインは、WordPressサイトにネストされる新しいGutenbergブロックを追加します。

この新しいテストの準備はできましたか？ あなたの目印で、準備をしなさい、行きなさい！

もともと2021年7月に書かれたこの記事は、2021年11月にStackableの無料およびプレミアム3.0.5バージョンで更新されました。

あなたの最高のWordPressプロジェクトには最高のホストが必要です！

WPMarmiteはBluehostを推奨しています：優れたパフォーマンス、優れたサポート。 素晴らしいスタートを切るために必要なものはすべてあります。

Bluehostを試してください

スタッカブルとは何ですか？

「次世代のWebデザインを強化する」。 これは公式ウェブサイトでのStackableの使命であり、プラグインはそれ自体を「グーテンベルクの新しいページ構築エクスペリエンス」と定義しています。 劣らず！

WordPressディレクトリでは、ブロックプラグインに40,000以上のアクティブなインストールがあり、5つ星のうち4.9の素晴らしい評価があり、一連の絶賛されたレビューが付いています。

すでに新しいグーテンベルクブロックを探している場合は、グーテンベルク、Qubely、Getwid、Coblocks用のUltimateAddonsなどのプラグインに出くわしたことがあるかもしれません。

グーテンベルクの力を高めるためのアドオンについての記事でそれらについて話しました。 彼らの使命は単純です。コンテンツエディタで利用できるグーテンベルクブロックの範囲を多様化することです。

Stackableは、グーテンベルク向けに設計されたプラグインでもあり、優れたクラシック（ヘッダー、ギャラリー、召喚状）からよりエキゾチックなもの（見積もり、価格表、タイマー、証言など）まで、無数のブロックをもたらします。
これらのブロックはすぐに使用でき、カスタマイズできます。

では、Stackableをインストールする意味は何だと思うかもしれません。 それらは他のブロックの中で単なるブロックです。 グーテンベルクは多くの便利なブロックを提供していますが、スタッカブルを使用すると、可能性が倍増します。

さらに、ブロック内の要素のレイアウトの調整、間隔、背景の変更、ホバー効果の追加など、グーテンベルクでネイティブに提供される機能よりも高度なカスタマイズ機能にアクセスできます。

Stackableには2つのバージョンがあります。

• 無料版はWordPressディレクトリで入手できます。

• 有料版はプラグインの公式ウェブサイトから入手でき、1つのサイトで49ドルから使用できます。

ご想像のとおり、2つ目はより多くのブロックへのアクセスを提供し、それらをより細かくカスタマイズできるようにします。

このテストでは、プレミアムバージョンに焦点を当てました。

積み重ね可能な設定

Stackableの構成を開始するには、プラグインをインストールしてアクティブ化します。 次に、[設定]> [積み重ね可能]に移動します。

そのインターフェースでは、次の設定にアクセスできます。

• Font Awesome icons Pro （プレミアム）：Font AwesomeProキットをStackableに統合します。
• エディター設定： Stackableのエディターの特定の機能を制御できます。 たとえば、デザインライブラリを無効にしたり、特定のブロックの幅を設定したり、使用していないエディタペインを閉じたり、同じ変更が行われるように列をリンクしたりできます。
• ロールマネージャー（プレミアム）：一部のユーザーロールにブロックエディターへのアクセスを許可またはブロックし、コンテンツの編集のみを許可します。 注：この管理は、Stackableに含まれているブロックだけでなく、すべてのブロックで機能します。
• カスタムフィールド（プレミアム）：この機能を使用すると、エディターからコンテンツに動的に追加できるカスタムフィールドを作成できます。 これを行うには、WordPress管理の[フィールド]セクションに移動し、[新規追加]をクリックして、フィールドタイプ（テキスト、数値、日付、時刻、またはURL）と名前を定義します。

次に、[フィールドの保存]をクリックし、フィールドの値を入力し、[変更を保存]をクリックして保存します。

コンテンツに統合するには、フィールドの値を表示する場所にカーソルを置き、データベースアイコン（動的フィールドに対応）をクリックします。

「動的ソース」として「サイト」を選択し、次に新しく作成したフィールド（「スタッカブルカスタムフィールド」の下に表示されます）を選択し、最後に「適用」をクリックします。 それでおしまい！

それはすべてうまくいっていますが、なぜ私たちはこれをすべてやったのですか？ 動的コンテンツの魔法のおかげで、更新するとすぐに、カスタムフィールドが統合されているサイトのすべての場所でメールアドレスが自動的に更新されます。

• レスポンシブブレークポイント：タブレットモードまたはモバイルモードでサイトが表示される画面幅を変更して、これらのデバイスに定義した設定を表示することができます。
• グローバル設定：サイトに配置されているテーマとの非互換性を克服するために、2つの機能を利用できます。 テーマのコンテンツ領域のセレクターに入り、 Stackableのフォントを強制的に使用して、テーマのフォントを引き継ぐことができます。

Elementorと同様に、Stackableにはグローバル設定があります。Elementorで作成されたページに適用される色とタイポグラフィです。 ただし、Stackableを使用すると、サイトを構成するすべてのブロックに対してこれらの設定を定義することができます。

• ブロックの有効化と無効化：一部のブロックが必要ない場合は、ブロックを無効にして、使用可能なブロックのリストに表示されないようにすることができます。
• 最適化設定（プレミアム）：サイト全体ではなく、Stackableブロックを含む投稿にのみJavaScriptファイルとCSSファイルをロードできます。 この機能の目的は、サイトのパフォーマンスを向上させることです。 この機能は、プラグインの最新のブロック（バージョン3以降）にすでに適用されているため、バージョン2のブロックにのみ適用されます。

Stackableの使い方は？

キットとブロック

StackableはWordPressエディターから直接使用されます。 これを行うには、ページまたは投稿を作成または開き、投稿の上部にある[デザインライブラリ]を選択します。

デザインライブラリには、 UIキットとカテゴリが含まれています。 それは何ですか？

実際、これら2つのセクションには同じ要素が含まれていますが、分類が異なります。 UIキットは、スタイルガイドで使用可能なブロックを収集し、カテゴリは、使用可能なすべてのスタイルガイドにあるヘッダー、紹介文、行動の呼びかけなど、ブロックのタイプごとにブロックをグループ化します。

カテゴリとUIキットは、適切なブロックを見つけるための2つの異なる方法です。

各ブロックには、すぐに使用できるカスタマイズ可能なデザインが付属しています。 次のパートでは、それらをカスタマイズする方法を説明します。

必要なブロックを見つけるために、自由に検索バーを使用することもできます。 ウィンドウの右上にある4つのアイコンを使用すると、検索結果を更新したり、サムネイルのサイズを変更したりして、さまざまなブロックをより正確または拡大して表示できます。

Stackableブロックを投稿に統合する方法

ブロックを追加する場合と同じように「+」アイコンをクリックするだけで、紫オレンジのグラデーションで装飾されているStackableプラグインブロックを簡単に認識できます。

「すべて参照」ボタンをクリックすると、自由に使用できるすべてのグーテンベルクブロックにアクセスできます。 Stackableブロックは、「Text」セクションと「Appearance」セクションにあり、すべて、デザインライブラリへのアクセスを提供する同名の「Stackable」セクションにグループ化されています。

これらのパスはすべて、ローマからスタッカブルブロックにつながりますが、これは主に、事前に構築されたデザインへのアクセスを提供するデザインライブラリパスです。

たとえば、この証言ブロックを見てください。このブロックには、最小限のフォーマット、フィラーテキストがあり、画像の例はありません。

また、デザインライブラリから追加された別の紹介文ブロック（ Prime Testimonial 2ブロック）を参照してください。

ぴったり合うものを見つけたら、目的のアイテムをクリックして、投稿に直接埋め込みます。 次に、他のグーテンベルクブロックと同様に、ページ上の要素を再配置してカスタマイズできます。

スタッカブルのカスタマイズ

スタッカブルブロックをカスタマイズするには、投稿の右側にある「ブロック」セクションに移動します。ここには、ブロック、スタイル、詳細の3つのカテゴリに分類された一連のオプションがあります。

選択できるものがたくさんあるため、興味のあるものを見つけるのは面倒ですが、変更するブロック要素をダブルクリックするだけで見つけることもできます。 その後、ワンクリックでそのブロックの設定に移動します。

さまざまなカスタマイズオプションは、次の3つのタブにグループ化されています。

• ブロック：これは、ブロックを構成するさまざまな要素のレイアウトをカスタマイズしたり、境界線や影を追加したり、テキストの背景、間隔、配置に作用したりできる場所です。

ブロックにカーソルを合わせ、要素の下部にあるハンドルを使用して、ブロック内の要素間の間隔を調整することもできます。 あなたはそれを隣人から隔てているピクセルの数さえ見ることができます。 非常に便利！

• スタイル：列を管理し、タイポグラフィ、色、ボタン、セパレーターを操作できます。 意外なことですが、ブロックにタイトルと説明を追加することもできます。
• 高度：ここでは、ブロックに関連付けられたHTMLタグやレスポンシブの管理（コンピューター、タブレット、またはモバイルでブロックを非表示にする可能性）などの高度な機能にアクセスできます。 ブロックの余白とコンテンツの配置を調整できますが、要素にアニメーションやトランジション効果を追加することもできます（ただし、簡単に行うことができます）。
  CSS愛好家にとってのアイシングは、ブロックの隣にあるこのインターフェイスでブロックのCSSを直接​​変更し、変更をリアルタイムでプレビューできることです。
  最後に、条件付き表示では、以前に定義した条件が満たされた場合にのみ要素を表示できます。

WPMarmiteサブスクライバーに参加する

最後のWPMarmite投稿（および排他的なリソース）を取得します。

今すぐ購読する

ブロックのデザインに完全に満足していない場合は、多くのパラメーターを変更して、好みに合わせて調整することができます。

たとえば、要素または親要素のホバーに効果を簡単に追加したり（この最後の機能を利用するために親ブロックに背景を適用したり）、ブロックの各要素の余白を簡単に変更できるのが好きでした。 。

さらに良い：モバイルとタブレットで異なるマージンを選択できます！ そのため、サイトのレスポンシブな側面を簡単に変更できます。 これを行うには、最初にデスクトップアイコン（コンピューター）をクリックして、他のデバイスのアイコンを表示します。

もう1つの優れたオプションは、Elementorのように、要素の上部または下部にセパレーターを追加することです。 もちろん、これらのセパレーターの外観を調整したり、プレミアムバージョンで1つまたは2つの軽いレイヤーを追加したりすることもできます。

これは、この食欲をそそるハンバーガーの下部にあるように見えます：

名前にカーソルを合わせると、一部の設定が紫色に変わり、カーソルが疑問符に変わります。 それらが何であるかわからない場合は、クリックして、それらが何のためにあるのかを理解するのに役立つアニメーションを表示してください。 これらすべてのオプションを回避する方法を見つけるのに非常に役立ちます。

テーマとプラグインへのどのような適応？

テーマへの適応

公式ドキュメントによると、サイトにあるテーマがグーテンベルク用に最適化されている限り、「Stackableはどのテーマでも機能するはずです」。

テーマについては、この投稿の冒頭で触れました。GutenbergエディターとStackableプラグインで動作するように設計された社内テーマがあります。 これは無料で、公式のWordPressディレクトリで入手できます。 つまり、互換性が保証されます。

同じ名前のプラグインの色なので、キャンディピンクを気にしないでください。

Stackableテーマをダウンロードします。

プラグインへの適応

Stackableのドキュメントは、 elementorページビルダー（affリンク）との互換性を保証します。 ただし、ページビルダーエディタでStackableブロックを使用することはできませんので注意してください。

これは実際にはGutenbergブロックの場合と同じ方法であり、Elementorエディターでは使用できません。選択する必要があります。つまり、ElementorまたはWordPressエディターを使用してページを作成します。

Stackableの公式ウェブサイトでも、そのブロックはどのプラグインとも互換性があると主張しているため、他のブロックライブラリで問題なく使用できます。

Elementorでウェブサイトを構築する

有名なページビルダーを使用して、WordPressWebサイトのルックアンドフィールを簡単に設計できます。 Elementorをお試しください

Elementorをお試しください

ドキュメントとサポート

Stackableの使用中に問題が発生した場合は、いつでも公式ドキュメントを参照できます。

あなたはそこにあります：

• プラグインの使用を開始するための専用セクション。
• トラブルシューティングセクション。
• 価格とライセンスの詳細。
• ターゲットを絞ったガイド。
• FAQ。
• およびその他のリソース。

このドキュメントは、 [設定]> [スタッカブル]の[ドキュメント]タブにもあります。

技術的な不具合が発生した場合、プラグインを担当するチームが、頻繁に発生する問題のリストと、それらを修正するための解決策をユーザーに提供します。

それでも問題が解決しない場合は、Stackableのサポートに電話するか、Facebookグループに参加して質問への回答を得ることができます。

サポートに関しては、Stackableチームは、 [設定]> [Stackable ]の[お問い合わせ]タブにあるお問い合わせフォーム、または電子メールアドレス[email protected]からリクエストを送信する場合に役立ちます。

お金の価値は何ですか？

プレミアムバージョンは、提供されるさまざまなブロックで当然より寛大です。 カスタマイズオプションも多数あります。

たとえば、 Featureブロックの場合、無料バージョンには2つのレイアウトオプション（BasicとPlain ）がありますが、Premiumバージョンには13あります。

プレミアムバージョンでは、 Font AwesomeProやRoleManagerとの統合や、CSSのブロックを変更する可能性など、Stackableの使用に応じて、多かれ少なかれ興味深いパラメーターもあります。

この最後の機能を使用するには、[詳細設定]セクションに移動し、次に[カスタムCSS]に移動します。 便利：変更はリアルタイムで表示されます。

プレミアムバージョンでは、 1年間のサポートとアップデートも利用できます。

Stackableまたはページビルダーを使用する：それが問題です

以上で、Stackableの機能と設定について説明しました。 これで、ブロックプラグインが何を格納しているかをより明確に把握できます。

あなたがページビルダーのファンであるか、すでにそれらを詳しく調べているなら、あなたは疑問に思うかもしれません：なぜページビルダーの代わりにStackableを使うのですか？

たとえば、Stackableと無料バージョンのElementorが提供するオプションは同等であるためです。 そして、正当な理由で、 Stackableは、公式Webサイトで主張されているように、ページビルダーを使用したデザインエクスペリエンスにアプローチしています。

また、サイトのインターフェースのすべての要素（投稿のコンテンツだけでなく）に作用できるフルサイト編集の登場により、Stackableはさらに近づく可能性があります。 とはいえ、 Stackableには、WordPressコンテンツエディターで直接使用できるという利点があります。これにより、現在のページビルダーと比較してデザインエクスペリエンスが簡素化されます。

一方、Elementorのプロバージョンは、はるかに高度なウィジェットと機能を提供します。 どちらのプラグインも単一サイトでの使用には同じ費用（49ドル）であるため、代わりに巨大なページビルダーに目を向けることをお勧めします。

Stackableに関する私たちの最終的な意見

全体として、Stackableは、モダンで審美的なデザインを提供するかなり直感的なプラグインであると言えます。

Stackableは、コード行に触れることなく、より高度なブロックを使用してサイトのデザインをカスタマイズしたいサイト作成者向けです（ただし、CSSをマスターしている場合は、ブロックを好みに合わせて配置することができます）。

ただし、それを使用する必要がありますか、それともElementorなどのより高度なページビルダーに直接アクセスする必要がありますか？

実際、Stackableを使用すると、WordPressエディターで直接ページビルダーのデザインエクスペリエンスにアプローチできます。 これが、真の「サイトビルダー」になるというプロジェクトグーテンベルクの最終目標の始まりと言えます。

しかし、私たちはまだそこにいません。 今のところ、 Stackableは、テンプレート管理なしで、無料バージョンのElementorと同じ方法で投稿を作成するのに役立ちます（Stackableを使用すると、事前に作成されたデザインをロードできますが、独自のデザインを保存することはできません）。

WordPressエディターでの作業が好きで、Stackableが提供するブロックでプロジェクトに十分な場合は、それを試してみてください。 Elementorを使用する必要はありません。

ただし、より高度な機能が必要な場合、またはサイトを最初から設計する必要がある場合（つまり、すべてのページテンプレートをカスタマイズする必要がある場合）、Elementor（aff link）またはその競合他社の1つが不可欠です。

そして、あなたがすでにElementorに誘惑されているユーザーの一人なら、Stackableは大ヒットではないかもしれません。 結局のところ、あなたはあなた自身の習慣を持っているので、それらを変える本当の理由はありません。

StackableのProバージョンに興味がある場合は、ブロックとオプションがお好みに合っていることを確認するために、利用可能なデモを表示して無料バージョンを参照することを躊躇しないでください。

Stackableプラグインをダウンロードします。

そして、あなたはすでにそれを使用しましたか？ この記事はあなたがそれを使いたくなりましたか？ コメントであなたの考えを共有してください。