NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

ショートコードでテーマフォルダ内の画像を効率よく参照する

bell賞味期限切れコンテンツ

この記事は公開または最終更新から850日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

お久しぶりの更新になります。最近なかなか記事を書けずに申し訳ないです。

さて、今回もCMS的な使い方をしてる方向けの記事になるとおもいます。

通常画像とかはメディアライブラリに入れて「メディアを追加」から入れることが多いと思うのですが、普段WordPressを使ってない人とかが業務利用で作成する場合なんかで、

予め静的なHTMLを組み上げてからHTMLモード(テキストモード)で一気に流しこむ

みたいな更新方法をとっている場合は、いちいちメディアライブラリの画像に差し替えるの、面倒ですよね。

そういう使い方をする場合は、殆どの場合、メディアライブラリを介さず、テーマフォルダにはいっている画像を直接参照し、アップロードもFTPで直接テーマフォルダに…ってパターンが多いようです。

でも、記事の中でテーマディレクトリの画像を参照しようとすると、

example.com/wp/wp-content/themes/mytheme/img/foo.png

みたいなながーいパスを書かなくてはなりません。

テンプレートファイルだったらば、get_stylesheet_directory_uri() 関数とか使えばいいんですが、投稿本文ではそれも出来ません。

というかPHP自体が標準では許可されていません。
本文にPHP使えるプラグインも有りますが、採用したサイトを納品したあとでトラブルが起こりやすい気がします。(前任者から引き継いだプロジェクトの一部にそういうのが有りましたが、どれもだいたい揉めてました)

さて、そこで登場するのがWordPressのショートコードという機能です。

有名ドコロだと Contact Form 7 という人気のお問い合わせフォームプラグインで使用されてますね。[と]でかこわれたコードを本文に入れるとフォームが表示される、あれです。

作ってみる

functions.php に以下のように追加します。

 すると、本文中で、

というショートコードを使えるようになります。

ショートコードは、ビジュアルだけでなく、テキストモードでも利用できましたので、

みたいにすることで、先ほどの長ったらしいコードの代わりにできます。

これならかなりスッキリさせることができますね。

事前にHTMLエディタやオーサリングソフトで組んでから流しこむ派の人は、流しこむ直前に画像のパスを一括置換でショートコードに差し替えてあげればいい感じにできそうです。

ショートコードの名前は自由に決められますので、もっと短くしてもいいでしょうけれど、他で定義されているショートコードと被ってしまうと上書きしてしまってプラグインなどが動かなくなったり、逆にプラグインのせいでショートコードがうまく動かないなんてこともありえますので注意したほうがいいかもしれませんね。

参考

関数リファレンス/add shortcode – WordPress Codex 日本語版

TAGS