WordPress | t3n News News, Infos, Tipps und aktuelle Artikel zu WordPress 2014-10-28T13:02:09Z t3n Redaktion http://t3n.de/tag/wordpress 5 Schritte gegen Angreifer: So erhöhst du die Security deiner WordPress-Seite http://t3n.de/magazin/fuenf-schritten-wordpress-security-erhoehen-sicheren-235764/ 2014-10-28T13:02:09Z
WordPress ist in der Standardinstallation – also ohne Plugins und Themes von Drittanbietern – ein recht sicheres System. Aber allein aufgrund seiner großen Verbreitung ist es ein lohnenswertes …

ist in der Standardinstallation – also ohne Plugins und von Drittanbietern – ein recht sicheres System. Aber allein aufgrund seiner großen Verbreitung ist es ein lohnenswertes Ziel für Angreifer. Daher sollte sich jeder Betreiber einer WordPress-Website mit Sicherheitsaspekten auseinandersetzen.

WordPress: Sicherheit von Anfang an

Die Absicherung von WordPress fängt bereits bei der Installation an. So müssen WordPress-Nutzer schon beim Anpassen der Konfigurationsdatei (wp-config.php) Sicherheitsschlüssel auf der dafür eingerichteten Website generieren. Dabei sollte man sich die Mühe machen, sichere Schlüssel (Secret Keys) zu erzeugen und in die wp-config.php einzutragen – sie spielen später eine wichtige Rolle bei der Verschlüsselung der Login-Daten in den Cookies.

Auch während des Installationsprozesses lässt sich das Präfix für die Datenbanktabellen ändern. Standardmäßig steht hier „wp_“. Daraus wird später in der Datenbank zum Beispiel „wp_posts“ oder „wp_comments“. Wer das „wp_“ zu etwas Individuellem ändert – etwa „projektname_“ oder „ihr_name_“ –, macht seine WordPress-Anwendung zu einem schwerer zu fassenden Ziel für Angreifer. Auch für den Benutzernamen und das Passwort, das man beim Installationsvorgang für den Admin-Account eingeben muss, sollten sich WordPress-Installation etwas Individuelles überlegen, etwa den Vor- oder Spitzname. Aber auf keinen Fall sollten sie „admin“, „demo“, „test“, „wordpress“, „webmaster“ oder Ähnliches verwenden. Denn Brute-Force-Attacken sind unter anderem auf genau solche Nutzernamen spezialisiert. Bei der Wahl eines sicheren Passworts unterstützt Sie WordPress. Das von Ihnen angegebene Passwort wird in vier Sicherheitsstufen eingeteilt: sehr schwach, schwach, mittel und stark.

tec wordpress sicherheit wordpress passwortstaerke
Ausgefallene Benutzernamen und Passworte sind ein wichtiger Schutz. WordPress zeigt daher mit vier Signalen an, wie sicher ein Passwort ist.

Falsche Anmeldeversuche begrenzen

Auch mit Hilfe von Erweiterungen, die die Anzahl ungültiger Anmeldeversuche innerhalb eines festgelegten Zeitraums verhindern, lässt sich die Sicherheit einer WordPress-Installation erhöhen. Ein Beispiel eines solchen Plugins ist „Limit Login Attempts“.

Brute-Force-Angriffe probieren mit Hilfe purer Rechnerkraft so lange alle möglichen Kombinationen aus, bis sie die richtigen Nutzernamen und Passworte erraten haben. Eine Beschränkung der möglichen Login-Versuche pro Zeiteinheit in Verbindung mit einer Zwangspause für Anmeldungen macht es diesen Angreifern wesentlich schwerer.

Mit Sicherheit unterwegs bloggen

Wer oft von unterwegs aus schreibt, vielleicht sogar von wechselnden Rechnern aus, sollte dies nicht über den Administrator-Account tun. Sicherer ist es, einen Account mit Redakteur- oder Autoren-Rechten zu erstellen und mit diesem die Inhalte einzustellen.

Angreifer, die unterwegs genutzte Accounts hacken, erlangen somit keine administrativen Rechte, die zum Beispiel für die De- und Installation von Plugins und Themes notwendig sind. Sie können lediglich auf die Inhalte zugreifen. Bei regelmäßigen Backups kommt es so schlimmstenfalls zu einem minimalen Verlust. Viel ärgerlicher wäre es, wenn der Angreifer über die Admin-Rechte die WordPress-Installation in eine Viren- und Spam-Schleuder verwandeln würde.

tec wordpress sicherheit sicherheitsschluessel
Sicherheit beginnt bei der WordPress-Installation, etwa bei den Sicherheitsschlüsseln für das Anpassen der Konfigurationsdatei, die hier zu sehen sind.

WordPress: Plugins und Themes sicher einsetzen

WordPress-Plugins sollten generell nur mit Bedacht zum Einsatz kommen und nicht nach dem Motto „viel hilft viel“. Das hat zwei Gründe:

  1. Je größer die Anzahl der Plugins, desto wahrscheinlicher kommen sich diese untereinander in die Quere und/oder verlangsamen das System.
  2. Die allermeisten Plugins stammen von Drittanbietern. Viele dieser Autoren sind erfahrene Programmierer. Aber da es vergleichsweise einfach ist, ein zu entwickeln, erstellen auch viele ambitionierte Feierabend-Programmierer die Erweiterungen. Dabei kann ein Sicherheitsrisiko entstehen, denn nicht alle verstehen es, ihre Plugins auch tatsächlich sicher zu machen.

Alle eingesetzten Plugins sollten deshalb auch aus dem offiziellen Verzeichnis von WordPress stammen. Hier muss sich jeder Autor registrieren, der ein Plugin zur Verfügung stellen möchte. Ist irgendetwas an der Erweiterung nicht in Ordnung, wird das früher oder später jemandem in der großen Community auffallen und entsprechend auf der WordPress-Website kommentiert.

Auch die Anzahl der Downloads, die Zahl und Qualität der Bewertungen sowie die letzten zehn Foren-Beiträge auf der Übersichtsseite eines Plugins geben Anhaltspunkte für die Qualität eines Plugins und machen auf eventuelle Fehler oder Sicherheitslücken aufmerksam. Analog verhält es sich übrigens mit den Themes. Wer kostenlose Themes testen möchte, sollte sich diese ebenfalls aus dem offiziellen Verzeichnis holen.

tec wordpress sicherheit limit login attempts
Plugins wie „Limit Login Attempts” schützen vor Brute-Force-Attacken, indem sie nach einer bestimmten Anzahl von falschen Anmeldungen innerhalb einer bestimmten Zeit eine Zwangspause für einen Nutzernamen verordnen.

Auf dem Laufenden bleiben

Neue Updates für WordPress, Plugins und Themes sollte man der Sicherheit zuliebe immer möglichst zeitnah einspielen. Und natürlich sollten Betreiber einer WordPress-Website sicherheitsrelevante Nachrichten verfolgen. Hierfür eignen sich vor allem der deutsche oder der englische WordPress-News-Aggregator, um jederzeit gut gerüstet zu sein und notfalls schnell reagieren zu können.

Weitere Sicherheitsmaßnahme: Admin-Bereich absichern

Die fünf genannten Maßnahmen sind mehr als ausreichend und bieten einen guten Schutz gegen diverse Angriffe. Doch gibt es noch weitere Möglichkeiten. Zum Beispiel lässt sich die Login-Datei (wp-login.php) serverseitig absichern. Beim Apache-Webserver erstellt man dazu eine .htaccess- und .htpasswd-Datei, etwa mit dem Generator von All-Inkl. Komfortabler ist ein Plugin, das die WordPress-Installation mit einer so genannten Zwei-Wege-Authentifizierung nachrüstet.

Hier gibt es beispielsweise Clef oder auch Google Authenticator. Das Prinzip dahinter dürfte vielen bekannt sein: Neben den üblichen Zugangsdaten gibt man beim Einloggen auch noch einen Code ein, den ein Dienst oder eine App erzeugt. Angreifer müssen somit nicht nur die Zugangsdaten der WordPress-Installation kennen, sondern auch die des externen Dienstes. Logischerweise hilft ein solcher Dienst nur, wenn man verschiedene Passwörter verwendet.

Fazit

WordPress-Anwendungen lassen sich schon mit wenigen, schnellen Schritten viel sicherer machen. Das Fundament ist die sichere Installation: der Einbau der Sicherheitsschlüssel, die Wahl eines individuellen Nutzernamens und eines sicheren Passworts sowie ein individuelles Präfix für die Datenbank-Tabellen.

Mit einer Erweiterung wie „Limit Login Attempts“ begrenzt man zudem die ungültigen Anmeldeversuche und hält so automatische Angreifer auf Abstand. Blogger, die viel unterwegs sind, sollten sich einen separaten Redakteurs- oder Autoren-Account zulegen. Wer sich dann auch noch zu neuen Sicherheitsaspekten auf dem Laufenden hält, sorgt dafür, dass die Sicherheit seiner WordPress-Installation auch künftig gewährleistet bleibt.

Zudem gibt es noch viele weitere Maßnahmen, um die Sicherheit bei WordPress zu erhöhen. Dazu gehören zum Beispiel der serverseitige Passwortschutz für die Login-Datei oder Plugins, die die WordPress-Installation um eine Zwei-Wege-Authentifizierung erweitern.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Vladimir Simovic
Themify Builder: WordPress-Themes per Drag & Drop erstellen http://t3n.de/news/themify-builder-wordpress-themes-574190/ 2014-10-26T07:03:25Z
Der Themify Builder ist ein Framework, das die Erstellung von WordPress-Themes ganz ohne Code-Kenntnisse möglich macht. Die Bearbeitung neuer Designs erfolgt im Frontend per Drag & Drop.

Der Themify Builder ist ein Framework, das die Erstellung von WordPress-Themes ganz ohne Code-Kenntnisse möglich macht. Die Bearbeitung neuer Designs erfolgt im Frontend per Drag & Drop. Eine Live-Vorschau macht Änderungen direkt sichtbar. Wir haben uns das Tool angeschaut.

WordPress-Themes mit flexiblen Content-Module gestalten

Das Werkzeug schafft durch die Verbindung der Drag-&-Drop-Funktionalität und der direkten Implementierung von Änderungen im Frontend ein effektiv zu bedienendes Framework nach dem WYSIWYG-Prinzip („What you see is what you get“). Dabei entstehen Designs, die nicht nur auf dem Desktop funktionieren, sondern sich auch auf Tablets und Smartphones anpassen. Themify bietet diverse Anpassungsmöglichkeiten, mit denen sich die eigenen Vorstellungen eines WordPress-Themes auch ohne Code relativ präzise umsetzen lassen. Es besteht einerseits die Möglichkeit, aus einer großen Auswahl stimmiger, vorgefertigter Layouts auszuwählen, die dann weiter bearbeitet werden können. Etwas kreativer und interessanter ist es sicher, ein Design von Beginn an komplett neu aufzubauen, was sich im Themify Builder durch Module realisieren lässt.

Es gibt sowohl statische Module wie Texte, Bilder oder Videos, als auch solche mit dynamischem Inhalt wie Posts. Auch Shortcodes von Themify selbst wie von Drittanbietern kann das Tool verarbeiten. Alle Module werden als Widgets angeboten, die einfach mit der Maus in das Layout hineingezogen werden – sie bilden das Grundgerüst des Designs. Dabei verhalten sich einmal integrierte Widgets keineswegs starr. Die einzelnen Bausteine können variabel auf dem Layout verschoben werden, hinter dem ein imaginäres Gitternetz liegt. Grundsätzlich wird jedes neu in das Layout zu integrierende Modul zunächst in eine neue Zeile gezogen. Themify bietet hier die Möglichkeit, die Zeile an sich zu bearbeiten, also beispielsweise Höhe und Breite, das Scrollverhalten, Hintergrundfarben oder -bilder sowie Animationen festzulegen.

Themify Builder WordPress-Theme Framework
WordPress-Themes im Frontend bauen: Der Themify Builder macht schnelles Prototyping wie sorgfältiges Aufbauen eines WordPress Blogs per Drag & Drop möglich. (Bild: themify.me/docs/builder).

Parallel dazu können auch schon platzierte Module bearbeitet werden. Ein Doppelklick auf das Modul öffnet eine Lightbox, mit der Eigenschaften des spezifischen Moduls festgelegt werden können. Je nach Art des Moduls führt dieser Dialog zur Auswahl eines Bildes, einer Schriftart und -größe und zu anderen Styling-Optionen. Auch die Breite eines Moduls – beispielsweise halbseitig, viertelseitig oder volle Seitenbreite – kann hier eingestellt werden. So können verschiedenste Module übersichtlich unter- und nebeneinander angeordnet werden. Einmal integrierte Module lassen sich natürlich im Layout an einen anderen Platz verschieben. So können die gewünschten Inhalte in beliebiger Anordnung arrangiert werden.

Einen guten Einblick in die Funktionsweise und die Möglichkeiten des Themify Builder liefert folgendes Einführungsvideo des Herstellers:

Optionen und Preisgestaltung: Layouts inklusive Builder oder Standalone WordPress-Plugin

Themifys Builder ist standardmäßig in allen Themes enthalten, die von Themify angeboten werden. Darüber hinaus funktioniert Themify aber auch als unabhängiges Plugin mit jeglichen WordPress-Themes anderer Herkunft.

Beim Erwerb von Themify Layouts – hier ist der Builder integriert – nimmt das Unternehmen eine Preisstaffelung vor. Einzelne Themes kosten inklusive Support und Updates 49 US-Dollar, der Zugriff auf alle verfügbaren Themes bei gleichem Service ist preislich bei 79 US-Dollar angesetzt. Der Themify Builder als WordPress-Plugin rangiert bei 39 US-Dollar.

Übrigens: Wenn Ihr euer WordPress-Theme lieber komplett selbst entwickeln wollt, schaut euch doch unsere großen „t3n-Guide zum eigenen WordPress-Theme“ an.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Marcel Seer
Parallax-Scrolling: 20 beeindruckende WordPress-Themes mit Tiefgang http://t3n.de/news/wordpress-paralax-498573/ 2014-10-25T05:57:29Z
Parallax-Scrolling macht beeindruckende Effekte und vollkommen neuartige Erfahrungen auf Webseiten möglich. Wir haben zwanzig schicke Parallax-Scrolling-Themes für Wordpress zur Inspiration und …

Parallax-Scrolling macht beeindruckende Effekte und vollkommen neuartige Erfahrungen auf Webseiten möglich. Wir haben zwanzig schicke Parallax-Scrolling-Themes für zur Inspiration und zum Download zusammengestellt.

Parallax-Scrolling ist eine Technik für Webseiten, bei der sich durch verschiedene übereinander gelegte und beim Scrollen unterschiedlich schnell bewegte Ebenen tolle Effekte und eine zusätzliche Tiefe für die Webseite erzielen lassen. Wir haben euch zwölf schicke mit dem Parallax-Effekt zusammen gestellt.

Live

Paralaxx Theme: Live
Parallax-Theme: Live. (Screenshot: t3n)

Live ist ein kreatives und interaktives Parallax-Theme mit unbegrenzten Vordergrund- und Hintergrund-Schichten. Das Theme wurde mit dem Bootstrap-Framework in Version 2.3 erstellt und ist komplett responsive. Die Parallax-Schichten können sowohl in der Vertikalen als auch in der Horizontalen unbegrenzt sein, was dir sehr variable und schöne Scroll-Effekte ermöglicht.

Live-Theme-Demo | Live-Theme-Download 

Ego

Parallax Theme: Ego
Parallax-Theme: Ego. (Screenshot: t3n)

Ego ist ein Onepage-Design für freiberufliche Grafiker oder kleinere Agenturen, die ihre Referenzen oder ihr Portfolio präsentieren wollen. Das responsive WordPress-Theme verfügt über einen Fullscreen-Slider, ein AJAX-Portfolio und sehr viele verschiedene Funktionen, die es dir ermöglichen, das Theme ganz nach deinen Wünschen zu gestalten.

Ego-Theme-Demo | Ego-Theme-Download

Amaze

Parallax Theme: Amaze
Parallax-Theme: Amaze. (Screenshot: t3n)

Das responsive WordPress-Theme Amaze wurde mit dem Bootstrap-Framework in Version 2.3 erstellt und basiert auf der Skrollr-Parallax-JavaScript-Libary. Um das Theme deinen eigenen Wünschen anpassen zu können, benötigst du keinerlei Kenntnisse in JavaScript. Durch eine unbegrenzte Anzahl an Parallax-Schichten lassen sich ansprechende und kreative Layouts umsetzen.

Amaze-Theme-Demo | Amaze-Theme-Download

Status

Parallax Theme: Status
Parallax-Theme: Status. (Screenshot: t3n)

Das Status-Theme bringt neben der Parallax-Scroll-Funktion, die man auch deaktivieren kann, weitere Features mit sich mit. Das Theme besitzt einen eigenen Shortcode-Generator, mit dem du mit wenigen Klicks eigene Shortcodes genieren kannst. Dank Google-Webfonts, verschiedenen Seiten- und Artikeltemplates erstellst du mit diesem Theme spielend leicht individuelle Webseiten.

Status-Theme-Demo | Status-Theme-Download

Montreal

Parallax Theme: Montreal
Parallax-Theme: Montreal. (Screenshot: t3n)

Das Paralax-Theme Montreal besitzt für jeden Abschnitt der Webseite einen einzigartigen wechselnden Hintergrund. Zur Ausstattung des WordPress-Themes gehören eine Fullscreen-Diashow, sechs verschiedene Darstellungen für das Portfolio und ein eigenständiges Blog-Design. Dank der responsiven Gestaltung des WordPress-Themes funktioniert es auch auf mobilen Geräten.

Montreal-Theme-Demo | Montreal-Theme-Download

Impress

Parallax Theme: Impress
Parallax-Theme: Impress. (Screenshot: t3n)

Das responsive WordPress-Theme Impress bietet neben den Parallax-Effekten viele weitere Vorteile. Neben vielen Shortcodes ist das Theme in nur wenigen Klicks anpassbar und greift auch auf die Google-Webfonts zu, wodurch du auch typografisch viele Möglichkeiten hast, deine Webseite zu gestalten. Das Theme ist Translation-ready und kann bei Bedarf in verschiedene Bereiche unterteilen, wodurch gezielte Analysen mit Tools wie Google-Analytics möglich werden.

Impress-Theme-Demo | Impress-Theme-Download

Eleven

Parallax Theme: Eleven
Parallax-Theme: Eleven. (Screenshot: t3n)

Eleven ist ein Onepager-WordPress-Template mit Parallax-Effekt. Der Parallax-Effekt kann hierbei gut genutzt werden, um die Webseite optisch in verschiedene Kategorien einzuteilen. Neben einem Fullscreen-Slider und einem Kachel-Portfolio ist das individuell anpassbar und bietet für dein einfachen Einstieg sogar Video-Support in Form von nützlichen Video-Tutorials.

Eleven-Theme-Demo | Eleven-Theme-Download 

Parallaxr

Parallax Theme: Paralaxxr
Parallax-Theme: Paralaxxr. (Screenhot: t3n)

Parallaxr führt dich in der Theme-Demo durch ein Aquarium. Da ein Aquarium nicht besonders tief ist, fällt hier sofort auf, dass du nicht wie gewohnt vertikal scrollst, sondern horizontal von links nach rechts. Das horizontale Scrollen wird durch den Parallax-Effekt unterstützt, wodurch sich tolle Animationen ergeben können. Natürlich kann man das responsive WordPress-Theme individuell anpassen und muss seine eigene Seite nicht im Stil eines Aquariums halten.

Paralaxxr-Theme-Demo | Paralaxxr-Theme-Download

The Road

Parallax Theme: The Road
Parallax-Theme: The Road. (Screenhot: t3n)

Das WordPress-Theme The Road lässt sich mit Hilfe diverser Einstellungsmöglichkeiten sehr leicht anpassen. Dank Responsive Design ist das Theme auch auf mobilen Geräten schön anzuschauen und bietet einen Parallax-Effekt, der die Seite in verschiedene Sinnabschnitte unterteilen kann.

The-Road-Theme-Demo | The-Road-Theme-Download 

Pulsar

Parallax Theme: Pulsar
Parallax-Theme: Pulsar. (Screenshot: t3n)

Pulsar ist ein responsives WordPress-Theme mit Parallax-Effekt. Das Onepager-Theme bietet die Möglichkeit, ohne JavaScript-Kenntnisse oder anderen Änderungen am Quellcode aus fünf verschiedenen Parallax-Effekten zu wählen.

Pulsar-Theme-Demo | Pulsar-Theme-Download

Dreamer

Parallax Theme: Dreamer
Parallax-Theme: Dreamer. (Screenshot: t3n)

Das WordPress-Theme Dreamer mit Parallax-Effekt macht auch bei großen Bildschirmen mit hoher Auflösung dank bildschirmfüllenden Bildern im Hintergrund einen sehr guten Eindruck. Statt Hintergrundbildern können auch Videos eingebunden werden. Zahlreiche andere Features wie zum Beispiel ein filterbares Portfolio, mehr als 1.000 Web-Icons und verschiedene Sektionen zur Unterteilung der Webseite runden das Parallax-Theme ab.

Dreamer-Theme-Demo | Dreamer-Theme-Download

Encore

Parallax Theme: Encore
Parallax-Theme: Encore. (Screenshot: t3n)

Encore bietet dir mehr als 200 Einstellungen. Das WordPress-Theme hat neben dem Parallax-Effekt eine eigene Newsletter-Funktion sowie Lightboxen und gibt dir sämtliche Kontrolle über das Design des Themes. Dank dem responsiven Layout funktioniert das Theme nicht nur auf dem Desktop-PC, sondern auch auf dem Tablet und Smartphone.

Encore-Theme-Demo | Encore-Theme-Download

Parallax by Themify

Parallax WordPress Theme
Parallax-WordPress-Theme. (Screenshot: t3n)

Das Parallax-WordPress-Theme kombiniert Parallax-Scrolling und Onepage-Design in einem Theme. Es ist besonders für Fotografen und Designer interessant und voll responsive.

Parallax-by-Themify-Demo | Parallax-by-Themify-Download

Port

Port, Parallax WordPress Theme
Port, ein Parallax-WordPress-Theme. (Screenshot: t3n)

Port setzt auf der Startseite einen dezenten Parallax-Effekt um, während auf den Unterseiten vollkommen auf Effekte verzichtet wird. Das Theme ist insgesamt sehr clean, gut lesbar und responsive.

Port-Demo | Port-Download

Zoo

Zoo: Parallax WordPress Theme.
Zoo: Parallax-WordPress-Theme. (Screenshot: t3n)

Zoo verfolgt einen One-Page-Designansatz und unterteilt die Webseite in verschiedene Sektionen, die mit auf separaten Ebenen scrollenden Bildern voneinander abgetrennt werden. Auch dieses Theme ist voll responsive und für den Einsatz auf mobilen Geräten geeignet.

Zoo-Demo | Zoo-Download 

Eight Degree

Eight Degree Parallax WordPress Theme
Eight Degree. (Screenshot: t3n)

Eight Degree ist ein responsives WordPress-Theme, das in vier verschiedenen Ausführungen erhältlich ist. Eine davon bietet einen angenehmen Parallax-Scrolling-Effekt. Hierbei verfolgt das Theme einen Onepage-Designansatz.

Eight-Degree-Demo | Eight-Degree-Download

 Baylie

Baylie: Parallax WordPress Theme
Das Parallax-WordPress-Theme Baylie. (Screenshot: t3n)

Baylie ist ein responsives WordPress-Theme mit Parallax-Scrolling-Effekt. Der Effekt wird bei dem Theme besonders auf der bildschirmfüllenden Startseite sichtbar. Zur Trennung verschiedener Content-Bereiche werden außerdem weitere Trennbilder mit Parallax-Scrolling-Effekt eingesetzt. Zusätzlich bietet das Theme eine spezielle Portfolio- und Blog-Sektion.

Baylie-Demo Baylie-Download

Story

Story: Parallax WordPress Theme.
Story. (Screenshot: t3n)

Story ist ein sehr schickes WordPress-Theme, das in zwei Varianten zur Verfügung steht. Im ersten Stil setzt das Theme auf vollflächige Bilder, die jeweils die komplette Bildschirmfläche einnehmen. Eine alternative Version, die die volle Bildschirmbreite einnimmt, arbeitet mit einem Parallax-Scrolling-Effekt, der bei Trennbildern eingesetzt wird.

Story-Theme-Demo | Story-Theme-Download

Szia

Sznia: Parallax WordPress Theme
Sznia. (Screenshot: t3n)

Szia nutzt einen Parallax-Scrolling-Effekt, um die Inhalte der Webseite über wechselnde Hintergrundbilder hinweg scrollen zu lassen. Der Onepager ist – das richtige Bildmaterial vorausgesetzt – optisch sehr ansprechend und bietet neben der Startseite mit den Hauptinhalten einen Blog-Bereich in dem ebenfalls ein Parallax-Effekt zum Tragen kommt.

Szia-Theme-Demo | Szia-Theme-Download

Brooklyn

Brooklyn: Parallax WordPress Theme.
Brooklyn: Parallax WordPress Theme. (Screenshot:t3n)

Brooklyn präsentiert sich in zurückhaltendem und dunklem Design. Das Theme setzt auf vollflächige Bilder und lässt den Content mit Parallax-Scrolling-Techniken über wechselnde Motive hinwegscrollen. Brooklyn verfolgt den Onepage-Designansatz und liefert lediglich für den Blog einzelne Unterseiten. Es ist jedoch möglich, weitere statische Unterseiten abseits der Startseite anzulegen.

Brooklyn-Demo | Brooklyn-Download

Und welche Parallax-Themes haben euch in letzter Zeit begeistert? Schreibt uns in den Kommentaren! Alternativ findet ihr auf t3n.de auch eine Übersicht kostenlose WordPress-Themes mit Responsive Webdesign.

Letztes Update des Artikels: 25. Oktober 2014.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Ilja Zaglov
Schnäppchen-Alarm: Design-Ressourcen im Wert von 1.680 Dollar für nur 39 Dollar http://t3n.de/news/creative-market-big-bundle-design-ressourcen-573471/ 2014-10-21T13:48:53Z
Im Creative Market Big Bundle II gibt es derzeit 105 Design-Ressourcen im Wert von 1.680 US-Dollar für nur 39 US-Dollar. Im Bundle finden sich Website-Templates, WordPress-Themes, Fonts und mehr.

Im Creative Market Big Bundle II gibt es derzeit 105 Design-Ressourcen im Wert von 1.680 US-Dollar für nur 39 US-Dollar. Im Bundle finden sich Website-Templates, , und mehr.

Creative Market Big Bundle II: 97 Prozent Rabatt auf Design-Ressourcen

Egal ob Apps, E-Books oder Comics: Digitale Güter in Form eines Pakets vergünstigt zu verkaufen liegt derzeit im Trend. Creative Market, ein Marktplatz für Design-Ressourcen, bietet im Moment ebenfalls ein solches Paket an. Darin enthalten sind unter anderem Website-Templates, WordPress-Themes, und Photoshop-Ressourcen. Alles in allem stecken 105 Ressourcen in dem Paket, die normalerweise einzeln über die Website verkauft werden.

Insgesamt müssten Käufer für die einzelnen Bestandteile des Creative Market Bundles 1.680 US-Dollar bezahlen. Stattdessen gibt es das Bundle derzeit für 39 US-Dollar. Dabei befinden sich einige sehr ansehnliche , Themes, Fonts und andere Elemente in dem Paket. Allerdings müssen Käufer sich beeilen, da das Angebot Morgen am 22. Oktober 2014 um 10 Uhr ausläuft.

Design-Ressourcen: Im Creative Market Bundle II sind einige interessante Templates, Fonts und Grafiken. (Screenshot: Creative Market)
Design-Ressourcen: Im Creative Market Bundle II sind einige interessante Templates, Fonts und Grafiken. (Screenshot: Creative Market)

Design-Ressource im Paket: Lohnt der Kauf?

Die Frage danach, ob sich der Kauf lohnt, lässt sich wie immer bei solchen Bundles nicht grundsätzlich beurteilen. Das hängt letztlich davon ab, wie viele der im Paket enthaltenen Ressourcen euch auch wirklich interessieren. Da einige im Normalfall aber preislich schon über zehn US-Dollar liegen, kann sich der Kauf durchaus rentieren – ein Interesse an einigen der angebotenen Fonts, Grafiken, Themes und Templates vorausgesetzt.

Wer noch mehr sparen möchte, der sollte einen Blick auf unsere Artikel „40 kostenlose WordPress-Themes für Responsive Design“, „Responsive Design: Zehn kostenlose Webdesign-Templates“ und „15 kostenlose Fonts für Grafikdesigner“ werfen.

via www.producthunt.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
Analytify: WordPress-Plugin macht Google Analytics einfach und übersichtlich http://t3n.de/news/analytify-wordpress-plugin-google-analytics-573295/ 2014-10-21T08:13:03Z
Mit Analytify gibt es ein neues WordPress-Plugin zur Anzeige von Google-Analytics-Daten im Back- und im Frontend. Wie sich die kommerzielle Lösung von der kostenfreien Konkurrenz absetzen will, …

Mit Analytify gibt es ein neues WordPress-Plugin zur Anzeige von Google-Analytics-Daten im Back- und im Frontend. Wie sich die kommerzielle Lösung von der kostenfreien Konkurrenz absetzen will, verraten wir euch in diesem Artikel.

Analytify: Das WordPress-Plugin präsentiert eure Google-Analytics-Daten in einer hübschen Oberfläsche. (Screenshot: Analytify)
Analytify: Das WordPress-Plugin präsentiert eure Google-Analytics-Daten in einer hübschen Oberfläche. (Screenshot: Analytify)

Analytify: Schickes Analytics-Plugin für WordPress-Blogs

Mit Analytify gibt es ein WordPress-Plugin, das euch eure Google-Analytics-Zahlen hübsch aufbereitet im Back- und im Frontend anzeigt. Zusätzlich gibt es auch Angaben zu etwaigen Social-Shares. Wer möchte, kann sich alle Kennzahlen über das ins Backend integrierte Dashboard anschauen. Hier finden sich alle Angaben zu den Besuchern, ihrer Herkunft, der Bounce-Rate und was ihr noch so wissen möchtet.

Außerdem könnt ihr euch auch direkt die Statistiken zu einzelnen Posts und Pages auf der jeweiligen Seite anschauen. Die Daten werden dabei hübsch und übersichtlich aufbereitet. Praktischerweise kann Analytify diese Daten auch im Frontend für angemeldete Besucher anzeigen. Die Daten werden dann in einer Art Lightbox-Galerie präsentiert.

Analytify: Schick aber eben nicht umsonst

Analytify ist responsiv und soll sich ohne Probleme an verschiedene Bildschirmgrößen anpassen. Allerdings hat das Plugin auch seinen Preis: Für eine einzelne Seite bezahlt ihr 29 US-Dollar. Dafür bekommt ihr dann auch Support und Updates für ein Jahr von dem Entwickler. Für 49 US-Dollar dürft ihr Analytify auf bis zu drei Seiten verwenden. Wer das Plug-in auf zehn Seiten nutzen möchte, der zahlt 99 US-Dollar. Für 199 US-Dollar könnt ihr Analytify auf so vielen Seiten nutzen, wie ihr möchtet.

Analytify ist sicherlich eine sehr schöne und übersichtliche Möglichkeit um eure Google-Analytics-Daten in WordPress anzuzeigen. Ob ihr letztlich den Preis dafür bezahlen wollt, zumal ihr im Grunde dieselbe Funktionalität, wenngleich auch hässlicher, umsonst haben könntet, müsst ihr entscheiden. Ausschlaggebend sind hier vermutlich die eigenen Vorlieben und das Budget.

via www.producthunt.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
Twenty Fifteen: Das neue Standard-Theme für WordPress legt den Fokus auf Einfachheit und Typografie http://t3n.de/news/twenty-fifteen-standard-wordpress-theme-572042/ 2014-10-15T09:44:02Z
Für WordPress erscheint jedes Jahr ein neues Standard-Theme. Aktuell ist es Twenty Fourteen, das voraussichtlich im Dezember mit dem Release von WordPress 4.1 von Twenty Fifteen abgelöst wird.

Für WordPress erscheint jedes Jahr ein neues Standard-Theme. Aktuell ist es Twenty Fourteen, das voraussichtlich im Dezember mit dem Release von WordPress 4.1 von Twenty Fifteen abgelöst wird. Wie das Theme aussieht und welche Theme-spezifischen Funktionen und Möglichkeiten es bietet, zeigen wir euch in diese Artikel.

Twenty Fifteen: Schlicht und auf den Inhalt fokussiert

Twenty Fifteen, das neue Standard-Theme von WordPress. (Screenshot: WordPress-Make-Blog)
Twenty Fifteen, das neue Standard-Theme von WordPress. (Screenshot: WordPress-Make-Blog)

Takashi Irie ist verantwortlich für das Design des Themes und beschreibt es als Blog-fokussiertes Theme mit Augenmerk auf Typografie. Das Theme ist zweispaltig aufgebaut: Der Inhalt befindet sich rechts, die Sidebar links – wenn der Viewport zu klein wird, verschwindet der Sidebar-Bereich. Er kann dann per Button-Klick über dem Inhalt eingeblendet werden. Des weiteren gibt es einen Footer-Bereich, in dem sich der „Proudly-powered-by-WordPress“-Hinweis befindet.

Damit ihr euch einen besseren Eindruck davon machen könnt, starten wir erst mal mit weiteren Screenshots:

Twenty Fifteen: Umfangreiche Möglichkeiten der Anpassung

Twenty Fifteen bringt neben dem schön einfachen und klaren Design einiges an Anpassungsmöglichkeiten mit. Das Theme bietet einen Widget-Bereich, der in der Sidebar erscheint und in dem ihr wie gewohnt eure Widgets platzieren könnt. Des Weiteren werden zwei Menüpositionen angeboten: eine normale Navigation, die in der Sidebar direkt unter dem Titel beziehungsweise gegebenenfalls unter der Beschreibung erscheint und ein Menü für eure Profile bei Sozialen Netzwerken. Um dieses Feature zu nutzen, müsst ihr nur ein neues Menü erstellen, eure Social-Media-Links einfügen und es der Position „Social Links Menu“ zuweisen. Folgende Netzwerke sind integriert:

Codepen, Digg, Dribbble, Dropbox, Facebook, Flickr, GitHub, Google+, Instagram, LinkedIn, Email (mailto: links), Pinterest, Pocket, PollDaddy, Reddit, RSS Feed (urls mit „/feed/“), Spotify, StumbleUpon, Tumblr, Twitch, Twitter, Vimeo, WordPress und YouTube.

Anpassungs-Möglichkeiten von Twenty Fifteen im Theme Customizer. (Screenshot: WordPress-Make-Blog)
Anpassungs-Möglichkeiten von Twenty Fifteen im Theme Customizer. (Screenshot: WordPress-Make-Blog)

Daneben bietet euch das Theme die Möglichkeit, das Aussehen über den Theme-Customizer anzupassen. Hier steht euch neben den Standard-Funktionen wie der Anpassung des Titels und der Beschreibung, dem Hinzufügen eines Header-Bilds (wird als Hintergrund des Sidebar-Bereichs eingerichtet) und eines Hintergrundbilds (ist dann der Hintergrund des Inhaltsbereichs) sowie dem direkten Zugriff auf Widgets und Menüs noch die Möglichkeit zur Verfügung, die Farben des Themes anzupassen.

Dazu könnt ihr aus fünf alternativen Farb-Schemata auswählen oder die Farben den Header-Text, die übrigen Sidebar-Texte sowie der Hintergrundfarbe für den Inhaltsbereich und den Sidebar-Bereich selbst wählen.

Twenty Fifteen: Im Dezember ist es soweit

Wie schon angesprochen soll Twenty Fifteen mit dem Release von WordPress 4.1 in der finalen Version veröffentlicht werden – er ist für den 8. Dezember geplant. Seit gestern steht das Theme zum Download zur Verfügung, wie im Blog des Make-Bereichs auf wordpress.org zu lesen ist. Wenn ihr helfen wollt, dass Bugs und andere Fehler behoben werden, könnt ihr einfach ein Ticket anlegen.

Was haltet ihr von diesem neuen Theme? Ist es euch zu schlicht oder genau das, worauf ihr gewartet habt?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Florian Brinkmann
40 kostenlose WordPress-Themes für Responsive Design http://t3n.de/news/kostenlose-wordpress-themes-responsive-webdesign-376838/ 2014-10-14T16:30:24Z
Das Angebot an kostenlosen Templates für die eigene Website wächst stetig. Auch die Auswahl an Wordpress-Themes, die Responsive Webdesign unterstützen, ist inzwischen beachtlich.

Das Angebot an kostenlosen für die eigene Website wächst stetig. Auch die Auswahl an , die unterstützen, ist inzwischen beachtlich. Zur besseren Übersicht hier eine Auswahl von 40 kostenlosen und responsiven WordPress-Themes.

Responsive Design bei WordPress-Themes

Immer mehr Nutzer surfen über mobile Endgeräte im Internet. Ob unterwegs mit dem Smartphone oder auf der Couch mit dem Tablet: Neue Nutzungsgewohnheiten verändern die Anforderungen an Websites jedweder Machart. Mit einem responsiven WordPress-Theme verbessert ihr die Usability und Lesbarkeit eurer jetzigen und eurer zukünftigen Besucher.

Schon jetzt haben Notebooks und Smartphones den Desktop als beliebtesten Zugangsweg ins Internet hinter sich gelassen, wie die ARD/ZDF-Onlinestudie 2014 zeigt. Und auch der Anteil der Nutzer, die Internetinhalte über das Tablet abrufen, hat sich von 16 Prozent im Jahr 2013 auf 28 Prozent im Jahr 2014 gesteigert.

Vieles spricht daher für ein WordPress-Theme, das auch für mobile Endgeräte optimiert wurde.

40 WordPress-Themes für Responsive Design

Die folgenden WordPress-Themes sind durch Responsive Webdesign für alle Endgeräte optimiert. Wer auf eigene Faust eine responsive Website erstellen will, sollte sich stattdessen in die Einzelteile der folgenden Artikelserie einlesen:

  1. Responsive Webdesign, Teil 1: Layout- und Textdarstellung
  2. Responsive Webdesign, Teil 2: Das Navigationsmenü
  3. Responsive Webdesign, Teil 3: Darstellung von Galerien und Videos

1. Twenty Fourteen von WordPress

Responsive WordPress-Theme: Twenty Fourteen.
Twenty Fourteen, das diesjährige Default-Theme von WordPress, ist vollständig für responsive Websites ausgelegt. (Screenshot: Twenty Fourteen)

2. Twenty Thirteen von WordPress

Responsive WordPress-Theme: Twenty Thirteen.
Auch das 2013er WordPress-Theme Twenty Thirteen wartet mit responsiven Funktionalitäten auf. (Screenshot: Twenty Thirteen)

3. Codium Extend von CodeReduction

Responsive WordPress-Theme: Codium Extend. (Screenshot: Codium Extend)

4. Live Wire von Theme Hybrid

Responsive WordPress-Theme: Live Wire.
Das responsive WordPress-Theme Live Wire ist unter der Maßgabe Mobile First entwickelt worden. (Screenshot: Live Wire)

5. Pinboard von One Designs

Hinweis: Standardmäßig ist hier Infinite Scroll aktiviert, was mit einem Footer natürlich etwas unglücklich ist. Das kann in den Theme-Optionen umgestellt werden.

Responsive WordPress-Theme: Pinboard.
Responsive WordPress-Theme: Pinboard. (Screenshot: Pinboard)

6. Match von DoveThemes

Responsive WordPress-Theme: Match.
Schön für persönliche Webseiten: Das responsive WordPress-Theme Match. (Screenshot: Match)

7. Fictive von Automattic

Responsive WordPress-Theme: Fictive.
Das WordPress-Theme Fictive legt Wert auf Personalisierung – etwa durch Einbindung der Social Networks. (Screenshot: Fictive)

8. RestImpo von Tomas Toman

Responsive WordPress-Theme: RestImpo.
Das Theme RestImpo bietet unter anderem sechs vorgefertigte Farbschemata, 220 Schriftarten und Unterstützung für viele populäre Plugins. (Screenshot: RestImpo)

9. Superhero von Automattic

Responsive WordPress-Theme: Superhero. (Screenshot: Superhero)
Große Bilder und farbliche Akzente: Das kostenlose WordPress-Theme Superhero. (Screenshot: Superhero)

10. Spacious von ThemeGrill

Responsive WordPress-Theme: Spacious. (Screenshot: Spacious)
Spacious gehört zu den WordPress-Themes, die besonders aufgeräumt daher kommen. (Screenshot: Spacious)

11. Times von Rohit Tripathi

Responsive WordPress-Theme: Times. (Screenshot: Times)
Viele Content-News auf einen Blick: Das responsive Theme Times. (Screenshot: Times)

12. Radiate von ThemeGrill

Responsive WordPress-Theme: Radiate. (Screenshot: Radiate)
Mit Radiate holt ihr euch ein modernes WordPress-Theme im klaren Look ins Haus. (Screenshot: Radiate)

13. Perfetta von GavickPro

Responsive WordPress-Theme: Perfetta. (Screenshot: Perfetta)
Das Theme Perfetta wurde speziell für Gastronomen und Food-Blogger entwickelt. (Screenshot: Perfetta)

14. Influence von SiteOrigin

Responsive WordPress-Theme: Influence. (Screenshot: Influence)
Das Theme Influence bietet einen gewissen Hipster-Charme. (Screenshot: Influence)

15. Hemingway von Anders Norén

Responsive WordPress-Theme: Hemingway. (Screenshot: Hemingway)
Das responsive WordPress-Theme Hemingway kommt mit Vollbild-Header-Image und Parallax Scrolling. Fun Fact: Auch eine schwedische Übersetzung ist verfügbar. (Screenshot: Hemingway)

16. Baskerville von Anders Norén

Responsive WordPress-Theme: Baskerville. (Screenshot: Baskerville)
Baskerville kommt mit Widgets für Videos, Flickr und Dribbble. (Screenshot: Baskerville)

17. Wilson von Anders Norén

Responsive WordPress-Theme: Wilson. (Screenshot: Wilson)
Ein WordPress-Theme für Webworker: Wilson. (Screenshot: Wilson)

18. Lingonberry von Anders Norén

Responsive WordPress-Theme: Lingonberry. (Screenshot: Lingonberry)
Ein Hauch von Retina: Das WordPress-Theme Lingonberry bedient eure künstlerischen Ansprüche. (Screenshot: Lingonberry)

19. Pho von ThematoSoup

Responsive WordPress-Theme: Pho. (Screenshot: Pho)
Die Macher von Pho versprechen ein „leanes“ und schnelles responsives WordPress-Theme. (Screenshot: Pho)

20. Dice von Jens Törnell

Responsive WordPress-Theme: Dice. (Screenshot: Dice)
Responsive WordPress-Theme: Dice. (Screenshot: Dice)

21. Kubrick 2014 von John Wilson

Responsive WordPress-Theme: Kubrick 2014. (Screenshot: Kubrick 2014)
John Wilson hat einem Klassiker der WordPress-Themes ein responsives Update verpasst. (Screenshot: Kubrick 2014)

22. Adaption von Automattic

Responsive WordPress-Theme: Adaption. (Screenshot: Adaption)
Noch mehr responsive WordPress-Themes von Automattic – hier: Adaption. (Screenshot: Adaption)

23. Isola von Automattic

Responsive WordPress-Theme: Isola. (Screenshot: Isola)
Das WordPress-Theme Isola besticht durch seine Einfachheit. (Screenshot: Isola)

24. Bosco von Automattic

Responsive WordPress-Theme: Bosco. (Screenshot: Bosco)
Bei diesem responsiven Theme hat Automattic Wert auf außergewöhnliche Typographie gelegt. (Screenshot: Bosco)

25. Radar von wphigh

Responsive WordPress-Theme: Radar. (Screenshot: Radar)
Ein responsives WordPress-Theme im Flat-Desing-Stil: Radar. (Screenshot: Radar)

26. Forefront von Thomas Usborne (Child-Theme für GeneratePress)

Responsive WordPress-Theme: Forefront. (Screenshot: Forefront)
Responsive WordPress-Theme: Forefront. (Screenshot: Forefront)

27. Solon von aThemes

Responsive WordPress-Theme: Solon. (Screenshot: Solon)
Mit Solon nutzt ihr ein responsives WordPress-Theme, das persönlichen Blogs einen modernen Anstrich verleiht. (Screenshot: Solon)

28. Hudson von Michael Burrows

Responsive WordPress-Theme: Hudson. (Screenshot: Hudson)
Responsive WordPress-Theme: Hudson. (Screenshot: Hudson)

29. Eighties von Justin Kopepasah

Responsive WordPress-Theme: Eighties. (Screenshot: Eighties)
The Eighties are back! In Form eines Responsive-Themes für WordPress. (Screenshot: Eighties)

30. Editor von Array

Responsive WordPress-Theme: Editor. (Screenshot: Editor)
Ein besonders elegantes und minimalistisches WordPress-Theme findet ihr in Editor. (Screenshot: Editor)

31. Pictorico von Automattic

Responsive WordPress-Theme: Pictorico. (Screenshot: Pictorico)
Wer besonders viel mit Bildern arbeitet, sollte sich das responsive Theme Pictorico anschauen. (Screenshot: Pictorico)

32. Independent Publisher von Raam Dev

Responsive WordPress-Theme: Independent Publisher. (Screenshot: Independent Publisher)
Das Theme Independent Publisher erlaubt es euren Lesern, sich voll und ganz auf eure Texte zu konzentrieren. (Screenshot: Independent Publisher)

33. Ignite von Compete Themes

Responsive WordPress-Theme: Ignite. (Screenshot: Ignite)
Die Nutzer des WordPress-Themes Ignite loben vor allem den guten Support. (Screenshot: Ignite)

34. Drop von Compete Themes

Responsive WordPress-Theme: Drop. (Screenshot: Drop)
Responsive WordPress-Theme: Drop. (Screenshot: Drop)

35. Esperanza Lite von Qlue Themes

Responsive WordPress-Theme: Esperanza. (Screenshot: Esperanza)
Mit ihrem responsiven Theme wollen die Macher von Esperanza eine einfache, nahtlose Arbeitsumgebung für Blogger bieten. (Screenshot: Esperanza)

36. Hexa von Automattic

Responsive WordPress-Theme: Hexa. (Screenshot: Hexa)
Ein Hauch von Retro-Charme: Das responsive WordPress-Theme Hexa. (Screenshot: Hexa)

37. Ex Astris von Sarah Gooding (Child-Theme für Stargazer)

Responsive WordPress-Theme: Ex Astris. (Screenshot: Ex Astris)
Das responsive WordPress-Theme Ex Astris ist speziell für die Nutzer des Themes Stargazer entwickelt worden. (Screenshot: Ex Astris)

38. Zweig von Simon Vandereecken

Responsive WordPress-Theme: Zweig. (Screenshot: Zweig)
Wer es ein bisschen extravagant mag, kann sich vielleicht für das Theme Zweig begeistern. (Screenshot: Zweig)

39. Sorbet von Automattic

Responsive WordPress-Theme: Sorbet. (Screenshot: Sorbet)
Ein WordPress-Theme, das an den Sommer erinnert: Sorbet. (Screenshot: Sorbet)

40. Highwind von jameskoster

Responsive WordPress-Theme: Highwind. (Screenshot: Highwind)
Das schwerelose Design des responsiven Themes Highwind soll den richtigen Rahmen für eure Inhalte liefern. (Screenshot: Highwind)

Wir hoffen, dass wir euch einige neue Themes zeigen konnten. Übrigens: Bei der Erstellung eigener WordPress-Themes unterstützt euch diese t3n-Artikelreihe.

Kennt ihr weitere kostenlose WordPress-Themes, die responsive sind und hier nicht fehlen dürfen?

Letztes Update des Artikels: 12. Oktober 2014. Der Originalartikel stammt von Lars Budde.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Florian Brinkmann
PHPStorm 8: Alle Features der neuen Version im Überblick http://t3n.de/news/jetbrains-phpstorm-8-ide-567597/ 2014-09-17T14:00:32Z
JetBrains hat PHPStorm 8 veröffentlicht. Die neue Version der beliebten Entwicklungsumgebung unterstützt jetzt PHP 5.6 und bringt unter anderem auch Support für WordPress und Drupal 8 mit.

JetBrains hat PHPStorm 8 veröffentlicht. Die neue Version der beliebten Entwicklungsumgebung unterstützt jetzt PHP 5.6 und bringt unter anderem auch Support für WordPress und Drupal 8 mit.

PHPStorm 8: JetBrains hat die neue Version ihrer Entwicklungsumgebung veröffentlicht. (Screenshot: PHPStorm 8)
PHPStorm 8: JetBrains hat die neue Version ihrer Entwicklungsumgebung veröffentlicht. (Screenshot: PHPStorm 8)

PHPStorm 8: JetBrains veröffentlicht neue Version der Entwicklungsumgebung

Die tschechische Softwareschmiede JetBrains hat ihre Entwicklungsumgebung PHPStorm in Version 8 veröffentlicht. Die IDE bietet jetzt vollständigen Support für PHP 5.6. Außerdem wurde das Language-Injection-Feature verbessert, mit dem sich SQL-Queries, JavaScript oder HTML einfach in den Arbeitsfluss integrieren lassen. Außerdem unterstützt PHPStorm 8 jetzt auch direkt die beiden Content-Management-Systeme WordPress und Drupal 8. Dadurch soll die Arbeit an den CMS schneller von der Hand gehen. TYPO3 Flow wird allerdings nicht unterstützt. Wer sich das wünscht, kann aber seine Stimme für das entsprechende Feature-Request abgeben.

Neu ist auch die Unterstützung für Remote-PHP-Interpreters. Damit kann der Code in einem produktionsähnlichen Umfeld ausgeführt werden. Außerdem wird auch die Template-Engine Blade vollständig unterstützt. Darüber hinaus gibt es jetzt auch eine Live-Console mit JavaScript- und NodeJS-Debugger. PHP und Javascript könnt ihr in PHPStorm 8 auch gleichzeitig debuggen.

PHPStorm 8: IDE bringt Unterstützung für AngularJS, Spy-JS und Grunt mit

PHPStorm 8 bietet zudem einen verbesserten Support für das beliebte AngularJS-Framework von Google. Auch JavaScript-Tracing mit Spy-JS wurde integriert. Wie das funktioniert, könnt ihr in einem Video der PHPStorm-Macher sehen, das wir unterhalb des Artikels eingebunden haben. Auch der JavaScript-Task-Runner Grunt wurde direkt in PHPStorm 8 integriert. Ihr könnt Tasks in der Entwicklungsumgebung auswählen und mit einem Klick starten.

PHPStorm 8 könnt ihr 30 Tage lang testen, danach wird der Erwerb einer kostenpflichtige Lizenz notwendig. Unternehmen zahlen 179 Euro, Privatpersonen 89 Euro. Darüber hinaus gibt es verschieden Rabattmöglichkeiten für Startups sowie für Studenten und Lehrer. Wer eine Lizenz nach dem 16. September 2013 erworben hat, bekommt das Update kostenlos.

]]>
Kim Rixecker
Schick, einfach und mit WordPress-Integration: So erzählt ihr Geschichten mit Storyform http://t3n.de/news/storyform-wordpress-566707/ 2014-09-12T08:47:54Z
Mit Storyform sollt ihr eure Artikel in kürzester Zeit richtig schick aufbereiten können. Das Tool gibt es als WordPress-Plugin, mit etwas mehr aufwand kann es aber auch mit anderen …

Mit Storyform sollt ihr eure Artikel in kürzester Zeit richtig schick aufbereiten können. Das Tool gibt es als WordPress-Plugin, mit etwas mehr aufwand kann es aber auch mit anderen Content-Management-Systemen genutzt werden.

WordPress-Plugin: Mit Storyform erstellte Artikel sehen einfach schick aus. (Screenshot: Storyform)
WordPress-Plugin: Mit Storyform erstellte Artikel sehen einfach schick aus. (Screenshot: Storyform)

Storyform: In wenigen Klicks zu einem schicken Artikel

Die New York Times hat es 2012 mit ihren Multimedia-Artikel „Snow Fall“ vorgemacht: Online-Artikel müssen nicht unbedingt einer starren Form folgen. Es gibt Alternativen zum einfachen Webseiten-Layout, bei dem der Text von oben nach unten verläuft und nur gelegentlich durch Bilder unterbrochen wird. Allerdings hat natürlich nicht jeder die notwendigen Ressourcen, um gleich einen sogenannten Scrollytelling-Artikel auf die Beine zu stellen.

Wer trotzdem nicht auf ein schickes, von Print-Magazinen inspiriertes Design verzichten möchte, für den gibt es mit Storyform eine einfache Möglichkeit, um genau das zu erreichen. Die damit erstellten Artikel setzen auf ansehnliche Typografie, nebeneinander angeordnete Spalten und großformatige Bilder. Außerdem lassen sich leicht Fullscreen-Videos integrieren und die verschiedenen Templates sind vollständig responsiv.

Storyform kann mit jedem beliebigen CMS genutzt werden. (Screenshot: Storyform)
Storyform kann mit jedem beliebigen CMS genutzt werden. (Screenshot: Storyform)

Storyform für WordPress oder für jedes andere CMS

Die einfachste Möglichkeit Storyform zu verwenden, ist das WordPress-Plugin. Das könnt ihr über WordPress.org installieren, oder indem ihr euch das Plugin direkt von der Storyform-Website als ZIP-Datei besorgt. Da findet sich auch eine Anleitung zur Erstellung von Storyform-Artikeln.

Alternativ zum WordPress-Plugin, könnt ihr Storyform auch in Kombination mit anderen Content-Managment-Systemen verwenden. Das ist aber logischerweise deutlich aufwendiger bei der Einrichtung und bei der Erstellung von Artikeln. Egal, für welche Plattform ihr euch entscheidet, um Storyform nutzen zu können, müsst ihr auf der Website des Anbieters einen App-Key beantragen. Dazu reicht die Eingabe eurer E-Mail-Adresse, eures Namens und der URL eurer Website.

via www.producthunt.com

]]>
Kim Rixecker
Der große t3n-Guide zum eigenen WordPress-Theme – Teil 3: Alternative Startseite und Galerie-Teaser http://t3n.de/news/t3n-guide-wordpress-theme-teil-3-alternative-startseite-galerie-teaser-558172/ 2014-09-10T09:38:38Z
Diese Artikelreihe dreht sich darum, ein WordPress-Theme zu erstellen – von Grund auf. Im dritten Teil geht es weiter mit der Entwicklung und wir kümmern uns um die ersten Details.

Diese Artikelreihe dreht sich darum, ein WordPress-Theme zu erstellen – von Grund auf. Im dritten Teil geht es weiter mit der Entwicklung und wir kümmern uns um die ersten Details.

Zuerst möchte ich darauf hinweisen, dass der letzte Teil ein wenig aktualisiert wurde und einige kleine Änderungen vorgenommen wurden (siehe dazu die Update-Box am Anfang des Artikels). Da der letzte Teil der Reihe doch ziemlich lang war habe ich mich dazu entschieden, lieber noch ein oder zwei Artikel mehr zu schreiben und dafür die einzelnen Teile kürzer zu halten. Deshalb werden wir in diesem Teil nicht mit allem inhaltlichen fertig werden (würden wir vermutlich auch nicht, wenn der Artikel so lang werden würde wie Teil zwei).

Wir wollen uns in diesem Teil zuerst um die verschiedenen Post-Format-Templates kümmern. Teilweise ist die Code-Darstellung hier in dem Artikel etwas unübersichtlich, da der Editor von WordPress die Einrückung zunichte macht und auch einige längere Zeilen dabei sind – ihr könnt euch den Code etwas übersichtlicher auf GitHub anschauen. Die langen Zeilen sind hier in dem Beitrag umgebrochen (zu erkennen an diesem Zeichen: ), weshalb die Zeilenangaben hier in dem Artikel nicht mit den Zeilen bei GitHub übereinstimmen.

Bei den meisten Post-Formaten, die wir in der functions.php ziemlich am Anfang aktiviert haben, sehe ich aktuell keinen Anlass, die Standardausgabe der content.php-Datei zu verändern. Anders sieht das bei der Galerie aus. Hier wollen wir ein großes Vorschaubild und noch einige kleine Vorschaubilder anzeigen lassen. Wenn der Artikel ein Featured Image gesetzt hat, werden wir dies als großes Bild darstellen. Gibt es das nicht, nehmen wir das erste aus der Galerie.

Ungefähr so soll eine Galerie in der Blog-Ansicht aussehen. (Fotos: Dennis Brinkmann)
Ungefähr so soll eine Galerie in der Blog-Ansicht aussehen. (Fotos: Dennis Brinkmann)

Kopieren wir zuerst den Inhalt der content.php-Datei in die neu erstellte content-gallery.php-Datei. Anschließend tauschen wir im Header den Aufruf der Funktion bornholm_the_post_header() gegen folgenden Schnipsel Code aus:

$images = bornholm_get_gallery_images( $post->ID );
bornholm_gallery_thumbnail_and_title('large', $images, 'h1');

Mit der Funktion bornholm_get_gallery_images() holen wir uns die Bilder der Galerie und speichern sie in der Variable $images.  Diese sieht wie folgt aus und wird an das Ende der functions.php-Datei geschrieben.

function bornholm_get_gallery_images( $post_id ) {
$post = get_post( $post_id );
// Den Beitrag gibt es nicht, oder er ist leer.
if ( ! $post || empty ( $post->post_content ) )
return array();
$galleries = get_post_galleries( $post, false );
if ( empty ( $galleries ) )
return array();
$ids = array();
foreach ( $galleries as $gallery ) {
if ( ! empty ( $gallery['ids'] ) )
$ids = array_merge( $ids, explode( ',', $gallery['ids'] ) );
}
$ids = array_unique( $ids );
if ( empty ( $ids ) )
return array();
$images = get_posts(
array (
'post_type'      => 'attachment',
'post_mime_type' => 'image',
'orderby'        => 'menu_order',
'numberposts'    => 999,
'include'        => $ids
)
);
if ( ! $images )
return array();
return $images;
}

An dieser Stelle zuerst vielen Dank an Thomas Scholz, der sich den von mir fabrizierten Code angeschaut und mir einige Tipps zur Verbesserung gegeben hat – unter anderem hat er mir die Funktion bornholm_get_gallery_images() geschrieben, da mein Weg nicht ganz zum Ziel geführt hat.

In der Funktion holen wir uns mit get_post() die Informationen zu dem Beitrag und speichern sie in der Variable $post. Wenn es den Post nicht gibt oder er leer ist, dann beenden wir die Funktion und geben nur ein leeres Array zurück. Anschließend speichern wir uns die Galerie-Informationen (unter anderem die IDs der Bilder aus der Galerie) in der Variable $galleries. An die Funktion get_post_galleries() übergeben wir neben dem Post-Objekt den booleschen Wert false, damit wir keinen HTML-Code zurückbekommen, sondern nur Daten in einem Array. Wenn keine Galerie oder Galerien vorhanden sind, dann beenden wir die Funktion wieder und geben ein leeres Array zurück.

In der nächsten Zeile initiieren wir ein Array und speichern es in der Variable $ids, das wir anschließend in einer foreach-Schleife befüllen. Wir durchlaufen die Galerien und befüllen das Array $ids mit den Werten aus dem Schlüssel ids des $gallery-Arrays. Nach Beendigung der Schleife entfernen wir doppelte Werte aus dem Array und prüfen, ob das Array leer ist. Ist das der Fall, beenden wir die Funktion wiederum mit der Rückgabe eines leeren Arrays.

Wenn das Array nicht leer ist, dann holen wir uns mit get_posts() die Informationen der Bilder, die wir später benötigen. Wenn wir keine Daten zurückbekommen, dann beenden wir die Funktion wieder vorzeitig und geben sonst das Ergebnis-Array mit den Informationen zu den Galerie-Bildern zurück.

An die Funktion bornholm_gallery_thumbnail_and_title() aus der content-gallery.php-Datei übergeben wir als Parameter die gewünschte Größe des Thumbnails, das Ergebnis der gerade besprochenen bornholm_get_gallery_images()-Funktion und die Überschriften-Ebene. Die Funktion schreiben wir wie folgt an das Ende der functions.php:

function bornholm_gallery_thumbnail_and_title($size, $images, $heading) {
global $post;
if ( $images ) :
$image = array_shift( $images );
$image_img_tag = wp_get_attachment_image( $image->ID, $size );
?>
<a href="<?php the_permalink(); ?>" ↵
title="<?php the_title_attribute( array( ↵
'before' => __( 'Permalink to: ', 'bornholm'), ↵
'after' => '' ) ); ?>" rel="bookmark">
<?php echo '<' . $heading .' class="entry-title">';
the_title();
echo '</' .$heading .'>'; ?>
<figure class="gallery-thumb">
<?php if ( has_post_thumbnail() ):
the_post_thumbnail($size);
else:
echo $image_img_tag;
endif; ?>
</figure><!-- .gallery-thumb -->
</a>
<?php else:?>
<?php echo '<' . $heading .' class="entry-title">';?>
<a href="<?php the_permalink(); ?>" ↵
title="<?php the_title_attribute( ↵
array( 'before' => __( 'Permalink to: ', 'bornholm'), ↵
'after' => '' ) ); ?>" rel="bookmark"><?php the_title();?></a>
<?php echo '</' .$heading .'>';
endif;
}

Wenn wir aus dem Aufruf der bornholm_get_gallery_images()-Funktion etwas zurückbekommen, speichern wir in der Variable $image das erste Element des Bilder-Arrays mittels der PHP-Funktion array_shift. In der nächsten Zeile speichern wir dann in der Variable $image_img_tag das Image-Tag des ersten Bildes. An die Funktion wp_get_attachment_image() übergeben wir die ID des ersten Bildes und die gewünschte Größe large, die wir als Parameter mit dem Funktionsaufruf übergeben haben.

Anschließend kommt bereits bekannter Code. Wir verlinken den Titel, bei dem wir die Ebene der Überschrift aus der Variable $heading holen, und das Featured Image oder, wenn kein Featured Image gesetzt ist, geben wir stattdessen das erste Bild aus. Falls aus irgendeinem Grund keine Bilder gefunden werden sollten, geben wir einfach den Titel aus.

Das war noch relativ einfach – problematisch wurde es als es daran ging, die ersten zwei Bilder aus der Galerie zu bekommen. Nach einiger Bastelei ist dann folgendes dabei herausgekommen, was wir an das Ende der functions.php-Datei schreiben:

function bornholm_small_gallery_thumbnails_and_picture_number($size, $images) {
global $post;
if ( $images ) :
$total_images = count( $images );
$small_images = bornholm_get_gallery_images( $post->ID );
if ( has_post_thumbnail() ):
$post_thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ));
$counter = 0;
$image_list = '<ul>';
foreach( $small_images as $single_image ):
$single_image_url = wp_get_attachment_image_src( $single_image->ID );
if($counter>=2):
break;
endif;
if($post_thumbnail[0]==$single_image_url[0]):
continue;
endif;
$image_list .= '<li>' . wp_get_attachment_image( $single_image->ID, $size ) . '</li>';
$counter++;
endforeach;
$image_list .= '</ul>';
echo $image_list;
else:
$counter = 0;
$image_list = '<ul>';
foreach( $small_images as $single_image ):
if($counter==0):
$counter++;
continue;
endif;
if($counter>=3):
break;
endif;
$image_list .= '<li>' . wp_get_attachment_image( $single_image->ID, $size ) . '</li>';
$counter++;
endforeach;
$image_list .= '</ul>';
echo $image_list;
endif;
?>
<p><em><?php printf( _n( 'This gallery contains ↵
<a %1$s>%2$s photo</a>.', 'This gallery contains ↵
<a %1$s>%2$s photos</a>.', $total_images, 'bornholm' ), ↵
'href="' . esc_url( get_permalink() ) . '" ↵
title="' . esc_attr( sprintf( __( 'Permalink to %s', 'bornholm' ), ↵
the_title_attribute( 'echo=0' ) ) ) . '" ↵
rel="bookmark"', number_format_i18n( $total_images )); ?> ↵
</em></p>
<?php endif;
}

Die ersten Zeilen der Funktion sind hier identisch mit der vorherigen. Nach der Überprüfung der Variable $images speichern wir die Anzahl der Bilder in der Variable $total_images. Anschließend durchlaufen wir die Bilder wie in dem oberen Code-Teil und speichern das Ergebnis in der Variable $small_images. Danach prüfen wir, ob es ein Featured Image gibt – ist das der Fall, müssen wir prüfen, welches das ist, damit wir nicht aus Versehen hier dasselbe Bild ein zweites Mal in klein ausgeben.

Wir holen uns mit der wp_get_attachment_image_src()-Funktion die Daten des Featured Image (unter anderem die URL an erster Stelle des Ergebnis-Arrays), indem wir die ID übergeben, die wir aus der get_post_thumbnail_id()-Funktion zurückbekommen, und speichern sie in der Variable $post_thumbnail. Anschließend setzen wir eine Zähler-Variable auf Null und widmen uns der Liste der kleineren Vorschaubilder.

Wir durchlaufen eine foreach-Schleife für jeden der Array-Werte aus der bornholm_get_gallery_images()-Funktion und speichern jedes Mal die Daten des Bildes in der Variable $single_image_url. Wenn der Counter größer oder gleich zwei ist, brechen wir die foreach-Schleife ab und machen danach weiter. Wenn die URL des aktuellen Bildes identisch mit der des Featured Image ist, brechen wir nur den aktuellen Durchlauf ab. Andernfalls hängen wir bei jedem Durchlauf an die Variable $image_list einen Listeneintrag mit dem aktuellen Bild an und erhöhen den Zähler um einen Wert.

Wenn kein Featured Image gesetzt ist, dann gehen wir etwas anders vor. Wenn der Counter auf Null steht, brechen wir den aktuellen Durchlauf der Schleife ab – also immer den ersten. Wenn der Counter größer oder gleich drei ist, dann brechen wir die komplette Schleife ab – andernfalls füllen wir die Variable mit einem weiteren Listenelement und erhöhen den Zähler. Abschließend schließen wir die Liste und geben per echo die Liste aus. Danach zeigen wir noch die Zahl der Bilder an, die wir anfangs in $total_images gespeichert haben.

Der Aufruf der Funktion sieht in der content-gallery.php-Datei dann so aus – damit ersetzen wir den Inhalt des div-Elements mit der Klasse entry-content:

bornholm_small_gallery_thumbnails_and_picture_number('thumbnail', $images);

Damit sieht die content-gallery.php nun so aus:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php $images = bornholm_get_gallery_images( $post->ID );
bornholm_gallery_thumbnail_and_title('large', $images, 'h1');?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php bornholm_small_gallery_thumbnails_and_picture_number('thumbnail', $images);?>
</div><!-- .entry-content -->
<footer class="entry-meta">
<?php bornholm_footer_meta() ?>
</footer><!-- .entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->

Und das war's auch erst mal mit dem Kapitel content-Dateien. Vielleicht werden wir hier später noch die Kamera-Informationen darstellen, die der Nutzer eingetragen hat, und einen prominenteren Hinweis auf die ganze Galerie platzieren aber für den Moment soll uns das so reichen.

Kümmern wir uns als nächstes um die alternative Startseite des Themes – den kleinen Ausschnitt aus dem Portfolio. Hier möchten wir zuerst grundlegend die neuesten zwei oder drei Galerien aus den verschiedenen Kategorien darstellen. Wenn mehr Galerien vorhanden sind, dann zeigen wir zusätzlich noch einen Link auf die Kategorie-Seite – im besten Fall hat der Nutzer eigene Kategorien für Galerien, damit der Besucher auch wirklich nur Galerien vorfindet.

So in etwa soll am Ende die alternative Startseite aussehen. (Fotos: Dennis Brinkmann)
So in etwa soll am Ende die alternative Startseite aussehen. (Fotos: Dennis Brinkmann)

Standardmäßig möchten wir außerdem, dass Galerien aus untergeordneten Kategorien auch direkt unter der übergeordneten Galerie-Kategorie aufgeführt werden. Wenn es also eine allgemeinere Galerie-Kategorie „Sport“ gibt, und dieser dann die Galerie-Kategorie „Leichtathletik“ untergeordnet ist, dann sollen die neusten Galerien aus „Leichtathletik“ direkt unter denen aus der Kategorie „Sport“ angezeigt werden. In dem Theme-Customizer werden wir dem Nutzer dann in einem späteren Teil noch die Möglichkeit geben, die ganzen Kategorien einfach alphabetisch sortiert auszugeben ohne die Hierarchie zu beachten.

Legen wir uns also die Datei alternative-home-page.php an und füllen sie mit ein wenig Inhalt:

<?php
/*
* Template Name: Alternative home page
* Description: A Page Template for the alternative home page. It displays a brief overview of the portfolio.
*/
get_header(); ?>
<main role="main">
<?php
$args = array(
'orderby' => 'name',
'parent' => 0
);
$categories = get_categories( $args );
foreach ( $categories as $cat ):
$galleries_args = array(
'category__in' => $cat->cat_ID,
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => $cat->slug
),
array(
'taxonomy' => 'post_format',
'field' => 'slug',
'terms' => 'post-format-gallery'
)
)
);
$galleries = get_posts( $galleries_args );
if( $galleries) :
$total_galleries = count($galleries);
$number_of_galleries = 3;
$gallery_counter = 0;?>
<div class="gallery-category">
<h2><?php echo $cat->name; ?></h2>
<?php foreach ( $galleries as $post ):
if($total_galleries > $number_of_galleries):
$gallery_counter++;
if($gallery_counter > $number_of_galleries):?>
<article>
<h3><a href="<?php echo esc_url(get_category_link( $cat->cat_ID )) ?>" ↵
title="<?php _e('All Posts from ', 'bornholm'); echo $cat->name ?>"> ↵
<?php _e('Display all', 'bornholm');?></a></h3>
</article>
<?php break;
endif;
endif;?>
<article>
<?php $images = bornholm_get_gallery_images( $post->ID );
bornholm_gallery_thumbnail_and_title('thumbnail', $images, 'h3'); ?>
</article>
<?php endforeach;
bornholm_get_child_category_galleries($cat, $number_of_galleries);?>
</div>
<?php endif;
endforeach;?>
</main>
<?php get_sidebar();
get_footer(); ?>

Zuerst kommt in dem Kommentar der Name und die Beschreibung des Templates, den der Nutzer dann auch zu sehen bekommt. Anschließend holen wir uns ganz normal den Header und öffnen das main-Tag. In Zeile neun befüllen wir ein Array mit den benötigten Angaben, nach denen wir anschließend die Kategorien aussuchen möchten. Wir sortieren nach dem Namen der Kategorien und geben per 'parent' => 0 an, dass wir nur die Kategorien der obersten Ebene haben möchten – wir erinnern uns: Die untergeordneten Kategorien möchten wir räumlich dicht bei den Oberkategorien ausgeben.

Im nächsten Schritt speichern wir die Informationen, die uns die get_categories()-Funktion zu den Kategorien liefert, in der Variablen $categories. Jede dieser Kategorien durchlaufen wir nun mit einer foreach-Schleife – die gerade aktuelle Kategorie wird dabei in der Variable $cat gespeichert. Nun müssen wir als nächstes die Beiträge auslesen, die in der Kategorie sind und das Post-Format „Galerie“ haben. Dafür bereiten wir ab Zeile 15 ein Array vor, dem wir die Parameter für die später aufzurufende get_posts()-Funktion übergeben.

Als Wert für 'category__in' übergeben wir mit $cat->cat_ID die ID der aktuellen Kategorie. Den Schlüssen category statt 'category__in' zu verwenden, wie es naheliegen würde, reicht hier nicht aus, da sonst auch die Beiträge der Unterkategorien ausgelesen werden würden. Dem Schlüssel 'tax_query' übergeben wir als Wert ein mehrdimensionales Array: Die Posts sollen einmal für die Taxonomie 'category' den slug haben, der mit dem Slug der aktuellen Kategorie übereinstimmt ('terms' => $cat_child->slug). Diese Bedingung verknüpfen wir mittels AND mit der zweiten, nämlich dass der Slug des Post-Formats mit dem Slug post-format-gallery übereinstimmen muss.

Die Posts, die diese Merkmale erfüllen, holen wir uns in Zeile 31 mit der get_posts()-Funktion und speichern sie in der Variable $galleries. Danach prüfen wir, ob wir Posts zurückbekommen haben – wenn das der Fall ist, dann zählen wir sie und legen die Zahl der anzuzeigenden Galerien ($number_of_galleries) fest. In der nächsten Zeile setzen wir einen Counter auf Null und geben danach als ersten Inhalt in dem div-Element den Namen der Kategorie aus. Nun folgt eine weitere foreach-Schleife, mit der wir die einzelnen Galerie-Beiträge durchlaufen.

Wenn die Anzahl der Galerien größer ist, als die Zahl, die wir anzeigen möchten, dann müssen wir ja entsprechend den Link zu der Kategorie ausgeben, damit der Nutzer auch die anderen Galerien anschauen kann. Wenn das also der Fall ist, erhöhen wir zuerst den Counter um eins und testen anschließend, ob der Wert des Counters größer ist als die Anzahl der Galerien, die wir anzeigen wollen. Ist dem so, geben wir innerhalb eines article-Elements als h3-Headline den Text „Display all“ als Link auf die Kategorie aus. Danach brechen wir die foreach-Schleife mit break ab.

Wenn der Counter noch nicht höher ist als die Anzahl der anzuzeigenden Galerien oder sowieso weniger Galerien vorhanden sind, dann geben wir ab Zeile 50 wiederum in einem article-Element mit der bornholm_gallery_thumbnail_and_title()-Funktion das Artikelbild oder das erste Bild der Galerie mit der Headline aus, wie wir das oben in der content-gallery.php-Datei schon gemacht haben.

Nachdem der Durchlauf der foreach-Schleife entweder durch das break abgebrochen oder normal beendet wurde, wenn weniger Galerien vorhanden sind als dargestellt werden sollen, rufen wir die Funktion bornholm_get_child_category_galleries() auf, um die Kategorien auszugeben, die der aktuellen Kategorie untergeordnet sind. Als Parameter übergeben wir die aktuelle Kategorie und die Nummer der anzuzeigenden Galerien. Danach werden einfach noch die Tags, Schleifen und Bedingungen geschlossen und beendet, die noch offen sind, und die Sidebar und der Footer auf altbekannte Weise eingebunden.

Die Funktion bornholm_get_child_category_galleries() gehört wieder in die functions.php und sieht so aus:

function bornholm_get_child_category_galleries($cat, $number_of_galleries) {
$category_children = get_term_children( $cat->term_id, 'category' );
if ( $category_children ):
foreach( $category_children as $cat_child ):
$cat_child = get_category($cat_child);
$child_galleries_args = array(
'category__in' => $cat_child->term_id,
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' =>  $cat_child->slug
),
array(
'taxonomy' => 'post_format',
'field' => 'slug',
'terms' => 'post-format-gallery'
)
)
);
$child_galleries = get_posts( $child_galleries_args );
if( $child_galleries) :
$total_child_gallerys = count($child_galleries);
$gallery_child_counter = 0;?>
<div class="gallery-category child">
<h2><?php echo $cat_child->name; ?></h2>
<?php foreach ( $child_galleries as $post_child ) :
if($total_child_gallerys > $number_of_galleries):
$gallery_child_counter++;
if($gallery_child_counter > $number_of_galleries):?>
<article>
<h3><a href="<?php echo esc_url(get_category_link( $cat_child->cat_ID )) ?>" ↵
title="<?php _e('All Posts from ', 'bornholm'); echo $cat_child->name ?>"> ↵
<?php _e('Display all', 'bornholm');?></a></h3>
</article>
<?php break;
endif;
endif;?>
<article>
<?php $images_child = bornholm_get_gallery_images( $post_child->ID );
if ( $images_child ) :
$image_child = array_shift( $images_child );
$image_child_img_tag = wp_get_attachment_image( $image_child->ID, 'thumbnail' );
?>
<a href="<?php echo get_permalink( $post_child->ID ); ?>" ↵
title="<?php _e( 'Permalink to: ', 'bornholm'); echo $post_child->post_title ?>" rel="bookmark">
<h3 class="entry-title"><?php echo $post_child->post_title; ?></h3>
<figure class="gallery-thumb">
<?php if ( has_post_thumbnail($post_child->ID) ):
echo get_the_post_thumbnail($post_child->ID, 'thumbnail');
else:
echo $image_child_img_tag;
endif; ?>
</figure><!-- .gallery-thumb -->
</a>
<?php else:?>
<h3 class="entry-title"><a href="<?php echo get_permalink( $post_child->ID ); ?>" ↵
title="<?php _e( 'Permalink to: ', 'bornholm'); echo $post_child->post_title ?>" ↵
rel="bookmark"><?php echo $post_child->post_title; ?></a></h3>
<?php endif; ?>
</article>
<?php endforeach; ?>
</div>
<?php endif;
endforeach;
endif;
}

Das sieht zugegebenermaßen viel aus, aber einiges davon hatten wir eben in der alternative-home-page.php-Datei bereits in Verwendung. Zuerst holen wir uns mittels der get_term_children()-Funktion die untergeordneten Kategorien der aktuellen Kategorie und speichern das Ergebnis in der Variable $category_children. Wir übergeben als Parameter die ID der aktuellen Kategorie ($cat->term_id) und die Art des Terms, die wir zurückbekommen möchten, nämlich 'category'. Wenn wir hier untergeordnete Kategorien zurückbekommen, dann durchlaufen wir diese genauso, wie wir das mit den übergeordneten Kategorien in der alternative-home-page.php-Datei auch gemacht haben:

In der Variable $cat_child speichern wir uns äquivalent zu der Variable $cat die Informationen aus dem Aufruf der get_category()-Funktion – get_term_children() liefert uns nämlich nur die ID zurück. Bis Zeile 41 ist danach alles fast identisch mit dem Code aus der alternative-home-page.php, wir müssen lediglich die Variablen anpassen und brauchen nicht mehr die Anzahl der anzuzeigenden Galerien festzulegen, da wir das ja in der Variable $number_of_galleries bereits getan haben.

Bei meinem Versuch, auch einfach wie in der anderen Datei die Funktion bornholm_get_child_category_galleries() zu nutzen, trat dann allerdings ein Fehler auf. Es wurde nicht der korrekte Titel und Link ausgegeben, sondern der von der letzten Galerie aus der übergeordneten Kategorie – auch das Featured Image hat nicht gepasst.

Die Zeilen 42 bis 61 entsprechen also nur fast denen in der bornholm_get_child_category_galleries()-Funktion. Die Funktion the_permalink() ersetzen wir durch echo get_permalink( $post_child->ID );, die Funktion the_title_attribute() durch echo $post_child->post_title; und the_title() ersetzen wir durch echo $post_child->post_title. Der Funktion has_post_thumbnail() übergeben wir die ID des Posts und the_post_thumbnail('thumbnail'); ersetzen wir durch folgende Zeile:

echo get_the_post_thumbnail($post_child->ID, 'thumbnail');

Schon wieder ziemlich viel geworden – Schluss jetzt!

Das soll es dann auch mit diesem Teil gewesen sein. Die Code-Beispiele waren diesmal ziemlich lang, ich hoffe, es war noch okay so und ich konnte es verständlich erklären (Ich werde mein „Code-Design“ für den nächsten Teil anpassen, weshalb es sein kann, dass die Veröffentlichung etwas länger dauert (Einarbeitungszeit et cetera)). Wir haben jetzt also die Galerien in der Blog-Ansicht und die alternative Startseite grundlegend fertig.

Bei den Galerien in der Blog-Ansicht kommen, wie schon gesagt, vielleicht noch die Kamera-Informationen dazu, die der Autor angeben können soll. Bei der alternativen Startseite fehlt auf jeden Fall noch die Möglichkeit, ein großes Vorschaubild festzulegen, sowie die großen Widgets optional nach oben zu ziehen.

Alle Teile unseres Guides im Überblick:

]]>
Florian Brinkmann