こんにちは！朝日奈（@asahinablog）です。
WordPressのショートコードプラグインは数えるほどしかなく、初心者にも使いやすいものといったらShortcodes Ultimateしかないと思います。
Shortcodes Ultimateはボタンやボックスなど、たくさんの装飾機能が用意されているため、簡単に記事をおしゃれにできます。
他のプラグインは、自分でショートコードを自作して登録しなければなりません。
そんなのコードが書けない人には難しい・・・！
ですので僕はShortcodes Ultimateを使って記事装飾をするようにしています。
SANGOやストークなど最初からショートコードが備わっているWordPressテーマも増えてきましたが、非対応のテーマをお使いの場合はぜひ導入しておきましょう。
目次
Shortcodes Ultimateのインストール
まずはプラグインのインストールです。ダッシュボードから【プラグイン】⇒【新規追加】へ進みます。
「Shortcodes Ultimate」と検索すると出てくるので、【今すぐインストール】をクリックします。
【有効化】をクリックします。
ショートコードの使い方の確認
どんなショートコードが使えるのか見てみましょう。
ダッシュボードに【ショートコード】という新たなメニューが加わっていますので、それをクリックすると利用できるショートコード一覧が表示されます。
ここで気になるショートコードをクリックしてみましょう。例えば、【タブ】をクリックしてみます。
するとこのようにタブのショートコードの使い方が出てきます。
【プレビュー】にはショートコードの見た目が表示されています。
【ショートコード】には実際に記事に入力するショートコードが表示されています。
【Shortcode options】には、ショートコードを挿入する時に設定できるオプションが表示されています。何も設定しない場合は、デフォルト値が使われます。
この画面は使い方を確認するだけですので、特に設定することはありません。
色々ありますが、実際に使った方がわかりやすいので、早速記事に挿入してみましょう。
記事内でのショートコードの使い方
記事投稿画面に【ショートコードを挿入】ボタンが追加されているのでクリックします。
先ほど確認したショートコード一覧がズラッと出てきますので、この中から挿入したいショートコードを選びます。
色々ありますが、よく使うショートコードをご紹介します。
ボックス
ボックスはこれです↓
[su_box]ここにボックスの中身を書きます。[/su_box]目立たせたいことやポイントをまとめる時に使えます。
ショートコード一覧から【ボックス】をクリックすると挿入できます。
設定項目が出てくるので入力しましょう。
ここに表示されているのは、先ほど使い方の確認をした時に表示されていたShortcode optionの部分です。
一番下にある【ライブプレビュー】をクリックすると、変更した部分を確認しながら設定できるので便利です。
【タイトル】や【コンテンツ】は、ショートコード挿入後にも書き直せるので、スタイルだけ先に決めて挿入してから中身を編集してもいいですね。
ショートコード挿入後↓
直接書き直しが可能↓
ボタン
ボタンはこれです↓
ショートコード一覧から【ボタン】をクリックすると挿入できます。
設定画面が出てきます。
設定項目が多いので簡単にまとめます。
[su_box title=”ボタンの設定項目”]- リンク：飛ばし先のURLを入力
- ターゲット：リンク先のページを新しいタブで開くか
- スタイル：ボタンの見た目
- 背景：ボタンの色
- テキストの色：ボタンに表示するテキストの色
- サイズ：ボタンの大きさ
- 可変：ボタンの横幅をいっぱいにするか
- 中央：ボタンを中央寄せ
- 半径：ボタンの角を丸くするか
- アイコン：テキストの前にアイコンを表示
- アイコンの色：上記アイコンの色
- テキストの影：テキストに影を付ける
- 説明：テキスト下に小さく説明文を表示
- コンテンツ：ボタンのテキスト
この他にも、onClick、rel属性、title属性、Button ID、別のCSSクラスなどが設定できますが、僕はすべて空欄にしています。
よくわからない場合は空欄で大丈夫です。こだわる場合は設定してみてください。
基本的にはリンクとテキストと色と大きさを設定できればいい感じになります。
ライブプレビューを見ながらデザインを調整してみてください。
2カラム/3カラム
カラムとは列のことで、指定した範囲を分割します。
例↓
2カラムは記事を2分割に、3カラムは記事を3分割します。ただし、パソコンやタブレットなど横幅が広い端末のみ適用されます。スマホの場合は1カラム目から順番に縦に表示されます。
これをうまく使えば、凝ったデザインにすることができます。
パソコンでは横幅が広くて余白が目立つなあ、という場合に2カラムにしてみたり、ランディングページで同じ要素を並べる時に3カラムにしてみたり、アイディア次第でいろいろ使えます。
カラムを挿入する時は、ショートコード一覧から【Columns】を選択します。
【ショートコードを挿入】をクリックします。
コードが挿入されます。
わかりやすく改行してみましょう。
これが2カラムの場合のショートコードです。「列のコンテンツ」と書かれてるところに文章を書いたり画像を挿入したりして、1カラムごとにコンテンツを作ります。
1/2のところを1/3にすれば3カラムになります。その際、列のコンテンツを1つ増やします。以下のようなショートコードになります。
Shortcodes Ultimateはウィジェットでも使える
Shortcodes Ultimateは記事内だけでウィジェットでも使えます。
ボタンなんかは使いどころがありそうですよね。
また、Ad Inserterを併用すれば、記事内やウィジェットだけにとどまらず、トップページやヘッダーなど、好きな場所にショートコードを使うことが可能です。
【関連記事】
Ad Inserterの使い方。アドセンスも好きなコードもこれひとつでどこでも挿入できる。
幅広く使えるショートコードプラグインですので、自分だけのデザインや使い方を見つけて楽しんでください。
最後にご案内です。
僕の無料メール講座では、WordPressを使ってブログで稼ぐノウハウを発信しています。
僕がブログで生計を立てられるようになった方法をご紹介しているので、ぜひ読んでみてください。
