WordPress Thema spd2014

Im Rahmen der Überarbeitung der Webseite des SPD Unterbezirks Miesbach, ist ein WordPress Thema erstellt worden. Dieses basiert auf dem Bootstrap Framework und dem _tk Thema. Es vereint die visuelle Grundlage des spdweyarn Themas von Stefan Mehrer und Thomas Mandl mit modernem responsive Webdesign. Feedback, Bugfixes und Änderungswünsche bitte an info@holzeisen.de schicken.

Bitte beachten Sie die überarbeitete Version "spd2017"

 

Da dieses Design für Unterbezirke und Ortsvereine der BayernSPD generell von Interesse ist, stelle ich es an dieser Stelle zum Download bereit. Als WordPress wird mindestens Version 3.8 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. Zur Optimierung der Ladezeit wird statt der style.css die style.min.css geladen. Diese muß bei Änderungen der style.css händisch angeglichen werden.
  4. Beim Einsatz eines Bildes im Seitenkopf sollten mindestens 1300x200 Pixel zur Verfügung stehen. Da die Seitenbreite flexibel ist, können Teile des Bildes verdeckt werden.
  5. 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 spd2014 Theme ist für folgende WordPress Plugins vorbereitet:

2 Click Social Media Buttons: Dieses Plugin bietet eine Einbindung für Social Media Buttons die mehr dem deutschen Datenschutz entspricht als die direkte Einbindung der Codesnippets. Ist es Installiert, sollte darauf geachet werden bei den Einstellungen die Position: "Manuell (Template)" zu verwenden. Die Buttons tauchen dann immer unter den Überschiften der Seiten, sowie in der Langansicht der Artikel auf.

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.

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:

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

Wer weitere Bildgrößen benötigt kann diese in der Funktion spd2014_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.

Integrierte Widgets

Folgende Widgets sind in das Thema bereits eingebaut:

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.

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.

Responsibility

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.

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: spd2014-0.0.2.zip (2.4 MB)

Vorherige Version: spd2014-0.0.1.zip (2.4 MB)

Changelog

= 0.0.1 =

15.02.2014
- Erstes Release, ausgeführt für SPD KV Miesbach

= 0.0.2 = 

22.01.2015
- Aktualisierung des Templates auf neue Versionen des "Tribe Kalenders"
- Optimierung der Darstellung und Schriftgrößen
- Verbesserte responsive Skalierung von Beitragsbildern
- Unterstützung des "Responsive Lightbox" Plugins
- Beitragsbilder im Beitrag gehen jetzt auf eine Großansicht (Lightbox)
- Neues Widget "BayernSPD - Verlinktes Bild"