頑張らない!でも諦めない!必死にならずにええかげん

WordPressで独自のショートコードをプラグインレスで設定

      2014/11/22

WordPress™の投稿本文内に対して埋め込み挿入を行いたいものがあるときに、
投稿本文内では動作しない場合はよくあります。

ビジュアルエディタに戻した際にタグが変更されてしまうものもあれば、
PHPコードのようにエスケープされ実行されないものもあります。

そうした本文内に対して埋め込みを行うことが困難な要素を、
埋め込んで表示したい場合には独自のショートコードを設定すると簡単に設置することができます。

そうしたfunctions.phpでショートコードを独自に作成する方法をご紹介します。

はじめに

functions.phpを編集すればプラグインなどでちょうどいいものが見当たらない場合でも、
自分で実現したい機能を自在に導入することができます。

functions.phpの編集を行うこと自体はテーマの編集から行うことができて、
好きに編集をすることができますが、
導入しているテーマファイルの編集を行った場合には、
テーマのアップデートによって編集内容が失われてしまいます。

functions.phpを編集するに当たっては面倒でも子テーマを利用して、
編集用のfunctions.phpを用意してから編集することをお勧めします。
WordPressのfunctions.php編集には子テーマを利用

functions.phpへのショートコード定義

functions.phpに対してショートコードを定義する際のもっとも簡単な例は以下のような感じです。
子テーマディレクトリに対して配置したfunctions.phpを編集します。

01_functions.phpの設置

functions.phpの設置

functions.phpに対しては以下のように記述しています。

これによって、ショートコード[my-shortcode]を投稿本文に挿入することで、
「my-shortcodeによって出力されています」と出力されるものです。

実際にショートコードを投稿本文内に挿入すると以下のように表示されます。

02_ショートコードによる出力

ショートコードによる出力

このようにして、投稿エリアに対して実行したいPHPコードをショートコードで定義し、
投稿エリアの好きな部分に対して挿入することができます。

応用例

こうしたショートコードの埋め込み方法は以下のように自在に応用することができます。

複数行HTML出力

たとえば、ショートコードを指定して直接HTMLを出力する場合でも、
行数の多いHTMLをreturnで記述するのは非常に面倒です。
そんな場合には以下でご紹介するような記述を行うと、簡単にHTMLを出力することができます。

WordPressの独自ショートコードを設定し複数行HTMLを出力

こうしたHTMLの出力ではWordPressの本文に埋め込みがうまくいかない場合が多い、
iframeタグを含むような埋め込みでは非常に便利です。

JavaScript出力

HTMLの出力例と処理方法は同じですが、
内容を変更すればJavaScriptでも簡単に出力を行うことができます。

WordPressの独自ショートコードを設定し複数行JavaScriptを出力

パラメータ指定による外部ファイル出力

また、ショートコードにパラメータを指定することによって、
出力を行うソースファイルを切り替えて、出力ソースを都度変更することも可能です。

WordPressの独自ショートコードによって埋め込み外部ファイルを指定する

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

今回は1行の簡単なPHPコードをショートコードにて出力を行いましたが、
PHPで実行できるソースであればどのようなものでも、ショートコード化することができ非常に便利です。

当然ながらショートコードですので、
IME辞書などに登録して呼び出して効率的に入力するようにすると便利です。

参考

ショートコード API – WordPress Codex 日本語版


WordPressはWordPress Foundation の登録商標(第5049965号)です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介
すべて展開 | すべて省略

Rakuten Promotion

ページ
すべて展開 | すべて省略

 - WordPress

  関連記事

eye_gravatar
Gravatarアカウントに外部プロフィールやWordPress(XML-RPCのAPI)を認証する

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
WordPressでTOPに固定ページ、リンク先に最新投稿を表示する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_facebook
Facebook™への共有をJetpack by WordPress.comで行う動作

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
08.カルーセル-Jetpack by WordPress.com

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
WordPress標準機能を利用してメール投稿する方法と設定

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
Jetpackのwordpress.com連携でエラーは競合が原因だった

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
WordPressのコメント入力者の名前の横に表示される空白は何か

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
19_01.投稿の一覧表示には、Jetpackのアーカイブ(archives)ショートコード埋め込み(各種条件指定例)

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
ヘッダー・フッターバー表示にはHeader and Footer Commander-wordpressプラグインを利用

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_jetpack
JetPack統計情報を導入したら念のためブログIDはメモしておこう

Google or AdMax Promotion(it) 禁断の機能がau公式 …