WordPress技術ブログは、毎週月曜日の午前7時に更新!最新の情報をお見逃しなく!

Web制作の基本

これは便利!WordPressのショートコードで画像URLを指定する方法

WordPressのショートコードが便利!基本の作り方」という記事で、ショートコードの追加の方法をご紹介通り、Wordpressでは、簡単に自分でショートコードを追加することができます。今回は、このショートコードの具体的な使い方についてご紹介します。

WordPressの投稿画面の「メディアの追加」から画像を追加してもいいのですが、すでにあるhtmlをワードプレスの記事にするときに、画像をテンプレートファイルにFTPでアップロードして、URLをテキストエディターなどの一括置換機能を使ってURLをショートコードを使ったURLに書き換えると、スピーディに記事を追加することができます。

また、テスト用のサイトから本番用に移行する予定があるときも、テンプレート用フォルダの同じ階層に画像をアップすれば、記事内のURLを書き換える必要がないので、画像URLをショートコードを使って作成しておくと、移行時に手間を減らすことができます。

テンプレート内の画像を使った記事の投稿の方法

テンプレートで使われている会社ロゴなど、テーマディレクトリに保存されている画像を記事の投稿で使いたい場合に便利なショートコードをご紹介します。

function内でWordpressの関数である「get_template_directory_uri」を使うことで、有効化されているテンプレートディレクトリのURIを取得することができます。


function shortcode_tp( $atts, $content = '' ) {
return get_template_directory_uri().$content;
}
add_shortcode( 'tp', 'shortcode_tp' );

投稿ページでショートコードを使ってみる

例えば、テンプレートファイル一番上の階層に「image」というフォルダに「logo.gif」という画像が入っているとします。これを記事内に表示させたい場合は、記事の中に下のように記述すればOKです。


<img src="[tp /]/images/logo.gif" />

とてもすっきりとコーディングすることができました。

画像URLをショートコードですっきりと

ショートコードで画像URLを指定すると、画像を一括で置き換えたり、URLが変更になったときもスムーズに対応することができます。また、すでにHTMLがある場合に画像URLの書き換えもすっきりとしたコードで記述することができます。ぜひ使ってみてください。

WordPressでお悩みの方へ!
ABOUT ME
数藤圭介
株式会社ネクストアクション代表取締役、WEBディレクター、ワードプレス運営アドバイザー、ビデオグラファー。趣味:小旅行、ギター、硬式テニス