wordpressのショートコードを自作

記事公開日：2013/07/28
最終更新日：2023/10/17

新潟ホームページ制作【マザーシップ】です。

WordPressの投稿画面にショートコードを入れる方法をご紹介します。

テンプレートファイルのfunctions.phpに関数を記述するだけで、簡単に文字を呼び出すことができ、投稿が楽になります。

こんな時に便利

1)ビジュアルエディタ上で画像ファイルのパスやdivタグなどのHTMLを記述したいとき

2)頻繁に呼び出す文章(署名やPR文)をルーチン化したいとき

ショートコード作成の基本

早速、試してみましょう。

1)テンプレートファイルのfunctions.phpに下記を記述

function signFunc() {
return "新潟ホームページ制作<br /><a href='https://mothershipweb.jp/'>マザーシップ</a>";
}
add_shortcode('sign', 'signFunc');

これで、登録完了です。

2)Wordpressの投稿画面(ビジュアルエディタ)に下記を記述

[sign]

3)出力結果(htmlタグ)

新潟ホームページ制作
マザーシップ

簡単ですね!

文字を変更・追加する場合はfunctions.phpだけ変更すれば良く、メンテナンス性に優れています。

応用1:引数を使用して画像を呼び出し

画像の数が多い場合や別々のclassを付けたい場合は「メディア」からアップロードするよりもショートコードが便利です。

下記はテンプレートディレクトリにアップした画像ファイルを呼び出す関数です。

1)functions.php

function imgFunc($atts) {
$imgdir = get_bloginfo('stylesheet_directory') . '/images/';　//画像ディレクトリへのパス
extract( shortcode_atts( array(
'name' => 'filename',
'alt' => 'defalt', 
'class' => 'defalt',
), $atts ) );
return '<img class="'. $class .'" src="' . $imgdir . $name . '" alt="' . $alt . '" />';
}
add_shortcode('img', 'imgFunc');

画像ディレクトリやデフォルトの属性などは必要に応じて調整してください。

2)Wordpress投稿画面

[img name=mothership.jpg alt=マザーシップ class=red]

3)出力結果(htmlタグ)

<img class="red" src="http://hoge.jp/wp-content/themes/my-template/images/mothership.jpg" alt="マザーシップ" />

応用2:囲みタグを登録してビジュアルエディタ上でhtmlタグを使用

divタグなどもショートエディタを使えばビジュアルエディタ上で使用出来ます。

1)functions.php

//divタグ
function divFunc( $atts, $content = null ) {
extract( shortcode_atts( array(
'class' => 'default',
), $atts ) );
return ' . $content . ';
}

add_shortcode('div', 'divFunc');

2)Wordpress投稿画面

[div class=blue]マザーシップ[/div]

3)出力結果(html)

参考記事

1)Wordpress Codex

詳しい解説が上記サイトにありますので参考にしてください。