こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

HTMLをWordPress化 CSSをどこに?

HTMLをWordPress化にするための勉強をしています。

HTML側
CSS
ヘッダー内
<link rel="stylesheet" href="css/test.css">
<link rel="stylesheet" href="css/test2.css">

JS
ヘッダー内ではなく一番下</body>の前に配置
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/test1.js"></script>
<script src="js/test2.js"></script>

★これをfunctions.php に記述するにはどうすれば良いのでしょうか?

function sample_scripts() {

  // CSSの読み込み
  wp_enqueue_style( 'jdsa-style', get_template_directory_uri().'/css/test.css', array(), '1' );
  wp_enqueue_style( 'jdsa-style', get_template_directory_uri().'/css/test2.css', array(), '1' );

  // jqueryの読み込み
wp_deregister_script( 'jquery' );
wp_enqueue_script( 'jquery', get_template_directory_uri().'https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', array(), '1.10.3', true );

  // サイト内のjsの読み込み
  wp_enqueue_script( 'jdsa-script', get_template_directory_uri().'/js/test1.js', array(), '1', true );
  wp_enqueue_script( 'jdsa-script', get_template_directory_uri().'/js/test2.js', array(), '1', true );

}//ここまで

結果
ヘッダー内にtest.cssのみ記載、test2.cssは記載していない。
jsはどこにも記載していませんでした。
どこが間違っておりますか?
宜しくお願いします。

投稿日時 - 2018-11-12 16:28:58

QNo.9557159

困ってます

質問者が選んだベストアンサー

WPで <head>の内部や </body>の直前に何らかのHTMLタグを追記させる場合、基本はWP本体に実装されてる関数である wp_head() と wp_footer() に「フックさせる」事によって自作の関数を発火起動させ実行させる様にします。


$temp_dir_url = get_template_directory_uri();

add_action( 'wp_head', 'my_custom_head', 10 );
my_custom_head() {
wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', false, '1.10.3', false );
wp_enqueue_style( 'jdsa-style', $temp_dir_url.'/css/test.css', array(), '1' );
wp_enqueue_style( 'jdsa-style2', $temp_dir_url.'/css/test2.css', array('jdsa-style'), '2' );
}

add_action( 'wp_footer', 'my_custom_footer', 20 );
my_custom_footer() {
wp_enqueue_script( 'jdsa-script', $temp_dir_url.'/js/test1.js', array('jquery'), '1', true );
wp_enqueue_script( 'jdsa-script', $temp_dir_url.'/js/test2.js', array('jquery'), '2', true );
}


~上記の様な感じのモノを functions.php に追記して保存実行させます。ただし怪しげな自作テーマ等を導入して、標準仕様通りに wp_head() と wp_footer() が正しく実行されていないテーマの場合は空振り、無反応で終わります。

jQueryはWP本体や他のプラグイン等でも使うので、むしろ先駆けて<HEAD>内部で読み込ませて置きます。その後に続けてCSSやフォント等を読み込ませる様にします。Javascript等のJS関連は全てのHTMLが読み込み終わった後で読み込ませる様にした方が、既に物理的にDOM読み込みが完了した状態でJSを実行させる事が出来るので、JS内部でいちいちDOMが読み込み済みかどうかのチェックをしなくて済むためコードが効率的に処理出来ます。

例文では自作JSを2つ読み込ませていますが、これも可能であれば1つのJSファイルに全てまとめてしまって一度に読み込む様にした方がページ表示速度が速くなります。2つに分ける意味は全くありません。CSSも同様です。


- 参考リンク: add_action() https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_action

- 参考リンク: アクションフック一覧 https://wpdocs.osdn.jp/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3_API/%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%95%E3%83%83%E3%82%AF%E4%B8%80%E8%A6%A7

投稿日時 - 2018-11-14 12:01:03

お礼

細かな説明をありがとうございます。
参考にさせていただきます。

投稿日時 - 2018-11-15 10:46:04

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問