In den letzten Wochen habe ich eine Video-Screencast-Serie zum Thema Design für WordPress erstellt. Es ist eine dreiteilige Serie, die das Herunterladen und Installieren von WordPress auf einem Server bis hin zu einem fertigen Theme abdeckt.
Teil Eins: Download, Installieren, „Reset“ des Themes
Videoseite
Direkter Video-Download (.mov)
Teil Zwei: Struktur
Videoseite
Direkter Video-Download (.mov)
Teil 3: Feinschliff, Zusätzliches
Videoseite
Direkter Video-Download (.mov)
Download – „Theme für persönliche Homepage“
Ich dachte, ich nenne es einfach, wie es ist! Also hat das Theme, das wir die ganze Zeit erstellt haben, jetzt einen Namen: „Theme für persönliche Homepage“. Es sieht so aus
Ich habe dies buchstäblich für die Nutzung auf meiner persönlichen Website entworfen, sodass Sie es live auf chriscoyier.net sehen können.
Hinweis: Die Original-Photoshop-Datei ist im Download in einem Ordner namens „orig“ im Theme-Ordner enthalten. Der Header der Website sagt generisch „Your Name“ anstelle meines Namens, aber die Sidebars enthalten immer noch persönlich auf mich zugeschnittene Inhalte. Selbstverständlich können Sie dieses Theme für jeden Zweck ändern, bearbeiten und verwenden. Link-Backs sind immer nett, aber nicht erforderlich.
Falls Sie es noch nicht wissen: Um dieses Theme zu nutzen, laden Sie es in den Ordner /wp-content/themes/ Ihrer WordPress-Installation hoch (Sie benötigen die selbst gehostete Version von WordPress und FTP-Zugang zu Ihrer Website). Anschließend können Sie es im Bereich „Design“ des Admin-Bereichs aktivieren.
Hallo Chris!!
Wow, das ist großartig, ich hatte wirklich Schwierigkeiten, ein Theme von Grund auf einzurichten, Sie haben alles erklärt, was ich brauchte!
Außerdem gefiel mir die Idee, direkte Download-Links für die MOV-Dateien anzugeben, da ich wirklich Schwierigkeiten hatte, sie online abzuspielen.
Vielen Dank für alles!!
Sie verdienen eine lange, lange Pause nach all dem
Nochmals vielen Dank,
Hazem
Hallo Chris,
Danke für all das! Es war ein wahres Vergnügen, Ihnen bei der Arbeit an diesem Beispiel zu folgen. Sehr gut gemacht.
Unterhaltsam, entspannt und voller nützlicher Ratschläge und Inspiration auf dem Weg.
Wir brauchen mehr Leute wie Sie da draußen…
Beste Grüße
Torben
Das ist wirklich großartiges Material. Es ist immer lustig zu sehen, wie andere solche Dinge durcharbeiten. Ein Theme von Grund auf neu zu starten ist ein ziemliches Projekt, danke, dass Sie es uns aufgeschlüsselt haben!
Chris,
Vielen Dank, dass Sie uns allen diesen Einblick in Ihren Design- und Coding-Prozess gewährt haben, auch wenn Sie es nicht normalerweise so machen. Jemandes Codierung über die Schulter schauen zu können, ist immer demütigend (sie wissen immer etwas, das Sie nicht wissen), inspirierend (jetzt wissen Sie es und können es selbst versuchen) und beruhigend (sie lassen es immer „leicht aussehen“).
@Hazem – Schauen Sie sich wget an. Wenn Sie keine Angst haben, in den HTML-Quellcode von jemandem zu schauen, finden Sie darin den Link zur Filmdatei. Dann übergeben Sie den Link an wget, und es lädt ihn für Sie herunter. Das behebt 90 % aller Probleme vom Typ „Ich kann X nicht sehen“ für mich.
Sieht großartig aus.
Chris,
Ich ziehe meinen Hut vor Ihnen, mein Herr…. Sie haben es bis zum letzten Baustein zerlegt. Großartiges Tutorial, Sie sind eine Bereicherung für die CSS/Web-Entwickler-Community. Danke für den Download und das Teilen Ihres Wissens.
@Hazem – Ich lade normalerweise einfach den Podcast auf iTunes herunter und mache mir keine Sorgen, dass er live gestreamt wird.
Gute Arbeit, Chris :)
Gute Arbeit :)
Das ist so gut! Danke Chris für all deine Hilfe!
Sie haben das wirklich großartig gemacht.
Gute Nachrichten, Leute, ich habe Teil Zwei angesehen [das einzige, das mich interessiert] und ich habe gerade ein WordPress-Theme bearbeitet.
Vor dem Anschauen schien der PHP-Code ein Labyrinth zu sein, aber jetzt verstehe ich die meisten Teile [nicht alle], aber zumindest weiß ich, was ich ändern, was ich entfernen und was ich belassen soll.
Vielen Dank noch einmal für das Tutorial!!! Ich empfehle es jedem zum Anschauen.
_________________________________________
Vielen Dank, Leute, für den Rat, ich habe es heruntergeladen und es funktioniert offline gut.
Viel Glück!
Sehr geschätzt, sehr schönes Material, leicht zu verfolgen und Sie haben alles abgedeckt!
Ich habe diese Miniserie genossen, es ist gut, die fertige Website in der realen Welt in Gebrauch zu sehen, mit einigen Design-Anpassungen, wie es scheint!
Wie üblich: äußerst hilfreich und gut erklärt!
Ich würde gerne eine Serie wie diese auch für Drupal sehen ;-)
Kannst du dieses Theme im Blogger-Format erstellen?
Chris, ich bin bereits durch Teil Zwei durch und ich muss sagen, ich bin froh, dass ich mir die Zeit genommen habe, diese Tutorials anzusehen. Mein CSS-Verständnis ist gerade in die Höhe geschnellt. Das „Push Div“ hat mir wirklich geholfen, eine Menge Probleme zu lösen, und wie immer werde ich altes CSS durchgehen und es richtig aktualisieren.
Danke!!
Hallo, Chris!
Ich habe gerade Ihre Website entdeckt und – wow! – sie hat mir sofort gefallen!
Und: Ihr Theme ist absolut wunderbar. Danke fürs Teilen!
Grüße aus Österreich!
Ich habe diese Serie wirklich genossen. Die Videos sind sehr informativ. Mahalo fürs Teilen!
Danke Chris.. Ich habe viel aus deinem Tutorial gelernt. Vor ein paar Tagen habe ich WP-Designer referenziert.. Ein Tutorial von kleinen Kartoffeln.. Es ging nur um Coding und Technik.. Dein Tutorial ist eher künstlerisch. Danke fürs Teilen, Kumpel. Und ich muss sagen, dass dein PC großartig ist..
Wow, Chris… das ist großartig. Vielen Dank. Ich habe allein durch diese Serie schon einige Tricks gelernt, die mir bei meinen eigenen Designbemühungen sehr helfen werden. Ich freue mich darauf, den Rest der Website zu erkunden!
Perfekt. Ich liebe es! Gut gemacht!
Das ist wirklich großartig. Danke fürs Teilen!
Vielen Dank für das! Ich bin neu im Bloggen und WordPress und habe nach einem Tutorial wie diesem gesucht. Sie hätten es nicht einfacher machen können. Danke nochmals!
Ich lade dieses neue Theme hoch und es wird leer, kein anderes Theme macht das, aber Ihres, warum ist das so? Ich liebe das Theme übrigens
Vielen Dank!! großartige Tutorials, Chris…
Ich bin mir nicht sicher, ob Sie es bemerkt haben, aber es gibt ein Problem mit dem Twitter-Feed, die Hälfte der Zeit (selbst auf Ihrer eigenen Website) gibt er nichts zurück.
Am Ende habe ich es gehackt, um es auf meine Weise zum Laufen zu bringen, sobald ich es bemerkt habe, nicht so schön, aber es funktioniert jedes Mal.
@Roger: Ja, das ist ein Mistproblem, die dumme Twitter-API ist einfach langsam. Es gibt wahrscheinlich effizientere Wege, damit umzugehen, wie z. B. nur wenige Minuten zu prüfen und es zu cachen. Wenn Sie Ihren Hack teilen möchten, würde ich ihn gerne sehen!
@Chris: Huch, ich habe den Link zur Website eingefügt, die ich normalerweise benutze, als ich auf meinen Blog verlinken wollte. Es ist http://www.rogerstringer.com/ und die JavaScript-Datei ist http://www.rogerstringer.com/wp-content/themes/PersonalHomepageTheme/stuff.js
Ich ziehe es vor, mein gesamtes JavaScript vom HTML getrennt zu halten, und was Twitter angeht, zeige ich gerne die relative Zeit an, zu der der Beitrag erstellt wurde. Es gibt also ein paar Extras, die aber leicht heruntergeregelt werden können. :)
@Roger: Nett! Danke fürs Bereitstellen. Ich habe es komplett übernommen =) und noch ein kleines Extra hinzugefügt, um Links innerhalb der Tweets zu „verlinken“ (was von hier bezogen wurde). Jetzt müssen wir eine Funktion schreiben, die die @xxx-Bits mit den Twitter-Seiten der Benutzer verlinkt, das wäre cool.
@Chris: Das ist einfach. Ich habe einige Änderungen an der Linkify-Funktion vorgenommen und sie läuft jetzt auf meiner Website, sodass sie @xxx-Bits in Links umwandeln kann :)
Ich kann gar nicht sagen, wie glücklich ich bin, diesen Artikel zu sehen! Jetzt gehe ich ihn wirklich durch.
Danke!!
Chris – vielen Dank dafür. Ich suche schon seit Ewigkeiten nach einem vernünftigen Tutorial zum Erstellen von WP-Vorlagen.
Wirklich gut erklärt und sehr sehr nützlich
Es scheint mir seltsam, aber der Trick mit dem Footer scheint nicht zu funktionieren. Ich meine, er scrollt einfach mit dem Rest der Seite auf und ab. Ich benutze Firefox 3 unter Ubuntu Linux.
Irgendwelche Ideen?
Wie auch immer, großartige Arbeit :D
Sehr sehr gutes Tutorial… das ist einfach erstaunlich
Ich habe es auf meiner Website mit einem Link zu Ihrer Website gepostet
Gute Arbeit. Aber ich glaube, es gibt etwas falsch mit dem Theme, das Sie uns zum Download anbieten. Es ist nicht möglich, auf Überschriften/permanente Links zu klicken (man kommt immer wieder zur Startseite). Jegliche Lösungen wären sehr willkommen!
Ich liebe Leute, die ihr Wissen mit anderen teilen, großartige Seite :-}
Chris, danke für diese Tutorials. Sie haben sicher vielen Leuten damit geholfen. Ich habe schon seit einiger Zeit überlegt, einen Blog einzurichten, bin aber nie dazu gekommen. Jetzt habe ich keine Ausrede mehr. Ich habe Ihre Website als Lesezeichen markiert und werde sie regelmäßig besuchen.
Hallo Chris, danke für das Tutorial. Es hat mir wirklich – wirklich geholfen.
Vielen Dank :-)
Das ist wirklich großartig. Danke fürs Teilen!
Sieht großartig aus
Chris,
Danke für den Download für das Theme. Ein Problem jedoch. Wenn ich in den PHP-Editor gehe, um das Twitter-Widget zu bearbeiten, kann ich das HTML ändern, so dass beim Klicken auf meinen Twitter-Account zugegriffen wird, aber die Twitter-Updates sind immer noch Ihre. Haben Sie Ratschläge, wie ich es ändern kann, damit meine Updates angezeigt werden?
Danke
Um das Konto zu ändern, von dem die Tweets abgerufen werden, ändern Sie den Benutzernamen (chriscoyier) in der Datei header.php im Rahmen der ersten $.getJSON-Funktion.
Chris,
Danke, dass Sie meine erste Frage beantwortet haben. Wo könnte ich den Header bearbeiten (ich habe in header.php nachgesehen), um „YOUR NAME“ und den kleinen Namen der Website zu ändern?
Ich fühle mich schlecht, so bald wieder eine Frage zu stellen…
Wo Sie "CSS Tricks" und "My Photos" haben, ist es möglich, das zu einer Seitenleiste zu machen? Ich weiß, dass man es in "sidebar.php" bearbeiten kann, aber gibt es eine Möglichkeit, eine Seitenleiste zu erstellen? Ich bin kein Technik-Typ.
Habe es gerade gesehen, aber sehr hilfreich!
Danke!
An diesem Thanksgiving bin ich dankbar für Ihre erstklassigen Tutorials! Ich habe immer gesagt, dass jeder alles lernen kann, mit dem richtigen Lehrer. Ich habe schon lange die Themes anderer Leute angepasst, aber Ihre freundliche Hilfe hat mir das Selbstvertrauen und die Inspiration gegeben, die ich brauchte, um von Grund auf neu zu beginnen.
Seien Sie nicht zu kritisch, wenn Sie meine Bemühungen sehen – ich habe keine künstlerischen oder gestalterischen Fähigkeiten. Verzeihen Sie mir also, dass ich viele Ihrer Ideen kopiert habe. Ich hoffe, ich werde mehr eigene entwickeln, wenn ich mein Theme ausarbeite (es ist noch nicht fertig).
Ich bin froh, dass Sie coole Sachen wie Simplepie aufgenommen haben, was ich auf meinem Blog zum Laufen gebracht habe. Ich habe tatsächlich das Video gestoppt, zusammengekniffen und etwas von Ihrem Code kopiert (um die Anzahl der abgerufenen Feed-Elemente zu begrenzen). Jetzt bin ich begeistert, mir all Ihre Screencasts über jQuery anzusehen und ein cooles, ineinander geschobenes Widget mit meinen Simplepie-Feeds zu erstellen, wie das auf dieser Website.
Ich weiß, „Content ist König“, aber ich muss zugeben, ich bin ein CSS/PHP-Süchtiger. WordPress macht mehr Spaß als jedes Videospiel!
Bitte ignorieren Sie meinen vorherigen Kommentar Chris… Ich habe ihn gefunden!
erstaunliches Theme. Wie ändere ich die Spaltenposition?
Hammer Theme!!!
Ich werde es ausprobieren! =)
MoiN
http://www.SmashingDownloads.com
Tolles Theme,
Ich habe ein Problem mit comments.php
Bitte helfen Sie. Danke
Vielen Dank für die Veröffentlichung. Als Techniker ohne CSS- oder PHP-Erfahrung habe ich mir diese Videos und andere auf CSS-Tricks angesehen, um mein WordPress-Theme einzigartig zu gestalten, und ich hätte das alles nicht ohne diese großartigen Informationen geschafft!
Glauben Sie mir, ich werde wiederkommen. :)
Sehr cooles Tutorial. Sie geben mir Hoffnung, dass ich zu WP als CMS für die Erstellung von Websites für Kunden wechsle! Ich habe das monatelang vor mir hergeschoben, hauptsächlich weil ich einfach keine Zeit hatte, mich damit zu befassen und es selbst herauszufinden. Die meisten anderen Tutorials da draußen sind ziemlich einfach und helfen Ihnen nicht dabei, das zu tun, was Sie wirklich tun/wissen müssen.
Chris Coyier, Ihre Tutorials sind erstaunlich. Ich liebe all Ihre Tutorials, aber besonders dieses.