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

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

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

ショートコードの使い方

では,実践編に行きますよ。

ショートコードを使うには,2種類の方法があります。

その1:テキストエディタに,コードを入力する

まずは基本の使い方です。そのままズバリ,コードを入力します。

たとえば,こんな感じ。

コード:

[dt_blog_posts]

このコードは「投稿記事を表示するショートコード」なのですが,なんとこの行を書いただけで,⁠投稿記事一覧」ができあがります。

……ホントですかね?

……見てみましょうか。

こう書いて~

こう書いて~

ほーら~

ほーら~

おお!なんと!コードが化けて投稿記事一覧が現れましたね!

この投稿記事一覧を,いわゆる「長いコード⁠⁠,HTMLのソースコードで見ると,こんな感じになっています。

これでもまだ一部。長いですね~

これでもまだ一部。長いですね~

つまり,これだけの「長いコードが⁠⁠,たった1行の「短いコード」になったわけです。ね,確かにショートでしょう!?スゴいでしょう!?超便利そうでしょうっっ!?

……コホン。

基本的にすべてのショートコードは,⁠カッコ]があって,その中にまず「コードの名前」を書いて,さらに必要であれば「パラメーター」を続けて書いていきます。

先ほどの投稿記事を表示するショートコードに,細かいパラメーターを設定してみましょうか。

コード:

[dt_blog_posts type="masonry" column_width="370" padding="20" number="4" orderby="date" order="desc" category="blog"]

結構長くなりましたね。

何の設定をしたのか,パラメーターをひとつずつ見ていきましょう。

type="masonry"各記事をレンガ形式で表示しなさい
column_width="370"各記事の幅を370pxで表示しなさい
padding="20"各記事の間を20pxずつ空けなさい
number="4"記事は4記事表示しなさい
orderby="date"記事を日付順にソートしなさい
order="desc"記事を降順で表示しなさい
category="blog"カテゴリーが「blog」のもののみを表示しなさい

ふむふむ。

以上のパラメーターを設定すると,こうなります。

結果はこんな感じ

結果はこんな感じ

おお,確かに,先ほどとは違う表示形式になりましたね。表示項目や表示順も,ちゃんと設定したとおりに切り替わっています。うーむ,すごい。

……え?ちょっとパラメーターの設定が長いですか?

……いや,十分ショートな気もしますけど……ダメ?

わかりました!ご安心ください!

そんなワガママなみなさんには,次の方法をオススメしましょう!

その2:Visual Composerを使う

もうひとつの方法,それは「Visual Composer」を使う方法です。

「Visual Composer」です。覚えていますか?……そうそう,第42回に紹介したアレ。本文を自由自在に構成できちゃう,アレです(最近自分の記憶にサッパリ自信がない。そんなワタシと似たような症状をお持ちのアナタは,第42回にどーぞ⁠⁠。

第42回のときは,⁠Visual Composer」の基本的な部分の話が中心でしたので,ひとつひとつの「エレメント」については,それほどガッツリ触れませんでしたね。

実はあのひとつひとつのエレメント。基盤となっているのは「ショートコード」の仕組みなのです。

……急にムズカシイ話になってきそうな気がしますので。早めに実際の画面で見てみましょうか。はい,ドン!

先ほど見た投稿記事(ブログ)一覧,確かにそれっぽいエレメントがありますね

先ほど見た投稿記事(ブログ)一覧,確かにそれっぽいエレメントがありますね

試しに,ブログのエレメントを記事内に配置した後に,⁠Visual Composer」から「通常のテキストエディタ」に切り替えてみましょう。

一見よくわからないコードが溢れていますが……

一見よくわからないコードが溢れていますが……

表示されるコードをよーく見てください。ひとつひとつが[カッコ]でくくられているのがわかりますか?

どこかで見ましたね。この[カッコ⁠⁠。

しかも,⁠Visual Composer」上で出てきたパラメーター。それもどこかで見たようなパラメーターが並んでいたような気がします。

先ほどコードを手入力したパラメーターが,ズラッと

先ほどコードを手入力したパラメーターが,ズラッと

さーて,伏線が回収される時のゾワゾワっとする感覚,みなさんも感じていただけましたでしょうか?つまり,こういうことなのです。

  • WordPressがショートコードという仕組みを作り
  • サードパーティーがテーマの中に各ショートコードを作り
  • 入力の手間を省くためにVisual Composerが用意される

なんと,時代はここまで進んでいたのでした。コレちょっと感動しますね。

コードが打ちたくない,そんなアナタは,テーマと一緒に「Visual Composer」を導入しちゃいましょう。それで万事解決です。

著者プロフィール

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

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

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

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

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


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