Wordpress

JavaScript- und CSS-Dateien in WordPress laden

Shou Arisaka
1 Min. Lesezeit
3. Okt. 2025

Es kann vorkommen, dass Sie JavaScript- oder CSS-Dateien in WordPress laden möchten. In solchen Fällen ist es praktisch, get_stylesheet_directory_uri wie folgt zu verwenden.

【JavaScript】

※Für Parent-Theme

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/zu-ladender-dateiname"></script>

※Für Child-Theme

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/zu-ladender-dateiname"></script>

【CSS】

※Für Parent-Theme

    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/zu-ladender-dateiname">
※Für Child-Theme
    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/zu-ladender-dateiname">

Angenommen, Sie möchten drei Dateien aus dem js-Ordner in einem Child-Theme laden.

<!-- 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>

In der Praxis wird dies zu:


<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>

Ob Sie dies im Head oder Body laden möchten, schreiben Sie es in header.php. Kopieren Sie die header.php des Parent-Themes in das Child-Theme und bearbeiten Sie sie.

Die Methode ist fast dieselbe, wenn Sie CSS laden möchten.

Diesen Artikel teilen

Shou Arisaka 3. Okt. 2025

🔗 Links kopieren