WordPress: Vom Blog- zum Content-Management-System

In den letzten Jahren hat sich WordPress vom Blog- zum kleinen aber feinen Content-Management-System gemausert. Zudem kann WordPress mit einem sehr intuitiv zu bedienenden Backend punkten, das sich auch CMS-Neulingen schnell erschließt.

Für die Umsetzung des aktuellen Projekts beziehungsweise des gegebenen Webdesigns mit WordPress war dennoch viel Handarbeit nötig. So wurde beipielsweise eine Drop-Down-Navigation implementiert, die unter modernen Browsern auch ohne JavaScript funktioniert. Zudem waren ein Dutzend zusätzlicher Plug-ins nötig, um den vom Kunden gewünschten Funktionsumfang zu realisieren. Neben Erweiterungen für die Tag-Wolke betraf dies vor allem Kommentar- und Anmeldeformulare wie auch die Anzeige der “Meist gelesenen”-Artikel.

.mein-min-height-element {
min-height: 250px;
height: auto !important;
height: 250px;
}

Eines der sicherlich am meisten in aktuellen Webdesigns eingesetzten CSS3-Features sind Transparenzeffekte respektive halbtransparente Elemente. Zur Regulierung der Transparenz von Seitenelementen bietet CSS3 Webdesignern die Eigenschaft “opacity”, gefolgt von einer Gleitkommazahl zwischen null und eins. Eins bedeutet dabei vollständig deckend, null bedeutet vollständig transparent.

Um nun beispielsweise ein DIV-Blockelement halbtransparent erscheinen zu lassen, genügt die folgende CSS-Angabe:

div {opacity:0.5}

Wie üblich braucht es für den Internet Explorer einen Sonderweg über die “filter”-Eigenschaft. Dabei ist zu beachten, das der Transparenzwert in diesem Fall prozentual anzugeben ist:

div {filter: Alpha(opacity=50)}

Last but not least bestünde auch noch die Möglichkeit, den Transparenzwert via “rgba()” zu implementieren. Doch zum einen unterstützt dies der Internet Explorer nicht und zum anderen vererben sich rgba()-Eigenschaften nicht auf Kindelemente.

Anspruchvolles Webdesign mit Typo3: komplexe Drop-down-Menüs

Dass unter Typo3 die Gestaltungsmöglichkeiten von Menüs dank TypoScript enorm flexibel sind, ist gemeinhin bekannt. Wir wollten es genau wissen und haben ein komplexes Drop-down-Menü für Typo3 erstellt.

Dabei konnten wir etwa 90% der Drop-down-Menü-Funktionalität allein mit TypoScript umsetzen, ohne auch nur eine Zeile PHP-Code schreiben zu müssen. Für die restlichen 10% genügten dann rund zehn Zeilen PHP-Code, den wir mittels der TypoScript-Funktion “itemArrayProcFunc” in den Menü-Rendering-Prozess einschleusten – ein Hoch auf Typo3

Des Weiteren haben wir das Menü so implementiert, dass die Darstellung/Funktionalität unter modernen Browsern allein auf CSS-Basis gelingt und gänzlich ohne JavaScript auskommt. Lediglich für den Internet Explorer 6 mussten wir auf JavaScript zurückgreifen.

[UPDATE]

Inzwischen haben wir den Code optimiert und stellen diesen der Typo3-Community zur Verfügung:

TypoScript:

###################################################
## lib.nav (Button Navigation in Header)
###################################################
lib.nav = COA
lib.nav {
	10 = TEXT
	10.value = 
	10.stdWrap.prefixComment = 2|Output of lib.nav.10
	20 = HMENU
	20 {
		stdWrap.prefixComment = 2|Output of lib.nav.20
		wrap =
|

entryLevel = {$tabNavEntryLevel}
		excludeUidList = {$tabNavExcludeList}
		1 = TMENU
		1 {
			expAll = 1
			noBlur = 1
			wrap =
|

NO = 1
			NO.ATagTitle.field = abstract // description // subtitle
			NO.wrapItemAndSub =
|

NO.linkWrap = |
			NO.ATagBeforeWrap = 1
			NO.stdWrap.htmlSpecialChars = 1
			ACT = 1
			ACT < .NO
			ACT.wrapItemAndSub =
|

ACTIFSUB = 1
			ACTIFSUB < .NO
			ACTIFSUB.wrapItemAndSub =
|

IFSUB = 1
			IFSUB < .NO
			IFSUB.wrapItemAndSub =
|

CURIFSUB = 1
			CURIFSUB < .NO
			CURIFSUB.wrapItemAndSub =
|

}

		2 = TMENU
		2 {
			itemArrayProcFunc = user_menuManipulations->user_generateSubmenu
			noBlur = 1
			stdWrap.wrap =
 |

NO = 1
			NO.doNotLinkIt = 1
		}
	}
}

Der PHP-Code des eingebundenen PHP-Skripts ‘user_menuManipulations’:

<?php
require_once(PATH_tslib.'class.tslib_pibase.php');

class user_menuManipulations extends tslib_pibase {
function user_generateSubmenu($menuArr, $conf) {
If (count($menuArr) > 0) {
for ($i=0;$i<count($menuArr);$i++) {

//nav_title gesetzt?
if ($menuArr[$i]['nav_title']) {
$menuArr[$i]['title'] = $menuArr[$i]['nav_title'];
unset($menuArr[$i]['nav_title']);
}

if (($i === 0) && count($menuArr) === 1) //erstes Element und einziges Element
{
$menuArr[$i]['title'] = '<ul><li><a target="_self" href="'.$this->pi_getPageLink($menuArr[$i]['uid']).'"><span>'.$menuArr[$i]['title'].'</span></a></li></ul>';
}
elseif ($i === 0) //erstes Element
{
$menuArr[$i]['title'] = '<ul><li><a target="_self" href="'.$this->pi_getPageLink($menuArr[$i]['uid']).'"><span>'.$menuArr[$i]['title'].'</span></a></li>';
}
elseif ($i === (count($menuArr)-1) && true == ($i%4)) //letztes Element, wenn nicht Anfang eines neuen Blocks
{
$menuArr[$i]['title'] = '<li><a target="_self" href="'.$this->pi_getPageLink($menuArr[$i]['uid']).'"><span>'.$menuArr[$i]['title'].'</span></a></li></ul>';
}
elseif (false == ($i%4) && $i === (count($menuArr)-1)) //letztes Element, wenn Anfang eines neuen Blocks
{
$menuArr[$i]['title'] = '</ul><ul><li><a target="_self" href="'.$this->pi_getPageLink($menuArr[$i]['uid']).'"><span>'.$menuArr[$i]['title'].'</span></a></li></ul>';
}
elseif (false == ($i%4)) //Start neuer Block
{
$menuArr[$i]['title'] = '</ul><ul><li><a target="_self" href="'.$this->pi_getPageLink($menuArr[$i]['uid']).'"><span>'.$menuArr[$i]['title'].'</span></a></li>';
}
else //normales Element
{
$menuArr[$i]['title'] = '<li><a target="_self" href="'.$this->pi_getPageLink($menuArr[$i]['uid']).'"><span>'.$menuArr[$i]['title'].'</span></a></li>';
}
}
}
return $menuArr;
}
}
?>

[/UPDATE]

Typo3-Extension: Scrollable for Typo3

Unsere neue Typo3-Extension “Scrollable for Typo3” wurde als moderne Bildergalerie-Extension entwickelt und sticht vor allem durch das moderne Webdesign hervor.

Die Typo3-Extension enthält mehrere Scroll-Elemente, wobei Miniatur- und Einzelansicht miteinander verknüpft sind: Ein Klick auf eine der Miniaturansichten lässt die Einzelansicht automatisch sanft an die entsprechende Position scrollen. Zusätzlich besteht die Möglichkeit, innerhalb der Einzelansicht direkt vor- und zurückzuscrollen.

Mit jeder Miniaturansicht lässt sich bliebiger Text inklusive weiteren Bildern sowie Links verknüpfen, die dann automatisch im rechten Bereich eingeblendet werden – passend zum jeweils aktiven Miniaturelement. Letzteres wird durch einen sanft angedeuteten grauen Rahmen markiert.

Last but not least haben wir einen Hover-Effekt integriert, der beim Überfahren der Miniaturansicht mit der Maus die jeweilige Miniaturansicht sanft-fließend hervortreten lässt beziehungsweise vergößert.

Die Skalierung der Bilder übernimmt Typo3 respektive ImageMagick/GraphicsMagick automatisch. Die zugehörige Typo3-Backend-Komponente erlaubt das Hochladen von Bildern im JPG, GIF und PNG-Format sowie die Eingabe von Texten mittels Rich-Text-Editor.

Alle JavaScript-Effekte sind auf der Basis des JavaScript-Frameworks jQuery umgesetzt worden.

Als Lösung für Navigationsschaltflächen kommen vor allem zwei Techniken in Frage. Die erste Möglichkeit besteht darin, die entsprechenden Bilddateien beim Laden der Seite via JavaScript im Hintergrund vorzuladen.

Dazu genügt ein kurzes JavaScript-Snippet, das wie folgt aussehen könnte:

Ist JavaScript allerdings im Browser des Besuchers deaktiviert, funktioniert die Lösung nicht. Zudem bedeutet das Implementieren und Anpassen des JavaScript-Codes zusätzliche Arbeit.

Als Alternative bietet sich für grafische Menüschaltflächen die so genannte “Sprite”-Technik an. Hier genügt ein einzelnes Master-Bild sowie etwas CSS, um den gleichen Effekt zu erreichen.