Entwicklung: WordPress Composer Package Inpsyde Assets

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:

[table id=1 /]

Asset locations

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

[table id=2 /]

Um doppelte Registrierugenen 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 🙂

* Vielen Dank an Danial RiCaRoS für das Foto, das wir in diesem Beitrags-Header verwenden.