サルでき流 WordPressではじめる企業サイトの作り方

第47回 Webサイトが劇的にカッコよくなる!「ショートコード」を使いこなせ!(実践編)

この記事を読むのに必要な時間:およそ 5 分

ショートコードのおさらい

ということで今回は「ショートコード」のお話,実践編です。

まずは,前回の基本編のおさらいから行ってみましょう。

ショートコードをそのまま訳すと,⁠短いコード(プログラム⁠⁠」となります。

そう,つまり,⁠複雑やパーツやオシャレな機能を実装するために,ダラダラと長く書いていたHTMLのコードを,チャチャっと短く書くことができる」もの,それが「ショートコード」です。

とってもカンタン,すごーく便利。

それだけでも「使うしかない!」というものだったのですが,このショートコードにはもうひとつ進化形態がありまして。

実は,第42回の時に登場した,⁠Visual Composer」という「投稿記事や固定ページを,カンタンに構成することができるエディタ」で使っている,「エレメント」という仕組みが,この「ショートコード」の仕組みを発展させたものなのでした。

つまり,イマドキのテーマにおいては,「コードを書かなくてもショートコードが使えちゃう!」という状況になっているのです。

(何が何だかサッパリわからねえ。という方は,第42回第46回をチェック!)

素晴らしきかな近未来。

そんな便利野郎の「ショートコード(エレメント⁠⁠」について,今回は具体的に設置をしていきながら使い方をお話しします。

題しまして,⁠今すぐ使えるショートコード13選!⁠⁠,はじまりはじまり~!

今すぐ使えるショートコード13選!

それでは,実際にショートコードを設置していきますね。

とは言え,さすがにすべてのショートコードを紹介するのはページ数的に無理がありますので,すぐ使えそうなものを13個ほどピックアップしてみました。

どのショートコードも逸品揃いですので,まずはこの辺りが使えるようになれば十分だと思います。

では行きま……おっと。

はじめる前の注意事項がありました。前回もお話ししましたが,ショートコードはテーマやプラグインに依存しています。

ですので,ここでは,「The7」というテーマと,⁠Visual Composer」というプラグインで使えるショートコードを例として紹介しています。

みなさんが使えるショートコードについては,みなさんお使いのテーマの説明ページをご確認くださいませ。

「The7」「Visual Composer」だとこんな感じ

「The7」+「Visual Composer」だとこんな感じ

①Message Box

【代表的なパラメーター】メッセージボックスタイプ,メッセージボックススタイル,テキスト

画像

では,⁠Visual Composer」のショートコードからはじめます。

まずは,メッセージ欄を作るショートコードです。メッセージ欄のこの雰囲気,親切なWebサイトではたまに見かけますよね。

もちろんただのテキスト欄でも,メッセージ欄といえばメッセージ欄なのですが,こちらのショートコードを使うと,パラメーターを変えるだけで,⁠インフォメーション」⁠警告」⁠成功」⁠失敗」など,目的に応じた見た目に切り替わります。

「⁠⁠警告】年末年始はお休みです!」みたいな。

「⁠⁠成功】年末年始は十分休みました!」みたいな。

ユーザーさんに特別なメッセージを送りたいときに,使ってみてくださいね。

②Facebook Like

【代表的なパラメーター】ボタンタイプ

画像

Facebookの「いいね!ボタン」を作るショートコードです。これはもうWebサイトではすっかりお馴染みですね。

テーマによっては,わざわざショートコードで各記事に設置しなくても,標準機能ですべての投稿記事や固定ページに一律で表示するようになっているものもあります。

ですので,そんな場合は「ここぞ」という時に念押しで使う感じですね。もしかしたら,⁠いいね!」を押して貰える可能性が高くなる……かもしれません。

著者プロフィール

カワサキタカシ(かわさきたかし)

元アイ・ビー・エムERPコンサルタント,元アップル教育ソリューション開発者兼営業,他にも様々な経験を経て,人材育成会社『株式会社マイウェイ』を夫婦で起業。現在,同社の取締役兼なんでも担当。

「Webサイト」から「iPhoneアプリ」,「ビジネスサービス」から「会社」まで,『作ること』が好き。そして作る楽しさを誰かに『教えること』も好き。楽しく作る技術を学ぶコミュニティ,『サルでき.jp』をぐーたら管理中。

著書に『iPhoneアプリ開発塾』(技術評論社),『サルにもできるiPhone同人誌の創り方』(飛鳥新社)がある。

株式会社マイウェイ Webサイト
株式会社マイウェイ Facebook
カワサキタカシ Facebook
サルでき.jp


企業サイト作り(運用)にお困りの経営者さま・Webご担当者さま。ワタシ,『企業サイトを楽しく作る(育てる)ためのサポートサービス』もやっております。困り果てて現実逃避の小旅行に出かける前に,是非一度弊社Webサイトまでお気軽にご相談くださいませ。