WordpressでJavaScriptやCSSファイルを読み込み・反映する方法

Authors

• 

  Name

  Shou Arisaka nyapp.buzz/shou

  short bio

  Z世代の情報技術者。Next.jsで自作SNSを個人開発中。

wordpressでJavaScriptやCSSファイルを読み込ませたい事があると思います。 そんな時は、以下のようにget_stylesheet_directory_uriを使うと便利です。

【JavaScript】

※親テーマの場合

<script type="”text/javascript”" src="”<?php" echo="" get_template_directory_uri();="" ?="">/js/読み込ませたファイル名”></script>

※子テーマの場合

<script type="”text/javascript”" src="”<?php" echo="" get_stylesheet_directory_uri();="" ?="">/js/読み込ませたファイル名”></script>

【CSS】

※親テーマの場合

    <link rel="”stylesheet”" type="”text/css”" href="”<?php" echo="" get_template_directory_uri();="" ?="">/css/読み込ませたファイル名”&gt;
※子テーマの場合
    <link rel="”stylesheet”" type="”text/css”" href="”<?php" echo　get_stylesheet_directory_uri();="" ?="">/css/読み込ませたファイル名”&gt;

子テーマのjsフォルダにある3つのファイルを読み込ませたいとします。

<!-- particles.js -->

  <div id="particles-js"></div>

  <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/app.js"></script>
  <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/particles.js"></script>
  <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/lib/stats.js"></script>

これは、実際には以下のようになります。

<div id="particles-js"></div>

<script type="text/javascript" src="https://fuumin.net/wp-content/themes/hamingbird-child/js/app.js"></script>
<script type="text/javascript" src="https://fuumin.net/wp-content/themes/hamingbird-child/js/particles.js"></script>
<script type="text/javascript" src="https://fuumin.net/wp-content/themes/hamingbird-child/js/lib/stats.js"></script>

これをに読み込ませたい場合も、に読み込ませたい場合も、header.phpに記載します。 子テーマに親テーマのheader.phpをコピーして、それを編集します。

CSSを読み込ませたい場合も、やり方はほとんど同じです。