さて、それでは早速初めてみましょう!まずは、これから HTML5 で画像を動かす為の「おまじない」をします。何も考えずに下記の手順通りにコピペして下さい。
おまじない
- 貴方の WordPress がインストされている所を FTP で開く
- 「wp-content」ディレクトリを開く
- その中の「themes」ディレクトリを開く
- 貴方の WordPress テーマディレクトリを開く
- そこに「functions.php」というファイルが在る筈です
- 「functions.php」ファイルを適当なエディタで開く
- 「functions.php」ファイルの一番最後までスクロールする
- 下記のプログラムをコピーする
- コピーしたプログラムを「functions.php」の最後にペーストする
- 修正した「functions.php」をセーブする
コピペするプログラム
このプログラムは「chaotic」さんのブログを参考に改造させて頂きました。このプログラムを functions.php ファイルの最後に付け加えます。
/** * ShortCode for js_url */ function shortcode_js_url($atts, $content = null) { extract(shortcode_atts(array('w'=>'320', 'h'=>'320'), $atts)); return '<canvas id="myCanvas" width="'.$w.'" height="'.$h.'"></canvas> <script src="http://code.createjs.com/createjs-2013.09.25.min.js"></script> <script src="' . get_bloginfo('template_url') . '/my-js/' . $content . '"></script> <script src="' . get_bloginfo('template_url') . '/my-js/' . 'sys.js' . '"></script>'; } add_shortcode('js_url', 'shortcode_js_url');
簡単な説明
此処では詳しい説明は避けますが、私たちは WordPress の記事内に直接 HTML5 のプログラムを記述するのではなく、記事内から「ショートコード」で HTML5 のプログラムを呼び出す様にします。
そうする事によって、記事内の記述がシンプルになり、また、外部に用意する HTML5 のプログラムをコピペ改造して流用し易くなるというメリットがあります。そのためのショートコードを用意する為に上記のプログラムを「functions.php」に加える必要があるのです。
まとめ
今回行う事はコレだけです。何とか頑張ってやってみて下さいね♡
- 投稿タグ
- HTML5作る