管理画面にストックしたJavascript のコードなどを、ショートコードで実行できるプラグイン「Post Snippets」

  • 11331
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Post Snippets はその名の通り、サイトやブログでよく使いそうなスニペットを管理画面にストックできる便利なプラグインです。

使い方の例としては、

テーマファイルや投稿記事内で頻繁に使い回すJavascript のコードなどを管理画面にストック

それらを自分の好きなショートコード名で保存(管理)

テーマファイルや投稿画面でそのショートコードを貼付けて実行
という流れになります。

投稿画面にJavascript のコードを書いても改行などの問題でうまく実行されないので、Post Snippets でソースをストックしてショートコードを発行し、そのショートコードを投稿画面に貼付けることでプログラムを実行させることができるようになります。

Post Snippets のインストール

管理画面から Post Snippets を検索するか、以下のページからプラグインファイルをダウンロードします。


Post Snippets の設定

管理画面の「設定」メニューより「Post Snippets」ページへ移動し、「Add New Snippet」ボタンをクリックします。
管理画面にストックしたJavascript のコードなどを、ショートコードで実行できるプラグイン「Post Snippets」

Javascript ソースコードのストック

「Title」欄には管理しやすいショートコード名を、

「Variables」で「Shortcode」にチェックを入れ、

必要に応じて「Description」にスニペットの説明を入れておきます。
管理画面にストックしたJavascript のコードなどを、ショートコードで実行できるプラグイン「Post Snippets」

今回、「Snippet」欄に流し込んだプログラムは以下のJavascript です。
<script>
var date=new Date(); 
var year = date.getFullYear();
var month = date.getMonth()+1;
var week = date.getDay();
var day = date.getDate();
var dotweek= new Array("日","月","火","水","木","金","土");
document.write("本日は"+year+"年"+month+"月"+day+"日 "+dotweek[week]+"曜日 です。");
</script>
<br><br>
<script>
document.write("ご利用の環境は" + navigator.userAgent +"です。");
</script>
※改行等のタグも利用できます。


記事本文でJavascript プログラムの実行

記事の投稿画面に戻れば「Post Snippets」ボタンが出現しますので、
管理画面にストックしたJavascript のコードなどを、ショートコードで実行できるプラグイン「Post Snippets」

先ほど作成したコードを選択して「Insert」ボタンをクリックします。
管理画面にストックしたJavascript のコードなどを、ショートコードで実行できるプラグイン「Post Snippets」

記事本文にショートコードが貼付けられますので、これで記事を公開してみます。
管理画面にストックしたJavascript のコードなどを、ショートコードで実行できるプラグイン「Post Snippets」

実行結果は以下の通りです。
管理画面にストックしたJavascript のコードなどを、ショートコードで実行できるプラグイン「Post Snippets」

テーマファイルにショートコードを貼付ける

テーマファイル内で do_shortcode() を使ってショートコードを実行してみます。


例として、footer.php内に先の例のJavascript コードを実行してみますが、
<?php echo do_shortcode('[ショートコード名]'); ?>


こんな感じで表示されます。
管理画面にストックしたJavascript のコードなどを、ショートコードで実行できるプラグイン「Post Snippets」

その他

PHPやショートコード、固定メッセージ文(テキスト)なども扱えますが、この辺の扱い方は別途記事に書こうと思います。

  • 11331
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

この投稿と関連する記事一覧

この記事に関するコメント

コメントを残す