ブログ

From the word itself, the word shortcode means exactly that: A short code; a shortcut code.

ショートコードを使用すると、開発者が通常行うような大量のコードを追加することなく、Webサイトに要素（ウィジェットなど）を追加できます。

たとえば、通常のコードの長さは、おそらく次のようになります。

<html>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam id aliquam turpis. Vivamus quis arcu tincidunt, finibus urna eget, placerat risus.

Aliquam arcu massa, finibus et lacinia sed, scelerisque nec augue. Quisque eu viverra sapien, vel consequat lorem. Integer vel erat tortor.

Phasellus condimentum magna eget congue venenatis. Suspendisse blandit vehicula consectetur.

Nullam sodales eleifend massa, in bibendum purus fermentum id.

Morbi et turpis feugiat, malesuada ipsum sit amet, interdum nulla. In non ante nec nisl mattis gravida sit amet id lectus.

</html>​

この例では、上記のコードを使用すると、Lorem Ipsumのプレースホルダーテキストの段落全体を追加できると仮定しましょう。

Now, a shortcode with the same exact function as the code above will look something like this, in contrast:

[lorem ipsum dolor estat]Lorem Ipsum[/lorem]​

You can see how they’re miles different from each other in terms of length.

ここで、元の長いコードと、「lorem」という単語だけを含むショートコードの両方が、まったく同じ動作（Lorem Ipsumテキストの追加）をすると想像してみてください。

This is what shortcodes do. They make adding widgets, functions, and a bunch of other cool stuff easier for both ordinary WordPress users and developers alike.

Where can I find shortcodes?

お気に入りのプラグインやウィジェットがある場合、使用できるショートコードが用意されている可能性があります。

Shortcodes Ultimate, for example, will let you choose from hundreds of shortcodes that you can use on Page Builder Sandwich (or anywhere, actually) by simply grabbing the shortcode of your choice from Shortcode Ultimate’s repository or documentation page.

Adding Custom Shortcodes on PBS

Page Builder Sandwichでは、コンテンツエリアに入力またはコピー＆ペーストするだけで、ショートコードをページに直接追加できます。

以下では、Shortcodes Ultimateのショートコードを使用して、Page Builder Sandwichのデモページにコンテンツボックスを追加しました。

Another thing you’ll find handy when using Page Builder Sandwich is our Shortcode Mapping feature.

ショートコードマッピングに関する以前の記事によると、定義は次のとおりです。

Shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

これは、それぞれのドキュメントやリポジトリでショートコードを手動で探す必要がなくなったことを意味します。

WordPressサイトにショートコードを含むプラグインがインストールされている限り、Page Builder Sandwichで簡単に利用できます。

So for example, if I wanted to add a WooCommerce shortcode on my page, all I have to do is make sure that it’s installed on my WordPress site, like so:

And then, to actually add the shortcode, I’ll just go to my page, and drag and drop the Shortcode Element:

Because we already have WooCommerce installed on our WordPress site, you can see that all of the shortcodes that are available on the WooCommerce plugin are already available on Page Builder Sandwich. This is what Shortcode Mapping is.

You can also see on the upper left corner that the ACF (Advanced Custom Fields) and MailChimp shortcodes are available– because we have those instlled on our WordPress site, too.

そのため、カスタムショートコードや自作のショートコードを追加したい場合でも、WordPressサイトにインストールされていれば追加可能です。

Here are some other helpful plugins that you can use to create your own custom shortcodes:

世の中には数多くのページビルダーが存在しており、きっと疑問に思っていることでしょう。Page Builder Sandwichの何がそんなに特別なのか？ すでに手元にページビルダーがあるなら、なぜわざわざそれを使う必要があるのか？

この記事では、コンテンツクリエイターとデザイナーの双方にとって必須のアイテムとなる、Page Builder Sandwichのユニークな主要機能をいくつか列挙してご紹介します。ページビルダーとは何か、なぜそれが必要なのかがわからない場合でもご安心ください。参考になる情報をご用意しています。

1. コンテンツの視覚的な表現を見るだけでなく、実際のコンテンツを直接見て編集できる

他のページビルダーでは、コンテンツを表現しただけの領域が表示されます。主にブロックや長方形のシェイプでコンテンツをレイアウトするため、最終的にページ上でコンテンツがどのように見えるかを示すフレームワークに近い仕上がりになります。その結果、どのように表示されるかを確認するためだけに、プレビューボタンを何度もクリックすることになります。

Page Builder Sandwichなら、すべての編集がサイトのフロントエンド上で行われ、コンテンツを直接編集できるため、真の「見たままを編集（WYSIWYG）」する体験が得られます。

2. わずらわしいポップアップダイアログなしで、素早く簡単に直接編集

ポップアップはページビルダーの定番でした。多くのビルダーでは、見出しであれ、ボタンのラベルであれ、短いキャッチコピーであれ、レイアウト内の何かを編集したいときは、まずポップアップダイアログが開くのを待ち、その中で変更を加える必要がありました。

私たちは、Page Builder Sandwich全体でポップアップの使用を最小限に抑えることを目標としました。ポップアップを排除することで、あらゆるコンテンツの編集がかつてないほど簡単かつスムーズに行えます。

編集は非常にシンプルです。テキストをクリックしてカーソルを置き、そのまま入力を始めるだけです。編集を開始するためにTinyMCEエディターを含むポップアップダイアログを待つ必要はもうありません。さらに素晴らしいことに、コンテンツをドラッグ＆ドロップして自由に移動することも可能です。

ストレスフリーな編集を支援するもう1つの革新的な機能が、常に表示されているインスペクターです。インスペクターは、ツールボックス兼プロパティエディターとして機能します。テキストの色、見出し、フォントサイズの調整、マージン、パディング、枠線、引用文など、コンテンツをフォーマットするためのツールがクリック1つですぐに利用できます。

3. 再利用されたWordPressの機能

他のページビルダーで気づいたもう1つの点は、車輪の再発明を頻繁に行っているということです。独自のカラーピッカー、画像アップローダー、ギャラリー作成機能、その他のさまざまなツールを独自に実装しているものもあります。これ自体が悪いわけではありませんが、WordPressはコードスニペットの宝庫なのですから、それを使わない手はありません。

WordPressは巨大で素晴らしいプラットフォームであり、数多くの優れた貢献者によって構築されたクールなツールが豊富に含まれています。Page Builder Sandwichは、可能な限りWordPressにすでに同梱されている機能を使用しています。

独自のカラーピッカーを使用する代わりにIrisカラーピッカーを使用し、独自の画像アップローダーの代わりにメディアマネージャーを使用しています。さらに、backbonejs、underscorejs、wp.hooks、wp.shortcodeなど、便利なスクリプトも多数活用しています。これらすべてを活用することで、開発が容易になっただけでなく、より安定したコードベースを実現しています。

WordPressの機能を再利用することは、素晴らしい副産物も生み出しました。例えば、画像の挿入にメディアマネージャーを使用したことで、WordPressのギャラリー、ビデオやオーディオのプレイリスト、リモートURLなどを最初からそのまま扱えるという嬉しいサプライズがありました。また、画像の編集にもメディアマネージャーをそのまま使用できるため、何時間にも及ぶ不要な開発の悩みが解消されました。

4. キーボードナビゲーションとショートカット

他のページビルダーでは、マウスが頼りです。マウスを使ってドラッグ＆ドロップしたり、ダブルクリックして編集したりします。しかし、キーボードは軽視されがちです。

例えば一部のビルダーでは、ポップアップダイアログを閉じて別のダイアログをクリックして開く必要があるため、編集中の場所から1つ上にある段落やセクションのテキストを簡単に編集することができません。Page Builder Sandwichでは、キーボードでナビゲーションが可能です。矢印キーを押してコンテンツ間を移動でき、別の行や列の中に隠れているコンテンツであっても機能します。

もう1つの重要な機能は、「元に戻す（Undo）」と「やり直し（Redo）」のキーボードショートカットです。最初はたいしたことではないように思えるかもしれませんが、コンテンツを誤って違う場所にドラッグ＆ドロップしてしまった場合のことを考えてみてください。一部のページビルダーでは、元の位置までドラッグして戻す必要があります。Page Builder Sandwichでは、UndoとRedoの両方が機能します。入力したテキストを書き直したい場合でも、ドラッグしたコンテンツ（または複数のドラッグしたコンテンツ）を元に戻したい場合でも、UndoまたはRedoを押すだけです。ドラッグ＆ドロップしたコンテンツだけでなく、フォントサイズや行のパディングなどのプロパティの変更に対しても機能します。これにより、編集作業における強力なツールとなります。

5. 真のフロントエンドページビルダー – よりリラックスしてストレスのない編集体験

開発における私たちの理念は、フロントエンドでの編集が、バックエンドのツールを使って編集しているような感覚であってはならないということです。ビルダーが最初はバックエンド向けに作られ、後からフロントエンドに移植されたかのような印象を与えるべきではありません。

総じて、私にとってPage Builder Sandwichの最大の特徴は、「真の」フロントエンドページビルダー、つまりフロントエンド編集のあるべき姿を再考した存在を目指して構築したという点にあります。

この記事では、Page Builder Sandwichの仕組みについて簡単に説明します。当社のページビルダーがWordPressのさまざまな機能とどのように連携するかに関心をお持ちの方への入門ガイドとなることを目的としています。Page Builder Sandwichの個々の機能についてはここでは深く触れませんが、それらをご覧になりたい場合は、短い画面録画で各機能を個別に紹介している動画ページをご確認ください。

Page Builder Sandwichが他のページビルダーとどのように違うのかを知りたい方は、記事「How Page Builder Sandwich Is Different from the Rest.

どこにあるのか？何が編集できるのか？

他の多くのページビルダーとは異なり、Page Builder Sandwichはウェブサイトのフロントエンドで動作します。管理画面（バックエンド）にいる場合でも、コンテンツエディターのボタンの横に「Frontend」ボタンを用意しており、ページのフロントエンドに移動できます。

Page Builder Sandwichを使用すると、投稿、固定ページ、カスタム投稿タイプのコンテンツを編集できます。ただし、フロントページのブログ投稿一覧や、サイト内のその他の単一ページ以外のエリアを直接編集することはできません。このように考えてみてください。編集したい対象が管理画面にコンテンツエディター（「新規投稿」や「新規固定ページ」など）を持っているものであれば、Page Builder Sandwichを使用できます。個々の固定ページやブログ投稿を編集できるほか、たとえばレストランのメニューやポートフォリオ項目を導入するプラグインを使用している場合、それらも編集できます。

フロントエンドにいる間は、管理バーに青い「Edit with Page Builder Sandwich」ボタンが表示されます。それをクリックするだけで、ページの編集を開始できます。

直接的なコンテンツ編集

Page Builder Sandwichでは、コンテンツの編集を可能な限り簡単でストレスのないものにしました。コンテンツの編集は分かりやすく簡単で、クリックして入力するだけです。それほどシンプルです。

インスペクターのご紹介

多くのページビルダーにはポップアップが多すぎると私たちは気づきました。個人的には、ポップアップは気が散るだけでなく、「おい、まずこれらの項目を入力するまで今やっている作業を中断しろ」と言われているようなものなので好きではありません。本来スムーズであるはずの編集体験の流れを壊してしまうのです。そのため、私たちはポップアップの使用を全面的に最小限に抑え、代わりにインスペクターを作成しました。

インスペクターは、必要となるすべての書式設定やレイアウトのツールが含まれたサイドバー形式のエリアです。インスペクターは画面の左側または右側にドッキングできるため、編集中の内容を簡単に確認できます。

インスペクターからは、見出し、フォントサイズ、太字、斜体、テキストの色など、さまざまなテキストプロパティを調整できます。それらに加えて、画像の追加や行・カラム構成のコンテンツの作成も可能です。また、行を全幅に調整したり、行やカラムの背景色、コンテンツの垂直配置、マージンや背景の設定など、より高度な編集も行えます。非常に強力で、作業の大部分で活用することになるでしょう。

WordPressテーマとの連携

Page Builder Sandwich自体には、本質的にスタイルがほとんど含まれていません。コンテンツを編集する際、表示されるスタイルは基本的にテーマに基づいています。

ショートコードとの連携

ショートコードはWordPressにおいて重要な要素であり、おそらくサイト内でいくつかのショートコードを使用することになるでしょう。Page Builder Sandwichはこれらを非常にうまく処理し、ショートコードがフロントエンドでレンダリングされた状態で表示されます。ショートコードは編集可能なままであり、さらに素晴らしいことに、ショートコードを編集した後は、変更内容が反映された状態で再びレンダリングされます。

利便性を考慮し、インスペクターを使用してショートコードを編集できます。さらに細かく制御したい場合は、ショートコードをダブルクリックしてそのままの形式で編集することも可能です。これに加えて、ウェブサイトで利用可能なすべてのショートコードがインスペクター内に一覧表示されるため、コンテンツへの組み込みも簡単です。

ウェブサイトの肥大化については？

表示の遅いウェブサイトが好きな人などいるでしょうか？私たちも嫌ですし、あなたも絶対に嫌なはずです。Page Builder Sandwichがウェブサイトのパフォーマンスに及ぼす影響をほぼゼロに抑えるよう配慮しました。ログアウト時には、最低限として行とカラムのCSSスタイルのみがキューに追加され、使用したショートコードに必要なJSおよびCSSスクリプトのみが読み込まれます。

開発者向け

あなたが開発者で、WordPressプラグイン内にショートコードがある場合、Page Builder SandwichはショートコードAPIを提供しているため、ユーザーがショートコードを簡単に作成および変更できるフィールドを容易に提供できます。

さらに機能を拡張したい場合や、Page Builder Sandwichの一部と連携させたい場合は、利用可能な便利なアクションフックやフィルターフックも多数用意されています。