プラグイン

ショートコードを簡単に使いこなせる超便利なプラグイン「Shortcodes Ultimate」

更新日:

タイトル

 

WordPressには「ショートコード」と呼ばれる便利な機能が標準でついているのですが、使いこなすのは結構面倒なのが現状です。

そこで今日は、「ショートコード」って何だ? という初心者さんでも、インストールして有効化させるだけで、特別な知識がなくても「ショートコード」を使った様々な表現方法が実現できるプラグイン「Shortcodes Ultimate」をご紹介します。

「Shortcodes Ultimate」インストール

このプラグインは以前からあったのですが、つい最近バージョンアップされており、評価の高いプラグインです。(2013/11/10現在)

ダッシュボードのプラグインの新規追加で、検索窓に「Shortcodes Ultimate」と記入し検索ボタンを押すと一番上に出てきますので、「いますぐインストール」をクリック、その後有効化します。

※現時点では日本語化されています。

「Shortcodes Ultimate」設定

プラグインのインストールが完了し有効化すると、ダッシュボード左側のメニューにある「設定」の中に 「Shortcodes Ultimate」という項目が追加されていますので、それをクリックします。

bandicam 2013-11-10 14-53-16-319

 

「Shortcodes Ultimate」の管理画面が開くので、上にあるタブメニューの「設定」をクリックします。

bandicam 2013-11-10 15-00-21-662

 

カスタムフォーマッティング:「有効」のままでいいでしょう。

互換モード:既にインストール済みのプラグインで同じようなショートコードを使用するものがあった場合、バッティングを防ぐために、Shortcodes Ultimateが生成するショートコードに自動で接頭語を追加してくれる機能です。 例:[shortcode]→[su_shortcode]

これにより独自のショートコードとなり、他のプラグインが生成するショートコードとのバッティングを防いでくれます。

デフォルト値をスキップ:ここは有効化のままにしておくように、との指示がありますのでそのままにしておきます。

スキン:これはちょっと説明が必要なのですが、設定画面の一番下にある、スキンをダウンロードする。 から、別途に無料でスキンをダウンロードできます。

※2013/11/11追記:記事の投稿直後にバージョンアップが行われ、同時にスキンは有料になっています(15ドル)ご注意ください。

ダウンロードしたZIPファイルを解凍すると、「shortcodes-ultimate-metro-skins-pack」というフォルダがあり、その中に5種類のスキンのフォルダがありますので、それらをフォルダごとFTPソフトを使って「/wp-content/uploads/shortcodes-ultimate-skins」の中にアップロードします。

上記の設定画面の画像では、スキンの項目のテキストエリアに「metro-blue」という記述がしてありますが、初期設定では「defoult]となっているのですが、この場合「metro-blue」というスキンを手動で設定しています。

上記の説明でよくわからない場合は「defoult]のままにしておいてもOKです。

使い方

いよいよ使い方です。

投稿や固定ページの新規追加をクリックしてエディタを見ると、上のほうに「ショートコードを追加」というボタンが追加されているはずです。

bandicam 2013-11-10 16-11-20-534

 

記事投稿中の任意の位置で「ショートコード追加」を押すと、下の画像のような画面になります。 ここではボタンを選択しています。

bandicam 2013-11-10 16-18-39-604

 

クリックで拡大

選択すると、詳細の設定画面になるので、それぞれの項目を任意で記入していきます。

bandicam 2013-11-10 16-20-00-812

クリックで拡大

必要な項目を埋めていき、一番下までスクロールすると「プレビュー」ボタンがあるので出来上がりをチェックします。

よければ青いボタンの「ショートコードを挿入」を押すと、生成されたショートコードがエディタに自動で挿入されます。

bandicam 2013-11-10 16-22-43-556

クリックで拡大

上記の要領で作成したボタンがこちらです。

ボタンのテキスト  ボタンのテキストボタンの下の小さな説明  ボタンのテキスト

このように、様々な表現が可能になります。

その他のサンプル

ボタンの他にも、ショートコードを挿入するだけでいろんな表現が楽しめます。 以下にいくつかサンプルを作成してみました。(※サンプルのスキンは「metro-blue」です)

タブメニュー

タイトル 1タイトル 2タイトル 3
コンテンツ 1
コンテンツ2
コンテンツ 3

スポイラー

plus
plus-circle
plus-square-1
plus-square-2
arrow
arrow-circle-1
arrow-circle-2
caret
caret-square
folder-1
folder-2

見出し

ここに見出しのテキストが入ります

ツールチップ

ボタンにマウスを乗せると吹き出しで説明文が表示

ボタンに表示する文字

ボックス

ボックスの色はお好みで変更可能

ここにボックスのタイトル
ボックスの内容ボックスの内容ボックスの内容ボックスの内容ボックスの内容ボックスの内容ボックスの内容ボックスの内容ボックスの内容ボックスの内容ボックスの内容ボックスの内容ボックスの内容ボックスの内容ボックスの内容

ショートコードの中にショートコード(入れ子)

これはボックスのタイトルです。
ボックスの中にボタンを入れた例です。

例:ダウンロードはこちら  ダウンロード

まとめ

難しいショートコードやcssなどの知識がなくても、プラグインをインストールするだけで、訪問者さんがわかりやすいページの構成を実現できます。

あまり使いすぎるとゴチャゴチャした印象になるので気をつけましょう。

では、楽しいWordPressライフを(^^)/

-プラグイン

Copyright© WP-WEBZINE , 2017 All Rights Reserved Powered by STINGER.