Webサイト制作において、デザイン性と機能性を両立させながら、いかに効率的にコンテンツを作成していくかは常に課題となります。特にWordPressテーマ「SANGO」は、その豊富な機能とカスタマイズ性で多くのユーザーに支持されていますが、その真価を引き出すためには、搭載されている「ショートコード」の理解が不可欠です。
本記事では、SANGOテーマで利用できるショートコードを網羅的に解説し、それぞれの機能、使い方、そして実務で役立つ応用例までを詳細に紹介します。Webサイト制作のスピードアップとクオリティ向上を目指す方、SANGOテーマをさらに活用したい方は、ぜひ最後までお読みください。
SANGOショートコードとは？
WordPressのショートコードとは、WordPressの投稿や固定ページ内で特定のコード（例: `[shortcode]`）を記述することで、PHPコードを実行して動的なコンテンツ（画像、ボタン、リストなど）を生成する仕組みです。これにより、HTMLやPHPの知識がなくても、手軽にリッチな表現や複雑なレイアウトを実現できます。
SANGOテーマは、デザイン性の高いサイトを簡単に構築できるよう、様々なショートコードを標準で搭載しています。これらのショートコードを活用することで、以下のようなメリットが得られます。
* **制作効率の向上:** 定型的な要素をショートコードで置き換えることで、コーディングの手間が省け、執筆に集中できます。
* **デザインの一貫性:** テーマ標準のショートコードを使用することで、サイト全体で統一感のあるデザインを保ちやすくなります。
* **機能拡張:** 通常のWordPressでは難しい装飾やレイアウトも、ショートコード一つで実現できます。
* **メンテナンス性の向上:** コードの修正が必要になった場合も、ショートコードの定義部分を修正するだけで、サイト全体に反映させられます。
SANGOショートコード詳細解説
SANGOテーマで利用できるショートコードは多岐にわたります。ここでは、特に利用頻度が高い、あるいは特徴的なショートコードをピックアップして詳細に解説します。
1. ボックス系ショートコード
情報を分かりやすく整理・強調するために役立ちます。
* **`[box]`:**
汎用的なボックスを作成します。背景色、枠線、角丸などを指定できます。
* **使い方:**
[box class=”blue”]ここにコンテンツ[/box]
* **`class`属性:** `blue`, `red`, `green`, `yellow`, `gray`, `pink`, `orange`, `purple`, `brown`, `teal`, `navy`, `light_blue`, `light_green`, `light_yellow`, `light_pink`, `light_orange`, `light_purple`, `light_brown` などのカラークラスを指定できます。
* **応用例:** 注意喚起、補足情報、引用などの表示。
* **`[ymybox]`:**
SANGOテーマ独自の、よりデザイン性の高いボックスです。アイコン付きで表示することも可能です。
* **使い方:**
[ymybox title=”タイトル”]ここにコンテンツ[/ymybox]
* **`title`属性:** ボックスのタイトルを指定します。
* **応用例:** 記事のセクション分け、強調したい情報の囲み。
* **`[free]`:**
自由なデザインのボックスを作成します。CSSクラスを直接指定することも可能です。
* **使い方:**
[free class=”custom-box”]ここにコンテンツ[/free]
* **応用例:** 個別のデザインニーズに対応したい場合。
2. ボタン系ショートコード
CTA（Call to Action）ボタンなど、クリックを促す要素を作成します。
* **`[button]`:**
基本的なボタンを作成します。リンク先、色、サイズなどを指定できます。
* **使い方:**
[button url=”https://example.com” color=”blue” size=”large”]詳細はこちら[/button]
* **`url`属性:** リンク先のURLを指定します。
* **`color`属性:** `blue`, `red`, `green`, `yellow`, `black`, `gray`, `pink`, `orange`, `purple`, `brown`, `teal`, `navy` などを指定できます。
* **`size`属性:** `small`, `medium`, `large` を指定できます。
* **応用例:** 商品購入ボタン、問い合わせボタン、関連記事へのリンク。
* **`[download_button]`:**
ダウンロード用のボタンを作成します。
* **使い方:**
[download_button url=”https://example.com/file.zip” color=”green”]資料をダウンロード[/download_button]
* **応用例:** PDF資料やプラグインファイルなどのダウンロードリンク。
3. リスト系ショートコード
箇条書きを装飾し、視覚的に分かりやすくします。
* **`[list]`:**
チェックマーク付きのリストを作成します。
* **使い方:**
[list]
* アイテム1
* アイテム2
* アイテム3
[/list]
* **応用例:** メリット・デメリットの提示、手順の説明。
* **`[list icon=”check”]`:**
任意のアイコンを指定できるリストを作成します。
* **使い方:**
[list icon=”check”]
* アイテム1
* アイテム2
[/list]
* **`icon`属性:** Font Awesomeなどのアイコンコードを指定できます。
4. テーブル系ショートコード
表形式のデータを分かりやすく表示します。
* **`[table]`:**
シンプルなテーブルを作成します。
* **使い方:**
[table]
| ヘッダー1 | ヘッダー2 |
|—|—|
| データ1-1 | データ1-2 |
| データ2-1 | データ2-2 |
[/table]
* **応用例:** 料金表、比較表、スペック表。
5. その他便利なショートコード
* **`[related_post]`:**
関連記事を表示します。
* **使い方:**
[related_post]
* **応用例:** 読者の回遊率を高め、サイト滞在時間を延ばす。
* **`
目次を自動生成します。
* **使い方:**
* **応用例:** 長文記事の可読性を向上させる。
* **`[highlight]`:**
テキストをハイライト表示します。
* **使い方:**
これは[highlight color=”yellow”]強調したい[/highlight]テキストです。
* **`color`属性:** `yellow`, `red`, `green`, `blue` などを指定できます。
* **応用例:** キーワードの強調、注意喚起。
* **`[quote]`:**
引用ブロックを表示します。
* **使い方:**
[quote author=”山田太郎”]これは引用文です。[/quote]
* **`author`属性:** 引用元を指定できます。
* **応用例:** 他のサイトや書籍からの引用、専門家の意見の提示。
* **`[tabs]`:**
タブ切り替え式のコンテンツを作成します。
* **使い方:**
[tabs]
[tab title=”タブ1″]タブ1の内容[/tab]
[tab title=”タブ2″]タブ2の内容[/tab]
[/tabs]
* **応用例:** 複数の情報をコンパクトにまとめたい場合、機能説明など。
* **`[accordion]`:**
アコーディオン（開閉式）メニューを作成します。
* **使い方:**
[accordion]
[accordion_item title=”質問1″]回答1[/accordion_item]
[accordion_item title=”質問2″]回答2[/accordion_item]
[/accordion]
* **応用例:** FAQ（よくある質問）、詳細説明の折りたたみ。
サンプルコードと実践的な使い方
ここでは、いくつかのショートコードを組み合わせた実践的な例を紹介します。
例1：製品紹介ページ
製品の特長を箇条書きで示し、購入ボタンを設置する。
高性能デジタルカメラ XYZ-100
[ymybox title=”製品の特長”]
[list]
* 2400万画素CMOSセンサー搭載
* 4K動画撮影対応
* 防水・防塵設計
* 軽量コンパクトボディ
[/list]
[/ymybox]
[box class=”yellow”]
**今なら期間限定で特別価格！**
[/box]
[button url=”https://example.com/buy” color=”red” size=”large”]今すぐ購入する[/button]
例2：サービス比較ページ
複数のサービスプランを比較表で示し、各プランの詳細をタブで切り替えられるようにする。
サービスプラン比較
[table]
| プラン名 | 月額料金 | 特徴 |
|—————|———-|—————————————-|
| スタンダード | 1,000円 | 基本機能が揃ったエントリープラン |
| プレミアム | 3,000円 | 全機能利用可能、サポート充実 |
| エンタープライズ | 要見積もり | 大規模向け、カスタマイズ可能 |
[/table]
[tabs]
[tab title=”スタンダードプラン”]
[ymybox title=”スタンダードプランの詳細”]
* 基本機能（〇〇, △△）が利用できます。
* 容量は5GBまでとなります。
[/ymybox]
[/tab]
[tab title=”プレミアムプラン”]
[ymybox title=”プレミアムプランの詳細”]
* 全ての機能が利用可能です。
* 容量無制限。
* 優先サポートを提供します。
[/ymybox]
[/tab]
[tab title=”エンタープライズプラン”]
[ymybox title=”エンタープライズプランの詳細”]
* お客様のニーズに合わせてカスタマイズ可能です。
* 専用の担当者がサポートします。
* 詳細についてはお問い合わせください。
[/ymybox]
[/tab]
[/tabs]
[button url=”https://example.com/contact” color=”blue”]お問い合わせはこちら[/button]
実務アドバイス：ショートコードを使いこなすためのヒント
1. **ショートコードチートシートの作成:** よく使うショートコードとその引数（オプション）をまとめたチートシートを作成しておくと、作業効率が格段に向上します。
2. **テーマのドキュメント参照:** SANGOテーマには、さらに多くのショートコードや詳細な設定方法が記載された公式ドキュメントがあります。必ず参照するようにしましょう。
3. **子テーマの活用:** テーマのアップデートでショートコードの仕様が変更された場合でも、子テーマでカスタマイズしていれば影響を受けにくくなります。オリジナルのショートコードを作成したい場合も子テーマが基本です。
4. **ショートコードのネスト:** 複数のショートコードを組み合わせる（ネストする）ことで、より複雑でリッチな表現が可能になります。上記の例のように、ボックスの中にリストを入れたり、タブの中にさらにボックスを入れたりすることができます。
5. **ショートコードの属性を理解する:** 各ショートコードには様々な属性（オプション）があります。これらを使いこなすことで、デザインや機能を細かく調整できます。属性の指定方法（例: `url=”リンク先”`, `color=”blue”`）を覚えましょう。
6. **ショートコードの生成プラグイン:** ショートコードを直接入力するのが難しい場合は、ショートコード生成プラグイン（例: Shortcodes Ultimateなど）を活用するのも一つの手です。ただし、SANGOテーマ標準のショートコードとの互換性や、デザインの統一性に注意が必要です。SANGOテーマに付属するエディタ機能（ブロックエディタのSANGOブロックなど）を優先的に使うことをお勧めします。
7. **アクセシビリティへの配慮:** ショートコードで装飾されたコンテンツも、スクリーンリーダーなどの支援技術で正しく解釈されるように配慮が必要です。例えば、`[quote]`ショートコードで引用元を明記するなど、意味が伝わるように工夫しましょう。
8. **パフォーマンスへの影響:** 多くのショートコードを多用すると、レンダリングに時間がかかる場合があります。特に、複雑なショートコードや、大量のショートコードを一つのページで使用する場合は、パフォーマンスへの影響を考慮し、必要最低限の使用に留めるか、最適化を検討しましょう。
まとめ
SANGOテーマのショートコードは、Webサイト制作の効率を劇的に向上させ、デザインの幅を広げる強力なツールです。本記事で紹介したショートコード一覧と使い方を参考に、ぜひ日々のサイト制作に活用してみてください。
ボックス、ボタン、リスト、テーブルなど、様々な要素をショートコードで手軽に実装できるため、コーディングの負担を減らし、よりクリエイティブな作業に時間を費やすことができるようになります。また、`[related_post]`や`
ショートコードを使いこなすことで、SANGOテーマのポテンシャルを最大限に引き出し、魅力的で使いやすいWebサイトを効率的に構築しましょう。継続的に新しいショートコードを試したり、公式ドキュメントを参照したりすることで、さらに深い活用が可能になります。
コメント