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

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

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

ショートコードって何だろう?

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

まずは,いつものように用語の説明からはじめましょうか。

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

「短いコード」があれば,当然ドコかに「長いコード」もあるわけで。

それはドコにあるのかと言うと,古くから書かれてきた,通常のWebサイト構築用言語,HTMLで書く書き方のことを「長いコード」と言います。

注1)
ちょっとウソつきました。一般的にはHTMLのことを「長いコード」とは言いません。説明の都合上ワタシが今名付けただけです,くれぐれもググらないでください。
注2)
「長いコード」は,HTMLだけのことを指しているわけではなかったりしますが,色々ややこしくなるので,ここではとりあえず,あのダラダラしたHTMLのコードを思い浮かべていだだければOKです。

「ダラダラと長く書いていたHTMLのコードを,チャチャっと短く書くことができる」

WordPressに組み込まれている夢のような仕組み。それが,「ショートコード」です。

このショートコードなるシロモノ,調べたトコロWordPress 2.5から導入された仕組みとのことでした。歴史は意外に浅いですね。

WordPressが普及してきて,様々な用途で使われるようになって,より多くの人が関わるようになってきた過程で,きっとこういう意見が出てきたのです。

「確かにWordPressの機能はドンドン進化しているけど,結局,文章の中に複雑なパーツやオシャレな機能を実装しようとすると,今まで通りHTMLでダラダラ書くことになるんだよな~。もう少しスマートなコードの書き方ってないのかしらね~?」と。

そもそも,WordPressは「Webサイトをカンタンに作れるようにしたシステム」ですので,基本はWebサイトを作るための言語であるHTMLに依存しています。

ところが。これは以前にもお話ししましたが,HTMLというものは,どちらかと言うと「文字や画像の装飾(太字や色文字,画像の枠線などの飾り付け⁠⁠」を得意とする言語ですので,⁠複雑なパーツ(たとえば,表)を作ったり,オシャレな機能(たとえば,グラフ)を作ったり」をすることにはあまり向いていません。

これは,前々回「Go Pricing」の時にも話に出ましたよね。表という「複雑なパーツ」を作ろうとすると,HTMLではやたら長ったらしいコードを書かないと実装できないので,⁠Go Pricing」は超便利,というオチになったわけです。

やりたいことはシンプルなのに,必要なコードが長すぎる。もっとシンプルなコードで実装することはできないだろうか?

そんな悩みを解消するためにWordPressが準備した仕組みが,⁠ショートコード」なのです

ずいぶんクドクド長々と説明しましたが,まずはとりあえず,⁠何やら便利なものなのね~」というイメージを持ってもらえればOKです。そう,ショートコードは便利で,使えるものなのです!

……まあ少々,ほんの少々ですが,書き方が「ユニーク」だったりしまして。いやいや,ムズカシイわけではないのですよ,ないのですが,少々ユニークなのです。難易度で言うと(コ)ムヅカシイ……くらい?

少々ユニークなことをイチから覚えるときには,⁠便利」という餌で釣っておかないと,みなさんの気力が湧かないとか湧くとか。そんな事情があったりなかったりしますからね。

イヤイヤ,大丈夫デスッテバー。便利デスッテバー。

ショートコードを使う際の注意事項

では,すっかり覚悟も決まったことですし(?⁠⁠,ショートコードの使い方のお話に移ります。

……えーと,その前に。注意事項をば。

実はですね。ショートコードは,⁠すべてのWordPressで同じように使えるわけではない」という変わった前提がありまして。

簡単に言うと,みなさんがお使いの「テーマ」によって,使えるショートコードが違います

……は?

おっと,⁠?」マークが頭上に出ましたね。

了解しました。ちゃんと説明します。

そうですね……見方を変えましょう。

WordPress開発チームは,ショートコードという便利な「仕組み(環境⁠⁠」を作りました。

その仕組みは一般公開されていて,技術さえあれば,誰でもショートコードを作ることができるようになっています。

つまり,極端な話をしていまうと,みなさんにその気があれば,ショートコードを自分で作ることも可能です。当然プログラミングが必要になりますので,この連載では触れないことにしますが。とにかくそんなこともできちゃいます。

アップル社が,iPhoneアプリの開発環境を一般公開していて,開発者がその環境を使って独自のアプリを作っているのと同じようなイメージです。

iPhoneに「アップル自身が作った標準アプリ」が搭載されているように,WordPressにも「WordPress開発チームが作った標準ショートコード」が搭載されています。

でも,みなさんのiPhoneに「サードパーティー製のアプリ」がたくさんインストールされているのと同じように,WordPressも「テーマ」という形で「サードパーティー製のショートコード」が組み込まれているのです。

標準もあるけど,さらにテーマを導入することで,そのテーマごとのショートコードが,ドドンと使えるようになるというわけです。

こういう前提がありますので,ここから書く内容は,この連載で導入した「The7」で用意されているショートコードが前提になります。イマドキのテーマには大概ショートコードが用意されていますので,みなさんもテーマのホームページに見にいってくださいね。

では,前提のお話が終わりましたので,実際に見てみましょうか。

「The7」で用意されているショートコードは,こんな感じです。

たくさんありますね~

たくさんありますね~

これらの見た目や機能を,ダラダラHTMLを書くことなく,「短いコード」でカンタンに実装できちゃいますよというわけです。

買ってよかった「The7⁠⁠,買ってよかった有料テーマ。知らなかったテーマの魅力がこんなところにも。うん,無駄使いじゃなかったね。良い買い物したね。あらためてそう自分に言い聞かせましょう。

著者プロフィール

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

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

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

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

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


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