こんにちは、てっちーです。今回のテーマはWordPressのショートコードを作成する方法についてです。
なんとなく使ってしまいますが、ショートコードはPHPで書かれた関数をWordPress上で実行をするための手法です。自作のPHP関数をWordPress上で実行するには、ショートコードを作る必要があるということで、ショートコードを作っていきたいと思います。
ショートコードを知りたい方は、ショートコードって何？ 仕組みと効かないときの原因と対策についてを読んでみてください。
ショートコードの作り方
まずはざっくりショットコードの作り方の手順を紹介します。
- テーマのfunctions.phpに好きな関数を追加する。
- 追加した関数をショートコードとして追加する。
実はたった2ステップでできます。こうして作ったショートコードをWordPressの記事へショートコードを張り付ければ、使うことができます。
functions.phpを編集する
functions.phpはwp-contentの中にある
functions.phpはワードプレスのインストールディレクトリから下記のディレクトリの下にある、現在有効にしているテーマのディレクトリ内にあります。
wp-content/themes
functions.phpの編集は子テーマを使うと運用が楽になります。こちらのWordPressの子テーマを使ってテーマの編集をしよう！の記事を参考に設定してみてください。
いまいち上記の説明ではfunctions.phpの場所が分からなければ、WordPressのファイル構成について書いたWordPressのデータ構造 について調べてみたの記事を見ていただければ理解できると思いますので参考にしてみてください。
functions.phpの編集方法
functions.phpを編集するためには3つの方法があります。
- WordPressの管理画面の外観から、テーマの編集を選び、そこで編集する。
- FTPでファイルをローカルに持ってきて編集する。
- SSHなどでターミナルをサーバーに接続して直接編集する。
1番目は簡単に編集が開始できますが、functions.phpにエラーを入れてしまうと管理画面自体が表示できなくなるのでお勧めできません。必ず2番か3番目の方法で編集を行ってください。
functions.phpへショートコード追加（引数なし）
それではfunctions.phpに下記の内容を追加してください。関数内の文面を変えることで機能を変えることができます。好きな形にカスタマイズしてください。
// 新規関数の追加
function sc_func0(){
// 関数を実行するとretrunで返した文章が表示される
return "<span style=\"color: red; font-size: 24px;\">ショートコードです</span>";
}
// ショートコードの追加
add_shortcode( 'sc0' , 'sc_func0' );
add_shortcode について
add_shortcodeがとある関数をショートコードとして登録する関数です。ショートコード名と関数名を指定し、それらを関連付けて登録します。
add_shortcode(‘ショートコード名’ , ‘関数名’);
ショートコード
上記で追加したショートコードは次の通りに記事に記載すれば実行できます。
[sc0]functions.phpへショートコード追加（引数あり）
引数ありの場合は次の通りです。extract(～の部分は引数の初期値の設定になります。
第1引数の$paramは引数を含んだ連想配列で、キーが引数名、値が引数の値になります。この例の引数は、sizeとcolです。sizeを変えると文字サイズ、colを変えると文字の色を変更することが可能です。
第2引数の$txtはショートコードで挟んだ文字列を取得できます。下記の例ではこの文字列を表示します。こちらを省略することも可能です。
function sc_func1($param,$txt="") {
extract(shortcode_atts(array(
'size' => 28,
'col' => "red"
),$param));
return "<span style=\"color: ".$col."; font-size: ".$size."px;\">".$txt."</span>";
}
// ショートコードの追加
add_shortcode( 'sc1' , 'sc_func1' );ショートコード
上記で追加したショートコードは次の通りに記事に記載すれば実行できます。ショートコードの機能としては色とサイズを指定して文字を表示できます。
[sc1 size=28 col="blue"]この文字が青く表示されます。[/sc1]まとめ
今回の手順で行えば簡単にショートコードを作ることができます。もし何か繰り返し使うものがあれば、一度ショートコードを作ってしまえば、便利だと思います。ぜひ使ってみてください。
コメント