あなたの生活をちょっと豊かにするLIFE STYLEマガジン【WEBLEDGE(ウェブレッジ)】

Shortcodes Ultimateの使い方を徹底解説!一段階上のサイトにレベルアップ。

   

shortcodes-ultimate-use-3

本日も”Webledge“をご覧いただきありがとうございます。管理人のけーすけ(@webledge_blog)です。

僕が2016年に出会ったwordressプラグインの中で堂々と一番便利だと言えるプラグインがこの「Shortcodes Ultimate」です。このプラグインを導入するだけで、wordpressサイトの見やすさがめっちゃ変わります。マジでため息がでる。

細かい説明や導入は別の記事でご紹介していますが、今回は本格的な使い方をできるだけ隅々までご紹介していこうと思います。

文字だらけのブログを運用している方は、ぜひこのプラグインを導入して一段上のサイトにレベルアップさせましょう!

スポンサーリンク

Shortcodes Ultimateの簡単な説明!

Shortcodes Ultimateは、これを入れるだけで簡単にちょっと印象的なサイト表示にできます。僕の場合は商品のレビューをする時に

良いところ惜しいところ

ここに良いところを吐き出すよ!

ここに惜しいところを吐き出すよ!

こんな感じで一目で良いところ悪いところをタブでタップして見ることができるようになります!他にも

立体的なボタンのデザイン

こんな感じで立体的なボタンのデザインも実装することができます。

このようにデザイン上でアクセントがあると、文字だらけの記事でもなんか見やすくまとまっているような気になりますね。

Shortcodes Ultimateの実践的な使い方

さっそくですが、Shortcodes Ultimateのより実践的な使い方をご紹介しています。

実装できるショートコードとしてはボタンやタブ、ノート、ボックス、カラムなどもっとたくさんのものがありますが、一つ一つ説明するわけではありません。

あくまでブログやサイトの記事でより使えそうと感じたものを詳しく説明していきます。

クリックで表示が切り替わるタブの実装

先ほどご紹介したような、ボタンのクリックで切り替わるタブの実装です。実際に吐き出すと上のような感じになります。

良いところ惜しいところ

ここに良いところを吐き出すよ!

ここに惜しいところを吐き出すよ!

こんな感じで実装してあると、特にスマートフォンでも見やすいですね!

コードは下記のような感じで実装しています。

su_tabsで全体を囲って、su_tabで各要素を囲っています。現段階では2つの要素しか表示されていませんが、もちろん2つ以上を実装することも可能です。

ですが!スマートフォンでの表示のことも考慮すると2~4程度に収めておくのが無難でしょうね。

タブのタイトルは「title=””」で実装できます。

 

ちなみに同じ容量でメニューを縦に配置するタブも実装できます。

Tab 1Tab 2Tab 3
Tab 1 content
Tab 2 content
Tab 3 content

こんな感じですね。

verticalをyesと指定してあげれば完了です。ただしスマートフォンでの見え方は同じになってしまいますのでご注意を。

クリックで開閉するアコーディオンの実装

クリックで開閉するアコーディオンボタンも実装ができます。いくつか入力してみましょう。

スポイラーのタイトル
スポイラーのタイトル
スポイラーのタイトル

 

この表示はご自分でクリックしながら動作を確かめてくださいね!スタイルはデフォルトとシンプル、ファンシーとありますが、どこまでがアコーディオンの内容なのかがわからないのでファンシーが一番使い勝手が良いですね。

コードは下記になっています。

レビューする製品の仕様など、見たい人にだけ見せるコンテンツとしては非常に便利ですね。

shortcodes-ultimate-use-1

ちなみにこんなにアイコンの種類も豊富なので、ぜひ色々試してみてください!

綺麗な引用文の実装

引用文も綺麗に実装できます。

これは引用文です。僕の名前をクリックするとwebledgeのトップに飛んじゃいます!けーすけ

こんな感じ。このコードは下記のようになっています。

su_quoteで囲んでしまえば引用の実装が完了します。「cite」にその引用元の名前、「url」にリンク先のURLを記載しましょう。

著作権の問題とかも最近かなり取り上げられているので、この辺はしっかりと実装しておきましょうね。

目立つボタンの実装

3Dなどの目立つボタンの実装も簡単にできます。

デフォルトボタンのデザイン フラットなボタンのデザイン ゴーストなボタンのデザイン 立体的なボタンのデザイン

こんな感じで様々なデザインのボタンを実装できます。

下記がコードとなります。

こればかりは投稿画面の「ショートコードを挿入」から「ボタン」を選択して実装した方が早そうです。

shortcodes-ultimate-use-6

shortcodes-ultimate-use-4

ボタンのスタイルだけではなくリンクの設定やそのリンクのnofollow設定、アイコンの設定、色の設定など様々な指定ができますので、ぜひ自分のサイトデザインに合うボタンのデザインを実装してみてください。

 

カルーセルで表示する画像の設定

カルーセル、いわゆるスライドショーでの画像の表示も簡単に実装可能です。

結構見やすいデザインではないですか?

コードは下記になります。

このように画像のIDをいくつか記入するだけですみます。でも画像のIDを指定するのはめんどくさい・・・と思っている人でも大丈夫!

shortcodes-ultimate-use-5

shortcodes-ultimate-use-2

「ショートコードを挿入」の中の「カルーセル」からメディアを指定できます!このようにすれば画像も簡単に指定できますね!自動再生の時間や画像の枚数なども自由に指定できるので、ぜひ挑戦して見てくださいね!

要約などを入れるボックスの実装

僕は要約や簡単なまとめなどを入れるボックスを実装しています。下記のような感じですね。

ボックスのタイトル
ここに要約とかポイントを入れますよ!

コードは下記です。

こんな感じで書くだけでグッと見やすくなりませんか?はじめはこれだけを実装しておいてもいいくらいですね!

まとめ:まだまだたくさんできることはありますけど・・・

Shortcodes Ultimateはマジでショートコードの種類が多いです。なので、今回は実践的なショートコードを抜粋してご紹介しました。

ちなみにデフォルトのままでも十分デザインとしてアクセントになりますが、さらに独自性を出したいのであればCSSもカスタマイズしていってもいいかもしれません。

ぜひ自分好みのものを作ってみてくださいね!

wordpressではこの本を激推し!

wordpressの基礎から学べます

良いところ惜しいところ
  • 筆者が可愛い
  • 初心者でも読める
  • 結構分厚いので隅々まで読むのに時間がかかる

次回記事の予告!

素の髪質でナチュラルなセットを!資生堂のパウダーワックス「パウダーシェイク」のレビューを執筆中!

↓↓気になる方は登録を!

 - wordpress , , ,

PAGE TOP