WordPress Video-Tutorial Teil 2: Das Toolbox Blank-Theme

von

Ellen Bauer

•

14. April 2011

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:

[php]
// This theme allows users to set a custom background
add_custom_background();
[/php]

Code in functions.php für die Aktivierung der WordPress Artikelbild-Funktion (thumbnail):

[php]
// This theme uses post thumbnails
add_theme_support( ‚post-thumbnails‘ );
[/php]

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

von

Ellen Bauer

Screencasts, Tutorials, WordPress

Kommentare

Edi

•

14. April 2011

Antworten

Hallo Ellen, wie immer alles sehr gut erklärt. Ich freu mich auf die nächsten Videos! DANKE!
1. Ellen
  
  •
  
  15. April 2011
  
  Antworten
  
  Hallo Edi,
  
  es freut mich, dass dir das Video-Tut gefällt. Ich werde nächste Woche gleich weiter produzieren :-)
  
  Viele Grüße,
  Ellen
Reinhold

•

14. April 2011

Antworten

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ß
1. Ellen
  
  •
  
  15. April 2011
  
  Antworten
  
  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.
2. Heike
  
  •
  
  15. April 2011
  
  Antworten
  
  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
Julia

•

15. April 2011

Antworten

Hallo Ellen,
super Video. Danke! Ich freu mich auf die Fortsetzung!! :-)
Liebe Grüße
stephan

•

15. April 2011

Antworten

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
Pascal

•

15. April 2011

Antworten

Deutsche Video-Tutorials über WordPress gibt es ja noch fast keine. Finde es deshalb gut, wenn ihr sowas macht :)
Stefan

•

15. April 2011

Antworten

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
Ellen

•

15. April 2011

Antworten

@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
Björn

•

15. April 2011

Antworten

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
Kirsten

•

16. April 2011

Antworten

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
Florian

•

18. April 2011

Antworten

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
Manuel

•

19. April 2011

Antworten

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
Günter Schmitt

•

7. Mai 2011

Antworten

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
1. Ulf
  
  •
  
  12. Mai 2011
  
  Antworten
  
  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.
  1. Ellen
    
    •
    
    13. Mai 2011
    
    Antworten
    
    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
    1. Ulf
      
      •
      
      13. Mai 2011
      
      Antworten
      
      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.
sirat

•

24. Mai 2011

Antworten

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 :-)))
Andy Bee

•

5. Oktober 2011

Antworten

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
Meike

•

4. August 2012

Antworten

Hallo Ellen,

vielen Dank für deine informativen Screencasts. Für mich sind sie ein super Einstieg in die Welt von WordPress. Ich werde mir auf jeden Fall die anderen Teile auch noch anschauen.

Viele Grüße

Meike
Thorsten

•

19. Februar 2014

Antworten

Hallo Ellen,
ich habe jetzt erst ein WordPress 3.8.1 DE lokal Installiert. Dann habe ich versucht das Theme Toolbox Blank Theme über Themes hinzufügen zu suchen. Ich bekam aber 2 Angezeigt.
1. Simon WP Framework
Von Surfstang
2.Nona
Von cais

Und was mir noch aufviel war das ich mit dem Suchbegriff ‚toolbox‘ gar nichts fand.
Ich bin auf die beiden Themes über den Begriff ‚Toolbox Blank-Theme‘ gekommen.
Welches sollte ich nun für die umsetzung Deines Tutorials nehmen.
Ich Danke für Deine Bemühnungen.
////Thorsten
Ike

•

4. März 2015

Antworten

Super Tutorials,
gerade erst gemerkt dass deine Blogs schon ein paar Jahre alt sind. Deine Webseite sieht so modern und aktuell aus – deswegen ist es mir anfänglich gar nicht aufgefallen. Hoffe du bist noch aktiv.

Vielen Dank für deine sehr hilfreichen Beiträge – fühle mich schon fast wie ein Webdesigner ;-)