趣深い.com

コケの成長を眺めて暮らしています

※本サイトはプロモーションが含まれています

ショートコードを使って投稿本文中の好きなところにテンプレート(~.php)を挿入する方法。

 2015/11/20      WordPress

ワードプレスにはショートコードという便利なものがあります。

パソコンのユーザー辞書、単語登録みたいな感じで何かの塊に名前をつけて、それを呼び出すという話。いちいち全部書かなくて良くなるから楽で速いです。

アドセンスのように、いちいちコードを全部書くのはめんどくさいけど頻繁に、しかも本文中の好きなところにサッと貼り付けたいものがあるときに便利です。

私の場合は、SNSのシェアボタンを自作して、オリジナルと並べようとしたときに、ショートコードに出会いました。



上のシェアボタン群は、それぞれ[ sns ] と[ sns-new ]というショートコードで呼び出しています。
※[ ]の中の半角スペースは本来入れません。

これらを投稿ページに表示させようとした場合、htmlのソースをいちいち書いたり、貼り付けていたのではめんどくさいですし、編集画面にドバっとソースが出てくるので何かと具合が悪いです。

ですが、ショートコードを作っておけば一発で済むのでかんたんです。

ショートコードで面倒くさいソース、コードをサッと好きな場所に挿入

先にやり方を紹介します。以下のコードをfunctions.phpに書きます。
※必ずバックアップをとってからやって下さい。

function sns_original() {
  ob_start(); 
  get_template_part('sns'); //sns.phpを呼び出す 
  return ob_get_clean();
}
add_shortcode('sns', 'sns_original'); //sns_originalはショートコードで使うときの名前はsnsです。

子テーマを使っていてfunctions.phpがまっさらの人は、一番最初に
<?phpを付け足して下さい。
逆に、既に何かしら利用している人で、functions.phpの最後が?php>になっている人は、それよりも上に書いて下さい。

これは、sns.php(シェアボタンが並んでいるもの)を投稿本文中の好きなところに貼り付けるためのショートコードを作るコードです。

3行目にテンプレート(sns.php)を呼び出すコード。2行目と4行目をそれを好きな場所に貼れるようにするためのコードです。

あとは投稿編集画面で、snsを[]で括って書いてあげればズバッと出てきます。

3行目の(‘sns’)の、snsを変えれば、色んなテンプレートを呼び出せます。

アドセンスとか、簡単な自己紹介とか、オススメのなんとかみたいないつも固定で出す訳にもいかないんだけど、頻繁に出したい、しかも好きなところに挿入したい、というテンプレートこそショートコードで使うと良いのですね。

名前のつけ方、名前の決まり方(?)

shortchord

sns_originalというのは、sns.phpを呼び出すことです。(1ー5行目が言っていること)
sns_originalは、ショートコード名「sns」です。(6行目が言っていること)
みたいな感じだと思います。

赤い◯で囲まれた部分が、ショートコードの名前になります。好きな名前をつけてください。

赤い下線の部分は同じものを記述します。別にショートコードの名前と同じで良いんでしょうけど、sns-newのように、-(ハイフン)を使うとエラーが出ます。

ショートコードをどこに貼っても一番上にしか出てこない・・・原因は?

なんでもない文字だったら、下のように書けばいいのですが、phpのテンプレートだと本文の一番上に出てきてしまいます。最初に紹介した形で書いて下さい。

function sns_original() {
 get_template_part('sns'); 
}
add_shortcode('sns', 'sns_original');

私は最初これでつまづきました。むしろ遠回りしでした。

「ショートコード 作り方」で検索してハローニューワールド!的な記事にぶち当たってしまうと私と同じ所でやられると思います。

テンプレートって何よ

ショートコードでテンプレートを呼び出す、なんていう言い方をするらしいのですが、私はテンプレートがいまいちわかっていなかったので今回のショートコード実現のための検索のときに困りました。

sns.phpとか、single.phpをテンプレートと呼ぶのです。

ワードプレスのダッシュボードの、「外観⇨テーマの編集」といくと右にずらっとならんでいる「~.php」がテンプレートです。

そういうものだと思って覚えるしかありません。

昔の無料ブログなんかでは、今のワードプレスで言うところのテーマをテンプレートと呼んでいたりしました。
ややこしいですよね。

ちょっと立ち止まって整理するだけで大して難しくはないんですけど、微妙に腹が立ちますよね。こういうの。
郷に入れば郷に従え、ですね。

エンジニアのためのQ&Aサイト【teratail】

メールアドレスのみで無料登録可能。

teratailではPHP、Ruby、Java、Androidなどのウェブやネイティブアプリに関する質問やSwiftやLaravelといった最新技術に関する質問が投稿されてます。1日に30個程度の質問が投稿されその9割程度に回答がつきます。

独学でプログラミングを勉強したい人におすすめのサービスです。

>>エンジニアのためのQ&Aサイト【teratail】