Antworten auf deine Fragen:
Neues Thema erstellen

Wie bindest Du überwiegend weitere CSS, JS & Bibliotheken (jQuery, Bootstrap etc.) ein?

  • header.php

    Stimmen: 1 16,7%
  • functions.php

    Stimmen: 5 83,3%

  • Umfrageteilnehmer
    6
  • Umfrage geschlossen .

WP: CSS & JS einbinden - header vs. functions.php

patrick_l

Hat es drauf

Hi allerseits,

ich schreibe gerade ein neues "OnePager" Theme für WordPress. Mir jetzt ein paar Gedanken mache, bezüglich des Einbindens der einzelnen CSS, Scripte und Co. Bisher überwiegend direkt in der header und footer.php eingebunden.

Würde jetzt jedoch gerne, um Probleme vorzubeugen den Weg über die functions.php gehen. Jedoch gerade nicht weiß, wie ich es bei Scripten und CSS mache, die über Conditional Comments für den IE eingebunden werden. Geht primär um html5shiv und respond.js. Wollte sie erst über CDN einbinden, jetzt doch auf Nummer sicher gehe, und selber hoste. Jemand ne Idee?

Mich interessiert auch, wie ihr es handhabt. Daher jetzt mal hier in die Runde frage.

Liebe Grüße, Patrick
 
Zuletzt bearbeitet:

patrick_l

Hat es drauf

Genial! Werde ich auf jeden Fall weiter verfolgen. Wie sieht es da derzeit im Bezug auf Child-Themes aus? Mein Theme beinhaltet derzeit nur die Basics. Sprich nur den Loop in die index-, page- und single.php gepackt. Mit einem Child-Theme den Rest umsetze.

Habe anfangs auch angedacht das HTML5 Boilerplate mit einzubeziehen. Es jetzt jedoch auf Bootstrap und ein paar eigene Scripte reduziert habe. Auch erst mal nur mit LESS anpacke. Später vielleicht noch ne SASS Version angehe. Wie dem auch sei, geht mir jetzt primär um das Einbinden der einzelnen Sourcen. Mit deinem repo schon einen ordentlichen Sprung nach vorne gemacht.

Liebe Grüße, Patrick
 

cythux

Aktives Mitglied

Child Themes nutze ich selber eigentlich garnicht.

Weil ich nicht weiß wie das aussieht, wenn zb die js/CSS doppelt eingebunden werden.
Aus diesem grund habe ich bei mir im Theme eine app.css eingebunden
 

patrick_l

Hat es drauf

Child Themes nutze ich selber eigentlich garnicht
Ich eigentlich auch nicht. Sich jedoch bei mir gerade anbietet bzw. den "OnePager" als Child-Theme umsetze. Damit mehr oder weniger zwei Darstellung erlaube.
Weil ich nicht weiß wie das aussieht, wenn zb die js/CSS doppelt eingebunden werden.
Werden sie ja nicht per se. Ziehe sie einfach vom Parent-Theme. In der front-page.php des Child-Themes dann in den jeweiligen Loops die einzelnen Seiten ausgebe. In der functions.php dann eigentlich nur die fürs Child-Theme relevanten CSS und JS notiert werden.
 

patrick_l

Hat es drauf

Danke dir, habe deinen Beitrag zwar gelesen. Bin jedoch dank Arbeit noch nicht dazu gekommen zu schreiben. Auf tutplus auf jeden Fall gut erklärt. Mit dem Template von cythux auch nen ganzen Stück weiter.

Die functions.php steht auch soweit und läuft bisher wie es soll bzw. wie ich wünsche. Jedoch immer noch überlege, wie ich am besten HTML5shim inkl. respond.js vis Conditional Comments einbinde. Mir jetzt verschiede Ansätze angeschaut. Hier ein Auszug aus meiner functions.php:
PHP:
<?php
// Add theme core
function theme_core_scripts (){
    // Add bootstrap stylesheets
    wp_enqueue_style('bootstrap_css', get_template_directory_uri() . '/assets/css/bootstrap.min.css', '201501', true);
    wp_enqueue_style('bootstrap_css', get_template_directory_uri() . '/assets/css/application.css', '201501', true);
    // Add bootstrap scripts
    wp_register_script( 'jquery', get_template_directory_uri() . '/js/libs/jquery.min.js' array('jquery'), '201502', false);
    wp_register_script( 'bootstrap', get_template_directory_uri() . '/js/libs/bootstrap.min.js', array(), '201502', false);
    wp_register_script( 'plugins', get_template_directory_uri() . '/js/plugins.js', array(), '20150201', false);
    wp_register_script( 'scripts', get_template_directory_uri() . '/js/scripts.js', array(), '20150201', false);
    // Add html5shim/respond if lt IE9
    if (preg_match('/(?i)msie [6-8]/',$_SERVER['HTTP_USER_AGENT'])){
        global $wp_scripts;
        wp_register_script( 'html5shim_respond_lt_ie9', get_template_directory_uri() . '/assets/js/libs/html5respond.min.js', array(), '201502', true);
        $wp_scripts->add_data( 'html5shim_respond_lt_ie9', 'conditional', 'lt IE 9' );
    }
}
add_action('wp_enqueue_scripts', 'theme_core_scripts');

Der Gedanke dahinter, HTML5shim nur dann zu laden, wenn die Seite von einem IE 8 oder kleiner aufgerufen wird. Ist dem so, soll das Script im Kopfbereich mittels Conditional Comments geladen werden. Wohl gleich mit anmerke, das für den IE6 nur das Script läuft. IE7 eventuell noch anpasse. Die zweite Version ist dabei mit Verzicht der CC. Lediglich Abfrage ob IE, wenn ja 8er oder kleiner.

PHP:
<?php

// Add Bootstrap (scripts, libs & stylesheets)
function bootstrap_scripts (){
    wp_register_script( 'jquery', get_template_directory_uri() . '/js/libs/jquery.min.js' array('jquery'), '20150201', false);
    wp_register_script( 'bootstrap', get_template_directory_uri() . '/js/libs/bootstrap.min.js', array(), '20150201', false);
    wp_register_script( 'plugins', get_template_directory_uri() . '/js/plugins.js', array(), '20150201', false);
    wp_register_script( 'scripts', get_template_directory_uri() . '/js/scripts.js', array(), '20150201', false);
    // Add html5shim/respond if lt IE9
    if (preg_match('/(?i)msie [6-8]/',$_SERVER['HTTP_USER_AGENT'])){
        wp_register_script('html5shim_respond', get_template_directory_uri() . '/assets/js/libs/html5respond.min.js', array(), '20150201', true);
    }
}
add_action('wp_enqueue_scripts', 'bootstrap_scripts');

Zu guter Letzt noch jQuery am "laufen" bringen muss. @cythux wie in deinem Template. So alles meiner Meinung nach sauber und übersichtlich in einer function notiert. Falls ihr Fehler findet, wäre entsprechendes Feedback super. Arbeite an dem OnePager seit einigen Tagen. Bin schon gespannt wie er läuft, wenn mal alles komplett ist. :)

Liebe Grüße, Patrick
 
Zuletzt bearbeitet:

patrick_l

Hat es drauf

So, nochmal ein Nachtrag ;)

Habe dein Template (@cythux) umgeschrieben. jQuery jetzt doch via CDN lade, Fallback von stackexchange nutze, trotzdem modernizr raus und dafür html5shim inkl. respond.js rein. Jetzt noch mit LESS (bzw. Compiler) ergänze. Jedoch nicht in der core.php (scripts.php).

PHP:
<?php
// Theme core 1.0 (enqueue scripts and stylesheets)
function theme_core_scripts (){
    // Add bootstrap stylesheets
    wp_enqueue_style('bootstrap_css', get_template_directory_uri() . '/assets/css/bootstrap.min.css', false, '2015v1');
    wp_enqueue_style('bootstrap_css', get_template_directory_uri() . '/assets/css/application.min.css', false, '2015v1');
    // Grab Google CDN's (latest jQuery)
    if (!is_admin() && current_theme_supports('jquery-cdn')) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', false, null, false);
    add_filter('script_loader_src', 'bootstrap_jquery_local_fallback', 10, 2);
  }
  if (is_single() && comments_open() && get_option('thread_comments')) {
    wp_enqueue_script('comment-reply');
  }
  // Add bootstrap and scripts
  wp_register_script('bootstrap_scripts', get_template_directory_uri() . '/assets/js/libs/scripts.min.js', false, '2015v1', true);
  // Add html5shim/respond (if lt IE9)
    if (preg_match('/(?i)msie [6-8]/',$_SERVER['HTTP_USER_AGENT'])){
        global $wp_scripts;
        wp_register_script( 'html5shim_respond_lt_ie9', get_template_directory_uri() . '/assets/js/libs/html5respond.min.js', array(), '2015.Q1.02', true);
        $wp_scripts->add_data( 'html5shim_respond_lt_ie9', 'conditional', 'lt IE 9' );
    }
  wp_enqueue_script('html5shim_respond_lt_ie9');
  wp_enqueue_script('jquery');
  wp_enqueue_script('bootstrap_scripts');
}
add_action('wp_enqueue_scripts', 'theme_core_scripts', 100);

// Add jQuery fallback
function bootstrap_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/libs/jquery.min.js"><\/script>\')</script>' . "\n";
    $add_jquery_fallback = false;
  }
  if ($handle === 'jquery') {
    $add_jquery_fallback = true;
  }
  return $src;
}

/* Credits:
* - wp/bootstrap by cythux (https://github.com/cythux/wordpress-bootstrap)
* - fallback by stackexchange (http://wordpress.stackexchange.com/a/12450)
*/

Liebe Grüße, Patrick
 

patrick_l

Hat es drauf

So, diesen Thread nochmal hochhole. ;) @cythux Ich habe an deinem Repo weiter geschraubt. Habe bei mir HTML5Shim und Respond.js wieder heraus genommen. Sprich wieder zurück geschraubt.

Da das Theme "up to date" sein soll, im Puncto jQuery auf die 2er Version gewechselt. Für den IE8 dennoch ein Fallback auf die 1er gemacht. Sowohl für CDN und offline. Wäre super wenn ihr da nochmal einen Blick drauf werfen könntet.

PHP:
<?php
/**
* Enqueue scripts and stylesheets
*
* Enqueue stylesheets in the following order:
* 1. /theme/assets/css/core.min.css
*
* Enqueue scripts in the following order:
* ---| jQuery |-----------------------------------------------------------------------------
* 1.1 jquery-1.11.3.min.js IE8 fallback via Google CDN
* 1.2 jquery-2.1.4.min.js via Google CDN
* CDN fallback:
* 1.3 jquery-1.11.3.min.js IE8 fallback to local if offline
* 1.4 jquery-2.1.4.min.js fallback to local if offline
* ------------------------------------------------------------------------------------------
* ---| Polyfills |--------------------------------------------------------------------------
* 2 /theme/assets/js/vendor/modernizr-2.8.3.min.js
* ------------------------------------------------------------------------------------------
* ---| Primary |----------------------------------------------------------------------------
* 3 /theme/assets/js/functions.min.js (in footer)
* ------------------------------------------------------------------------------------------
*/

function core_scripts () {
  // Enquere stylesheets
  wp_enqueue_style('core_css' get_template_directory_uri() .  '/assets/css/core.min.css', false, '0');

  // Grab latest jQuery from Google CDN's with a protocol relative URL; fallback to local if offline
  if (!is_admin() && current_theme_supports('jquery-cdn')) {
    wp_deregister_script('jquery');
    // Google CDN fallback if lte IE 8
    if (preg_match('/(?i)msie [6-8]/',$_SERVER['HTTP_USER_AGENT'])){
      wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', false, null, false);
    }
    else (){
      wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', false, null, false);
    }
    add_filter('script_loader_src', 'jquery_local_fallback', 10, 2);
  }

  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.8.3.min.js', false, null, false);
  wp_register_script('functions', get_template_directory_uri() . '/assets/js/functions.min.js', false, '0', true);
  // Enquere scripts
  wp_enqueue_script('jquery');
  wp_enqueue_script('modernizr');
  wp_enqueue_script('functions');
}

function jquery_local_fallback ($src, $handle) {
  static $add_jquery_fallback = false;

  if ($add_jquery_fallback) {
    // Google CDN fallback for lte IE 8, local if offline
    if (preg_match('/(?i)msie [6-8]/',$_SERVER['HTTP_USER_AGENT'])) {
      echo '<script>window.jQuery || document.write(\'<script src="' . get_template_directory_uri() . '/assets/js/vendor/jquery-1.11.3.min.js"><\/script>\')</script>' . "\n";
      $add_jquery_fallback = false;
    }
    else {
      echo '<script>window.jQuery || document.write(\'<script src="' . get_template_directory_uri() . '/assets/js/vendor/jquery-2.1.4.min.js"><\/script>\')</script>' . "\n";
      $add_jquery_fallback = false;
    }
  if ($handle === 'jquery') {
    $add_jquery_fallback = true;

  return $src;
  }
}

function google_analytics() { ?>
  <script>
    (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
    function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
    e=o.createElement(i);r=o.getElementsByTagName(i)[0];
    e.src='//www.google-analytics.com/analytics.js';
    r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
    ga('create','<?php echo GOOGLE_ANALYTICS_ID; ?>');ga('send','pageview');
  </script>
  <?php }
    if (GOOGLE_ANALYTICS_ID) {
    add_action('wp_footer', 'google_analytics', 20);
}

Liebe Grüße, Patrick
 

afr0kalypse

Allwissendes Karmameerschweinchen!

Hi patrick_l. Ich würde bevorzugen, deine lokale jquery.min.js als Standard zu nutzen. Externe Ressoucen sind fast nie schneller als deine eigenen. Ansonsten ziemlich cool, was du da baust. Bin auf das Ergebnis sehr gespannt :)
 

patrick_l

Hat es drauf

Ich würde bevorzugen, deine lokale jquery.min.js als Standard zu nutzen. Externe Ressoucen sind fast nie schneller als deine eigenen.
Zugegeben, ich nutze CDN an sich relativ wenig. Habe das ganze mehr oder weniger von cythux adaptiert und erweitert. Hier nochmal ohne CDN:
PHP:
<?php
/**
* Enqueue scripts and stylesheets
*
* Enqueue stylesheets in the following order:
* 1. /theme/assets/css/core.min.css
*
* Enqueue scripts in the following order:
* ---| jQuery |-----------------------------------------------------------------------------
* 1.1 jquery-1.11.3.min.js IE8 fallback
* 1.2 jquery-2.1.4.min.js
* ------------------------------------------------------------------------------------------
* ---| Polyfills |--------------------------------------------------------------------------
* 2 /theme/assets/js/vendor/modernizr-2.8.3.min.js
* ------------------------------------------------------------------------------------------
* ---| Primary |----------------------------------------------------------------------------
* 3 /theme/assets/js/functions.min.js (in footer)
* ------------------------------------------------------------------------------------------
*/
function core_scripts () {
    // Enquere stylesheets
  wp_enqueue_style('core_css' get_template_directory_uri() .  '/assets/css/core.min.css', false, '0');
  // Deregister jQuery
  wp_deregister_script('jquery');
  // Register latest jQuery with lte 8 fallback
  if (preg_match('/(?i)msie [6-8]/',$_SERVER['HTTP_USER_AGENT'])){
      wp_register_script('jquery', get_template_directory_uri() . '/assets/js/vendor/jquery-1.11.3.min.js', false, null, false);
  }
  else () {
      wp_register_script('jquery', get_template_directory_uri() . '/assets/js/vendor/jquery-2.1.4.min.js', false, null, false);
  }

  if (is_single() && comments_open() && get_option('thread_comments')) {
    wp_enqueue_script('comment-reply');
  // Register polyfills
  wp_register_script('modernizr', get_template_directory_uri() . '/assets/js/vendor/modernizr-2.8.3.min.js', false, null, false);
  // Register functions
  wp_register_script('functions', get_template_directory_uri() . '/assets/js/functions.min.js', false, '0', true);
  // Enquere scripts
  wp_enqueue_script('jquery');
  wp_enqueue_script('modernizr');
  wp_enqueue_script('functions');
}

function google_analytics() { ?>
  <script>
    (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
    function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
    e=o.createElement(i);r=o.getElementsByTagName(i)[0];
    e.src='//www.google-analytics.com/analytics.js';
    r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
    ga('create','<?php echo GOOGLE_ANALYTICS_ID; ?>');ga('send','pageview');
  </script>
  <?php }
    if (GOOGLE_ANALYTICS_ID) {
    add_action('wp_footer', 'google_analytics', 20);
}
Ebenso statt modernizr das HTML5Shim mit Respond.js
PHP:
if (preg_match('/(?i)msie [6-8]/',$_SERVER['HTTP_USER_AGENT'])) {
  wp_register_script('html5shim', get_template_directory_uri() . '/assets/js/vendor/html5shim.min.js', false, null, false);
  wp_register_script('respond', get_template_directory_uri() . '/assets/js/vendor/respond.min.js', false, null, false);
}
Jetzt am überlegen ob ich LESS Client oder Server-seitig compiliere. Wird denke ich auf letzteres hinaus laufen. ;)
Ansonsten ziemlich cool, was du da baust. Bin auf das Ergebnis sehr gespannt :)
Danke, ich bin selber gespannt wie es am Ende läuft. :)

Liebe Grüße, Patrick
 

afr0kalypse

Allwissendes Karmameerschweinchen!

Jetzt am überlegen ob ich LESS Client oder Server-seitig compiliere. Wird denke ich auf letzteres hinaus laufen. ;)
Natürlich serverseitig. Clientseitig ist eigentlich nur für Entwicklungszwecke gedacht.

http://lesscss.org/#client-side-usage

Wobei less wohl einiges umständlicher macht als sass. Vielleicht einer Alternative für dich? :)

Bezüglich jquery: Theoretisch könnte man einen Grunt / Bower Task laufen lassen der täglich einmal die eigene jquery Version mit dem aktuellen Stand vergleicht und ggf updated...
 

patrick_l

Hat es drauf

Wobei less wohl einiges umständlicher macht als sass. Vielleicht einer Alternative für dich? :)
Kennst du aus Kindertagen dieses Funkeln in den Augen, wenn man an Weihnachten eines der Geschenke auspackt, die man sich immer gewünscht hat. :D So geht es mir gerade mit Sass. In den letzten Stunden einen Artikel nach dem anderen rein gezogen und hell auf begeistert bin. :D

Mir gerade CodeKit gegönnt. Unter Windows mit Scout compiliere. Kann nur sagen: „Sass rockt!“ :) Was die Syntax von Sass angeht, mir so mehr zusagt. Vor allem bei Mixins und Co. Einfach einrücken, compilieren und fertig. Mich in den kommenden Tage da noch weiter reinfuchsen werden. Wenn alles sitzt, HUML an der reihe ist. :)
Bezüglich jquery: Theoretisch könnte man einen Grunt / Bower Task laufen lassen der täglich einmal die eigene jquery Version mit dem aktuellen Stand vergleicht und ggf updated...
Ist mir erst einmal nicht so wichtig. Dennoch auf meinem Merkzettel notiert. Alex, nochmal ein dickes Dankeschön für deine Vorschläge.

Liebe Grüße, Patrick
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.634
Beiträge
1.538.447
Mitglieder
67.555
Neuestes Mitglied
scheflo
Oben