it-swarm-ja.com

スタイルシートを登録してエンキューしますが、何もレンダリングされません

たとえ本当に苦痛であっても、WordPressにスタイルとスクリプトを登録してエンキューすることは非常に重要だと私は言っています。

私はスタイルを試すときにスクリプトに問題はありませんでしたが、WordPressはスタイルシートのコードには何も表示しません。自分のテーマを正しく構築する習慣を身に付けたいので、これがどのように行われるのかを知りたいのですが、スクリプトが追加されたときにCSSがコードに追加されない理由を理解できません。下記の関数ファイルのコードを参照してください。

<?php

function alpha_scripts(){

  $script = get_template_directory_uri() . '/assets/scripts/';

  wp_register_script('bootstrap-js', $script . 'bootstrap.min.js', array('jquery'),'', false);

  //wp_enqueue_script('jquery');
  wp_enqueue_script('bootstrap-js');
}

function alpha_styles(){

  $style = get_template_directory_uri() . '/assets/styles/';

    wp_register_style('bootstrap-css', $style . 'bootstrap.min.css','','', 'screen');
    wp_register_style('alpha-css', $style . 'alpha.css','','', 'screen');

    wp_enqueue_style('bootstrap-css');
    wp_enqueue_style('alpha-css');
}

function alpha_menus() {
  register_nav_menus(
    array(
      'main-menu' => __( 'Primary Menu' ),
      'footer-menu' => __( 'Footer Menu' )
    )
  );
}

add_action('wp_enqueue_scripts', 'alpha_scripts');
add_action('wp_enqueue_styles', 'alpha_styles');
add_action('after_setup_theme', 'alpha_menus');

?>

私はここで何をしていますか? get_template_directory_uri()get_stylesheet_directory_uri()のように、URLに異なる参照を使用してみましたが、これら2つが違いを生じないと疑ったので。

2
Digital Brent

あなたはうまくやっています - あなたが変える必要があることをただ一つ、そして私はそれがするのが全く合理的な誤りであると思います:

この:

add_action('wp_enqueue_styles', 'alpha_styles');

になる必要があります

add_action('wp_enqueue_scripts', 'alpha_styles');

なぜscriptsですか? wp_enqueue_stylesと呼ばれるWordpressのアクションがないからです。 関数wp_register_stylewp_enqueue_styleという名前ですが、それでも多目的wp_enqueue_scriptsアクションにフックする必要があります。

はい、WP coreはおそらくこの問題の発生を防ぐために2つ目のアクションを追加する必要があります... :)

最初は面倒なことになるかもしれませんが、エンキューがどのように機能するかを理解しておけば、将来の時間を大幅に節約できます。いくつかの利点があります:依存関係を簡単に管理することができます。あなたがそれらを持っているならば、あなたのスクリプトとスタイルは複数のヘッダーとフッターに渡って機能するでしょう。スクリプトやスタイルにフックするプラグイン(例:それらを連結/縮小する)は、その仕事をすることができます。

4
Tim Malone