デザインがグッと広がる!プラグイン「Shortcodes Ultimate」の使い方

今回の記事はWordPressのプラグイン「Shortcodes Ultimate」の紹介になります。

「Shortcodes Ultimate」はWordPressの便利機能「ショートコード」という機能を使って記事内でデザインや装飾をする事ができます。

↓↓例えばこのようなタブを作るのも簡単にできます。

タブ1タブ2タブ3
「Shortcodes Ultimate」では
このような
タブを作ったりできます。

 

このように記事を装飾するパーツやデザインが50種類もあります。

また、基本は無料ですが、もっとかっこいい別のデザインなどを購入して追加することもできます。

 

使い方はとても簡単ですが、慣れていないと戸惑うこともありますので解説していきます。

 

 

ショートコードの構造

 

田舎アフィリ

使い方を解説する前に、そもそもショートコードとは?ということを解説します。

ここが理解できると、ショートコードの編集がとても簡単になります。

 

ショートコードには大きく2種類あります。

  1. 開始コードと終了コードでワンセット
  2. 1つのコードで完結

 

開始コードと終了コードでワンセット

↑↑これがショートコードです。
このショートコードは↓↓このように黄色枠の中に「テスト」と書いてあるショートコードです。

テスト

 

↑開始コードと↓終了コードで…

「テスト」が囲われています。

この囲われている「テスト」をコンテンツとよんだります。

 

コンテンツを使う場合は開始コードと終了コードがワンセットになります。

開始コード内には枠のデザインの「命令」が入っています。

  • su_note:枠を作る
  • note_color=:背景色を指定する
  • #fefe2c:この色のカラーコード
  • radius=:枠の角の丸みの半径(今は8に指定)

このようになっているので、ショートコード挿入後にちょっとデザインを変えたいという場合、命令を書き換えればOKです。

 

開始コードの命令は開始コードに対応する終了コードがくるまで効力を発揮します。

終了コードを書かないとその後の記事全体に影響を及ぼします。

 

 

1つのコードで完結

1つのコードで完結するショートコードもあります。コンテンツが無い場合はこちらのコードです。開始タグのみという考え方もできます。

 

例えば、YouTube動画を埋め込むショートコードの場合がコチラです↓↓

終了コードはありません。1つのコードだけです。

このコードの中に「YouTube動画のURL」の情報があり、それを表示するショートコードなので、1つだけで完結します。

 

この場合も、コード内の情報を書き換えればショートコードの変更が可能です。

 

 

まずは「Shortcodes Ultimate」をインストールと有効化

  1. プラグインの新規追加に進みます
  2. 「Shortcodes Ultimate」で検索します
  3. ボタンをクリックしてインストールと有効化します

 

他のプラグインもまとめて一括インストールできる方法があるので試してみてください。

↓↓詳しくはこちらの記事で

【WordPress】一番簡単なプラグインの一括インストール方法まとめ

2018.09.20

 

「Shortcodes Ultimate」の使い方

 

田舎アフィリ

設定は何も必要なくすぐに使うことができます。

記事を書く時に、記事編集エディターで使うことができます。

 

 

基本の使い方

記事エディターの上に「ショートコードを挿入」というボタンが表示されます。

 

 

クリックすると挿入できるデザインの一覧が表示されます。

 

ここで文字だけで見てもわからないのも多いと思います。見やすくまとめられたページが用意されているので見てみてください。
サイドバーに「ショートコード」という項目が追加されているのでその中の「Available shortcodes」をクリックします。

 

そうすると、50個のショートコードのデザインがわかりやすくアイコンになって一覧で表示されているページが開きます。
↓↓こちら

 

このアイコンなんとなくわかると思います。詳しく見たい時はそのアイコンをクリックします。すると「プレビュー」でどのようなデザインなのか見ることができます。

 

「プレビュー」の下には「ショートコード」という枠があります。そこのコードを記事内にコピペすると「プレビュー」に表示されているものが挿入されます。

また、「ショートコード」を書き換えることでデザインや文字を変えることができます。
↓↓↓書き換えれば変わります。

 

 

この「書き換え」は記事編集エディターで簡単に出来ます

記事編集エディターに戻り、タブのショートコードを挿入してみましょう。「タブ」をクリックします。

 

すると、いろいろ設定するウィンドウが開きます。↓↓

 

例えば「有効なタブ」はタブの数を増やしたり減らしたりできます。

例えば「垂直」はタブのデザインが変わります。
↓↓このようになります。

 

このようにウィンドウの数値やはい、いいえの変更するなどして、ウィンドウ最下部の「ショートコードの挿入」ボタンをクリックすれば、コードが書き換えられた状態で挿入されます。

 

以上が「Shortcodes Ultimate」の使い方になります。

いろいろな事ができるので、試してみてください〜(^^)

 

もっと便利に!「プリセット」で設定を保存する

設定する項目が多くなるので、いちいち毎回設定するのは大変な場合があります。

基本的に最後の設定が引き継がれますが、お気に入りの設定を保存しておくことができます。

それを「プリセット」と言います。

 

設定ウィンドウの最下部の右側に「プリセット」というボタンがあります。

 

 

マウスオーバーすると更にウィンドウが開きますので、「現在の設定をプリセットとして保存」ボタンをクリックします。

 

 

またウィンドウが開き、プリセットに名前をつけます。自由にわかりやすくつけてOKを押します。

 

そうすると、「プリセット」ボタンの中に今保存したプリセットが追加されます。また同じデザイン、設定を使いたいときはそれを選べばOKです。

 

 

もっとショートコードを使いたい?

別デザインや機能のショートコードを追加できるみたいです。ですが有料版なので僕は追加していません。

購入ページへのリンクがWordPress管理画面のサイドバーに追加されます。
↓↓こちらの「アドオン」をクリックします。

 

もし好みのものがあれば購入も良いでしょう。

 

※「設定」のページがありますが特に使わないのでここでは割愛させていただきます。

 

よく使うおすすめのショートコード

田舎アフィリ
50種類もあるのですべて把握するのも大変です。何個かよく使うショートコードを紹介します。

ボタン

トップページへ

 

トップページに移動します

 

色や大きさ、ボタンの文字、ボタンの丸み、デザイン、アイコン、レスポンシブにするかなどたくさんの設定項目がありきれいなボタンを簡単に設置できます。

好みのデザインは「プリセット」で保存しておくと更に便利です。

 

QRコード

トップページ

このようなQRコードを別サイトで作る必要がなく「Shortcodes Ultimate」だけで簡単に作れます。

QRコード自体をあまり使わないかもしれませんが、覚えておくと便利です。

補足:QRコードはこうやって使うといいかも!

QRコードの使い方を何個か考えたのでメモとして残しておきます。

最近のiPhoneのアップデートでiPhoneのカメラでQRコードを読み込めるようになったので、QRコードを読んでみようと思う人も増えるかもしれません。

  • マニュアル系のYouTube動画や記事をスマホで見てもらいながらPCで作業してもらうようにQRコードを設置する
  • 関連記事紹介にQRコードも併記する
  • FacebookページやツイッターなどSNSのQRコード設置

 

文章強調する、ボックスとノート

こちらが「ボックス」
ボックスを作って強調できます
こちらは「ノート」色付きの枠を作って強調できます

黄色が強いですが色も自由に変更できてさり気なく強調もできます。

 

 

YouTube advanced

YouTube動画を挿入するショートコードです。

YouTube自体に埋め込みコード生成機能があるので使わないと思うかもしれませんが「advanced(高等)」な設定ができます。

例えば、記事を開いた時自動的に再生されるようにできたり、コントロールバーを消したり、大きさを変えたり、レスポンシブにしたりいろいろな高度設定ができます。

↓↓「Shortcodes Ultimate」で埋め込み

 

↓↓通常の埋込コードを使用

 

 

 

まとめ

ショートコードは手軽にかっこいいパーツを追加したりデザインを変えたり出来るので、ガンガン使うのがおすすめです!

 

 

問題点として、「AMP」というサイトの高速表示化のシステムがあるのですが、AMP表示のときにはショートコードは機能しません。

WordPressの場合、勝手にAMPになることはないので、よくわからないという方はこのことは無視して大丈夫ですが、もしサイトをAMP化しようとしている方はショートコードを使わない記事作成をしましょう。

※今後AMPも進化して使えるときが来るかもしれませんが。

 

 

田舎アフィリ

たくさんのショートコードがありすぎて全部は解説はしませんでしたが、面白いショートコードもあるのでいろいろ試して見てください〜(^^)

以上、WordPressプラグイン「Shortcodes Ultimate」の使い方でした!

 

 

ちなみにこのボタンは、当サイトで使っているWordPressテーマ「ストーク」のショートコードで作っています。

にほんブログ村 小遣いブログ アフィリエイトへ アフィリエイトランキング

1 個のコメント

  • こんにちは。
    ブログランキングからきました。
    「Shortcodes Ultimate」のプラグインは便利な機能ですね。
    図解で詳しく書かれていたので解りやすくて参考になります。
    情報ありがとうございます。

  • コメントを残す

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください