どうも、カッパです。
今回は僕がクライアントのホームページを制作するときに使っている、便利なショートコードを紹介します。ちなみに1.3倍という数字に根拠はありません。でも確実に使えます。
今回紹介するのは
固定ページや投稿の記事内でWordPress本体のURLを呼び出すショートコード
です。
どんなときに効果的かというと、
- 本番とテスト環境のディレクトリ構成が異なるとき、URL修正作業が軽減される
- テーマフォルダのパーツ（画像やJavaScriptファイルなど）を参照するときにURLの記述が簡単・確実になる
こんな感じです。
それでは次から、ショートコード作成に入ります。
自分のWordPressにオリジナルのショートコードを追加してみる
では早速「functions.php」に、以下のコードを追加しましょう。
// 記事内でWordPressのURLを呼び出すショートコード
function call_wp_url( $atts, $content = '' ) {
if ( $atts[0] === 'parent' ) {
$str = esc_url(get_template_directory_uri().$content);
} elseif ( $atts[0] === 'child' ) {
$str = esc_url(get_stylesheet_directory_uri().$content);
} else {
$str = esc_url(home_url().$content);
}
return $str;
}
add_shortcode( 'wp_url', 'call_wp_url' );
これで準備はOKです。
functions.phpを編集するときは、自分のPCで編集を行ってからファイルをアップロードするようにしてください。
WordPressの管理画面から直接編集を行うと、記述ミスがあった場合に何も表示されなくなって焦ることになります。焦るだけならいいのですが、最悪復旧できなくなることもあるので、注意してください。
ショートコードを実際に表示してみる
それではfunctions.phpに登録したショートコードを実際に使ってみましょう。
今回のショートコードは、
- サイトのURLを表示
- テーマディレクトリのパスを表示
- 子テーマディレクトリのパスを表示
の3パターンが使えます。
サイトのURLを表示させる場合
次のショートコードを投稿エディタ内で記述してみましょう。
あなたのホームページのURLは「[wp_url]」です。
半角の角括弧で「wp_url」を囲んだものがショートコードです。
これは、ビジュアルモード、テキストモードのどちらで記述してもショートコードとして動作します。
結果は...
あなたのホームページのURLは「https://kappasta.com」です。
ショートコードの部分がURLに変換されているのが分かります。
実際には、テキストモードでaタグ中のhref属性で使うことがメインになると思います。
こんな感じでしょうか
<a href="[wp_url]/contact/">お問い合わせはこちらから</a>
これで「/contact/」より前の部分は、現在使っているホームページのURLが表示されます。
こんなケースで有効かも
たとえば、本番環境は「https://example.com/」で、テスト環境が「https://example.com/test/」だった場合。
リンク先に「/contact/」だけを記述してしまうと、テスト環境でみてほしいのに「https://example.com/contact/」が表示されてしまいます。
また、それを防ぐためにフルパス（https://example.com/test/contact/）を記述した場合、本番環境に移行した場合にリンクの修正を忘れると、当然、テスト環境のリンク先が表示されます。
このショートコードを使用することで、そういうミスを防げるとともに、本番移行の際のURL修正という手間を減らしてくれます。
もちろん、本番とテストでドメインが違う場合にも有効です。
ショートコードを使う際の注意点
このショートコードに関して、ひとつ注意があります。
[wp_url]で呼び出されるURLの末尾には「/（スラッシュ）」が付かない
ということです。
ショートコードに続いてURLを書く際に、先頭に「/」を付けるのを忘れないようにしましょう。
2. テーマディレクトリのパスを表示させるにはショートコードに引数を追加する
そしてこのコードは別パターンにも対応します。
テーマディレクトリまでのパスを表示させるには、先ほどのショートコードに引数を加えます。
[wp_url parent]
例 → https://kappasta.com/wp-content/themes/affinger5
書き方は「wp_url」の次に半角スペースで「parent」を追加です。
たとえばテーマに内包されている「img」ディレクトリにある画像を表示させたい場合は、
<img src="[wp_url parent]/img/example-image.jpg" alt="example-image">
これでテーマディレクトリまでのパスを取得し、URLを補完してくれます。
3. 子テーマを使っている場合は「child」を追加
子テーマまでのパスを表示させる場合は
[wp_url child]
例 → https://kappasta.com/wp-content/themes/kappasta
これでOKです。
他のURLもショートコードで呼び出せるようにしたい！
サイトによっては、画像やCSSを、WordPressとは関係のない別ディレクトリ
例 → https://example.com/path/to/imgdir
などで、一元管理している場合もあります。
案件によってはショートコードに該当するディレクトリまでのパスを登録しておくと、開発が楽になります。
別のURLを追加する場合
// 記事内でWordPressのURLを呼び出すショートコード
function call_wp_url( $atts, $content = '' ) {
if ( $atts[0] === 'parent' ) {
$str = esc_url(get_template_directory_uri().$content);
} elseif ( $atts[0] === 'child' ) {
$str = esc_url(get_stylesheet_directory_uri().$content);
} elseif ( $atts[0] === 'imgdir' ) {
$str = esc_url('https://example.com/path/to/imgdir'.$content);
} else {
$str = esc_url(home_url().$content);
}
return $str;
}
add_shortcode( 'wp_url', 'call_wp_url' );
ここでは引数に「imgdir」と設定しました。
使い方は同じです。
[wp_url imgdir]
例 → https://example.com/path/to/imgdir
自前のショートコードは、ケースに合わせて柔軟に変更できるところが強みですね。
ホームページ制作は、小さな工夫を積み重ねていくことでどんどん早く作れるようになる
小さい工夫を重ねて早く作れるようになると、
納期までに余裕ができて、細部にこだわれるようになる
というのが最大のメリットだと思います。
「ああ、ロゴの表示位置をあと2px下げたいけど...。時間ないからとりあえず提出してあとでこっそり直しておこう」
なんて思っても、経験上直したことはほとんどありません。
クライアントに喜ばれるホームページを作るためにも、日々の工夫を積み重ねることを忘れないようにしましょう。