Mit Mühe habe ich ein Child Theme nach den aktuellen Vorgaben über functions.php gebastelt. Inzwischen läuft diese Konstruktion wunderbar für CSS und übernommene PHP-Dateien wie Header. Aber eine Nutzung vom Child Theme für JavaScript ist bislang nicht möglich.
Ich habe im Child-Ordner ein Verzeichnis js für die custom.js angelegt. In functions.php lautet der Code für CSS ud für JavaScript:
<?php
function mein_js_laden() {
wp_dequeue_script('parent-theme');
wp_enqueue_script('handlerMeinesScripts', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery')
/** Name des Scripts (benötigt man z.B. zum Entfernen, etc.); Ort der Script-Datei;
Liste der Scripts, welche von der Script-Datei benötigt werden - in diesem Falle das von Wordpress geladene jqeury
*
*/
);
}
add_action('wp_enqueue_scripts', 'mein_js_laden');
?>
<?php
/**
* Bei Umstellung von grün auf anderes Farbschema in functions.php muss in green_complete:css der Eintrag important für hover entfernt werden
*
* dann muss evtl. an gleicher Stelle in der dann benutzten CSS des Farbschemas important gesetzt werden; so kann (die in diesem Fall alte) green_complete.css auch bei Wechsel in functions.php stehen bleiben
*
* natürlich müsste dann noch Eintrag des neuen Farbschemas in functions.php erfolgen
* ----------------------------------------------------------------------------
*/
function load_parent_style() {
wp_register_style('parent-theme', get_bloginfo('template_directory').'/style.css');
wp_register_style('parent-theme', get_bloginfo('template_directory').'/css/color_scheme/green.css');
wp_enqueue_style('parent-theme');
}
add_action('wp_head','load_parent_style',0);
?>
<?php
function enqueue_styles() {
wp_enqueue_style( 'custom', get_stylesheet_directory_uri().'/green_complete.css', array(), 1.0, 'screen' );
wp_enqueue_style( 'custom', get_stylesheet_directory_uri().'/style.css', array(), 1.0, 'screen' );
}
add_action('wp_enqueue_scripts', 'enqueue_styles');
?>Für i-transform habe ich eine Subnavi erstellt, die von diesem Theme nicht vorgesehen ist. Dem div-Container mit den Menü-Elementen habe ich die Klasse "extra-container" verpasst, weil die Hauptnavi die Klasse "nav-container" trägt. In JavaScript möchte ich erreichen, dass auch die Elemente von "extra-container" im mobilen toggle-Menü berücksichtigt werden. Die dafür nötige Änderung funktioniert im Parent Theme mit:
/* Side responsive menu */
$('.menu-toggle').sidr({
name: 'sidr-left',
side: 'left',
source: '.nav-container, .extra-container',
onOpen: function() {
$('.menu-toggle').animate({
marginLeft: "260px"
}, 200);
},
onClose: function() {
$('.menu-toggle').animate({
marginLeft: "0px"
}, 200);
}
});Wenn ich aber den etwas kürzeren Ursprungscode im Parent Theme belasse und diesen veränderten Code in meine custom.js eintrage, passiert leider nichts - obwohl custom.js in meinem Child Theme durch die Angaben in functions.php wohl auch erkannt wird. Jedenfalls zeigt der Quellcode die korrekten Daten. Trotzdem überlagert meine Modifizierung in custom.js nicht die entsprechende Stelle im Original von i-transform/js/functions.js - was ist bloß los?