サイトURLを返すだけだけど有能!汎用性を高めるショートコード【WordPressカスタマイズ】
WordPressで記事を書くとき、サイト内の別ページやトップページのURLを直接書いていませんか?
至ってシンプルで見落としがちですが、将来的にサイトのドメインを変えたり、環境を分けることになったりすると、手作業での修正が大変です。
そこで役立つのが、ブロックエディターでも使えるショートコード。
ショートコードを使えば、記事内に [our_siteurl]
と書くだけで、現在のサイトトップURLを自動で表示できます。
サイトURLを返すショートコード、ジャンプして即解決する→
本文を読まずにショートコードだけ参照することもできます
WordPressでサイトのURL、記事にそのまま書いていませんか?
WordPressで記事を書いていると、サイト内の別ページやトップページのURLを表記したい場面はよくあります。 その際、直接記述していることもあるかもしれません。
このサイトのURLは https://example.com/ です。
一見シンプルで問題なさそうですが、将来的に
- ドメイン(サイト名)を移転するとき
- ステージング(テスト)環境やマルチサイト環境が必要になったとき
こういった場面で、手作業でURLをすべて修正することになり、大変な手間がかかってしまいます。
WordPressの home_url()
を使えたらいいのに……
WordPressには、home_url()
関数を使ってサイトのトップページのURLを取得できる便利な仕組みがあります。 テンプレートファイルやウィジェット、PHPを直接書ける場面では、この関数で柔軟に対応できます。
でも残念ながら、ダッシュボード上から記事を編集するブロックエディター(Gutenberg)やコードエディター上では、この関数を直接使うことができません。
ショートコードで解決!
そんなときに役立つのが、ショートコードです。 ショートコードを使えば、ブロックエディターで例えば [our_siteurl]
と書くだけで、サイトトップページのURLを自動で展開してくれます。
特に繰り返しサイト内URLを表記する場面が多かったり、将来的な変更への備えを考えておきたいときは、ショートコードによる再利用の仕組みが役立ちます。
FTPを使ってテーマファイルがどこにあるかくらいは分かるよーという人なら、ショートコードのことがよく分からなくても、使用中のテーマの中にあるfunctions.php
に下記のコードを追加すれば使えるようになります。
実際のコード(functions.phpに追加)
function sc_homeurl() {
return esc_url( home_url() );
}
add_shortcode( 'our_siteurl', 'sc_homeurl' );
このショートコードは引数などを受け取らず、そのサイトのURL(トップページのURL)をそのまま返すだけのシンプルなものです。
使用例
記事での記述:
このサイトのURLは
[our_siteurl]
です。
ブログページは[our_siteurl]/blog
です。
サイト表示:
このサイトのURLは https://example.com/ です。
ブログページは https://example.com/blog です。
ショートコードは本文を書いている延長でささっと記述できるので、ちょっとした手間を減らすこともできます。
少し発展的な活用も
今回紹介したコードはシンプルですが、以下のように拡張することも可能です。
- 引数でパスを渡せるようにする(例:
[our_siteurl path="/blog"]
) - プラグイン化して、テーマ変更後も利用可能にする
- プラグインで関連サイトなど他のURLを設定して出力できるようにする
こうした応用パターンについては、別の記事でもご紹介していく予定です。
おわりに
少しの工夫で、日々の作業はぐっと楽になります。
ショートコードのような「再利用」「汎用化」に適した仕組みをうまく取り入れることで、あとからの変更にも柔軟に対応できます。
そんな小さな積み重ねが、快適なWeb運用につながっていきますよ。