WordPressで同じような文章とかHTMLタグを使いまわしたいことってありますよね？
そんな時、その文章をいちいち打ち直していては手間と時間がかかりすぎてしまいます。
そこで時短と手間を減らすのに役立つのがショートコードと呼ばれる機能で、これを使うと短いコードを書くだけでその文章やタグを置き換えることが可能です。
ここではそのショートコードを使うメリットや作り方を詳しく分かりやすく解説していきます。
目次
ショートコードとは？そのメリット
冒頭でも書いたようにショートコードとはある文章やタグなどを短い形式のコードで置き換えできる、というWordPress独自の機能です。
次のように [ と ] で囲まれた形がショートコードの基本形になっています。
[example]
上の例でいえば「example」というのがショートコードの名前です。
そしてWordPressの編集画面でこのショートコードを書くことでそれに対応した内容に置き換えることができるという訳です。
この機能を使って置き換えできる内容の例をいくつか挙げるとすると・・・
- 冒頭のあいさつなどの定型文
- クラス名が付いたタグ
- cssなどのスタイルシート
- javascriptなどのスクリプト
・・・などなど
文章とかタグとかcssとかを短いコードで簡単に投稿内に挿入できる・・・これがショートコードを使うメリットですね。
ただしこのショートコードの追加にはPHPなどのプログラミング知識が必要になります。
なので全て自力でショートコードを作ろうとするとかなり大変なので、面倒なことをしたくない人は次の記事で紹介したプラグインを使うのがおすすめです。
簡単な操作でショートコードの作成から挿入までできるので是非使ってみてください。
そしてここから以降は全て自力でショートコードを作りたい人向けの内容なのでPHPの予備知識がある上級者向けになります。
テーマ内のファイルなどを編集することがあるのでブログの構成を壊さないために必ずバックアップを取ってから慎重に作業してください。
もしそのリスクを取りたくない場合は先ほど紹介したプラグインを使いましょう。
ショートコードの基本の作り方
ではPHPを使ってショートコードを作成・挿入する手順について解説します。
その手順は大まかに書けば次の通り
- add_shortcode関数でショートコード作成
- 編集画面からショートコードを追加
この２つの手順だけです。
ただし何度もしつこく言いますが、PHPファイルの編集をするのでファイルのバックアップを取って慎重に作業してください。
では詳しいやり方について次で説明していきます。
add_shortcode関数でショートコード作成
WordPressではショートコードを登録するために add_shortcode 関数が用意されています。
なのでまずはPHP内で add_shortcode 関数を使ってショートコードを登録するコードを追加しましょう。
コードを追加する場所は現在使用中のテーマの「functions.php」というファイル内です。
もしWordPress内でfunctions.phpを編集するならメニューから「外観」ー＞「テーマの編集」を開いて、そこからfunction.phpの編集が可能です。
上の画像のように「テーマファイル」の中から functions.php を開けばエディタが表示されて編集が可能になります。
では functions.php にショートコードを追加しますが、ここでは例として定型文を登録してみましょう。
例えば次のようなPHPコードを書けば特定のページへの誘導文を登録できます。
function my_profile_link( $atts ){
return '<a href="xxx">私のプロフィールはこちら</a>';
}
add_shortcode('profile', 'my_profile_link');これだけで [profile] というショートコードが編集画面で有効になります。
では簡単にコードの解説をしましょう。
まず add_shortcode 関数ですが次のようにして使います。
add_shortcode('ショートコード名', '文章やタグなどを出力する関数名');あるショートコード名に対してそれを文章やタグなどに置き換える関数名を登録するだけです。
そして add_shortcode から登録される関数は公式リファレンスによると次の３つの引数を持つことができます。
- $atts
属性の連想配列
- $content
ショートコードで囲まれたテキスト
- $tag
ショートコードのタグ
これらの引数は必ず持つ必要はなく、不要なら省略することも可能です。
ただの定型文とかを出力するだけならあまり使うことはないですが、タグで囲むとかの処理だと必要になることもあるのでその例はまたあとで紹介します。
以上が add_shortcode 関数を使ったショートコードの登録の仕方です。
ショートコードの置き換え内容はエディタで自動補完とかされないので特定のページでだけcssとかスクリプトを読み込むのにも役立ちそうですね。
投稿画面でショートコードの追加
では今作ったショートコードを投稿の編集画面から追加してみましょう。
追加すると言っても次のように登録したショートコード名を角括弧( '[' と ']' ) で囲むだけです。
[profile]ちなみにテキストエディタでもビジュアルエディタのどちらから挿入してもかまいません。
ただし角括弧とショートコード名の間には余計なスペースは入れないでください。そうすると正しく置き換えされないので注意が必要です。
そして投稿を保存すれば今挿入したショートコードが置き換えたい内容に変わります。
しかも編集画面上では置き換えらされないので、あとからいくらでもショートコードの内容を変更することも可能です。
以上がショートコードの基本的な作り方と使い方です。
もしプラグインに頼らず自作する必要があるならここまでの手順で簡単に追加できます。
ショートコードの応用例
ここまでで紹介したのはショートコードの基本的な作り方です。
次は少しだけ応用的な次のような作り方について説明していきます。
- 文章をショートコードで囲む
- ショートコードにオプションをつける
ではこの２つをコード例とともに見ていきましょう。
文章をショートコードで囲む
ショートコードはHTMLタグのように文章を囲んで装飾するような使い方もできます。
例えば次が文章を強調表示＆下線を引くためのショートコードのPHPコード例
function my_bold_underline( $atts, $content = null ){
return '<strong><u>' . $content . '</u></strong>';
}
add_shortcode( 'bold_under', 'my_bold_underline' );先ほど書いたように $content はショートコードで囲まれた文章なのでそれにタグを付けたものを返すことでタグで装飾できます。
そしてこれを使って文章を装飾するには投稿の編集画面で次のように文章を囲むだけです。
[bold_under]太字＆下線にしたいテキスト[/bold_under]まず装飾したい文章の前にショートコードを置き、最後の方には [/bold_under] のようにショートコードを閉じたものを置きます。
するとその文章は実際公開されるページ上で次のようなタグに置き換えられて表示されます。
<strong><u>太字＆下線にしたいテキスト</u></strong>
ここまでの例のようにショートコードはただ単に文章を置き換えるだけでなく、タグそのものとしても使用可能です。
もしタグが長すぎて全て手打ちしたくないという場合はこの方法が役に立ちそうですね。
ショートコードにオプションを付ける
ショートコードには出力する内容を変更するためのオプションを付けることもできます。
例えば名前を含めた自己紹介をするショートコードを [intro] という名前で作るとします。
その時、名前の部分だけ置き換えるオプションを作れれば便利ですよね。
ではどうすればいいかというと次のコード例のように $atts からオプションの値を受け取ればいいのです。
function my_intro_message( $atts ){
$a = shortcode_atts( array(
'name' => '名無し'
), $atts );
return 'こんにちは、' . $a['name'] . 'です！';
}
add_shortcode( 'intro', 'my_intro_message' );ここでは「name」という名前のオプションを受け取って自己紹介文に含めています。
先ほど紹介したように１番目の引数の $atts にはショートコードからのオプション配列が入っていると書きました。
これをそのまま使ってもいいですが、オプションが指定されていない場合を考慮して shortcode_atts 関数でデフォルト値を設定しています。
こうすれば name というオプションに自分の名前を指定することができるようになります。
[intro name="フク郎"]
そして実際にページ上に表示されるメッセージは次の通り
こんにちは、フク郎です！
これは本当に簡単な例ですが、オプションを使えばショートコードでできることの幅がさらに広がると思います。
まとめ
ショートコードは投稿内で自分で好きな位置に定型化した文章を置いたり、複雑なHTMLタグをササッと挿入するのにとても便利です。
ここまでで紹介したように自分でPHPコードを書いて作成することもできますが、下手に構いたくないという人は Post Snippets などのプラグインを使うのがおすすめです。
以上、ショートコードを使うメリットや実際の作り方についてでした。
フク郎
最新記事 by フク郎 (全て見る)
- トレンドブログが資産に？放置でアクセス急増の事例 - 3月 14, 2024