ちょっと寄り道〜システムのバージョンを上げる
テーマ作りに使っているInitializer、2013年に完成して更新が止まっている為か、実はファイルのバージョンと書き方が若干古いです。jQueryは最新が2016年10月の時点で3.1、Bootstrapもバージョン.3.3.7と評価版であるα版はBootstrap4と名付けられて3度目のアップデートを完了しています。ローカル環境でも「アップデート版を使いたいよ！」という人のためにバージョンを上げる方法を説明します。
ちょっと寄り道ーファイルのバージョンを上げる
そういう操作は自力でできる、という人は今回の記事はスルーしてしまいましょう。
1.jQueryのバージョンを上げる
footer.phpをテキストエディターで開きます。
35 36 37 38 39 40 41 42 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> window.jQuery || document.write('<script src="<?php echo get_template_directory_uri(); ?>/js/vendor/jquery-1.11.2.min.js"><\/script>') </script> <script src="<?php echo get_template_directory_uri(); ?>/js/vendor/bootstrap.min.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script> |
35行目を以下のように書き換えれば、最新バージョンのjQueryが使えるようになります。
1 | <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
37行目は「もし上のファイルが読み込めない時はローカルに置いてあるjQueryのファイルを使います」という意味です。もしそちらも最新を使いたい場合はダウンロードのページへアクセスしてダウンロードしたものをローカルのmy_theme（Initializer）のjsフォルダを開くと現れるvendorフォルダに設置しておき、上記と同じくfooter.phpに書いてあるバージョンを書き換えれば完了です。
2.Bootstrapのバージョンを上げる
Bootstrapのページにアクセスします。従来のバージョンはこちら、評価版の4はこちら。
従来の最新バージョンである3.3.7とバージョン4の中身は若干違うのですが、使う新しいファイルはdistフォルダの中です。
このcssとjsフォルダの中にある、bootstrap.min.cssとbootstrap.min.jsをコピーして、my_theme（Initializer）のcssと（jsフォルダ）>vendorにそれぞれのファイルを貼り付ければ新しいバージョンのBootstrapに更新されます。
jQueryに関して古いバージョンを使っていれば、同じように古いバージョンのブラウザに対応できるメリットがありますし、Bootstrap4もバージョン3に比べてブレイクポイントが増えてより柔軟になり、新しい機能も追加されましたが（前回のブレイクポイントやindex.phpのカラムの記述はBootstrap4を元に説明しています）、よく分からない・一部の機能さえ使えればという人は3の最新バージョンでもいいかなと考えます。ねこま（@necomacustom）でした。