【Word Press】自作ショートコード

忘れないように残しておかなければ。

自作ショートコード？

phpに書きこんで[]で簡単に定型文を出す。いつも使う定型文があるなら絶対作った方が良い。

記事が増えれば増える程に定型文の編集が面倒になるがショートコード編集なら1回で終わる。

php編集は自己責任。間違った記述をするとサイトが真っ白になったり凄まじい事故になる恐れあり。

まずは書き方

子テーマの「（functions.php）」を開く。親テーマでは編集しない。

//自作ショートコード
function shortcodetest(){
  return "自作だよ";
}
add_shortcode('code1','shortcodetest');

⇧を保存後にcode1を[]で囲んで書くと「自作だよ」と出るようなる。

//	この後に、分かりやすいようにコメントを書く
function	この後に、呼び出しコード名
return	この後の「””」内が、呼び出したコードの吐き出し文
add_shortcode	この後の「’」で囲われた文字は… 前が、[]に入れる文字 後が、functionの呼び出すコード名

⇧最低限これだけ理解すればあとは自分で文字を書き換えて色々出来るはず。

改行含めた文字をショートコードで

ショートコードのreturnの後の「”」で囲われた部分には「HTML」でも書き込める。

//自作ショートコード
function shortcodetest(){
  return "
<p>自作だよ</p>
<p>本当に？</p>";
}
add_shortcode('code1','shortcodetest');

⇧こうしてcode1を[]で囲んで表示させると…

自作だよ

本当に？

⇧こんな感じで表示される。

吐き出し文の中に「”」がある場合

文が終わったと勘違いされてエラーが出る。

その対策が「\（バックスラッシュ）」。キーボードの「ろ」に割り振られているやつ。

ただしWindowsだと円文字（\）になるけど内部ではちゃんとバックスラッシュになっている。

//自作ショートコード
function shortcodetest(){
  return "
<p>自作だよ</p>
<p>本当に？</p>
<p><span class=\"red\">これで文字が赤くなるよ</span></p>";
}
add_shortcode('code1','shortcodetest');

⇧吐き出し文の「”」の前に「\（バックスラッシュ）」を入れる事でこれは終わりじゃないよと認識。

吐き出し文の中に「”」がある場合、その都度「\（バックスラッシュ）」を入れなければならない。

cocoonのブログカードも入れたい

cocoonではブログカード自体が[]で囲われたショートコードみたい。

[]内にブログカードにしたいURLを入れるとブログカードになる。

//自作ショートコード
function shortcodetest(){
  return "
<p>自作だよ</p>
<p>本当に？</p>
<p><span class=\"red\">これで文字が赤くなるよ</span></p>
<p>[ブログカードにしたいURL]</p>";
}
add_shortcode('code1','shortcodetest');

⇧つまりこうなる。

なんかエラーが出るんだけど？

記述するコードの基本は「半角」で全角が許されるのはreturnの後の吐き出し文のみ。

「”]「,」「;」が全角だとか「;」が「:」になっていないかなどを確認する。

そして吐き出し文の中の「”」の前に\（バックスラッシュ）を付け忘れていないかを再確認。

おわりに

何度かチャレンジしては「改行出来ない」「エラーが出る」と断念してきた自作ショートコード。

再度調べまくった結果…、「HTMLが使える」「\（バックスラッシュ）で対処」を見つける。

そして念願のショートコードを自作出来たので備忘録として残しておこうと今に至る。

最後に自作ショートコードを表示させて、もうコピペしなくていいんだって感動を残す（笑）

⇩この下からブログカードまで自作ショートコードで表示

ポイ活をやってる人は案外多い。もしまだなら是非やってみよう♪

個人的にはポイントサイトに２つくらい登録してた方がお得。

期間中に紹介経由で登録➡はじめてのポイント交換で1000円分のアマギフが必ず貰える♪

一緒にお小遣いを増やしながら楽しいゲームライフを♪