WordPressのページ編集で役立つショートコードの利用方法

ハイブWordPress(ワードプレス)のショートコードについて理解するのがスマートカット(賢い近道)です!

WordPressのショートコード機能を使うと、PHPプログラムを書かずにWordPressの機能を呼び出したり、ページのレイアウトや装飾などデザイン面をいじることなど、WordPressの機能を大幅に拡張することができます。

## ショートコードとは

ショートコードをは「ショート(短い)コード(命令)」という名前の通り、WordPressに対して何か命令をするためのものです。

functions.phpやテーマ・プラグインにショートコード用のPHPプログラムを用意しておくと、ページに[](ブラケット)を利用したショートコードの記述を行うことで、用意したPHPプログラムを呼び出すことができる機能のことです。

### ショートコードの例

あなたが見ることああるショートコードと言えば、画像のキャプションなどに使われるWordPressが標準で用意しているcaptionショートコードでしょうか。

例えば、次の記述はページ編集で「テキストモード」を撰んで「メディアを追加」でハイブくんの画像を表示させたものです。

HTMLのimgタグのまわりをcaptionで囲んだ記述が見られると思いますが、このcaptionがショートコードと呼ばれるものです。

“`
[ caption id=”attachment_nn” align=”alignleft” width=”80″ ] < img src="path/to/image.jpg" alt="画像" width="80" height="80" />
[ /caption ] “`

### 3つあるショートコードの呼び出し方

ショートコードはその機能によって呼び出し方が次の3種類あります。

機能に応じて使い方が変わりますので、提供元のドキュメントなどを見るのが良いでしょう。

#### オプション無しの呼び出し

もっともシンプルな呼び出し方で、ショートコード名を書くのみです。
単一の機能を呼び出すのに利用する記述方法です。

“`
[ shortcode ] “`

#### オプション有りの呼び出し

ショートコードを呼び出す際、何かしらオプション(引数)を渡す記述方法です。

次の例では、idオプションにvalue_idを、widthオプションに80という値を渡しています。
このように複数のオプションを渡すことができます。

“`
[ shortcode id=”value_id” width=”80″ ] “`

#### 囲み付きの呼び出し

「/」無しの「開始ショートコード」と、「/」有りの「終了ショートコード」の間に、コンテンツを挟み込む形で使う記述方法です。

オプション(引数)の情報が複数行にまたがるなど、量が多い場合に使うことが多いですね。

オプションと併用した記述も可能です。

“`
[ caption ] コンテンツ
[ /caption ] “`

## ショートコードの増やし方

ショートコードの実態はPHPプログラムなので、作られていないショートコードを呼び出すことはできません。

WordPressが標準で提供している以外に拡張する方法として、次の3つの方法が用意されています。

– テーマに付属のものを使う
– functions.phpにPHPプログラムを記述する
– プラグインで作る・用意したものを利用する

それぞれの違いを簡単に説明します。

### テーマに付属のものを使う

WordPressのデザインを司るテーマにはPHPプログラムが記述できます。

とくに有料のテーマの中には、より良く魅せるための機能をショートコードで提供しているものが多いです。

### functions.phpにPHPプログラムを記述する

functions.phpとは、WordPressがユーザーに対してPHPプログラムを記述するために用意したファイルです。

テーマの中に含まれるためテーマを切り替えると使えなくなってしまいますが、カスタマイズを紹介するブログなどで良く使われる方法です。

編集をミスるとWordPress自体が動かなくなる場合があること、子テーマを利用しないとテーマのアップデートで消えてしまうこと、などの理由から弊社ではおすすめしていません。

### プラグインで作る・用意したものを利用する

テーマに依存したり、functions.phpの書き換えを行う際の不都合なくショートコードを拡張するには、自分でプラグインを作成するか、ショートコードを作るプラグインを利用します。

どちらもショートコードを作成する技術(PHPやHTML/CSSなど)が必要になりますが、WordPressの公式サイトでは、ショートコードを簡易的に作り出すプラグインや、便利なショートコードを詰め込んだものが提供されています。

こちらを利用した方が初心者にとっては便利でしょう。

## ショートコードを用意するプラグインの例

ここでは、ショートコードを利用するのに便利なプラグインを2つご紹介いたします。

### Shortcodes Ultimate

Shortcodes Ultimateプラグインは、あらかじめ用意されたショートコードを利用してページのレイアウトや装飾を行えます。

40種類以上のショートコードを利用できます。

Shortcodes Ultimateのショートコード一覧

プラグインをインストールして有効化すると、ページ編集画面の上部にショートコード挿入ボタンが追加されます。そのボタンをクリックすると、機能の一覧画面から様々なショートコードを挿入することができます。

どのような機能なのかのヘルプも充実しており、またショートコードによっては結果のプレビューもできるので、ミスしづらい作り込みが可能です。

Shortcodes Ultimate – WordPressプラグイン

### Post Snippets

Post Snippetsプラグインは、HTML/CSSやPHPプログラムを作成し管理できます。
ショートコード作成のためのページ作成の際に呼び出せるようにできます。

プラグインをインストールして有効化すると、WordPress管理画面に「設定|Post Snippets」メニューが表示され、複数のショートコードを管理することができます。

WordPress Post Snippetsプラグイン

HTMLのコードだけでなく、PHPプログラムのショートコード化も簡単に行えます。
上記の例であれば、次のショートコードが利用できます。

“`
[ shortcode-html ] [ shortcode-php ] “`

## まとめ

ショートコードはWordPressの脱初心者の段階では必須と言える知識です。

自分ですべて作るのは大変ですが、紹介したプラグインを利用するなどすれば、ずいぶんと楽に作り込みを行うことができます。

あなたのコンテンツをもっと世の中に広めるため、ステップアップためにもまずは既存のショートコードを使いこなし、独自のショートコードを作るところまで手を付けてもらいたいと思います。

ITを活用したいのに専任者がいなくて困っている企業向けの相談と実務サポートを行う「ITコンシェルジュ」というサービスと、WordPressの相談と実務に特化した個人事業主向けのサービス「WordPress安心サポートサービス」を提供しています。 美味しい料理とお酒、デジタルガジェット、ジョジョ・ガンダム・マクロス、不動産投資が趣味で、よく寝る奥さんとよく寝る娘2人、よく寝るネコが家族です。 → 詳しいプロフィールはこちら

【最後まで読んでくれたあなたにプレゼント】

あなたは、24時間365日、自分の代わりに集客し続けてくれるWebサイトを作りたい!と思ったことはありませんか?

私はこれまで500以上のWebサイトの構築と運営のご相談に乗ってきましたが、Webサイトを作ってもうまく集客できない人には、ある一つの特徴があります。

それは、「先を見越してサイトを構築していないこと」です。

Webサイトで集客するためには、構築ではなく「どう運用するか」が重要です。

しかし、重要なポイントを知らずにサイトを自分で構築したり、業者に頼んで作ってもらってしまうと、あとから全く集客に向いていないサイトになっていたということがよく起こります。

そこで今回、期間限定で

『10年集客し続けられるサイトをワードプレスで自作する9つのポイント』

について、過去に相談に乗ってきた具体的な失敗事例と成功事例を元にしてお伝えします。

  • ワードプレスを使いこなせるコツを知りたい!
  • 自分にピッタリのサーバーを撰びたい!
  • 無料ブログとの違いを知りたい!
  • あとで悔しくならない初期設定をしておきたい!
  • プラグイン選びの方法を知っておきたい!
  • SEO対策をワードプレスで行うポイントを知りたい!
  • 自分でデザインできる方法を知りたい!

という方は今すぐ無料でダウンロードしてください。

期間限定で、無料公開しています。

普段お使いのメールアドレスを入力し、ボタンをクリックしてお申し込みください。

メール講座『10年集客し続けられるサイトをワードプレスで自作する9つのポイント』

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です