Im ersten Teil der WordPress Video-Tutorial Serie habe ich gezeigt, wie man WordPress lokal installiert. Im heutigen Tutorial erkläre ich, wie man sich das Blank-Theme »Toolbox« installiert und für die Weiterarbeit an einem eigenen, individuellen WordPress-Theme einrichtet. Dabei bearbeite ich u.a. die functions.php Datei, um einen individuellen Hintergrund (custom background) und Artikelbilder (thumbnails) in meinem Theme zu nutzen. Außerdem bearbeite ich noch die Theme-Info in der style.css Datei, füge ein CSS-Reset ein und tausche das Toolbox Theme-Screenshot gegen mein eigenes Bild aus. Ich wünsche dir viel Spaß beim Tutorial :-)
Alle bisherigen Teile des WordPress Video-Tutorials, sowie weitere Screencasts findest du übrigens auch direkt auf unserer Vimeo-Seite.
Link-Tipps aus dem Tutorial
- CSS-Style Informationen: http://codex.wordpress.org/Theme_Development
- Eric Meyer’s CSS Reset: http://meyerweb.com/eric/tools/css/reset/
- Artikel über CSS Resets: Tipps und Tricks zum CSS-Reset
Codeschnipsel
Code in functions.php für die WordPress-Funktion individueller Hintergrund:
// This theme allows users to set a custom background add_custom_background();
Code in functions.php für die Aktivierung der WordPress Artikelbild-Funktion (thumbnail):
// This theme uses post thumbnails add_theme_support( 'post-thumbnails' );
Ich hoffe auch dieser Teil meines Video-Tutorials kann dir bei der Entwicklung eigener WordPress-Themes weiterhelfen. Wenn du Fragen, Anregungen oder weitere Tipps zum Thema hast, schreibe mir doch einfach einen Kommentar. Ich freue mich über dein Feedback!
Weitere Teile des WordPress Video-Tutorials
- WordPress Video-Tutorial Teil 7: Header und Hauptmenü eines Themes
- WordPress Video-Tutorial Teil 6: WordPress Testdaten importieren
- WordPress Video-Tutorial Teil 5: CSS3 Media Queries und der Viewport meta-tag
- WordPress Video-Tutorial Teil 4: Das Theme-Layout anlegen
- WordPress Video-Tutorial Teil 3: Die Theme-Übersetzung
- WordPress Video-Tutorial Teil 1: WordPress lokal installieren
Hallo Ellen, wie immer alles sehr gut erklärt. Ich freu mich auf die nächsten Videos! DANKE!
Hallo Edi,
es freut mich, dass dir das Video-Tut gefällt. Ich werde nächste Woche gleich weiter produzieren :-)
Viele Grüße,
Ellen
Hallo ›Ellen,
leider kann ich das Tutorial nicht lesen. Es kommt eine Fehlermeldung Nr. 324 und der Hinweis, dass die Webseite nicht verfügbar ist- Woran könnte das liegenß
Hallo Reinhold,
vielen Dank für deine Nachricht. Die Fehlermeldung könnte an einer Einstellung deiner Firefall liegen. Hast du es schon einmal mit einem anderen Browser probiert (z.B. Firefox oder Chrome)? Vielleicht musst du auch erst noch den Flash Player installieren, hier ein Link: Adobe Flash Player bei chip.de
Falls es nicht klappt, könntest du den Link zur Vimeo-Seite aufrufen und das Video dort anschauen, dass sollte auf jeden Fall klappen.
Das Problem mit dem Video nicht abspielbar, liegt an vimeo. Sie sind wohl dran, haben aber bis jetzt noch keinen Lösung für das Problem. Mit dem Firefox 4 kann man kein einziges Video auf dem Portal anschauen.
Link zum nachlesen: http://vimeo.com/forums/topic:35904
Hab auch erst gedacht, mir fehlt ein Plugin oder javascript ist deaktiviert.
Hoffe die Leute kriegen es bald hin.
Schönes Wochenende
Heike
Hallo Ellen,
super Video. Danke! Ich freu mich auf die Fortsetzung!! :-)
Liebe Grüße
hi ellen,
vielen dank mal wieder.
meinst du, du kannst die soundqualität noch ein bischen verbessern?!
eine so schöne tutorialreihe sollte nicht durch miesen sound verhunzt werden…
lg stephan
Deutsche Video-Tutorials über WordPress gibt es ja noch fast keine. Finde es deshalb gut, wenn ihr sowas macht :)
Hallo Ellen,
sehr schönes Video, da bin ich mal auf die folgenden Tutorials gespannt. Mit etwas besserer Tonqualität wäre es natürlich noch schöner, aber falls das nicht geht, werde ich die weiteren Folgen auch so gut damit leben können.
Viele Grüße,
Stefan
@Julia, @Pascal,
vielen Dank für euer Feedback, die Video-Tuts machen mir auch super viel Spaß :-)
@stephan, @Stefan,
vielen Dank für euer für Feedback. Ja, ich möchte auf jeden Fall noch daran arbeiten, die Tonqualität zu verbessern. Werde mir wohl so ein richtiges Podcast-Mirko besorgen :-)
Viele Grüße,
Ellen
Hallo Ellen,
also endlich macht sich mal einer die Mühe und erklärt es so das es auch jemand versteht, der kein html Guru ist. Freue mich schon darauf, wenn es weiter geht.
Toll das du die Codeschnipsel und Links mit einfügst. Das hilft echt!
Mach weiter so!
Gruß Björn
Hallo Ellen,
ih, das ist ja Windows =;o)
Ich bin sehr gespannt auf die nächste Folge, bei der Übersetzung pfusche ich nämlich immer furchtbar rum.
Welche Software nimmst Du denn für Deine Screencasts?
Herzliche Grüße
Kirsten
Die ganzen Artikel der letzten 3 Monate und die beiden Videos sind so unglaublich Hilfreich. Ich hab angeregt durch euren Blog echt mal angefangen mich mit responsive webdesign zu beschäftigen.
Übrigens toll das ihr Euch für die toolbox mit html5 entschieden habt, die hatte ich auch bereits im Auge.
Hoffe die anderen Video kommen schnell, vor allem zum Thema iPad/iPhone Optimierung, kann ich kaum erwarten. :)
Vielen Dank dafür!
Florian
Hallo Ellen!
Dickes Lob für den gesamten Blog und die Video-Tutorials im Besonderen. Freue mich auch schon auf den nächsten Teil. Du hast mich auf jeden Fall dazu bewogen, auch mal WordPress auszuprobieren (arbeite beruflich mit TYPO3).
VG
Manuel
Hallo Ellen,
Thema: Anpassungen in der function.php Datei
u.a. wird ein individueller Screenshot ( 7:56 min ) eingefügt. Dazu wird ein pmg-Image 300 *225 Pixel verwendet.
Da ich noch nicht so fortgeschritten bin, habe ich zunächst den Screenshot gleichgesetzt mit dem Einfügen eines indiv. Headerbildes. Grund war, dass die Header Grafik zumindest vom Erscheinungsbild her die Headergrafik mit einschließt und darüber hinaus auch die Struktur des Blogs ( Spalten, Anordnung etc.) darstellt.
Mittlerweile ist mir klar geworden, dass der Scrrenshot und der Header zwei unterschiedliche Paar Schuhe sind. ( die Header Grafik wird offenbar in einem weiteren Tutorial erklärt )
Dennoch ergibt sich bei mir die praktische Frage wie ich so ein Screenshot „produzieren „ kann. Da könnte ich doch Word benutzen und ein Bild einfügen a b e r wie kann ich die Struktur des Blogs in Word darstellen, um dann davon ein Screenshot zu machen ??
Grundsätzlich finde ich es sehr gut, dass man auf der Basis des BLANK-THEMES seine eigene Gestaltung vornehmen kann, obgleich mir das zumindest im Augenblick dennoch kompliziert erscheint.
Deshalb wäre es mir lieber gewesen wenn ich das ausgewählte Theme WP-Multiflex-3 1.3 hätte verwenden können. Dieses Theme verfügt aber unter Themes über keine Möglichkeit einen indiv. Hintergrund ( = ich denke das ist identisch mit dem Header-Bild ) einzufügen. Deshalb meine Frage die über das Video hinausgeht, ob es nicht doch eine Möglichkeit gibt eine indiv. Headergrafik einzufügen aber wie ?? – oder ist der Weg definitiv versperrt, sofern kein Menüpunkt Design/Hintergrund existiert. ?
Danke für Deine Hilfestellung
Gruss
Guenter
Was willst du machen? In Word einen Screenshot einfügen? Wieso um alles in der Welt, sollte man so etwas tun? Frage mich schon seit Jahren, wie Leute auf die Idee kommen, ein Foto in eine Text(!)verarbeitung einzufügen. Das ergibt doch überhaupt keinen Sinn. Ich füge doch auch keine Tabelle in Photoshop ein, oder?
Um ein Screenshot deines fertigen Themes zu machen… muss es natürlich erst mal fertig sein ;-). Ellen wird hier demohalber einen Platzhalter verwendet haben. Kausalität und so.
Ich nehme an, dass du mit Windows arbeitest. Um unter Windows ein Bildschirmfoto zu erstellen, drückst du auf deiner Tastatur die Druck-Taste (oder Print, je nach Beschriftung der Tastatur) und öffnest dann eine beliebige Bildbearbeitung. Dort drückst du dann Strg+V oder gehst auf Bearbeiten -> Einfügen. Sollte in den meisten Fällen hinhauen und du kannst das Bildschirmfoto als PNG oder JPEG exportieren und in deinem Theme-Ordner speichern.
Würdest du Word als Ziel für diesen Zwischenablageninhalt verwenden, hättest du nämlich keine Möglichkeit, das Bild in einem Grafikformat zu exportieren. Ein weiterer Hinweis darauf, dass es einfach vollkommen sinnfrei ist, Bildschirmfotos in Word zu kopieren.
Hallo Ulf,
vielen Dank für deinen Kommentar zum Tutorial :-) Nein, natürlich nicht Word, sondern in den Theme-Ordner des Themes soll der Screenshot eingefügt werden :-) Hier im Tutorial bin ich davon ausgegangen, dass bereits eine Layout-Formate des Theme-Designs (z.B. aus Photoshop oder Illustrator) gestaltet wurde. So ist dann auch ein Screenshot diese Designvorlage kein Problem. Ansonsten kann man auch einfach nur seinen eigenen Theme-Namen auf eine farbige Fläche schreiben und dies als vorläufigen Screenshot verwenden :-)
Viele Grüße,
Ellen
Danke Ellen für die Antwort. Aber du warst ja auch gar nicht gemeint :-). Der Kommentator, auf dessen Kommentar ich geantwortet habe wollte den Screenshot in Word einfügen. Darauf bezog sich mein Kommentar, nicht auf dein Tutorial :-). Hätte mich auch dolle gewundert, wenn du versuchen würdest, einen Screenshot mit Word zu erstellen :-D.
Hallo Ellen,
erstmal mega Lob für das Tutorial :-))
Bei mir funktioniert merkwürdigerweise die Theme installation nicht… WordPress fragt mich nach Verbindungsinformationen… Hostname, FTP-Benutzername, FTP-Passwort und Verbindungstyp…
Kann ich das irgendwie irgendwo deaktivieren?
Ich hab WordPress genau wie Du auch lokal installiert…
Very Very dankeschön :-)))
Hallo Ellen,
WOW, das ist wirklich mal ein sehr nützliches Video-Tutorial zum Thema WordPress! Vor allem den Tipp mit dem Theme-Support für die Artikelbilder kann ich wirklich sehr gut gebrauchen wenn ich demnächst mein eigenes Theme entwerfen werde!
Werde mich von Zeit zu Zeit auch weiterhin auf deinem Blog umschauen. Ich hoffe es gibt weiterhin so viele interessante Video-Tutorials :-)
Viele Grüße
Andy Bee