Updateproblematik

Gut, vorher nicht nachgedacht, und alles für das Parallax Scrolling in die Theme-spezifischen Dateien gepackt. Heute gab es dann ein Update für das Theme – und damit war dann auch alles wieder weg.

Damit ich jetzt nicht jedes Mal den Code nehmen muss und in die entsprechenden Dateien einfügen will, musste eine Lösung her. Und die schnellste Möglichkeit für mich war da das PlugIn „Child-Themes“.

Das PlugIn erzeugt zu einem frei wählbaren Theme ein Child-Theme, das alle Eigenschaften des Parentthemes importiert. Zum Bearbeiten hat man dann die beiden Dateien style.css und functions.php zur Verfügung.

Der CSS-Teil, um das Parallax Scrolling wieder ans Laufen zu bringen ist einfach – der bereits bekannte body-Teil wird einfach wieder eingebunden:

body {
  margin:0;
  padding:0;
  background:url('http://temp.kuechenscha.be/background.jpg') 50% 0 repeat fixed; min-height: 924px;
  height: 924px;
  margin: 0 auto;
  width: 100%;
  max-width: 2000px;
  position: relative;
  font-family:Arial;
  font-size:14px;
  color:#000000;
}

Natürlich könnte man auch noch bestimmte Eigenschaften herauskürzen, die bereits im Parent-Theme definiert wurden, aber heute sind wir einfach mal faul.

Um zu verhindern, dass der Javascript-Teil immer wieder neu eingefügt werden muss, muss dieser natürlich auch in eine der beiden Theme-Dateien. Da CSS in diesem Fall ausscheidet, also functions.php.

Zum Glück wollen mehr Menschen Javascript in ihr Child-Theme integrieren und so findet man auch schnell den Weg zur WordPress-eigenen Tutorial Seite:

http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Parameters

Da JQuery genutzt wird, interessiert natürlich vor allem der Abschnitt „Link a Theme Script Which Depends on jQuery“.

Nachdem ich dann den bereits fertigen Code in eine JS-Datei gepackt habe, und alles die functions.php entsprechend angepasst hatte…. funktionierte das nicht.

Die fertige functions.php:

<?php
// Exit if accessed directly
if ( !defined('ABSPATH')) exit;

/* Add custom functions below */
function my_scripts_method() {
wp_enqueue_script('parallaxscript', get_stylesheet_directory_uri() . '/js/custom_script.js', array('jquery'));
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Und da merkt man wieder, dass man Tutorials / Anleitungen bis zum Ende lesen sollte. Dann fällt nämlich auf, dass unten ein weiterer Abschnitt mit der Überschrift „jQuery noConflict Wrappers“ folgt. Um Konflikte zu vermeiden, ist es bei WordPress nicht möglich mit dem $-Shortcut auf JQuery zuzugreifen.

Also die .js-Datei noch einmal genommen, entsprechend angepasst und dann funktioniert das auch. Das Skript zum Scrolling-Smoothing habe ich jetzt vorerst weggelassen – eventuell könnte das Scrolling also wieder etwas stockender von Statten gehen.

Die fertige custom_script.js sieht auf jeden Fall so aus:


jQuery(document).ready(function(){
  jQuery(window).scroll(function() {
    var yPos = -(jQuery(window).scrollTop() / 10);
    var coords = '50% '+ yPos + 'px';
    jQuery(document.body).css('background-position', coords);
  });
});

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

500px

© 2014 - Testwiese. All Rights Reserved. Powered by Wordpress and Design by We Create Web Designs