web-dev-qa-db-ja.com

スクリプトとスタイルシートをエンキューすると機能しない

子テーマスタイルシートと子テーマスクリプトの両方をエンキューしようとしています。 BootstrapのためにCDNリンクをそこに入れるので、スクリプトをエンキューする必要があります。 Bootstrapを使用する Pingendo を使用して既にサイトをレイアウトしているため、エンキューが正しく機能していないことがわかります。だから私のサイトは空白で退屈な混乱であるため、私はそれが機能していないことを知っています。私はコーデックスからコードをコピーしてそれを使ってみましたが、なぜそれが正しく機能していないのかまだわかりません。以下に私のエンキューコードと、私のディレクトリがCPanelでどのように見えるかを示しました。

更新 - 子テーマのJSファイルに問題がある可能性がありますか？

custom-js.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>



function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
   $('#blah').attr('src', e.target.result);
}

reader.readAsDataURL(input.files[0]);
}
}
$("#upload").change(function() {
readURL(this);
});

エンキューコード

<?php ob_start(); ?>
<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri() . '/style.css' );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/custom-js.js', array(), '1.0.0', true);
}

?>

2回目のエンキューコードが試行されました

<?php

function load_css_js() {
    wp_enqueue_style( 'child-css', get_template_directory_uri() . '/style.css', false, NULL, 'all' );

    wp_register_script( 'child-js', get_template_directory_uri() . '/js/custom-js.js', array( 'jquery' ), NULL, false );
    wp_enqueue_script( 'child-js' );
}

add_action( 'wp_enqueue_scripts', 'load_css_js' );

?>

ディレクトリ

BlankSlate
BlankSlate-Child --> style.css
                     js (folder) --> custom-js.js
javascriptwp-enqueue-scriptwp-enqueue-styletwitter-bootstrapcdn
1
loltospoon

親子テーマの文脈では、次の点に注意してください。

get_template_directory_uri（）は、親テーマディレクトリuri： https：//を返します。 codex.wordpress.org/Function_Reference/get_template_directory_uri 。

get_stylesheet_directory_uri（）を入力すると、子テーマディレクトリuri： https：//になります。 codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri

Get_stylesheet_directory_uri（）で親スタイルをエンキューしています。これにより、子テーマのディレクトリuriが得られます。

Get_template_directory_uriを使用してchild-cssとchild-jsをエンキューしています。これにより、親テーマディレクトリuriが提供されます。

したがって、親スクリプトとスタイルをエンキューするときはget_template_directory_uri（）を使用し、子テーマのスクリプトとスタイルをエンキューするときはget_stylesheet_directory_uri（）を使用することをお勧めします。

もしあなたが他のソース（例えばブートストラップ）からエンキューしたいのなら、単にurlを使ってください：

wp_enqueue_style( 'your-prefix-bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' );
wp_enqueue_script( 'your-prefix-bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js' );
1
archemiro