完全ガイド：WordPressでショートコードを追加する方法

ショートコードはWordPress固有のコードであり、わずかな労力で気の利いたことを実行できます。 ショートコードを使用すると、ファイルを埋め込んだり、通常は複雑なコード行を大量に必要とするオブジェクトを作成したりできます。 簡単に言うと、ショートコードは関数へのショートカットです。

言い換えると、ショートコードは、より大きく、多くの場合複雑なコードの要約形式です。 これにより、ページのコンテンツセクションにスクリプトを挿入できます。このスクリプトは、後でWordPressによって実行されます。

ショートコードはWordPress2.5で導入され、それ以来、複雑なタスクをはるかに簡単な方法で実行するのに大きく貢献してきました。 ショートコードを使用すると、時間を節約でき、技術的な知識とコーディングが大量に必要になるような簡単な方法で作業を行うことができます。

ショートコードの利点

• 効率の向上と時間の節約–ショートコードは冗長性を防ぎます。 コードを一度記述し、その機能が必要なときはいつでもショートコードを再利用することで、ユーザーが特定の機能を実装するのに役立ちます。
• 選択的なカスタムマークアップ–テーマに応じて、WordPressサイトには特定のレイアウトとデザインがあります。 ただし、ページ内の投稿、ページ、またはセクションの一部を一般的なスタイルテンプレートとは異なるものにしたい場合は、Shortcodesを使用するとこのタスクを簡単に実行できます。
• 到達不能なコンテンツ領域へのアクセス–ヘッダーへのテキストウィジェットの挿入やサイドバーへのカスタムコンテンツの追加などの特定のタスクは簡単ではありません。 しかし、ショートコードを使用すると、このようなタスクを非常に簡単かつ柔軟に実行できます。
• より優れた独自のレイアウトの作成を支援–すべてのWordPressサイトは、ヘッダー、フッター、サイドバー、およびメインコンテンツセクションで構成される標準レイアウトに基づいて構築されています。 ショートコードを使用すると、標準のレイアウトから逸脱して、独自の要素またはコンポーネントで構成される、サイト用の異なるレイアウトを作成できます。

WordPressでショートコードを使用する方法

ショートコードを使用するには、WordPressページまたは投稿にショートコードを挿入するだけです。

ショートコードは次のようになります– [ショートコード名]、

そのようなショートコードがすでに定義されていると仮定すると、Webサイトで使用すると、サイト内の任意の場所に作成者の最新の投稿のリストが表示されます。

これは、架空のショートコードオブジェクト「shortcode_ex」を使用したショートコード構文の別の例です。

[shortcode_ex]ここにコンテンツが表示されます[/shortcode_ex]

WordPressには、デフォルトで次のショートコードが付属しています。

ビデオショートコード

• [dailymotion]はDailyMotionビデオを埋め込みます。
• [hulu]はHuluビデオを埋め込みます。
• [ted]TEDTalksビデオを埋め込みます。
• [vimeo]はVimeoビデオを埋め込みます
• [youtube]はYouTubeビデオを埋め込みます。

オーディオ

• [audio]はアップロードされたオーディオファイルをオーディオプレーヤーとして表示します
• [spotify]はSpotifyの音楽を埋め込みます。

画像とドキュメント

• 投稿またはページに画像ギャラリーを挿入します。
• [instagram]はInstagramからの画像を埋め込みます。
• [slideshare]はSlideshare.netからのスライドショーを埋め込みます。
• [スライドショー]は、アップロードされた写真のスライドショーを埋め込みます。
• [googleapps]はGoogleドキュメントからのドキュメントを埋め込みます。

その他

ブログアーカイブインデックス、お問い合わせフォーム、投票などを追加するための便利なショートコード。

• [blog_subscription_form]は、購読フォームを埋め込んで、人々が電子メールの更新にサインアップできるようにします

今日の投稿では、ShortcodesUltimatePluginを使用してWordPressサイトにショートコードを簡単に追加する方法について説明します。 それでは始めましょう。

ショートコードUltimateプラグイン

ショートコードプラグインを使用すると、コーディングせずに簡単かつ柔軟にショートコードを作成できます。 これには、ページ/投稿にコピーして貼り付けることができる事前定義されたショートコードのセットが含まれています。 市場にはたくさんのショートコードプラグインがあります。 この記事では、VladimirAnokhinによるShortcodesUltimateプラグインに焦点を当てます。

Shortcodes Ultimateは、タブ、ボタン、ボックス、レスポンシブビデオなどを作成するために使用できる人気のあるWordPressプラグインです。 カスタムショートコードを作成するためのショートコードジェネレーターに加えて、50以上の素晴らしいショートコードが付属しています。

プラグインを使用するには、プラグインをインストールして、ページ/投稿の[ショートコード]ボタンをクリックするだけです。 プレミアムアドオンと統合して、機能をさらに強化できます。

このプラグインはWordPressコミュニティで非常に人気があり、700,000以上のアクティブなインストールと、ほぼ4000の5つ星評価があるという事実から明らかです。

ShortcodesUltimateプラグインの主な機能

• 50以上のプロ並みのショートコード
• 完全にレスポンシブ
• テキスト、ディスプレイボックス、画像、Googleマップなどを強調表示します。
• カスタムCSSエディター
• ライブプレビュー付きのワンクリックショートコード挿入
• RTLサポートおよび多言語ソースとの連携
• 強力なAPI

ShortcodesUltimateのインストール

プラグインのインストールは簡単で、以下に説明するいくつかの手順が含まれます。

• WordPress管理ダッシュボードにログインします。
• 左側のサイドバーメニューの[プラグイン]オプションをクリックします
• プラグインから[新規追加]ボタンをクリックします
• 新しいウィンドウが表示されたら、ウィンドウの左上隅にある検索メニューに「 Shortcodes Ultimate 」と入力して、Enterキーを押します。
• プラグインのリストが表示されます。 ここから、プラグインを選択し、[今すぐインストール]ボタンをクリックします。

インストールが完了したら、[アクティブ化]をクリックします

アクティベーション後、プラグインページにリダイレクトされ、そこで他のプラグインと一緒にShortcodesUltimateプラグインを見つけることができます。 これで、プラグインを使用してWordPressサイトでショートコードを作成する準備が整いました。

究極のショートコードを探る

Shortcodes Ultimateをインストールすると、ダッシュボードにShortcodesメニューが表示されます。 [ショートコード]メニューをクリックしてから、[サンプルメニュー]をクリックします。 これにより、例ページが表示されます。 このページには、使用できる最も一般的に使用されるショートコードのコンパイル済みリストがあります。

アコーディオン、スポイラー、スタイル、アンカー–これにより、アコーディオンやアンカーなどを追加できます。 アコーディオンは、クリックするとコンテンツが表示されるように展開される「+」記号の後ろにコンテンツを非表示にする場合に使用されます。 利用可能ないくつかの異なるスタイルと、前面に追加できるアイコンもあります。

タブとタブアンカー

これにより、いくつかのスタイルオプションを使用して、ページにさまざまなタブを追加できます。

カラムレイアウト

このショートコードを使用して、ページのコンテンツをいくつかの列に分割できます。

メディア要素

このショートコードを使用して、YouTube、Vimeoビデオファイルなどのメディアファイルを投稿/ページに追加します。

アニメーション

このショートコードを使用すると、さまざまな方向から飛ぶテキスト、さまざまな色、アニメーション化された列、ボタンなどのアニメーションを追加できます。 アニメーションはコンテンツを強化し、ユーザーに特定のコンテンツを強調するのに役立ちます。

基本的なショートコードとは別に、利用可能な他のいくつかの高度なショートコードもあります。

ShortcodesUltimateプラグインを使用したShortcodeの作成

インストールすると、このプラグインには、スタイリング、コンテンツ作成、コンテンツ分割に分類された50以上のショートコードが付属していることがわかります。

ページにショートコードを追加するには、管理ダッシュボードに移動し、[ページ]をクリックして、ショートコードを追加するページを選択します。

投稿エディタ画面で、[ショートコードの挿入]というタイトルの新しいボタンがエディタメニューに追加されていることに気付くはずです。

このボタンをクリックすると、次のページが表示されます。 ここでは、要件に応じて適切なショートコードを選択できます。 ショートコードは、コンテンツ、ボックス、メディア、ギャラリー、データ、および

選択したら、その要素をカスタマイズして外観を変更するか、そのまま挿入することができます。

次に、[ショートコードの挿入]ボタンをクリックして、ページ/投稿に挿入します。

これで、ショートコードがページ/投稿に挿入されました。

これはボタンがどのように見えるかです

ページコンテンツを複数の列に分割するためのショートコード

ダッシュボードに移動し、次にページに移動します。 新しいページを作成するか、既存のページを選択して、上記のように[ショートコードの挿入]をクリックします。

この例では、列を使用してコンテンツを分割します。 ただし、列は行内にあります。 したがって、「行」オプションをクリックして行のショートコードを追加することから始めます。

これにより、「行の追加」ダイアログが表示されます。 3列のレイアウトを作成するため、変更を加えずに[ショートコードのインストール]をクリックします。

これで、行のショートコードが投稿に挿入されます。 [su_row]と[/su_row]の間にコンテンツを挿入します。

これで、行のショートコード内に列のショートコードを挿入して、複数列のレイアウトを作成できます。

行のショートコードの最初にカーソルを置き、[ショートコードの挿入]ボタンをもう一度クリックして、ショートコードオプションから[列]を選択します。

列のショートコードオプションメニューの設定を調整し、完了したら[ショートコードの挿入]ボタンをクリックします。

ショートコードが投稿エディタに表示されます。

上記の手順を繰り返すか、既存のショートコードをコピーして貼り付けるだけで、列を追加できます。

最後に、ショートコードの間のスペースにコンテンツを入力します。 完了したら、[更新/公開]ボタンをクリックしてプロセスを終了します。

追加された列の数と各列のサイズに応じて、出力は次のようになります。