wildhawk
WordPressでショートコードを自作しよう!
面倒な作業を自作のショートコードで便利に使う
WordPressのショートコードは『「Shortcodes Ultimate」を使ってみよう』でプラグインを紹介しており、ボタンを設置したり、動きのあるWebページをCSSを知らなくてもお手軽に設置することができます。
ただ「Shortcodes Ultimate」に用意されたショートコードだけでは、繰り返し同じ表示をする場合などはHTMLを繰り返しコピーしたり、面倒な作業を簡略化する事ができない。
そんな場合は、自作でショートコードを作ることで、面倒な作業が簡略で、効率的に作業ができるので、是非、ショートコードの自作を試して欲しい。
こんな人にオススメ
WordPressで面倒な繰り返しの内容を手軽に設置したい
WordPressでバナーや広告を一括管理したい
WordPressで別のページでも同じ内容を表示させたい
PHPの知識が必要だが、WordPressで面倒な繰り返し作業を簡略化できるので、是非使って欲しい
もくじ
WordPressでショートコードを自作する特徴
WordPressのショートコードは2種類
WordPressでショートコードを自作するメリット
WordPressでショートコードを自作するデメリット
WordPressのショートコードとウィジェットの違い
WordPressでショートコードを自作する準備
子テーマで作成
関数ファイル（functions.php）のバックアップ
WordPressでショートコードを実装
子テーマの関数ファイル（functions.php）を編集
関数ファイル（functions.php）にショートコードをPHPで記述
固定ページで自作したショートコードを呼び出し
開始タグと終了タグのあるショートコード
引数で動作を制御するショートコード
WordPressにはショートコードという便利な機能があります。
ショートコードは[]で囲われた短いコードを記述することで、あらかじめ組み込んでいるプログラムを呼び出し、よく使う定型文などを表示する便利な機能です。
記事や固定ページで[samplecode]などを記述することで、そのコードで呼び出されたプログラムからパーツや定型文などを表示させることができます。
文字数が多い内容を、都度コピーして使うのは面倒で、あらかじめ登録したプログラムを呼び出すことで、簡単にミスなく時短でWebページを作成することが可能になります。
PHPで記述するプログラムは、初心者には敷居が高いかもしれません。しかし、繰り返し作業で面倒と感じているなら、一度チャレンジしてみましょう。
WordPressのショートコードは以下の2種類の使い方があります。
| 単体のショートコード | [shortcode_test] 終了タグがない単体で使うタイプのショートコード |
|---|---|
| 開始タグと終了タグのあるショートコード | [shortcode_test]文字列[/shortcode_test] 開始タグと終了タグがあり、コンテンツを囲んで使うタイプのショートコード |
どちらを使うかは、単発で表示させる場合と、文字列を使って表示させる場合で使い分けると良いと思います。
ただ、関数名（上記の例だとshortcode_test）については、他の関数と名前が同一だとショートコードが動きません。特にWordPressやテーマ内で使われる関数と同じ名前をつけるとWordPressが動かなく（画面が真っ白に）なるので、関数名は重複しないように注意して命名してください。
WordPressでショートコードを使う最大のメリットは、作業をミスなく時短にできる事です。
パーツや定型文、バナーや広告コードなどをショートコードで作ることで、ページの編集が非常に楽になります。
特にブログ作成は毎日のように記事を作っていくため、作業の時短は非常に有効な技術です。実際に毎回、同じ作業を繰り返すため、面倒だと感じている人は多いでしょう。
もちろん、ショートコードを使えばミスなく動作を呼び出せるのも利点なので、最初のプログラムさえ間違えなく作成すれば、ショートコードを記述するだけで、誤字や広告コードの記述ミスなどがなくなります。
個人的には「引数（パラメーター）」が使えることが最大のメリットだと考えています。文字や数字を渡せるのでclass名を指定したり、プログラムで表示を制御したり、様々な仕組みが利用できます。詳しくは「引数で動作を制御するショートコード」で説明します。
WordPressでショートコードを使うデメリットは記述を間違えるとサイトが表示されない場合があることです。
WordPressはPHPで動いていますが、1文字でも間違えるとPHPは正常に動作しなくなり、サイトが真っ白で何も表示されなくなるか、エラー表示されます。
そのため、WordPressでショートコードを使うなら、ある程度PHPでプログラミングできる知識が必要です。
画面が真っ白になると、頭の中も真っ白になるので、パニックになると思います。そのためPHPファイルはバックアップが必要で、スグに元に戻せる状態で作業する必要があります。
PHPの記述は慣れるし、デメリットよりメリットを感じる事が多いので、初心者でも是非、WordPressでショートコードの自作にチャレンジして欲しい。
WordPressでショートコードと同じような機能に「ウィジェット」があります。
ウィジェットも機能やコンテンツを繰り返し設置でき、ショートコードと同様の機能があります。
ウィジェットはコーディングをしなくてもドラッグ&ドロップでレイアウトできる手軽さがあり、主にサイドバーやフッターで利用しますが、テーマが定義した「ウィジェットエリア」のみで利用することができます。
| 項目 | ショートコード | ウィジェット |
|---|---|---|
| 設置場所 | 投稿本文・固定ページなど | サイドバー・フッターなど |
| 使いやすさ | 記述が必要だが柔軟 | GUIで簡単に操作 |
| 主な用途 | ページごとの特定機能表示 | サイト全体の共通パーツ表示 |
| カスタマイズ性 | 高い（条件分岐や引数も使用可能） | 限定的 |
どちらを使うべきか迷う場合は、設置場所と機能で決めると良いと思います。
WordPressでショートコードを自作する際は、上記デメリットで記載した通り、サイトが真っ白になり動かなくなる可能性があるので、リスクを少なくするためにも、以下の様な準備が必要です。
WordPressでショートコードを自作する場合、functions.phpファイルを編集しますが、このファイルはテーマのバージョンアップで更新した際に、追加したコードが消えてしまいます。
そこで、テーマが更新されても追加したコードが消えない様に、子テーマを作るのが一般的な方法です。
子テーマを作るメリットは、自作のショートコードだけでなくCSSなどを追加した場合も、バージョンアップで追加した内容が消えない対策として非常に有効な機能です。もちろん子テーマを作らなくても、自作のショートコードは作れますが、この際に是非、子テーマを用意することをオススメします。
実はこのサイトもショートコードを使うまでは、
子テーマを使っていませんでした。。。orz
WordPressで自作のショートコードを作る場合、関数ファイル「functions.php」を編集しますが、このファイルに追加したコードが誤っていると、サイトが真っ白になり表示されなくなる可能性があります。
そこで事前に「functions.php」をFTP等でバックアップを取ってください。
「functions.php」ファイルは通常「/wp-content/themes/テーマの名前」のディレクトリに保存されています。
※子テーマを使っている場合は、子テーマのフォルダにあるfuncitons.phpをカスタマイズしてください。
「functions.php」ファイルをバックアップしなくても、自作のショートコードは作れますが、万が一、動作しなくなった場合に元に戻せないと、サイトが復帰できなくなるので、バックアップは必ず取ってから作業してください。
更にアドバイスとしては、バックアップするファイルには、日付を付けるのをオススメします。理由は、複数のショートコードを追加した場合など、追加した時でなく後日不具合が発生した場合に、いつ何を追加したのか、後から追跡もできるからです。
例) functions.php_20250510
ここから具体的にWordPressでショートコードを自作する方法をご紹介します。
子テーマの関数ファイル（functions.php）を開きます。
①左カラムで「外観」→「テーマファイルエディター」をクリック
②編集するテーマを選択から、編集するテーマ（子テーマ）を選び「選択」ボタンをクリック
③テーマファイルから「functions.php」をクリック
既にショートコードを追加している場合は、
その下に追加する様にしてください。
今回はワンポイントを表示するショートコードを作ってみたいと思います。
以下の様にfunctions.phpに追記してみましょう。
See the Pen ショートコード01 by 山内孝幸 (@hezfscev-the-looper) on CodePen.
functions.phpファイルの最後に記述されている「?>」の上の行に追加しましょう。
functions.phpに記述したショートコードの名称を、以下の様に固定ページに記述します。
［onepoint］
※コピーする場合は［］を半角にしてください。
※コピーする場合は［］を半角にしてください。
上記の様に記述すると、以下の様に表示されます。
※別途cssの記述が必要です。
ワンポイント
上記では単体のショートコードの使い方を説明しましたが、今回は開始タグと終了タグのあるショートコードを説明します。
See the Pen ショートコード02 by 山内孝幸 (@hezfscev-the-looper) on CodePen.
function.phpに上記のコードを追加しました。
単体のショートコードとの違いはonepoint_shortcode2の引数に「$atts」「$content」が追加されたことです。
| 第一引数 例 : $atts |
固定ページからプログラムに引数を渡す際に使います。 ※詳しくは「引数で動作を制御」で説明 |
|---|---|
| 第二引数 例 : $content |
固定ページでショートコードタグで囲まれた文字列を引数として渡します。 尚、何も文字列が引き渡されなかった場合にPHPのエラーが表示されるので、 $contsnt = null と記載してエラーが発生しない様に対策しています。 |
※引数の「$atts」「$content」の名称は自由に設定が可能です。
今回は第一引数の「$atts」は使っていませんが、第二引数を使い、以下の様に固定ページに記載しました。
［onepoint2］注目!!!［/onepoint2］
［onepoint2］ここテストで出ます［/onepoint2］
※コピーする場合は［］を半角にしてください。
［onepoint2］ここテストで出ます［/onepoint2］
※コピーする場合は［］を半角にしてください。
すると、ショートコードのタグで挟まれた文字列で自由に表示することが可能です。
注目!!!
ここテストで出ます
今回はショートコードに引数を渡して表示を制御したいと思います。
See the Pen ショートコード03 by 山内孝幸 (@hezfscev-the-looper) on CodePen.
function.phpに上記のコードを追加しました。
今回はonepoint_shortcode3の第二引数を「shortcode_atts()」で初期値して設定しています。もし文字列が何も無い場合はPHPのエラーが表示されるので、それを防いでいます。
それでは、固定ページで以下のショートコードを記述しましょう。
［onepoint3 title=”オレンジのタイトル” color=”orange”］オレンジの本文<br />2行目<br />3行目［/onepoint3］
［onepoint3 title=”緑のタイトル” color=”green”］緑の本文<br />2行目<br />3行目［/onepoint3］
［onepoint3 title=”その他のタイトル” color=”sonota”］その他の本文<br />2行目<br />3行目［/onepoint3］
※コピーする場合は［］を半角にしてください。
ショートコードタグに記載した「title」と「color」で表示を制御することができました。
オレンジのタイトル
オレンジの本文
2行目
3行目
緑のタイトル
緑の本文
2行目
3行目
その他のタイトル
その他の本文
2行目
3行目
WordPressでショートコードを自作する際の注意点を説明します。
何度も言いますが、ショートコードを自作する際に追加するプログラムはWordPressの動作に影響を与えるため、PHPの記述でエラーが発生しないように細心の注意をする必要があります。
ショートコードはPHPで記述しますが、PHPの機能としてコメントが可能です。
自分で追加したショートコードでも、数年後に何で追加したか忘れてしまうこともるので、できるだけ、何のショートコードなのか分かるようにコメントを追加しましょう。
コメントの書き方は2種類あります。
//コメント①
/*
コメント②
複数行でコメントが可能
*/
コメント①の「//」を追加する方法は、記述以降をコメントにする方法です。
例えば、関数の行末に処理の流れをコメントするなどにも使います。
コメント②は「/*」から「*/」の間をコメントにする方法です。
1行で説明が難しい内容を複数行で説明する際に使います。
どちらの方法でもコメントを残すことができますが、面倒なので、コメント①を使うことが多く、コメント②は、作成時期など細かな情報まで記載する時に使うようにしています。
functions.phpに記述したショートコードが、サイト内に反映されない場合は、記述したPHPや固定ページに追加したショートコードに入力ミスが無いか確認してください。
- スペルミスをしていないか?
※関数名を間違っていることがよくある - 全角スペースが含まれていないか?
※全角スペースが非表示になっているとみつけられない - 英数記号が全角になっていないか?
※コピーすると全角に気が付かない
他にも、テーマファイルエディタで「ファイルを更新」を押した際に、PHPのエラーが発生する場合は、()や{}が対になっていない場合がよくあるので、冷静に内容を確認して、エラーを取り除いてください。
今回はWordPressでショートコードを自作する方法を説明しました。
簡単な繰り返しならウィジェットが便利ですが、複雑な処理が必要な場合はショートコードが便利です。
以前、社員を20人紹介するサイトを作っていましたが、ページ下に他の人のリンクを、それぞれのページでHTMLを書いていましたが、新人君に「プログラムで制御できませんか?」と言われて、恥ずかしい思いをしたことがありました。
その時なぜショートコードを思い出せなかったか疑問ですが、20人分のHTMLファイルを作り、固定ページで表示している人を引数で渡して、その人以外のHTMLファイルをインクルードして表示するショートコードを作りました。
最初に20人分のHTMLを作るのは面倒でしたが、後日、修正が入った時は、1ファイルだけ修正すれば良く、もし全てのページにHTMLで記述した場合は、20ページの修正が必要だったので、ショートコードで作って良かったと思います。
PHPはちょっとハードルが高いと思いますが、編集作業を効率化することができ、面倒な作業が楽になるので、是非ショートコードの自作にチャレンジしてみてください。
素材サイトのご紹介
このサイトでも活用しているオススメの素材サイトです。
是非こちらのバナーからご利用ください。
wildhawkからも写真素材を提供しています。是非ご活用ください