今回は、JavaScriptインクルードの設定を行います。ブートストラップ3のサンプル(Offcanvas)ではJavaScriptのコンポーネントを使用していますので、WordPressの機能でJavaScriptをインクルードするとすぐに動作確認出来ます。※目次をクリックすると目次の下部にコンテンツが表示されます。1.テーマ”TwentyFourteen”でのJavaScriptインクルード2.ブートストラップ3のサンプル(Offcanvas)のJavaScriptをインクルード3.動作確認テーマ”TwentyFourteen”でのJavaScriptインクルードWordPressの機能については”TwentyFourteen”のテンプレートファイルを流用していますので、”TwentyFourteen”での設定方法を確認します。header.phpファイルには特にJavaScriptインクルードの設定はされていなく、functions.phpの下記部分で行われいます。);add_actionで’wp_enqueue_scripts’アクションフックにインクルードするJavaScrptの設定を行っています。下記サイトによると’wp_enqueue_scripts’アクションフックは”wp_head”アクションフックに関連付けられているので、wp_head関数によって実行されるようです。TwentyTwelve】header.phpはcssをwp_head();で読み込んでいる|ウェブシュフheader.phpにwp_head();が記述されているので、そこでJavaScriptのインクルードが行われるという事になります。ブートストラップ3のサンプル(Offcanvas)のJavaScriptをインクルードブートストラップ3のサンプル(Offcanvas)のJavaScriptの機能を有効にするには、ブートストラップ3のJavaScriptファイルbootstrap.jsとOffcanvas固有のJavaScriptファイルoffcanvas.j(ブートストラップソース版”examples”フォルダ内の”offcanvas”フォルダ内にある)をインクルードする必要があります。上記functions.php内の”twentyfourteen_scripts()”内に追加すれば動作するのかと思ったのですが、WordPress添付のjQueryと相性が悪いようです。WordPress添付のjQueryを使わずにGoogleが配信しているjQueryに変更したらうまく動作するようになりました。※参考にしたサイトWordPressでjQueryを使う一番シンプルな方法header.phpのwp_head()の上に下記のように記述しています。下記のように修正しました。画面のサイズを小さくするとナビゲーションメニューが横棒三本のボタンに折りたたまれ、このボタンを押下すると下に展開して隠れていたメニューが表示されます。nav”というボタンが表示され、押下すると左右に表示され、左右の隠れていた部分が表示されるようになります。「ブートストラップ3を使って自作テーマ作成」の目次へ関連記事の目次VPSの開始からWebサイト公開、運用VPSにログイン、SSH接続、初期設定VPSサーバーでスナップショットを取得~障害に備え、リカバリーポイントを作成。VPSサーバーにログインして、設定内容を確認~グローバルIPアドレス確認、SSHキーを作成。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。