デヂ録

貧乏ブロガーの備忘録です。思った事やわかった事など気まぐれに書いています。

WordPressでショートコード自作して呼出し

WordPress枠線を使いたいけど、いちいちHTMLでタグを打つのは面倒臭いので、調べてみると、ショートコードが自作できるらしい。

検索キーワード『WP ショートコード自作

出てきたサイトを片っ端から調べて実用してみたので備忘録。

参考させて頂いたサイト様、ありがとうございました。

 

 

function.phpに記述

function boxcode1( $atts, $content = null){

  return '<div class="bluebgbox"><p>' .$content. '</p></div>';

}


add_shortcode('bluebgbox','boxcode1');

 

【解読】

boxcode1がメソッド名

 ()内は引数?よくわからんのでスルー。

boxcode1が呼ばれたら、returnの内容を返す

③ショートコード[bluebgbox]が呼ばれたら、boxcode1を実行。

 

 

Style.cssに枠線を書く

<div class="bluebgbox">はstyle.cssに記述する『枠線のcss

 

実は枠線CSSはサルワカさんから拝借。

f:id:poorblogger82:20170827153549p:plain

引用:サルワカ

saruwakakun.com

 

クラス名を<div class="bluebgbox">に書き換えました。

f:id:poorblogger82:20170827153739p:plain

サルワカさんありがとうございます。

 

 

記事をショートコードで囲みます。

[bluebgbox]・ショートコードテスト[/bluebgbox]

 

  ↓↓↓

 

記事更新します!!

 

f:id:poorblogger82:20170827154206p:plain

できた!

 

AddQuicktagに登録

このままだと、ショートコードをいちいち打たないといけないので、[]←これも。

プラグインAddQuicktagに登録することに。

 

f:id:poorblogger82:20170827154457p:plain

 

開始タグに[bluebgbox]を記入。

終了タグに[/bluebgbox]を登録。

名前に番号と付けてドロップダウンした時に、使いやすく。

 

記事投稿でエディタで選択!!

f:id:poorblogger82:20170827154815p:plain

 

おおーめっちゃ便利になった!!

 

以上