知ってると便利!WordPressのショートコードの作成方法と使い方

Sponsored Link

WordPressでショートコードを作成する方法がわからん!

どうも、Linです。ジャズ、打ち消してます。

 

先日、ドットインストールのWordPress講座を受講していたら、

ショートコードの作成方法

を習いました。

最後に紹介された裏技のようなテクでしたが、これが便利便利。

 

端的にいうと、WordPressのショートコードとは、

繰り返し使う処理を記事中で呼び出せる機能

ですね。

編集画面で、[ ]内にショートコード名を記載すると呼び出せるようです。

 

今日は、WordPressのショートコードの使い方をマスターしたので、その作成方法と使い方を忘れないうちにメモしておこうと思います。

  1. WordPressショートコード作成方法
  2. WordPressショートコードの使い方

なお、執筆にあたり、この神記事を参考にさせていただきました。

 

 

WordPressのショートコード作成方法

WordPressのショートコードは次の3つのステップで作成できちゃいますよ。

今回は例として、

囲った範囲の背景を灰色にするショートコード

を作成していきます。

 

Step1. 「functions.php」を開く

まず、WordPressの「テーマ編集」から、

functions.php

というファイルを開きましょう。

 

wordpress ショートコード 作成 使い方

 

このファイルは主に、

ワードプレスで利用する自作の関数などを記述しているファイルです。

ただ、誤った記述をすると、サイトが表示されなくなる可能性があるので、くれぐれも扱いにはご注意ください。

バックアップをとって作業されることをおすすめします。

 

Step2. 挿入したい関数をかく

挿入したい関数をfunctions.phpに書いていきましょう。

関数の書き方としては、

function 関数名(引数){ 戻り値 }

ですね。

背景を灰色にする関数grayFuncは以下のような感じです↓↓

挿入したいショートコードによって、関数の内容を書き換えてみてください。

 

Step3. 「add_shortcode」を追加

続いて、ショートコードを追加するおまじないを記述します。

add_shortcode(‘呼び出す時の名前’, ‘関数名’);

ですね。

こいつを先ほどのショートコード関数の後に追加してあげましょう。

ぼくの場合でいうと、

になりますね。

これでWordPressのショートコード作成方法は終了です。

 

 

WordPressのショートコードの使い方

さて、最後にWordPressのショートコードの使い方を解説していきましょう。

 

使い方はいたって簡単で、記事内に、

[ショートコード名]

を追加してあげればオッケーなんです。

 

今回作ってみた「灰色背景ショートコード」の場合、どっからどこまでという範囲が必要になってくるので、

[ショートコード名]〜[/ショートコード名]

になってますね。

 

記事編集画面で、

という記述を入れてみました。

 

 

 

すると、

はいいろになってる??

という感じで、しっかりとショートコードが反映されているではありませんか!

 

このように、

  1. functions.phpを開く
  2. 関数をかく
  3. add_shortcode追加

の3ステップで簡単にWordPressのショートコードを追加できるので、気軽に試してみてくださいね。

 

もし、

「ワードプレスをもっと深く学びたい!」

という方にはTECHACADEMYの「オンラインブートキャンプ WordPressコース」がおすすめです。

プロのメンターの方にわからないところを質問しながら学習できますからね。

よかったら使ってみてください。

 

それでは!

Lin


Sponsored Link

コメントはこちらからお願いします!



もう1本読んでみる