JS-Datei im Header verlinken - wie genau geht das?

dn3d_fanboy · 01.02.2014

Hallo,
ich möchte im Header meiner WP-Seite eine JS-Datei verlinken, die in einem Unterverzeichnis meines Themes ist.
Wie genau verlinke ich das nun?
Im Html sieht es momentan noch so aus:

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.js"></script>
    <script type="text/javascript" src="js/jquery.flexslider.js"></script>

Es geht um die letzten beiden JS-Dateien. Nehme ich da die komplette URL der Seite, bzw. den Pfad der Datei oder geht das ähnlich wie bei eigenen CSS-Dateien auch flexibler?

Ich hoffe mir kann jemand helfen.

Besten Dank im Voraus.

cythux · 02.02.2014

Hier so binde ich es meistens bei mir ein die Datei nennt sich dann zb script.php, in der function.php bin ich diese mittels require_once ein

Code:

<?php
/**
* Scripts and stylesheets
*
* Enqueue stylesheets in the following order:
* 1. /theme/assets/css/bootstrap.css
* 2. /theme/assets/css/bootstrap-responsive.css
* 3. /theme/assets/css/app.css
* 4. /child-theme/style.css (if a child theme is activated)
*
* Enqueue scripts in the following order:
* 1. jquery-1.9.1.min.js via Google CDN
* 2. /theme/assets/js/vendor/modernizr-2.6.2.min.js
* 3. /theme/assets/js/plugins.js (in footer)
* 4. /theme/assets/js/main.js    (in footer)
*/

function deinTheme_scripts() {
  wp_enqueue_style('deinTheme_bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.css', false, null);
  wp_enqueue_style('deinTheme_bootstrap_responsive', get_template_directory_uri() . '/assets/css/bootstrap-responsive.css', array('c1nm_bootstrap'), null);
  wp_enqueue_style('deinTheme_app', get_template_directory_uri() . '/assets/css/app.css', false, null);

  // Load style.css from child theme
  if (is_child_theme()) {
    wp_enqueue_style('deinTheme_child', get_stylesheet_uri(), false, null);
  }

  // jQuery is loaded using the same method from HTML5 Boilerplate:
  // Grab Google CDN's latest jQuery with a protocol relative URL; fallback to local if offline
  // It's kept in the header instead of footer to avoid conflicts with plugins.
  if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', false, null, false);
  }

  if (is_single() && comments_open() && get_option('thread_comments')) {
    wp_enqueue_script('comment-reply');
  }

  wp_register_script('modernizr', get_template_directory_uri() . '/assets/js/vendor/modernizr-2.6.2.min.js', false, null, false);
  wp_register_script('deinTheme_plugins', get_template_directory_uri() . '/assets/js/plugins.js', false, null, true);
  wp_register_script('deinTheme_main', get_template_directory_uri() . '/assets/js/main.js', false, null, true);
  wp_enqueue_script( 'fitvids', get_template_directory_uri() . '/assets/js/vendor/jquery.fitvids.min.js', array( 'jquery' ), '1.1' );



  wp_enqueue_script('jquery');
  wp_enqueue_script('modernizr');
  wp_enqueue_script('deinTheme_plugins');
  wp_enqueue_script('deinTheme_main');
}

add_action('wp_enqueue_scripts', 'c1nm_scripts', 100);

// http://wordpress.stackexchange.com/a/12450
function c1nm_jquery_local_fallback($src, $handle) {
  static $add_jquery_fallback = false;

  if ($add_jquery_fallback) {
    echo '<script>window.jQuery || document.write(\'<script src="' . get_template_directory_uri() . '/assets/js/vendor/jquery-1.9.1.min.js"><\/script>\')</script>' . "\n";
    $add_jquery_fallback = false;
  }

  if ($handle === 'jquery') {
    $add_jquery_fallback = true;
  }

  return $src;
}

if (!is_admin()) {
  add_filter('script_loader_src', 'deinTheme_jquery_local_fallback', 10, 2);
}

function c1nm_google_analytics() { ?>
<script>
  var _gaq=[['_setAccount','<?php echo GOOGLE_ANALYTICS_ID; ?>'],['_trackPageview']];
  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<?php }
if (GOOGLE_ANALYTICS_ID) {
  add_action('wp_footer', 'deinTheme_google_analytics', 20);
}

afr0kalypse · 07.02.2014

Alternativ geht auch:

PHP:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/datei.js"></script>

Da Wordpress aber schon jQuery anbietet, würde ich ganz klar cythux' Variante empfehlen.

Übrigens: Bitte nicht im Header laden, sondern im Footer, bzw. vor </body>