【WordPress】ショートコードを挿入するクイックタグボタンの作り方まとめ!!

いつも(勝手ながらに)お世話になっている寝ログさんのところでクイックタグをプラグインなしで作れることを知り、だったらショートコードもクイックタグで挿入できないかな~と思って調べたらできたのでまとめてみました!

 

みなさまのご参考になれば幸いです。

 

 

プラグイン【Pz-LinkCard】ショートコードのクイックタグを作りたい!

今回は【Pz-LinkCard】というプラグインで使用するショートコードのクイックタグを作りたくて奮闘してみました。

 

【Pz-LinkCard】ってなんぞや?という方に簡単に説明しますと、記事内に

[blogcard url="見せたいurlをここに貼る"]

このショートコードを書くだけで以下のようなリンクカードが作れちゃう優れものなんです!!(ただし以下のリンクカードはプラグイン設定で少しいじってあります。)

 

 

[blogcard url="http://kumasan-kenkou.com/pure-reir"]

↑こちらは当サイト内のリンク(内部リンク)。すみません、うちの犬です。めっちゃかわいいでしょ?笑

 

 

[blogcard url="http://nelog.jp/add-quicktags-to-wordpress-text-editor"]

↑このように外部リンクにも対応しています。こちらは今回参考にさせて頂いた寝ログさんの記事です!いつも勝手にお世話になっておりますm(_ _)m 

HTMLの装飾のクイックタグについて分かりやすく丁寧に書かれています。しかしアホな私はこの記事だけではショートコードのクイックタグの作り方が分からなかったのです!!笑

 

ということでショートコードのクイックタグの作成方法へと参ります。

 

 

ショートコードのクイックタグ作成方法

では早速ショートコードのクイックタグを作っていきましょう!!

ショートコードの作成は実はものすごく簡単でした。笑

 

子テーマのfunctions.phpに以下のコードを張り付けます。

//クイックタグボタンの追加
if ( !function_exists( 'add_quicktags_to_text_editor' ) ):
function add_quicktags_to_text_editor() {
  //スクリプトキューにquicktagsが保存されているかチェック
  if (wp_script_is('quicktags')){?>
    <script>
      QTags.addButton('qt-linkcard','リンクカード','[blogcard url=""]','[/blogcard]');
         </script>
  <?php
  }
}
endif;
add_action( 'admin_print_footer_scripts', 'add_quicktags_to_text_ed

はい、これで終了です。

ほら!!めちゃくちゃ簡単!!!笑

 

これを貼るだけであとはもうクイックタグが作成されています。

↑実際の私のクイックタグです。

 

 

 QTags.addButton('タグボタンのID','タグボタンの名前','開始タグ','終了タグ');

この一文を<script> </script>内に追加で挿入すれば他のショートコートなども追加作成できます。↓こんな感じです。

//クイックタグボタンの追加
if ( !function_exists( 'add_quicktags_to_text_editor' ) ):
function add_quicktags_to_text_editor() {
  //スクリプトキューにquicktagsが保存されているかチェック
  if (wp_script_is('quicktags')){?>
    <script>
       QTags.addButton('タグボタンのID','タグボタンの名前','開始タグ','終了タグ');
       QTags.addButton('タグボタンのID','タグボタンの名前','開始タグ','終了タグ');
       QTags.addButton('タグボタンのID','タグボタンの名前','開始タグ','終了タグ');
         </script>
  <?php
  }
}
endif;
add_action( 'admin_print_footer_scripts', 'add_quicktags_to_text_ed

タグボタンのIDと名前は自分の好きなものに変換して問題なかったです。

 

 

ちなみにfunctions.phpをいじるときは必ずバックアップをとってからいじりましょう!!

少しでも変な記載をすると繋がらなくなります。(私は何度も経験済みです…笑)

あらかじめバックアップして保存しておいた元のfunctions.phpをFFFTPなどで差し替えてあげれば簡単に元に戻ります。

 

ショートコードのクイックタグを作成するにあたってこちらの記事も参考にさせて頂きました。ありがとうございました!m(_ _)m

☞参考:クイックタグを追加してショートコードを簡単に入力する

 

 

 まとめ

functions.phpにコードを追加するだけで、テキストエディタでショートコードがぱっと使えるのでかなり便利になりました!

 

もっと簡単にショートコードを打てるものもあるのかもしれないですが導入自体がめちゃくちゃ簡単だったので、ショートコードって忘れるし打つの面倒くさいわ~とお困りの方(私くらいか??)はぜひお試しを^^