カスタムCSSとjsは、Wordpressのホームページにあります。

Question

私は以下のようなヘッダを持つ私のホームページを持っています。

<!--referring to CSS--> 

<link rel="stylesheet" type="text/css" href="css/main.css"> 
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<link rel="stylesheet" href="css/animate.min.css"> 


<script type="text/javascript" src="http://updateyourbrowser.net/uyb.js"> </script> <!-- Update older browser --> 
<!-- load the javascript library for the function in the script DOM--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<!--load the javascript library--> 
<script src="js/external/jquery/jquery.js"></script> 
<!--??what is this? we load the javascript library--> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

<!-- Google Analytics script --> 
<script>//Google Analytics script 
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 

    ga('create', 'UA-61904449-3', 'auto'); 
    ga('send', 'pageview'); 

</script> 


<!-- Facebook Pixel Code --> 

<script> 

!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? 

n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; 

n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; 

t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, 

document,'script','//connect.facebook.net/en_US/fbevents.js'); 



fbq('init', '384494271757075'); 

fbq('track', "PageView");</script> 

<noscript><img height="1" width="1" style="display:none" 

src="https://www.facebook.com/tr?id=384494271757075&ev=PageView&noscript=1" 

/></noscript> 

<!-- End Facebook Pixel Code --> 


<script> 


    // Scrolling function for the top navigation 
// ??top left? which navigation? => when you click to go back to the top, to make an ease effect 
    $(document).ready(function(){ 
     $('a').click(function(){ 
      $('html, body').animate({ 
       scrollTop: $($(this).attr('href')).offset().top 
      }, {duration: 1500, easing: 'easeInOutExpo'}); 
      return false; 
     }); 
    }); 



<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. --> 
<script>var __adobewebfontsappname__="dreamweaver"</script> 
<script src="http://use.edgefonts.net/source-sans-pro:i6,n6,n4,i4,i3,n3,n7,i7:default.js" type="text/javascript"></script> 

私はそれWordpressのテーマでホームページにする必要があります。私は、カスタムCSSのため、この方法を使用してHow to add custom css/js to just one page in WordPress?

のJs を計画していますが、カスタムCSSやJSを定義する問題が生じています 、 https://www.youtube.com/watch?v=ClXmWsE7wo8の方法により、テーマにホームページとして、このページを置きます。私のホームページのヘッダーで

、外 3のjsから呼び出さ外 2. JSから呼び出さ 1. CSSファイルが存在し

私の第一の質問は、1のために、そして2、私はどのように定義するかを定義されていますwp_enqueue_script（ 'your_script'、 'path'）のパス。 wp_enqueue_style（ 'あなたのスタイル'、 'パス'）;

私は

wp_enqueue_style('main.css','/tstandtest/css/main.css'); 
 
\t \t wp_enqueue_style('font-awesome.min.css','/tstandtest/font-awesome/css/font-awesome.min.css'); 
 
\t \t wp_enqueue_style('jquery-ui.css','/tstandtest/font-awesome/css/font-awesome.min.css'); 
 
\t \t wp_enqueue_style('font-awesome.min.css','//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css');

を行う必要があります私の第二の質問は、このような、HTMLのヘッダで定義されているJSのために、どのように私はそれがワードプレスでホームページとしてのために動作させるか、ありますグーグルアナリティックスのスクリプトとFacebookのピクセルスクリプトとして？あなたがテーマの資産への正しいパスを取得するにはまだいないのであれば

Answer 1

まず、あなたはget_template_directory_uri()を使用する場合があります：

// example 
wp_enqueue_style('sage/css', get_template_directory_uri() . '/dist/styles/main.css', false, null); 

あなたの2番目の質問私は完全には理解していません。あなたがgaとfacebookのスクリプトをハードコーディングしたのであれば、うまくいくはずです。しかし、私はプラグインをthisのようにして、最新のGAコードの挿入を管理させます。

そして、私はそれはあなたが<?php wp_head(); ?>が</head>タグの直前に置かれている必要があり言及と仮定しますで私は、あなたがリンクされたビデオチュートリアルを見ていない：https://codex.wordpress.org/Function_Reference/wp_head、あなたはすべてのものを参照するスタイルシートや外部スクリプトファイルを削除したことをあなたのテンプレートファイルから。

あなたはまたで始まるスクリプトのブロックを閉鎖することがあります：それがデフォルトで設定されているため

<script> 


    // Scrolling function for the top navigation 
    // ??top left? which navigation? => when you click to go back to the top, to make an ease effect 
    $(document).ready(function(){ 

そして最後に、最後に私はWordpressのチェックは、jQueryオブジェクトの完全な名前を指定する必要があります「衝突なし」モード。

はフルjQueryオブジェクトを渡し、私はこの便利なクロージャを使うこれを支援するために：

(function ($) { 

    // Now we can use $ within this closure 

    $(document).ready(UTIL.loadEvents); 

})(jQuery);