Do
5:00
Tag
881
11356 views

WordPress Template aus HP-Layout

Problemstellung: Sie betreiben eine eigene Homepage. Diese soll um einen WordPress Blog erweitert werden. Der Blog soll das bestehende Layout ihrer Homepage beibehalten.

Lösung: In diesem Webdesign-Tutorial zeige ich ihnen, wie man einfach und effektiv ein bestehendes Homepage-Layout in WordPress integriert. Dabei ist egal, ob Ihre Homepage auf sematisch korrektem HTML-Markup mit DIVs oder auf althergebrachten Tabellen basiert.

Dauer: Versierte Webentwickler bewältigen dieses Template-Tutorial binnen ca. 60 Minuten, Hobby-Webdesigner benötigen 2-3 Stunden. Zu wenig Zeit? > Erteilen Sie uns einen Auftrag!

WordPress Template Tutorial Teil 1:
Wordpress installieren

Wer WordPress nicht installieren kann ist definitiv nicht reif für dieses Template-Tutorial. Ein Tutorial zur Installation von WordPress finden sie hier. Ich rate einzig dazu, den WordPress-Blog in einem Unterordner ihrer bestehenden Domain oder in einer neuen Subdomain zu installieren, z.b.

domain.de/blog
blog.domain.de

WordPress Template Tutorial Teil 2:
Homepage-Layout vorbereiten

Um Ihr bestehendes Homepage-Layout in WordPress zu verwenden sind vor der Integration einige Umstellungsarbeiten nötig. Die Hauptschritte sind:

1. WordPress Template duplizieren
2. Kopieren der Layoutdateien der bestehenden HP
3. Löschen nicht benötigter HTML-Code-Teile
4. Anpassen der Pfadangaben in den Layoutdateien

1. WordPress Template duplizieren Ziehen Sie via FTP Ihre WordPress-Installation auf den lokalen Rechner. Duplizieren Sie das Standard Template im Ordner /blog/wp-content/themes/default/ mit dem Windows Explorer in einen neuen Ordner wie z.B. /blog/wp-content/themes/mein-template/. Öffnen sie die Datei style.css und passen Sie die Kommentare am Anfang entsprechend an. WordPress liest den Namen des Templates von dort aus. Ohne eine Anpassung ist keine Installation Ihres neuen Themes möglich.

2. Kopieren der Layoutdateien der bestehenden HP Um ihr bestehdes Homepage-Layout in WordPress zu integrieren kopieren Sie zunächst alle Layout-relevanten Dateien (Bilder, CSS, JavaScript, HTML) ihrer bestehenden Homepage in den neu angelegten Ordner /blog/wp-content/themes/mein-template/. Achten Sie darauf, dass keine Dateien Überschrieben werden. Bennen Sie falls nötig betreffende Dateien um, und passen Sie die Links in referenzierenden HTML-Dateien an. Es erleichtert die folgenden Arbeiten sehr, wenn Sie alle Dateien des bestehenden HP-Layouts in einen Ordner /blog/wp-content/themes/mein-template/layout verschieben. Verschieben Sie die Dateien in Dreamweaver nach der Definition der Site, dann werden alle Links automatisch angepasst.

Im Root des neuen Templates /blog/wp-content/themes/mein-template/ belassen Sie einzig die aus der bestehenden Homepage kopierte statische HTML-Seite, die wir in layout.html umbenennen. Die CSS-Datei ihrer bestehenden Homepage verschieben Sie in Dreamweaver in den Ordner /blog/wp-content/themes/mein-template/, falls sie nicht ohnehin schon dort liegt. Ich nenne sie ab sofort meinestyles.css.

3. Löschen nicht benötigter HTML-Code-Teile Ihre Homepage hat statische Seitenteile wie z.B. eine Navigationsleiste links und einen Hauptbereich mit Texten und Bildern. Diese statischen Teile entfernen Sie nun. Entfernen Sie nur die Inhalte, nicht die umgebenden Tabellen oder DIVs!

4. Anpassen der Pfadangaben in den Layoutdateien Ihre Homepage verwendete in aller Regel relative Links. Das bedeutet, das Grafiken z.B. über die Angabe ../layout/grafik.jpg referenziert werden. Selbiges gilt analog für verlinkte HTML-Seiten. Da ein WordPress-Template aber auf Seiten an verschiedenen Speicherorten (z.B. /ordner/datei.html und /ordner/unterordner/datei.html) angewandt wird, müssen Sie als nächstes nun alle relativen Referenzierungen in der Datei layout.html in absolute Referenzierungen umwandeln. Beispiel: ../layout/grafik.jpg wird zu /blog/wp-content/themes/mein-template/layout/grafik.jpg.

Falls Links zu ihrer bestehenden Hoempage auch in Ihrem Blog-Layout erscheinen sollen, müssen Sie auch alle diese Links absolut referenzieren: aus ../impressum.html wird www.meinedomain.de/impressum.html. Ihr Template soll auf unterschiedlichen URLs laufen? Sie kennen noch nicht die endgültigen Ordnernamen? Dann verwenden Sie zur Referenzierung der Layout-Dateien anstatt statischer absoluter Linkangaben wie z.B. /blog/wp-content/themes/mein-template/ die durch WordPress implementierte dynamische Methode mit php:

<img src="<?php bloginfo('stylesheet_directory'); ?>layout/grafik.jpg" />

Die Pfadangaben in der CSS-Datei Ihres bestehenden Homepage-Layout können relativ bleiben. Vorraussetzung: Die CSS-Datei mit den Definitionen liegt im Ordner /blog/wp-content/themes/mein-template/. Ihr Homepage-Layout ist nun fertig vorbereitet, um in ein WordPress-Template umgewandelt zu werden.

WordPress Template Tutorial Teil 3:
Wordpress Template erstellen

Die zentralen Template-Dateien eines jeden WordPress-Templates sind: style.css, index.php, header.php, sidebar.php und footer.php. Für welchen Teil jede dieser Dateien zuständig sagen die Namen klar aus. Die Erstellung des WordPress-Templates erfolgt in zwei Schritten:

1. CSS der bestehenden Site in WordPress-CSS einfügen
2. HTML aus der Datei layout.html ins WordPress-Template einbauen

1. CSS der bestehenden Site in WordPress-CSS einfügen Kopieren Sie alle Stilanweisungen aus der Datei meinestyles.css an das Ende der Datei style.css. Ans Ende deswegen, damit etwaige widersprüchliche CSS-Styles aus WordPress durch die individuellen Styles ihres Homepage-Layouts überschrieben werden. Fügen Sie davor ein Kommentar und einige Leerzeilen ein, um die CSS-Anweisungen von WordPress von denen ihrer Homepage zu trennen. Auch im default Theme CSS kann man einiges ausmisten. Meinen Vorschlag für eine reduzierte Version der WordPress default Template CSS finden Sie am Ende des Tutorials als Download.

2. HTML aus der Datei layout.html ins WordPress-Template einbauen. Öffnen Sie die Datei layout.html in Dreamweaver. Positionieren Sie den Cursor an genau die Stelle, an der WordPress die Sidebar in ihr neues WordPress-Template einfügen soll. Schalten Sie um auf Codeansicht. Markieren Sie den HTML-Code von der Cursorposition aufwärts bis zum Tag </head> . Kopieren Sie diesen Code in die Zwischenablage.Öffnen Sie die Datei header.html und löschen sie allen HTML-Quellcode ab </head>. Fügen Sie nun Ihren HTML-Code ein und speichern sie die Datei.

Es kann Sein, dass Sie in der sidebar.php Anpassungen vornehmen wollen. Viele Homepages haben z.B. einen „Home“-Link in einer seitlichen Navigationsleiste. Wolle Sie diesen auch auf ihrem Blog haben, so fügen Sie den HTML-Code hierfür an der passenden Stelle in der Datei sidebar.php ein. Ist in ihrer Datei layout.html noch weiterer struktureller HTML-Code zwischen dem Bereich, an dem die Sidebar eingefügt werden soll und dem Bereich, an dem der Content eingefügt werden soll, so kopieren Sie den entsprechenden HTML-Code ans Ende der sidebar.php.

Als letztes gehen Sie noch einmal in die Datei layout.html und klicken in der Entwurfsansicht in Dreamweaver genau an die Stelle, an der der Content eingefügt werden soll. Wechseln Sie zur Code-Ansicht und kopieren sie den ganzen Quellcode ab dieser Stelle bis zum Ende der Datei in die Zwischenablage. Öffnen Sie die Datei footer.php und kopieren Sie den Quellcode in diese Datei. Allen bestehenden Code in der Datei footer.php können Sie löschen, behalten Sie aber unbedingt den folgenden Markup an der entsprechenden Position ihres neuen footer-Codes:

 <?php wp_footer(); ?>

Damit ist die Grob-Integration Ihres Homepage-Layouts in WordPress abgeschlossen. Laden Sie via FTP alle Dateien in den Ordner /blog/wp-content/themes/mein-template/ hoch. Aktivieren Sie im WordPress-Admin Ihr neues Template unter Design / Themes. Kontrollieren Sie das Ergebnis.

WordPress Template Tutorial Teil 4:
Anpassungen am Template

Es passt sicher noch nicht alles. Oft beisst sich Nomenklatur der WordPress-IDs und classes mit denen Ihrer Homepage. Passen Sie den HTML- und CSS-Code Ihres WordPress Templates so an, dass es zu keinen Überschneidungen zwischen WordPress und ihrem eigenen Homepage-Layout kommt.

WordPress hat die Sidebar standardgemäß rechts. Auf ihrer Homepage soll die Sidebar links erscheinen? Dafür gibt es zwei Lösungen: Entweder Sie passen die CSS-Formatanweisungen für #content und #sidebar mittels float:left bzw. float:right an. Oder Sie editieren die Datei /blog/wp-content/themes/mein-template/index.php und stellen die Reihenfolge der Elemente dort ein.

Passen Sie ggf. noch weitere Template-Dateien an. Ich rate zu einem stats gleichbleibenden Layout auch auf den Seiten 404.php, archive.php, archives.php, links.php, page.php, search.php, single.php. Damit meine ich vor allem dass die Sidebar auch ins Artikelseiten-Template single.php integriert werden. Sie schaffen das :-)

Downloads Für dieses WordPress-Template-Tutorial gibt es vereinfachte Dateien zur schnelleren Zusammenführung mit ihrem bestehenden Homepage Layout. Im Zip finden Sie minimierte Versionen der Dateien style.css, index.php, header.php, sidebar.php, footer.php, 404.php, archive.php, archives.php, links.php, page.php, search.php´und single.php aus der aktuellen deutschen WordPress Version 2.8.5. Ihr Vorteil: für das Ausmisten der Dateien (und vor allem der CSS) sparen Sie sich leicht zwei Stunden Arbeit.

Hat Ihnen das Tutorial gefallen? Hinterlassen Sie einen Kommentar! Sie haben Fragen? Nur her damit! Sie trauen sich das alles nicht zu? Wir freuen uns über jeden Auftrag!



Bewerte diesen Beitrag auf blog.ff-webdesigner.de!

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne Bisher keine Bewertungen
Loading...

4 Kommentare zu “ WordPress Template aus HP-Layout ”

Müssen eigentlich zwingend die eigenen Layoutdateien in einen Unterordner von /blog/wp-content/themes/ kopiert werden? Oder kann WordPress ebenfalls in eine bestehende Homepage integriert werden, wenn die bestehenden Layoutdateien an Ort & STelle bleiben, damit eine mögliche Aktualisierung des Layouts nicht zweimal durchgeführt werden muss?

Danke!
Carlos

Kommentar von carlos am 23.11.2010

Die Layout-Dateien können im CSS auch absolut referenziert („/layoutordnerhomepage/dateiname.jpg“) werden. Zwingend nötig ist jedoch die WordPress CSS-Datei styles.css unter /wp-content/templates/templatename/ .

Kommentar von ff-webdesigner am 23.11.2010

Schöne Erklärung, für EInsteiger ist das sicherlich sehr sinnvoll. Schön das es Menschen wie Sie gibt, die ihr wissen nicht durch ein Abo teilen :-)

Kommentar von swedex am 29.1.2011

Perfekte Anleitung. Werden gleich einiges ausprobieren. Vielen Dank :-)

Kommentar von Ordner am 12.3.2011

Du hast was zu sagen? Dann schreib!

*