WordPressでショートコードを設定する方法

投稿日:

最終更新日:

カテゴリー:

テーマ開発を進めていく上で、特定のクライアント向けのテーマ開発の場合、入力の効率化を図るために独自のショートコードを設置したりすることがあります。

メリットは、使い方によっては格段にコンテンツの入力スピードを上げることができるという点です。(その名の通り)短いコードとちょっとしたプロパティ属性なんかを付属入力するだけで、簡単に面倒なコード入力を行ってくれたり、プラグインを動作させてくれたりします。

デメリットは、テーマに組み込む以上、そのテーマ限定の機能になってしまうため、仮にテーマを変更するようなことがあれば、過去に入力したショートコードの書き換えや変換などが必要となります。

基本的に独自のテーマを利用した運営をされる場合には採用したい機能の一つではありますが、好きな時にテーマを変更したいといったライトなユーザーに対しては、後々負債を背負わすことにもなりかねないため、十分な説明が必要となります。

手っ取り早くショートコードを実装する

functions.phpにこのように書くと実装できます。

shortcode_funcという部分とsampleという部分は任意で変更しましょう。

上記のコードを設定し、コンテンツ部分に[sample]サンプルです[/sample]と入力した場合、<span class="">サンプルです</span>と出力されます。

そして、[sample class=sample]サンプルです[/sample]と入力した場合には、classの中に値が入るため、<span class="sample">サンプルです</span>と出力されます。

カスタマイズもけっこう簡単

上記のclassのような形で属性を好きなように設定することができます。classの他にボタンとかであればurlなどを入れれてもいいでしょう。また、typeとか作ってボタンのデザインを変えられるというのもよくありますね。

上記のように属性を増やしていく場合には、

このような感じで増やしていき、CSSクラスに対応させたりURLに対応させたりすれば良いでしょう。

とても拡張性のあるWordPressショートコードAPIの紹介でした。

(※現在開発中のテーマは便利なショートコードもたくさん用意しました!)

コーディングや
WordPress開発のリソースが足りない!

オレインデザインでは、デザインデータからの HTML コーディングから WordPress テーマ・プラグイン開発まで幅広くウェブ制作に対応しています。

お気軽にお問い合わせください。

WordPress 6.5.x 対応版を出版しました

WordPress デフォルトテーマ Twenty Twenty-Four を使って、シンプルなブログやポートフォリオサイト、そしてコーポレートサイトを作りながら、ブロックテーマやサイトエディターの基本を理解することができます。