Coding | Javascript | PHP | WordPress | WP-Themes

Beispiel für Inline-Javascript in einem Parent-Theme, und wie man es los wird

car 1281659 1920

Beim Theme handelt es sich um Goodnews – Responsive WordPress News/Magazine. Es wurde nach einer Präsentation ausgewählt, weil es visuell und technisch von den sechs in Frage kommenden Optionen den damals vorgebrachten Anforderungen am nächsten war.

Theme-Einstellungen werden mit dem Options-Framework redux über die Settings-API abgewickelt. Visual Composer ist als Page Builder integriert. Ein paar themeeigene Shortcodes ergänzen die Bandbreite verfügbarer Inhaltselemente. Und hier liegt auch das Inline-Javascript, genauer gesagt, in der Datei \wp-content\themes\goodnews5\framework\shortcodes\news-elements.php, und betrifft dort einen Shortcode.

Die benutzerdefinierten Widgets und Module von Goodnews sind überschreibbar. Die zu ersetzende Funktion kann also in ein Childtheme kopiert und nach eigenen Wünschen modifiziert werden. Andernfalls hätte es eine neue Funktion sein müssen, und ein neuer Shortcode definiert und verwendet, was auch eine Option gewesen wäre.

Die Originalfunktion aus dem Theme mit Inline-Javascript

if (!function_exists('mom_elements_scrolling_box')) {
function mom_elements_scrolling_box($atts, $content = null) {
// code davor ...
	?>
	<script>
		jQuery(document).ready(function($){
				var rtl = false;
				<?php if (is_rtl()) { ?>
					rtl = true;
				<?php } ?>
				var rows = <?php echo $rows; ?>;
				if (rows !== '' && rows > 1) {
				 	var divs = $(".sb-content-<?php echo $rndn; ?> .sb-item");
					for(var i = 0; i < divs.length; i+=rows) {
					  divs.slice(i, i+rows).wrapAll("<div class='rows-<?php echo $rows; ?>'></div>");
					}
				}

			 $(".sb-content-<?php echo $rndn; ?>").owlCarousel({
				items: <?php echo $items; ?>,
				baseClass: 'mom-carousel',
				rtl: rtl,
				autoplay:<?php echo $autoplay; ?>,
				autoplayTimeout:<?php echo $timeout; ?>,
				autoplayHoverPause : true,
				responsive:{
				1000:{
				  items:<?php echo $items; ?>
				},

				671:{
				  items:3
				},

				480:{
				  items:2
				},

				320:{
				  items:1
				},
				1:{
				  items:1
				}
					     }
			});
		});
	</script>
	<?php

// code danach ...
}
add_shortcode('scrolling_box', 'mom_elements_scrolling_box');

Inhalt auszulagernder Javascript-Datei

Im Beispiel nannte ich die Datei mombox-front.js. Abgelegt ist sie im Childtheme unter einem Verzeichnis js.

jQuery(document).ready(function($){
	var rtl = ( mombox['rtl'] == 1 ? true : false );
	var rows = mombox['rows'];
	var rndn = mombox['rndn'];
	
	if ( rows > 1) {
		var divs = $(".sb-content-" + rndn + " .sb-item");
		for(var i = 0; i < divs.length; i+=rows) {
			divs.slice(i, i+rows).wrapAll("<div class='rows-"+rows+"'></div>");
		}
	}

	$(".sb-content-" + rndn ).owlCarousel({
		items: mombox['items'],
		baseClass: 'mom-carousel',
		rtl: rtl,
		autoplay:mombox['autoplay'],
		autoplayTimeout:mombox['timeout'],
		autoplayHoverPause : true,
		responsive:{
			1000:{
			  items:mombox['items']
			},

			671:{
			  items:3
			},

			480:{
			  items:2
			},

			320:{
			  items:1
			},
			1:{
			  items:1
			}
		}
	});
});

Funktion die das Skript registriert

Der neue Shortcode ladet nicht nur das Skript mit wp_enqueue_script, sondern übergibt ihm auch via wp_localize_script die Parameter, die wie ich vermute der Grund für die Inline-Variante waren. Insgesamt bleibt die neue Vorgehensweise der ursprünglichen noch recht nahe. Das Inline-Skript ist nun allerdings weg und steht Optimierungsmaßnahmen nicht mehr im Weg.

function pptf_news_box_script() {
	wp_register_script('mombox-front', get_stylesheet_directory_uri() . '/js/mombox-front.js', array('jquery'), null, true );
} 
add_action( 'wp_enqueue_scripts', 'pptf_news_box_script' );

Der im Childtheme neu geschriebene Teil

Der folgende Abschnitt ersetzt jenen Teil der Originalfunktion die das Javascript generiert.

function mom_elements_scrolling_box($atts, $content = null) {
	// code davor...		
		wp_enqueue_script('mombox-front');
		wp_localize_script(
			'mombox-front', 
			'mombox', 
			array( 
				'rtl' => $rtl,
				'rows' => $rows,
				'rndn' => $rndn,
				'items' => $items,
				'autoplay' => $autoplay,
				'timeout' => $timeout
			)
		);
        // code danach ...
} 

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.