qTranslate im Blog Header einbinden

Ich habe in letzter Zeit einige Emails erhalten, speziell Fragen zum WordPress Plug-in qTranslate. Oftmals kamen Fragen auf, wie qTranslate vernünftig in den Blog Header eingebunden wird. Besonders die Gestaltung und Positionierung von qTranslate bei den Flaggen bzw. Fahnen für Länder und Sprachauswahl macht scheinbar einigen größere Probleme. Es wurde oft gefragt wie ich das in meinem Blog gelöst habe. Dies liegt nicht an qTranslate sondern an den fehlenden CSS Kenntnissen. Halb so wild, ich bin da auch kein Experte drin aber ich werde versuchen, das ganze Schritt für Schritt und so einfach wie möglich zu erklären. Viele Lösungen können auch im Support Forum von qTranslate nachgelesen werden, allerdings in Englisch. WIe immer gilt, macht vorher ein Backup Eurer Dateien!

PHP Code für qTranslate in den Header einbauen

Da qTranslate nicht als Widget in den Blog aktiviert wird, ist es nötig, den passenden PHP Code an die richtige Stelle von Eurem Header zu kopieren. Öffnet Eure header.php. Wichtig ist, in welchen Bereich vom Header alle Fahnen zu sehen sein sollen. Habt Ihr beispielsweise eine zusätzliche Navigation im Header welche sich am Anfang des Headers befindet (bei mir ist diese am Ende) so muss der PHP Code von qTranslate erst danach eingefügt werden. Sucht nach einer Bezeichnung wie diese: <div class="Header">. Befindet sich im Theme eine zusätzliche Navigation im Header (Beispiel <div class="nav">)welche sich am Anfang des Headers befindet (bei mir ist diese am Ende) so muss der PHP Code von qTranslate erst danach eingefügt werden. Lasst Euch ruhig etwas Zeit denn eventuell müsst Ihr auch etwas rumprobieren bis Ihr eine geeignete Stelle gefunden habt. Jeder Header ist halt anders aufgebaut (Navigation, Suchfeld, Bilder und Content Slider etc.) von daher gibt es keine 100% genau Anleitung.

Habt Ihr eine passende Stelle in der header.php gefunden, kopiert Ihr folgenden Code und fügt diesen ein:

<?php echo qtrans_generateLanguageSelectCode(‘image’); ?>

Abspeichern, kurz testen, das war es schon mit PHP. Normalerweise sollte qTranslate bereits funktionieren und die Fahnen erscheinen im Header. Sicherlich untereinander und optisch nicht sehr ansprechend da die Aufzählunszeichen sichtbar sind. Dies ändern wir im nächsten Schritt.

Fahnen mittels CSS gestalten

Als nächstes öffnet Ihr die style.css von Eurem Blog Theme. Am Ende der style.css fügt Ihr folgende Zeilen ein:

#qtrans_language_chooser {

list-style-type:none

}

#qtrans_language_chooser li {

float:left;

padding-top:5px;

padding-right:10px;

}

Wollt Ihr die Flaggen auf die rechte Seite positionieren, braucht Ihr lediglich float:left durch float:right zu ersetzen. Den Abstand der Fahnen ändert Ihr bei den Zahlenwerten von padding-top (Abstand oberer Rand Header) und padding-right (Abstand Rechte Seite Header). List-style-type:none bewirkt das keine Aufzählunszeichen ausgegeben werden. Dieser kann auch verwendet werden wenn qTranslate im Widget aktiviert ist und man diese hässlichen Punkte zum Aufzählen los werden will. Glücklicherweise kam bisher noch niemand auf die Idee, zusätzlich ein Dropdown Menü für die Sprachauswahl im Header einzubauen. Sieht schrecklich aus, ich habe es mal getestet ;)

Das ist es auch schon gewesen. War auch nicht so viel aber vielleicht hilft es ja einigen ansonsten einfach fragen.