Während ein Plugin (in WordPress) eine Art Funktionalität oder Tool ist, ist ein Package eine Sammlung von mindestens einem oder mehr Modulen. Wenn du dich mit WordPress Entwicklung beschäftigst, weißt du, dass Packages helfen, mit bestimmten Entwicklungsthemen umzugehen. In diesem Beitrag möchten wir ein neues Composer Package vorstellen, welches den Umgang mit Skripten und Styles in WordPress in einer objektorientierten Umgebung ermöglicht. Es ist auf GitHub frei verfügbar.

Das WordPress Composer Package Inpsyde Assets

Das Package ist ein OOP Wrapper. Es erlaubt, Skripte und Styles in einer WordPress Seite in unterschiedlichen Locations zu registrieren und zu enqueuen.

Die Mindestvoraussetzungen, um dieses Package nutzen zu können, sind PHP 7+ und WordPress latest-2. Für den Fall, dass du das Package für Development via Composer installieren möchtest, benötigt Inpsyde Assets außerdem:

  • phpunit/phpunit (BSD-3-Clause)
  • brain/monkey (MIT)
  • inpsyde/php-coding-standards

Installiere das Package einfach über Composer:

$ composer require inpsyde/assets

Wenn du Assets in deinem Theme oder Plugin nutzt, kannst du einfach auf den Inpsyde\Assets\AssetManager zugreifen, indem du einen Haken beim Setup-hook setzt.

Auf diese Weise kannst du damit beginnen, deine Assets zu registrieren:

<?php
use Inpsyde\Assets\AssetManager;
use Inpsyde\Assets\Script;
use Inpsyde\Assets\Style;
use Inpsyde\Assets\Asset;


add_action( 
	AssetManager::ACTION_SETUP, 
	function(AssetManager $assetManager) {
	
		$assetManager->register(
			new Script('foo', 'foo.js'),
			new Style('foo', 'foo.css')
		);
	}
);

Die AssetFactory

Statt Instanzen per Hand zu erstellen, ist es manchmal einfacher, die Konfiguration über Array oder Datei zu nutzen, um deine spezifischen Assets zu verwalten.

config/assets.php

<?php
use Inpsyde\Assets\Asset;
use Inpsyde\Assets\Script;
use Inpsyde\Assets\Style;

return [
    [
		'handle' => '',
		'url' => 'example.com/assets/foo.css',
		'location' => Asset::FRONTEND,
		'type' => Style::class
    ],
    [
		'handle' => 'bar',
		'url' => 'example.com/assets/bar.js',
		'location' => Asset::FRONTEND,
		'type' => Script::class
    ],
];

In deiner Anwendung kannst du alle Assets von dieser Datei erstellen, indem du die Inpsyde\Assets\AssetFactory nutzt:

<?php
use Inpsyde\Assets\AssetManager;
use Inpsyde\Assets\AssetFactory;

add_action( 
	AssetManager::ACTION_SETUP, 
	function(AssetManager $assetManager) {
		$assetManager->register(
			...AssetFactory::createFromFile('config/assets.php')
		);
	}
);

Assets

Es werden zwei Hauptklassen ausgegeben:

  • Inpsyde\Assets\Script – arbeitet mit JavaScript-Dateien.
  • Inpsyde\Assets\Style – arbeitet CSS-Dateien.

Jede Instanz benötigt eine string $handle, string $url, int $location und optional eine Konfiguration über array $config.

Folgende Konfigurationen sind verfügbar:

PropertyTypDefaultScriptStyleBeschreibung
dependenciesarray []xxalle definierten abhängigen Handles
locationintgreift zurück auf
Asset::FRONTEND
xxhängt von der Location des
Assets ab, es wird mit verschiedenen Hooks enqueued
versionstring''xxVersion des gegebenen Assets
enqueuebool/callabletruexxIst das Asset nur registiert oder auch enqueued
dataarray/callable[]xxWeitere Daten, die dem Asset
zugewiesen sind
filterscallable[][]xxEin Array von Inpsyde\Assets\OutputFilter
oder rufbare Werte, um den Output zu manipulieren
handlerstringScript
Handler::class

oder
Style Handler::class
xxDer Handler, welcher genutzt wird, um das Asset zu registrieren/
enqueuen
localizearray/callable[]xlokalisiertes Array
von Daten, die an Script angehangen sind
inFooterbooltruexdefiniert, ob das aktuelle Script im Footer gezeigt wird
mediastring'all'xMedientyp für Style
Asset locations

Standardmäßig hat das Package vordefinierte Locations für Assets:

consthooklocation
Asset::FRONTENDwp_enqueue_scriptsFrontend
Asset::BACKENDadmin_enqueue_scriptsBackend
Asset::LOGINlogin_enqueue_scriptswp-login.php
Asset::CUSTOMIZERcustomize_controls_enqueue_scriptsCustomizer

Um doppelte Registierugenen von Assets in unterschiedlichen Locations wie Backend und Frontend zu vermeiden, ist es möglich, mehrere Locations über bitwise operator | (OR) hinzuzufügen.

Weitere Information über WordPress Composer Package Inpsyde Assets

Du kannst  OutputFilters nutzen, welche dafür bestimmt sind, den Output des Scriptsvia  script_loader_tag und Style via style_loader_tag zu manipulieren. Auf GitHub geben wir dir weitere Informationen darüber, welche OutputFilter Inpsyde Assets anbietet. Außerdem sagen wir dir, wie du selbst deinen eigenen Filter erstellst.

Fragen?

Wenn du Fragen oder Feedback hast, lasse einfach einen Kommentar hier und wir antworten dir 🙂

Antwort abgeben

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