Kategorien
Tipps, Tricks & Tutorials WordPress

Unyson Framework Teil 2: So entwickeln Sie Ihr WordPress-Theme

Vor ein paar Tagen stellte ich das neue Unyson Drag and Drop WordPress-Theme-Framework vor und war ob der vielen neuen Möglichkeiten, die Unyson bietet, doch recht angetan. Im heutigen Beitrag schauen wir uns das Framework aus der Sicht des Entwicklers an. Wie schnell erschliesst sich das WordPress Framework dem Entwickler, und vor allem, lässt sich in einer vertretbaren Zeit damit ein Premium WordPress Theme erstellen? Oder sollte man für diesen Einsatzzweck doch auf andere Lösungen zurückgreifen? Werfen wir also einen kritischen Blick unter die Haube von Unyson und zeigen auf, wie gut es – in diesem Entwicklungsstadium – wirklich ist.

Das Unyson Theme Framework für WordPress

Die ersten Schritte mit dem Framework

Nach dem Download der Framework-Dateien vom GitHub-Repository gibt es grundsätzlich zwei Möglichkeiten. Zuerst einmal kann das heruntergeladene Archiv als Theme auf einer Testumgebung installiert werden, um sich mit Unyson vertraut zu machen. Entgegen der Erwartung heisst das Theme nicht Unyson, was ja nahe liegen würde, sondern Scratch. Hiervon gibt es ein Parent Theme, welches man installieren sollte, und ein Childtheme. Das Childtheme jedoch bringt keine Änderungen mit sich, sondern soll nur veranschaulichen, wie man ein Childtheme erstellt. Schnell wird man jedoch merken, dass die Installation des Scratch-Themes nicht wirklich hilfreich ist, denn bis auf den Design-Manager, die General-Settings und die SEO-Optionen funktioniert nichts weiter. Ein paar funktionierende Theme-Optionen wären sehr hilfreich gewesen, allein schon um zu schauen, wie man die Demo-Optionen im Theme abrufen kann.

Bleibt die zweite Möglichkeit: Wir beginnen direkt mit der Arbeit an einem Theme unserer Wahl.

Hinzufügen der Framework-Dateien in den Theme-Ordner

Wenn man nun genau nach der Entwickler-Dokumentation vorgeht, wird man schnell merken, dass vieles fehlt und nicht funktioniert. Die Dokumentation möchte, dass man den Ordner „framework“ in die oberste Ebene seines Theme-Ordners legt und das Framework aufruft. Doch das allein reicht nicht, denn dann fehlen die Demo-Optionen für jeden Bereich des Frameworks komplett. Folgende Ordner von Unyson müssen folglich tatsächlich in den Theme-Ordner hinein:

  • framework
  • framework-customizations
  • genericons
  • der Inhalt der Ordner css, js und images

Um das Unyson Framework aufzurufen, damit man damit arbeiten kann, muss folgender Code in die functions.php des Themes:

require dirname(__FILE__) .'/framework/bootstrap.php';

Nun sollte Unyson geladen werden und auch sämtliche Demo-Optionen sollten unter den einzelnen Menüpunkten vorhanden sein. Ab sofort kann die Lernphase der Entwicklung mit Unyson beginnen.

Was funktioniert sofort ohne größere Arbeiten?

Ohne jede Einstellung funktioniert der Drag and Drop Page-Builder, mit dem man sein eigenes Layout auf WordPress Seiten ganz einfach zusammenklicken kann. Dieses Feature stand bis jetzt nur teuren Premium-Themes zur Verfügung (wie zum Beispiel dem Enfold Theme von Kriesi), nun hat es – wenn auch in äußerst abgespeckter  Form – das Unyson Framework kostenfrei der Öffentlichkeit zugänglich gemacht. Erwähnenswert ist sicherlich die Tatsache, dass der Funktionsumfang des Drag & Drop Builders nicht einfach hingenommen werden muss. Die Entwickler-Dokumentation legt sehr anschaulich dar, wie man den Drag & Drop Builder fast beliebig erweitern kann. Falls Sie also eine Funktion vermissen sollten, so können Sie diese Funktion ohne weiteres selbst einfügen.

Der Drag and Drop Page-Builder des Unyson Frameworks für WordPress

Die einzige Arbeit, die Ihnen mit dem Drag & Drop Page-Builder noch bleibt, sind die passenden Notierungen im CSS Ihres Themes – oder noch besser: Gestalten Sie ein eigenes CSS für diesen Einsatzzweck und legen dieses im Framework-Ordner ab. Dies bringt eine Zeitersparnis bei der Entwicklung des nächsten Themes mit sich. Alternativ können Sie sich auch die nötigen Notierungen aus dem style.css des Scratch-Themes heraussuchen und anpassen. Ein eigenes Stylesheet für den Drag & Drop Manager existiert leider nicht.

Der Styling-Manager

Der Design-Manager des Unyson Frameworks

Die Settings für die Styling Seite erreicht man über den folgenden Pfade:

framework-customizations/extensions/styling/options => settings.php

framework-customizations/extensions/styling/options/includes => predefined-styles.php

In der Scratch-Theme-Datei sidebar-content.php kann man sehr schön ersehen, wie man die definierten Styles dann in der Theme-Datei umsetzen kann. Hier der Quelltext der sidebar-content.php:

Quelltext der Datei sidebar-content.php vom Unyson Framework

Die Theme Optionen des Unyson Frameworks für WordPress

Unyson bietet dem Entwickler eine Vielzahl an möglichen Theme-Optionen an. Hiermit sollte es möglich sein, ein Theme für jeden nur erdenklichen Einsatzzweck zu erstellen.

Die Theme Optionen des Unyson Frameworks für WordPress

Das Herausfinden der Options-Dateien war etwas „tricky“, denn die Demo-Options Seite zeigt die Demo-Optionen einmal mit weißer Box und einmal ohne diese Box an. Die Entwickler hinterlegten hier nicht eine Datei, wie man vielleicht annehmen könnte, sondern zwei (identische) Dateien für die Optionen. Das Warum erschliesst sich mir überhaupt nicht. Eine Datei hätte es auch getan. Geladen werden beide Dateien durch die Datei demo-box.php:

Die Datei demo-box.php lädt die Options-Seiten des Unyson Frameworks

Hier der Pfad zu den Options-Dateien:

framework-customizations/theme/options/  => demo-box.php

framework-customizations/theme/options/  => demo und demo2.php

Die Optionen im Theme ausgeben lassen

Die definierten Optionen lassen sich relativ leicht im Theme ausgeben. Gehen wir mal davon aus, dass es uns wichtig ist, den Inhalt einer Textarea-Box im Theme an einer bestimmten Stelle ausgeben zu lassen. Folgender einfacher Code löst das Problem:

<?php
$area = fw_get_db_settings_option('demo_textarea_2');
if( !empty( $area ) ) {
echo $area;
}
?>

Dieser recht einfache Code sorgt für die Anzeige des Inhalts der Options-Textarea. Ein solch einfach strukturierter Code sollte für die Anzeige der meisten Theme-Optionen ausreichend sein. Für andere – speziellere Aufgaben – sollte ein kurzer Blick in die überwiegend gute Entwickler-Dokumentation reichen.

General-Settings – Ausgabe des Favicons

Probleme machte mir auf der Options-Seite „General Settings“ die Ausgabe des Favicons. Es lies sich zwar hochladen, wurde aber nicht gespeichert und damit auch nicht im Header verlinkt und angezeigt. Wie ich herausfand, funktioniert der Options-Type „Upload“ nicht korrekt. Er muss auf „images_only‘ => false,“ gesetzt werden, dann verrichtet er seine Arbeit hervorragend. Wünschenswert wäre, dass vor dem Release eines so umfassenden Frameworks sämtliche Optionen und Funktionen auf einwandfreie Funktion getestet worden wären. Insbesondere auf einer Optionsseite, die mit echten Funktionen hinterlegt worden ist. Zu erreichen sind die „General Settings“ über die Datei general-settings.php. Der Pfad zur Datei lautet:

framework-customizations/theme/options/  => general-settings.php

Die General Settings des Unyson-Frameworks

Wie man sehen kann, funktioniert der Favicon-Uploader nun ganz hervorragend.

Die General Settings des Unyson Framework

Der in der header.php eingesetzte Code, um das Favicon anzeigen zu lassen:

<?php
$favicon = fw_get_db_settings_option('favicon');
if( !empty( $favicon ) ) :
?>
<link rel="icon" type="image/png" href="<?php echo $favicon['url'] ?>">
<?php endif ?>

Die im obigen Screenshot angezeigte Logo-Funktion kann wesentlich besser umgesetzt werden, da sind wir Entwickler gefragt. Ein Textfeld ist okay, wenn man nur das Textlogo einer Webseite ansprechen möchte. Für ein Logo in Form einer Grafik sollte man jedoch eine Upload-Funktion bereitstellen. Das wäre einfach benutzerfreundlicher und professioneller.

Die Custom Post Options – die Vorbereitung für umfassende Themes

Richtig gut gefällt mir am Unyson Framework, dass auch an Custom Post Options gedacht wurde. Denn vielfach müssen Themes entwickelt werden, bei denen es eben nicht ausreicht, dass Eingaben im Schreib-Editor gemacht werden. Gewisse Aufgaben können eben nur mit zusätzlichen Optionen gelöst werden. Schauen wir uns als Beispiel mal eine Theme-Übersichtsseite des bekannten WordPress-Theme-Providers WooThemes an. An den markierten Stellen werden Custom Post Options eingesetzt:

woothemes

Unyson lässt den Entwickler den kompletten Satz Optionen nutzen, den man auch als Theme-Optionen verwenden kann. Damit ist der Fantasie und dem Tatendrang beim Entwickeln von WordPress-Themes keinerlei Grenze gesetzt. Sehr nützlich sind übrigens die Tooltipps, die sich hinter jeder Option befinden. Hier können noch zusätzliche Erklärungen zu den einzelnen Optionen hinterlegt werden. Sehr interessant ist zudem die Möglichkeit, in diesen Tooltipps Videos hinterlegen zu können.

Die Custom Post Options des Unyson Framework für WordPress

Zu finden sind die Custom Post Options über folgenden Pfad:

framework-customizations/theme/options/posts/ => post.php

Über diese Datei lässt sich dann die nötige, angepasste Optionen-Datei laden.

Die post.php lädt die definierten Custom Post Options

Weitere Funktionen des Unyson Frameworks

Besonders interessant am neuen Unyson WP-Framework sind die leicht versteckten, aber umfangreichen Zusatzfunktionen, für die man ansonsten zusätzliche Plugins bemühen müsste. Hier wurde wirklich an alles gedacht. Gold wert dürfte die konfigurierbare Backup-Funktion sein, die wirklich gut ist und funktioniert.

Backups

Die Backup-Funktion des Unyson Frameworks

Das einzige, was ich an der Backup-Funktion aussetzen kann, ist der Speicherort der Backup-Datei. Gespeichert wird hier im WordPress-Ordner „uploads/backup“. Im Sinne der Sicherheit ist es jedoch nicht vorteilhaft, dass Backup auf demselben Server zu haben, wie die WordPress-Installation. Wenn die Website gehackt wird, und ein Angreifer auch Zugang zu den FTP-Daten bekommt, kann er nicht nur die Website an sich verändern, mit Viren und Trojanern verseuchen oder gar komplett löschen. Auch die Backups könnte ein Angreifer in diesem Fall gleich mit entsorgen. Ich rate daher dringend, hier ein Plugin einzusetzen, das das Backup zum Beispiel in die Dropbox oder zu einem anderen Cloud-Anbieter oder auf die lokale Festplatte befördert.

Sliders

Ansprechende Slide-Shows können mit nur wenigen Klicks generiert und über den Drag & Drop-Page-Builder in jede beliebige Seite eingefügt werden. Zusätzlich kann ein Slider mittels PHP-Code an jede gewünschte Stelle einer Theme-Datei platziert werden. Einen Shortcode zum Einsetzen in Beiträgen gibt es leider nicht, dieser müsste selbst erstellt werden.

Hinzufügen eines neuen Sliders

Das Mega-Menü

Die trendigen Mega-Menüs lassen sich extrem einfach erstellen, besonders nett ist die Möglichkeit, dem jeweiligen Menüpunkt ein Icon hinzuzufügen.

Die Mega-Menü Funktion von Unyson

So wird das Mega-Menü dann dargestellt:

Das Mega-Menü des Unyson Frameworks

Portfolio, Sidebars und SEO-Funktionen

Portfolio

Innerhalb kurzer Zeit kann man ein Portfolio zusammenstellen, aber wie man die Dinger anzeigen kann, erschliesst sich mir nicht. Man muss sie wohl erstmal in den Drag & Drop Builder mit etwas Code-Arbeit integrieren. Liebe Leute von Unyson, das gibt Abzüge in der B-Note.

Sidebar Manager

Der integrierte Sidebar-Manager hingegen funktioniert einwandfrei! Hier lassen sich zusätzliche Sidebars entweder für eine Gruppe von Seiten, Kategorien oder Blog-Artikeln erstellen, oder aber für eine ganz bestimmte Seite , einen ganz bestimmten Beitrag. Auch die Position der Sidebar lässt sich bestimmen.

Der Sidebar-Manager vom Unyson Framework

Die SEO Funktion

Die eingebauten SEO-Funktionen erinnern ein wenig an WordPress SEO by Yoast, es wird dieselbe Art von Platzhaltern verwendet. Dass man diese Aufgabenstellung wesentlich besser und benutzerfreundlicher lösen kann, wissen wir spätestens seit wpSEO, welches hier richtig gute Drag & Drop Elemente bietet. Das macht die Einstellungen meiner Meinung nach viel besser geeignet für unbedarfte User. Gut ist sicherlich, dass die Unyson SEO-Funktion bereits Out-of-the-Box arbeitet, ohne dass man in diesem Bereich als Entwickler tätig sein muss. Eine positive Rückmeldung nach dem Abspeichern der SEO-Einstellungen wäre auch ganz toll, dann wüsste man sofort, dass die soeben getätigten Einstellungen auch übernommen worden sind.

Die SEO Funktionen von Unyson

Unter dem Menüpunkt Sitemap gibt es einige Einstellungen zu einer Sitemap.xml, die Unyson kreieren sollte. Allerdings hat diese Funktion bei mir nur eine weiße Seite erzeugt, aber eben keine sitemap.xml. An diesem Punkt muss der Theme-Entwickler etwas tiefer in den Code eintauchen und das Problem beheben, oder auf eine aktualisierte Version des Frameworks warten. Themes mit dieser nicht funktionierenden Funktion auszuliefern geht jedenfalls nicht.

Fazit

Viel Licht, aber leider auch viel Schatten. Unyson begeistert auf der einen Seite, nervt aber auch auf der anderen. Der Funktionsumfang ist gigantisch, aber funktioniert zum Teil nicht. Möglicherweise hätte man mit dem Release noch einige Wochen warten sollen, um auch die offensichtlichen Fehler wie die nicht funktionierende Sitemap und einige nicht korrekt funktionierende Optionen beheben zu können. Auf der einen Seite bin ich begeistert vom Funktionsumfang, weil grundsätzlich alles möglich scheint, auf der anderen Seite denke ich, dass man das Framework noch etwas hätte durchdenken müssen.

Was mir überhaupt nicht gefällt, ist, dass sämtliche Funktionen verstreut unter verschiedenen Menüpunkten erreichbar sind. Ganz klar hätten sich die Entwickler des Frameworks dazu entscheiden müssen, sich bei einem solchen Funktionsumfang an geltende Konventionen zu halten. Das heisst: Man erstellt einen neuen Menüpunkt namens Unyson im WordPress Adminmenü und bündelt darunter sämtliche Funktionen wie Theme-Optionen, Styling, SEO und Backups. Der Slider hingegen hätte einen weiteren Menüpunkt verdient.

Dies ist die Art und Weise, wie die großen Theme-Entwickler (wie zum Beispiel Kriesi) die Sache angegangen haben – und das ist gut so. Denn ich persönlich bin der Meinung, dass eine Theme-Dokumentation eigentlich überflüssig ist, wenn der Entwickler seinen Job gut gemacht und alles so einfach wie möglich zusammengefasst und strukturiert hat. Wenn ich dem Kunden jedoch erst mal eine Doku mitgeben muss, damit er auch alle Einstellungen findet, dann ist was falsch gelaufen. Hier sollte ganz klar nachgebessert werden. Was im Übrigen total fehlt, ist eine automatische Update-Funktion für das Framework. Jedesmal nach einem Update alle Dateien händisch abgleichen zu müssen ist ziemlich nervtötend und heutzutage unnötig. Kriesi, woothemes und andere können das schliesslich auch.

Links zum Beitrag

Von Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.

3 Antworten auf „Unyson Framework Teil 2: So entwickeln Sie Ihr WordPress-Theme“

Hallo Andreas,

dein Beitrag ist nun schon etwas in die Jahre gekommen. Hast du das Unyson-Framework in seiner aktuellen Version noch einmal getestet und kannst hierzu dein Feedback geben? Es wäre sehr spannend zu wissen, ob die Kinderkrankheiten jetzt behoben wurden und ob es ein sinnvoller Editor ist, um damit Themes zu entwickeln.

Grüße
Marc

Hello Andreas,

Thank you for this great review.

I want to reply to some problems you are described here.

> Die Entwickler hinterlegten hier nicht eine Datei, wie man vielleicht annehmen könnte, sondern zwei (identische) Dateien für die Optionen. Das Warum erschliesst sich mir überhaupt nicht. Eine Datei hätte es auch getan.

Because the options **with** and **without box** must have different ids, otherwise the one **with box** will overwrite others (or the other way around).
You can test that by including just one file *(replace `fw()->theme->get_options( ‚demo-2‘ )` with `fw()->theme->get_options( ‚demo‘ )`)*,
then go to the Theme Settings page and change the same option in both tabs and set different values [#1](http://i.imgur.com/nMDw4uI.png) [#2](http://i.imgur.com/WO2UX4u.png), then press the save button.
After options saved, you will notice that [both options have the same value](http://i.imgur.com/XDle8I7.png).

> Probleme machte mir auf der Options-Seite “General Settings” die Ausgabe des Favicons. Wie ich herausfand, funktioniert der Options-Type “Upload” nicht korrekt.

Option type „upload“ was improved and not in works in `.ico` in `“images_only“ => true` mode.

> Wenn man nun genau nach der Entwickler-Dokumentation vorgeht, wird man schnell merken, dass vieles fehlt und nicht funktioniert. Die Dokumentation möchte, dass man den Ordner “framework” in die oberste Ebene seines Theme-Ordners legt und das Framework aufruft. Doch das allein reicht nicht, denn dann fehlen die Demo-Optionen für jeden Bereich des Frameworks komplett.

There is [v2.x](https://wordpress.org/plugins/unyson/) of the framework, it was released as a plugin. It will work with any theme and you are not required anymore to place the framework in the theme.
However, now you will have to take in consideration that the theme must work witout the framework (in case some users didn’t installed it),
so your theme code, before calling a framework function, must check first if the framework exists, for e.g `<?php if (defined('FW')){ … }`.

—-

P.S. This comment uses Markdown, if your comment system does not support it, feel free to correct it. This is how it looks http://plink.link/ac639aa4b790ddae1e5988631a52b25f/markdown

Cheers

Schreibe einen Kommentar

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