CSSスタイルがWordpressのカスタムテーマに適切に適用されない

Question

私はカスタムWordpressのテーマをゼロから作成する方法を学んでいますが、今までは正しく動作していないCSSスタイルシート以外はすべてうまくいきました。

これら2つの印刷画面を見てみてください。

1：index.htmlを

（HTMLが含まれている基本的なテーマ）

2： index.php

（Wordpressのテーマを作るためのindex.phpと削除ヘッダーとフッター部分にindex.htmlを変換した後）

しかし、問題はどこから来た私は知っています。そのため、このjavascriptファイルのため、index.phpにfunctions.phpでロードしようとしましたが、うまくいきません。私は、このファイルinline.jsの名前：

$(document).ready(function(){ 
       init_masonry(); 
      }); 

      function init_masonry(){ 
       var $container = $('.item_container'); 
       $container.imagesLoaded(function(){ 
        $container.masonry({ 
         itemSelector : '.item', 
         "gutter": 18, 
         isFitWidth: true 
        }); 
       }); 
      } 

      $(document).ready(function(){ 
       $('a[href*=#]:not([href=#])').click(function() { 
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
         var target = $(this.hash); 
         target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
         if (target.length) { 
          $('html,body').animate({ 
           scrollTop: target.offset().top 
          }, 1000); 
          return false; 
         } 
        } 
       }); 
      }); 

をそして、これはfunctions.phpです：

<?php 
function catalog(){ 
    wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
    wp_enqueue_style('style', get_stylesheet_uri()); 
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery')); 
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array('jquery')); 
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/jquery.js', array('jquery')); 
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array('jquery')); 
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/offcanvas.js', array('jquery')); 
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/inline.js', array('jquery')); 
} 
add_action('wp_enqueue_scripts','catalog'); 
register_nav_menus(array(
    'primary' => __('Primary Menu'), 
    'footer' => __('Footer Menu'), 
)); 
?> 

私は他の人のようなinline.jsスクリプトをキューに入れているが、それは動作しません。 Ctrl + F5を押してページをリフレッシュしようとしましたが、何も変わりませんでした。

この問題のご提案はありますか？

Answer 1

エンロールスクリプトで追加したすべてのスクリプトに対して、カスタムスクリプトと同じハンドルがあります。これは、すべてのスクリプトとスタイルに固有のハンドルが必要です。

ハンドルを変更することで問題を解決できます。

また、WordPressのjQueryがnoConflictモードで動作することに注意してください。これは、共通$エイリアスを使用できないことを意味します。代わりに完全なjQueryを使用する必要があります。代わりに、noConflictラッパーの中に$ショートカットを使用してコードを配置してください。例えば。

jQuery(document).ready(function($) { 

[ your code goes here ] 
}); 

JSファイルには、[href]以外のドキュメント準備機能の機能が追加されています。それはうまくいくかもしれません..