Shortcodes Ultimateで機能を簡単追加！WordPressサイトを自由にカスタマイズする方法

2025年9月15日

WordPressでサイトを作っていると、「もっとおしゃれなボタンが欲しい」「写真をきれいに並べたい」と思うことはありませんか？そんな時に頼りになるのが、Shortcodes Ultimateというプラグインです。

実は、このプラグインを使えば、コードの知識がなくても50種類以上の機能を簡単に追加できます。たとえば、クリックしたくなるボタンや、読みやすい2列レイアウト、おしゃれなタブ機能まで、まるで魔法のように簡単に作れるんです。

今回は、初心者の方でも安心してShortcodes Ultimateを使えるよう、基本的な使い方から便利な活用術まで、わかりやすく解説していきます。これを読み終わる頃には、あなたのWordPressサイトがもっと魅力的になっているはずです。

Shortcodes Ultimateってどんなプラグイン？【基本情報編】

1. 初心者でも安心！プラグインの基本データ

まず気になるのは、Shortcodes Ultimateがどんなプラグインなのかということですよね。基本的な情報を整理してみましょう。

項目	詳細
プラグイン名	Shortcodes Ultimate
開発者	Vladimir Anokhin
有効インストール数	100万以上
WordPress要求バージョン	4.6以上
PHP要求バージョン	7.0以上
最新バージョン	6.0.0
最終更新日	2025年7月
評価	★★★★☆（4.2/5）

このプラグインの最大の特徴は、なんといってもその豊富な機能数です。無料版だけでも53種類のショートコードが使えるんです。これは他のプラグインと比べても圧倒的な数字ですね。

ただし、ここで注意したいのは、機能が多すぎて最初は戸惑うかもしれないということ。でも大丈夫、よく使う機能は限られているので、まずは基本的なものから覚えていけば十分です。

2. 無料で50種類以上の機能が使える理由

「なぜこんなにたくさんの機能が無料で使えるの？」と疑問に思う方もいるでしょう。実は、Shortcodes Ultimateは「フリーミアム」というビジネスモデルを採用しているからなんです。

無料版で提供される主な機能をまとめてみました：

カテゴリ	機能例
レイアウト	カラム分割、タブ、アコーディオン
ボタン	各種デザインのボタン、リンクボタン
メディア	画像ギャラリー、動画埋め込み
装飾	ボックス、区切り線、アイコン
コンテンツ	引用、リスト、テーブル

これだけの機能が無料で使えるのは、開発者が多くのユーザーに使ってもらい、一部の人に有料版を購入してもらうことで収益を得ているからです。つまり、無料ユーザーも立派な「お客様」なんですね。

実は、多くの個人ブログや小規模サイトなら、無料版だけで十分満足できる内容になっています。有料版が必要になるのは、より高度なカスタマイズが必要な企業サイトなどが多いようです。

3. 有料アドオンで何ができる？3つの追加パックを紹介

無料版でも十分ですが、さらに機能を拡張したい場合は有料アドオンも用意されています。3つのアドオンパックの特徴を比較してみましょう：

アドオン名	価格	主な機能
Extra Shortcodes	$19	追加のショートコード20種類以上
Skins	$15	プリセットデザインテンプレート
All Add-ons Bundle	$29	全アドオンセット（最もお得）

たとえば、Extra Shortcodesを購入すると、より高度なアニメーション効果や、プログレスバー、カウンター機能などが使えるようになります。Skinsアドオンでは、デザイナーが作成したプロフェッショナルなデザインテンプレートが利用可能です。

ただし、初心者の方は最初から有料版を購入する必要はありません。まずは無料版で慣れてから、「もっとこんなことがしたい」と思った時に検討すれば十分でしょう。

まずは基本から！Shortcodes Ultimateを始める手順

1. 3分でできる！プラグインのインストール方法

それでは実際に、Shortcodes Ultimateをインストールしてみましょう。手順は他のプラグインと同じで、とても簡単です。

インストール手順を表にまとめました：

ステップ	操作内容	所要時間
1	WordPressダッシュボードにログイン	30秒
2	プラグイン → 新規追加をクリック	10秒
3	検索ボックスに「Shortcodes Ultimate」と入力	20秒
4	「今すぐインストール」をクリック	60秒
5	「有効化」をクリック	10秒

実は、このプラグインは非常に人気が高いため、検索結果の上位に表示されます。「Shortcodes」と入力するだけでも見つかることが多いですよ。

インストール中に「互換性のチェック中」という表示が出ることがありますが、これは正常な動作です。心配せずに待ちましょう。

2. 有効化後に確認したい設定ポイント

プラグインを有効化すると、WordPressの管理画面に「Shortcodes」という新しいメニューが追加されます。まずはここで基本設定を確認しておきましょう。

重要な設定項目をチェックリストにしました：

設定項目	推奨設定	理由
カスタムCSS	空欄のまま	初心者は触らない方が安全
互換性モード	オフ	他のプラグインとの競合を避ける
プリフィックス	デフォルト	変更する必要なし
エディター統合	オン	編集画面でボタンを表示

特に重要なのは「エディター統合」の設定です。これをオンにしておくと、記事編集画面に「Insert Shortcode」（ショートコードを挿入）というボタンが表示されます。このボタンがないと、せっかくの機能が使いにくくなってしまいます。

ただし、設定を変更する際は念のため、サイトのバックアップを取っておくことをおすすめします。万が一何かトラブルが起きても、すぐに元に戻せるからです。

3. 「ショートコードを挿入」ボタンの見つけ方

プラグインを有効化したら、投稿や固定ページの編集画面を開いてみてください。テキストエディター上部に、新しいボタンが追加されているはずです。

ボタンの位置と種類：

エディター	ボタンの位置	ボタン名
クラシックエディター	ツールバー右側	「Insert Shortcode」
Gutenberg	ブロック追加	「Shortcodes Ultimate」ブロック
ページビルダー	各ツールに統合	プラグイン依存

もしボタンが見つからない場合は、以下の点を確認してみてください。まず、プラグインが正常に有効化されているか、設定で「エディター統合」がオンになっているかをチェックしましょう。

実は、一部のテーマやページビルダープラグインでは、ボタンの表示位置が異なることがあります。そんな時は、手動でショートコードを入力することもできるので安心してください。

これだけは覚えたい！人気機能5つの使い方

1. クリックしたくなるボタンを作る方法

Shortcodes Ultimateで最も人気の機能といえば、やはりボタン作成です。普通のリンクと違って、目立つボタンがあると読者のクリック率が格段に上がります。

基本的なボタンの種類と用途：

ボタンタイプ	用途	設定の複雑さ
フラットボタン	シンプルなリンク	★☆☆
3Dボタン	重要な行動喚起	★★☆
アウトラインボタン	サブ的なリンク	★☆☆
アイコン付きボタン	ダウンロードなど	★★★

ボタンを作る手順は驚くほど簡単です。「Insert Shortcode」ボタンをクリックして、「Button」を選択するだけ。あとは表示したいテキストとリンク先を入力すれば完成です。

たとえば、「無料ダウンロード」というボタンを作りたい場合、色は緑系にして、サイズは少し大きめに設定すると効果的です。実は、色の心理学でも緑は「安全」や「GO」を連想させるため、行動を促すのに適しているんです。

2. 読みやすい2列・3列レイアウトの作り方

WordPressの標準機能では難しい、複数列のレイアウトも簡単に作れます。特に比較表や特徴紹介には欠かせない機能です。

列数別の使い分け：

列数	適した用途	スマホ表示
2列	比較、Before/After	縦並びに変更
3列	特徴紹介、サービス一覧	縦並びに変更
4列以上	ギャラリー、チーム紹介	2列×2行に変更

2列レイアウトを作る場合、「Columns」ショートコードを使います。左側に画像、右側にテキストといった構成が簡単に作れるんです。

ただし、ここで注意したいのは、スマートフォンでの表示です。画面が小さいため、自動的に縦並びに変更されます。これを「レスポンシブ対応」と言いますが、Shortcodes Ultimateは自動でやってくれるので安心です。

3. おしゃれなタブ切り替え機能の設定

情報量が多いページでは、タブ機能が威力を発揮します。読者は興味のある部分だけを選んで読めるので、ページの使いやすさが格段に向上するんです。

タブ機能の活用例：

業界・用途	タブの使い方	効果
店舗サイト	メニュー、価格、アクセス	情報整理
商品紹介	特徴、仕様、レビュー	比較しやすい
会社紹介	事業内容、沿革、採用	読者が選択可能
ブログ	カテゴリ別記事一覧	回遊率向上

タブを設定する際のポイントは、タブのタイトルを短くて分かりやすい言葉にすることです。たとえば「商品の詳しい仕様について」ではなく、単に「仕様」とした方が見やすいですね。

実は、タブ機能はSEOの面でも有利です。1つのページに多くの情報を整理して掲載できるため、検索エンジンからの評価も高くなりやすいんです。

4. 目を引くボックス装飾のコツ

重要な情報を読者に伝えたい時に便利なのが、ボックス装飾機能です。普通のテキストと違って、視覚的に目立つので見落とされにくくなります。

ボックスの種類と使い分け：

ボックス名	色・デザイン	使用場面
Note	青系・シンプル	補足説明
Warning	黄・オレンジ系	注意事項
Error	赤系	重要な警告
Success	緑系	成功事例、おすすめ

ボックスを効果的に使うコツは、色の使い分けです。たとえば、料金に関する重要な注意事項なら黄色の警告ボックス、おすすめの商品紹介なら緑の成功ボックスといった具合です。

ただし、1ページに何個もボックスを使いすぎると、かえって読みにくくなってしまいます。「本当に重要な部分だけ」に限定して使うのがポイントですね。

5. 写真をきれいに並べるギャラリー機能

最後にご紹介するのは、写真を美しく表示するギャラリー機能です。WordPressの標準ギャラリーよりも、はるかに多彩な表示オプションが用意されています。

ギャラリーの表示スタイル：

スタイル名	特徴	適した用途
Grid	格子状配置	商品カタログ
Masonry	レンガ調配置	アート作品
Carousel	スライド表示	イベント写真
Lightbox	拡大表示対応	詳細が重要な画像

特に人気なのは「Lightbox」機能です。画像をクリックすると、ポップアップで大きく表示されるので、細かい部分まで見てもらえます。商品の詳細を見せたい通販サイトなどでは必須の機能ですね。

実は、ギャラリー機能はサイトの読み込み速度にも配慮されています。「遅延読み込み」という技術を使って、見えない画像は後から読み込むため、ページの表示が早くなるんです。

カスタマイズ初心者向け！デザインを変える簡単テクニック

1. 色やサイズを変更する基本の操作

Shortcodes Ultimateの魅力は、デザインを自由に変更できることです。でも「CSS」とか「コード」と聞くと難しそうに感じますよね。実は、ほとんどの設定は画面上で選択するだけで完了します。

基本的な設定項目と変更方法：

設定項目	変更方法	難易度
背景色	カラーピッカーで選択	★☆☆
文字色	カラーピッカーで選択	★☆☆
サイズ	プルダウンメニューから選択	★☆☆
角の丸み	スライダーで調整	★★☆
影の効果	チェックボックス	★☆☆

たとえば、ボタンの色を変更したい場合、「Insert Shortcode」から「Button」を選択し、「Background」の欄でお好みの色をクリックするだけです。色の組み合わせに迷った時は、サイト全体の配色と合わせると統一感が生まれます。

ここで注意したいのは、色のアクセシビリティです。文字色と背景色のコントラストが低すぎると、読みにくくなってしまいます。特に年配の方や視覚に障害のある方への配慮も大切ですね。

2. アイコンを追加して見た目を華やかにする方法

テキストだけのボタンや見出しに、アイコンを追加すると一気におしゃれになります。Shortcodes Ultimateには、1000種類以上のアイコンが標準で用意されているんです。

人気のアイコンカテゴリー：

カテゴリー	アイコン例	よく使う場面
ビジネス	電話、メール、会社	連絡先情報
SNS	Facebook、Twitter、Instagram	ソーシャルリンク
矢印	右矢印、下矢印、更新	ナビゲーション
評価	星、ハート、グッド	レビュー表示

アイコンを選ぶ際のコツは、「直感的に分かりやすいもの」を選ぶことです。たとえば、ダウンロードボタンなら下矢印のアイコン、外部サイトへのリンクなら外部リンクを示すアイコンといった具合です。

実は、アイコンにはもう一つ大きなメリットがあります。言語の壁を越えて情報を伝えられることです。海外からの訪問者がいるサイトでは、特に効果的ですね。

3. スマホでも見やすく表示させるポイント

現在、多くのサイトでスマートフォンからのアクセスが半数以上を占めています。そのため、モバイル対応は必須の要素です。

スマホ表示で気をつけるべき点：

チェック項目	問題点	対策
ボタンサイズ	小さすぎてタップしにくい	最低44px以上に設定
文字サイズ	読みにくい	16px以上を推奨
カラム幅	横スクロールが発生	自動調整設定をオン
画像サイズ	はみ出して表示される	レスポンシブ設定を確認

Shortcodes Ultimateの嬉しいところは、ほとんどの機能で自動的にスマホ対応されることです。たとえば、3列レイアウトをスマホで見ると、自動的に縦並びに変更されます。

ただし、設定によってはモバイル表示が崩れることもあります。そんな時は、スマートフォンの実機やデベロッパーツールで表示を確認することが大切です。

よくある「困った」を解決！トラブル対策

1. ショートコードが表示されない時の対処法

「ショートコードを入力したのに、文字がそのまま表示されてしまう」。これは初心者の方によくある問題です。でも原因さえ分かれば、簡単に解決できます。

主な原因と解決策：

原因	症状	解決方法
プラグイン無効化	コードがそのまま表示	プラグインを有効化
記述ミス	エラー表示や無反応	スペルを確認
テーマ競合	一部機能が動かない	テーマを一時変更してテスト
キャッシュ	変更が反映されない	キャッシュクリア

最も多い原因は、単純な記述ミスです。たとえば、「[su_button]」を「[su-button]」と書いてしまうケースですね。アンダーバー（_）とハイフン（-）を間違えることがよくあります。

実は、WordPressには「ビジュアルエディター」と「テキストエディター」の2つのモードがあります。ショートコードを入力する時は、必ず「テキストエディター」モードで行いましょう。

2. テーマ変更後もデザインを保つ設定

WordPressテーマを変更すると、Shortcodes Ultimateのデザインが崩れることがあります。これは、テーマごとにCSSの設定が異なるためです。

テーマ変更時のチェックポイント：

項目	確認内容	対処法
色の設定	ボタンやボックスの色	カスタムCSSで調整
フォント	文字の種類やサイズ	プラグイン設定で変更
余白	要素間のスペース	テーマのカスタマイザーで調整
アニメーション	動きが正常に動作するか	プラグイン更新を確認

問題を未然に防ぐには、テーマを変更する前に「ステージング環境」でテストすることをおすすめします。本番サイトとは別の環境で、安全に動作確認ができます。

ただし、多少のデザイン調整が必要になることは珍しくありません。完璧を求めすぎず、「8割程度うまくいけばOK」くらいの気持ちで取り組むと、ストレスが少なくなりますよ。

3. サイトが重くならないための注意点

Shortcodes Ultimateは多機能な分、使いすぎるとサイトの読み込み速度が遅くなる可能性があります。特に、画像を多用するギャラリー機能などは注意が必要です。

サイト速度を保つための対策：

対策	効果	実装の難易度
不要な機能を無効化	中	★☆☆
画像の最適化	大	★★☆
キャッシュプラグイン使用	大	★★★
CDNの利用	大	★★★

最も簡単にできる対策は、使わない機能を無効化することです。Shortcodes Ultimateの設定画面で、使用しないショートコードのチェックを外すだけで、読み込むファイルサイズを減らせます。

実は、サイトの速度はSEO（検索エンジン最適化）にも大きく影響します。Googleは表示速度の早いサイトを好む傾向があるため、速度対策は検索順位アップにもつながるんです。

上級者への道！さらに活用するためのヒント

1. 他のプラグインと組み合わせるアイデア

Shortcodes Ultimateの真価は、他のプラグインと組み合わせた時に発揮されます。単体でも十分便利ですが、組み合わせることでさらに可能性が広がります。

おすすめの組み合わせ：

プラグイン	組み合わせ効果	具体的な活用例
Contact Form 7	お問い合わせフォームの装飾	ボックス内にフォーム配置
WooCommerce	ECサイトの商品紹介強化	タブ内に商品詳細表示
Yoast SEO	SEO効果の向上	構造化データと連携
Elementor	ページビルダーとの連携	ドラッグ&ドロップで配置

たとえば、Contact Form 7で作成したお問い合わせフォームを、Shortcodes Ultimateのボックス内に配置すると、視覚的に目立たせることができます。結果として、お問い合わせ率の向上が期待できるんです。

ただし、プラグインの組み合わせが増えると、動作が重くなったり、競合が発生したりする可能性もあります。新しいプラグインを追加する際は、必ず事前にテスト環境で動作確認を行いましょう。

2. 有料版を検討するべきタイミング

無料版でも十分な機能がありますが、サイトが成長してくると有料版を検討したくなる場面が出てきます。どんな時が「アップグレード」のタイミングなのでしょうか。

有料版検討のタイミング：

状況	無料版の限界	有料版で解決できること
企業サイト運営	デザインバリエーション不足	プロフェッショナルなテンプレート
大量のコンテンツ	管理が煩雑	一括設定変更機能
高度な装飾	アニメーション効果が限定的	豊富なエフェクト
ブランディング重視	独自性の表現が難しい	カスタムCSS機能強化

有料版の最大のメリットは、時間の節約です。無料版では手間のかかる設定や、複雑なカスタマイズが簡単にできるようになります。月間PV数が1万を超えるサイトなら、投資価値は十分にあるでしょう。

実は、有料版を購入するかどうかの判断基準として、「1時間あたりの作業効率」で考えてみることをおすすめします。カスタマイズに費やす時間をお金で買えると考えれば、決して高い投資ではありませんね。

3. コード知識がなくても使える応用技

「プログラミングは分からないけれど、もっと高度なカスタマイズがしたい」。そんな方のために、コードを書かずにできる応用テクニックをご紹介します。

技術レベル別の応用方法：

レベル	できること	使用する機能
初級	色や配置の調整	プラグイン標準設定
中級	独自デザインの適用	カスタムCSS
上級	動的コンテンツの表示	他プラグインとの連携

中級レベルでは、WordPressの「カスタマイザー」機能を活用します。ここでCSSを追加すれば、Shortcodes Ultimateの要素を自由にデザインできます。コードをコピー&ペーストするだけなので、プログラミング知識は不要です。

上級テクニックとしては、「条件分岐」という機能があります。たとえば、「ログインユーザーにだけ特別なコンテンツを表示する」といったことも可能です。これには他のプラグインとの組み合わせが必要ですが、効果は絶大ですよ。