WordPress Thema spd2017

Dieses Thema ist die Überarbeitung des spd2014 Themas welches für den SPD Unterbezirks Miesbach erstellt wurde. Erforderlich wurde Sie wegen zahlreicher Änderungen in Wordpress sowie den unterstützen Plugins. Visuell stand die Anpassung an einen modernen flachen Stil im Vordergrund, ohne die SPD Guidelines zu verlassen. Die Nutzung dieses Themas ist wie gehabt unter verlinkung dieser Seite im Footer allen SPD Vereinen erlaubt. Feedback, Bugfixes und Änderungswünsche bitte an info@holzeisen.de schicken.

Aktuelle Version: 0.0.7 im Downloadbereich

Als WordPress wird mindestens Version 4.7 empfohlen, mit dieser wurde es erstellt und getestet. Es ist "schlüsselfertig" einsetzbar und enthält neben dem Quellcode folgende Inhalte:

Das Thema darf unter Namensnennung der Herkunft weiterentwickelt, aber nur durch offizielle Bezirke und Ortsvereine der SPD verwendet werden. Sie finden folgende Themen und Bereiche auf dieser Seite:

Beachtenswert

Für einen optimalen Einsatz sind einige Dinge zu beachten:

  1. Das Thema integriert die Frameworks für Bootstrap und Font Awesome in das Frontend und das Bootstrap-Framework in den Editor von WordPress. Achten sie darauf keine Plugins einzusetzen die ebenfalls diese Frameworks integrieren, um doppeltes laden und Programmfehler zu vermeiden.
  2. Einfache Text und Bildinhalte sind, wie in WordPress typisch von jedem leicht zu pflegen. Bei komplexeren Inhalten wie Tabellen oder mehreren Spalten wird dringend Empfohlen sich mit den Frameworks auseinanderzusetzen. Grundlagen in HTML und CSS sind erforderlich. Code kann in der "Textansicht" des WordPress Editors bearbeitet werden.
  3. Beim Einsatz eines Bildes im Seitenkopf sollten mindestens 1920x200 Pixel zur Verfügung stehen. Da die Seitenbreite flexibel ist, können Teile des Bildes verdeckt werden. Gegenüber spd2014,wurde der Kopf auf die volle Breite der Bildschirms gezogen.
  4. Das Verbandslogo im Kopf muß 160x160 Pixel groß sein. Es wird beim hochladen im Pflegebereich nicht entsprechend skaliert.

Inhaltspflege

Der Editor von WordPress bietet leider in der WYSIWYG Ansicht keine Möglichkeit HTML-Elemente wie <div> oder Tabellen zu plazieren oder zu entfernen. Daher müssen diese immer im Quellcode verändert werden. Für Mehrspalten-Layouts sollte man sich mit den Grid System von Bootstrap auseinandersetzen. Die im Backend angezeigten gestrichelten Linien werde im Frontend nicht angezeigt. Hier ein einfaches Beispiel für zwei Spalten, das <div ="container"> Tag ist nicht erforderlich:

<div class="row">
  <div class="col-xs-6">
   Linke Spalte
 </div>
  <div class="col-xs-6">
   Rechte Spalte
 </div>
</div>

Ein häufiger Fall ist das korrigieren der Text Ausrichtung, etwa nach einem linksbündigen Bild. Bootstrap bietet hierfür den sogenannten Clearfix, er wird im Code folgendermaßen eingetragen. Plazieren Sie diesen Code unter den Text an dem die Ausrichtung erwungen werden soll:

<div class="clearfix"></div>

Plugins

Das spd2017 Theme ist für folgende WordPress Plugins vorbereitet:

Shariff Wrapper: Dieses Plugin ersetzt die bisherige Unterstützung von 2 Click Social Media Buttons als dessen offizieler Nachfolger. Es bietet eine Einbindung für Social Media Buttons die mehr dem deutschen Datenschutz entspricht als die direkte Einbindung der Codesnippets. Sie müssen keine automatischen Plazierungen in den Einstellungen angeben, das Thema erledigt dies automatisch.

Tribe Events Calendar: Dieses Kalender-Plugin ist in der Basisversion kostenlos einsetzbar und sehr flexibel. Leider ist die Darstellung von Zeitpunkten eher US-Typisch, das Thema korrigiert dies. Wenn sie diesen Plugin einsetzen ist eine Aktualisierung eines eventuellen spd2014 Themas dringend empfohlen.

Font Awesome Shortcodes: Dieses Plugin ermöglicht die Nutzung der Font Awesome shortcodes in Seiten und Artikeln, bindet es aber nicht selbst in das Frontend ein, und ist damit eine optimal Ergänzung.

Responsive Lightbox: Ermöglicht Vollbild-Azeige von Bildern und Galerien.

Themenanpassung

In den Einstellungen zum Thema befindet sich eine Sektion "Themenanpassung". Hier kann das Verbandslogo hochgeladen und ausgerichtet werden. Klassisch rechtsbündig oder mittig nach SPD CI. Verzichten Sie bei mittiger Ausrichtung auf die Titelanzeige im Kopf um Überschneidungen zu vermeiden.

Menüs und Widget-Bereiche

Das Thema enthält die Menüs "Hauptmenü" und "Metamenü". Das Hauptmenü befindet sich unter dem Kopf, das Metamenü in der rechten Fußspalte und ist der ideale Ort für Impressum oder Datenschutzseiten. Für Widgets stehen die Bereiche "Sidebar", "Footer Links" und "Footer Mitte" zur Verfügung.

Zusätzliche Bildgrößen

Folgende Bildgrößen werden vom Thema automatisch angelegt:

  • Artikelbild (850x300 Pixel)
  • Portraitbild Klein (110x150 Pixel mit Beschnitt)
  • Portraitbild Normal (130x196 Pixel mit Beschnitt)

Wer weitere Bildgrößen benötigt kann diese in der Funktion spd2017_setup() der functions.php eintragen. Verwenden Sie statt Leerzeichen Minuszeichen beim Bezeichner dann werden diese bei der Auswahl entsprechend angezeigt. Bevor eine Bildgröße verfügbar ist müssen die Thumbnails generiert werden, und das Bild ausreichend Auflösung bieten. Bilder mit Beschriftungen werden mit passender Unterschrift im Inhalt angezeigt. Das Thema setzt die Qualität von Thumbnails auf 100% um optimale Darstellung zu erreichen.

Artikelbilder

Eine Veränderung gegenüber spd2014 ist die Fokusierung auf überbreite Artikelbilder wie Sie derzeit häufig im Web eingesetzt werden. Empfohlen sind dazu Bilder im Format von ca. 3:1 von mindestens 850 Pixeln Breite. Das Thema wird versuchen diese BIlder im Artikelkopf über die volle Breite des Inhalts anzuzeigen. Bilder deren Seitenverhältnis eher Quadratisch oder Hochformatig sind, werden hingegen nur über die halbe Inhaltsbreite linksbündig plaziert.

Integrierte Widgets

Folgende Widgets sind in das Thema bereits eingebaut:

BayernSPD - Claim: Kann im Sidebar plaziert werden, erhält einen Link sowie eine zweizeiligen Claim zur anzeige, wobei die zweite Zeile optional ist.

BayernSPD - Verlinktes Bild: Repräsentatives Bild mit Über- und Untertitel, das auf eine externe Webseite verlinkt. Ideal zur Präsentation von Kandidaten und gewählten Vertretern.

BayernSPD - Mitglied werden: Kann im Sidebar plaziert werden und zeigt Standardmäßig auf die zugehörige Seite der BayernSPD. Text und Link können angepasst werden. Legacy: Da diese Funktion auch vom Nachfolger "BayernSPD - Claim" erfüllt wird.

Responsivity

Die mobile Nutzung des Internets wird immer wichtiger, demensprechend müssen Internetseiten auf Smartphone und Tablet lesbar und bedienbar bleiben. Bootstrap bietet hierfür die Ideale Grundlage, weswegen es in diesem Thema auch eingesetzt wird. Als Folge davon ist die Breite des Inhaltsbereiches nicht fest, und ändert sich je nach Auflösung. Beachten Sie diesen Umstand bei der Pflege von Inhalten.

Bei geringer werdender Bildbreite schiebt sich der Sidebar unter den Inhalt, das Menü klappt auf ein Touch-Icon ein und die drei Spalten des Seitenfuß werden untereinander angeordnet. Bei sehr geringer Auflösung halbiert sich die Größe des Kopfes. Achten sie darauf das Links auch mit Touch bedienbar bleiben. Sie können das Verhalten am PC durch verkleinern des Browserfensters testen.

Seitentemplates

Hauptseite mit Artikelanrissen: Dies ist ein Template speziell für die Einstiegsseite und als Alternative zur klassischen Blogseite gedacht. Sie haben hier die möglichkeit einen Eröffnungsbeitrag oben zu plazieren, gefolgt von einem Artikelanriss der ersten sechs Beiträge. Hervorgehobene Beiträge kommen zuerst. Der erste Anriss ist einspaltig, die folgenden werden zweispaltig nebeneinander angezeigt.

Lokalisierung

Nach dem WordPress Codex sollten Textinhalte immer lokalisiert werden. Auch wenn SPD-Webseiten ausschließlich Deutsch sind trägt dieses Plugin der Richtlinie Rechnung. Alle Texte befinden sich in der Datei languages/de_DE.po unter dem Schlüssel spd2014. Diese Datei wird aber nicht direkt verwendet, sondern in kompilierter Form als de_DE.mo. Für die Erstellung dieser Datei benötigen sie ein passendes Programm, etwa Poedit das für Linux, Windows und Mac verfügbar ist. Unter Ubuntu Linux installieren sie es aus dem Repo mit "sudo apt-get install poedit".

Widget-Icons

Das Thema versucht Widgets automatisch mit Icons zu versehen. Um das zu bewerkstelligen verändert die Funktion fancy_title() in der functions.php die Überschrift. Wenn Sie das verhalten ändern wollen, passen Sie bitte die Funktion entsprechend an.

Download

Aktuelle Version: spd2017-0.0.7.zip (2.4 MB)

Changelog

= 0.0.7 =

15.01.2017
- Erstes Release, überarbeitet aus spd2014