Jeder Weg zum Webentwickler sieht ein wenig anders aus. Für mich, wie für viele Menschen, habe ich als Designer angefangen. WordPress macht es einfach, eine fantastisch aussehende Website zum Laufen zu bringen, ohne Code zu kennen. Als Designer können Sie Themen ändern, Einstellungen anpassen, Plugins hinzufügen und so viel tun, um das Erscheinungsbild der Website zu steuern. Aber am Ende des Tages wollen viele Designer noch einen Schritt weiter gehen und Pixel für Pixel diktieren, wie die Seite aussieht.

Es gibt zwei Möglichkeiten, dies zu erreichen: Stellen Sie einen Entwickler ein, um Ihr Design zu implementieren, oder erwerben Sie selbst einige Entwicklungsfähigkeiten. Selbst wenn Sie einen Entwickler einstellen, wird es Zeiten geben, in denen es von großem Vorteil ist, zu wissen, wie man etwas entwickelt. Wenn Sie außerdem die Entwicklungsanforderungen Ihrer Kunden erfüllen können, werden Sie für sie noch wertvoller und können Ihre Rate entsprechend erhöhen.

Der Sprung vom Designer zum Entwickler ist ein großes Unterfangen. Ich werde einige einfache Schritte vorschlagen, damit Sie mit dem Übergang von jemandem, der die Website-Designs erstellt, zu jemandem, der diese Designs auch erstellen und implementieren kann, beginnen können.

Gute Nachrichten, Sie sind an der richtigen Stelle

Wenn Sie hier The Layout lesen, sind Sie wahrscheinlich zumindest ein wenig mit WordPress vertraut. WordPress öffnet jemandem die Tür, um besser als jede andere Plattform im Web vom Designer zum Entwickler zu wechseln. Eine Möglichkeit, dies zu erreichen, ist der Editor, der im WordPress-Dashboard unter Aussehen > Editor zu finden ist.

Sie können den gesamten Code des Themas direkt im WordPress-Dashboard ohne spezielle Tools oder Serverzugriff anzeigen. Es bietet auch Möglichkeiten, den Code zu bearbeiten, aber ich würde dies hier nicht vorschlagen (wir werden später über bessere Möglichkeiten sprechen). Dies ist ein großartiger Ort, um einen Blick darauf zu werfen und zu sehen, was los ist. Gehen Sie also voran und schauen Sie unter die Haube Ihres Themas und sehen Sie, ob Sie anfangen können, einen Sinn darin zu erkennen, was da ist.

In der Regel sehen Sie hier drei verschiedene Arten von Dateien. Stellen Sie sich diese Dateien der Einfachheit halber wie den „Körper“ Ihrer Website vor. PHP-Dateien (.php) enthalten HTML (die Knochen) und PHP (die Nerven, die alles mit dem Gehirn, der Datenbank, verbinden). Stylesheets (.css) sind die Haut Ihrer Website und bestimmen, wie sie aussieht. JavaScript (.js) kann als Muskel der Website betrachtet werden, der normalerweise die beweglichen Teile steuert und darauf reagiert, wie die Website verwendet und mit ihr interagiert wird. Gehen Sie voran und erkunden Sie ein wenig. Sehen Sie beschreibende Wörter, die angeben, für welchen Abschnitt der Website der Code gilt? Oder Wörter, die einige der visuellen Aspekte der Website beschreiben?

Die andere großartige Möglichkeit, wie WordPress eine Lücke zwischen Designer und Entwickler schließt, besteht darin, dass es Dinge in Stücke zerlegt, sodass Sie den Abschnitt, den Sie bearbeiten möchten, leicht identifizieren und Änderungen an nur einem Teil der Website vornehmen können. WordPress trennt den Inhalt der Templates von den Funktionen der Website. Es verwendet auch eine konsistente Struktur zwischen den Dateien, sodass Sie zwischen den Websites wechseln und dennoch die Dateien, die Sie bearbeiten möchten, leicht finden können.

Keine Angst

Einer der Sätze, die ich am häufigsten benutze, wenn ich andere trainiere, ist: „Hab keine Angst, du kannst das nicht auf eine Weise vermasseln, die ich nicht beheben kann.“ Es gibt sehr wenig auf der Welt, das nicht rückgängig gemacht werden kann. Natürlich möchten Sie die Vorteile der Tools nutzen, die Ihnen das Rückgängigmachen erleichtern, falls Ihre Änderungen nicht wie geplant verlaufen. Zwei großartige Tools, die Flywheel bietet, sind ihre Staging-Funktion und ihre Fähigkeit, auf einfache Weise ein Backup zu erstellen und daraus wiederherzustellen. Wenn Sie sich entscheiden, in den Code zu springen, verwenden Sie eine Staging-Site, um Änderungen vorzunehmen. Auf diese Weise riskieren Sie Ihre Live-Site nicht und können Ihre Staging-Umgebung bei Bedarf einfach zurücksetzen. Wenn Sie versehentlich eine Änderung an Ihrer Live-Site vornehmen, keine Sorge, stellen Sie einfach Ihr letztes Backup wieder her und in weniger als fünf Minuten sind Sie wieder auf dem richtigen Weg. Diese Tools sollten Ihnen Selbstvertrauen geben, um mit der Bearbeitung von Code einige kleine Schritte zu unternehmen!

Pro-Tipp: Sobald Sie sich mit Code etwas vertrauter gemacht haben, würde ich Sie ermutigen, die Versionskontrolle, entweder Git oder SVN, als dritte Sicherheitsebene und die Frontlinie zum Nachverfolgen von Änderungen und Abfangen von Störungen zu erkunden, bevor Ihr Code live geht.

Wo anfangen?

Nun, da wir einige der anfänglichen mentalen Hürden angesprochen haben, wo sollten Sie anfangen? Wenn Sie ein Designer sind, dann ist CSS der natürlichste Ort, um mit der Arbeit mit Code zu beginnen. Wie wir bereits erwähnt haben, ist dies der Skin unserer Website; es steuert, wie die Seite aussieht und wie sie aufgebaut ist. Bevor wir CSS analysieren können, müssen wir verstehen, wie es mit HTML funktioniert. HTML verfügt über eine Vielzahl von Tags, um den darin enthaltenen Inhalt zu unterscheiden. Diese Tags können viele verschiedene Attribute haben, die einige zusätzliche Informationen über das Tag und seinen Inhalt liefern. Die beiden Attribute, die wir uns ansehen werden, sind id und class . Hier ist ein Code-Snippet mit drei verschiedenen HTML-Tags. Sie werden feststellen, dass nicht jedes Tag eine ID oder Klasse hat. Sie sind nicht erforderlich, helfen aber dabei, Tags auf derselben Seite voneinander zu unterscheiden. IDs sollten nur einmal auf einer Seite verwendet werden, während Klassen wiederholt und mehrfach verwendet werden können.

<article id="post-1" class="inset">
	<p class="highlight">Hello, <span>world!</span></p>
</article>

Wir haben also die Tags <article> , <p> und <span> . Der Artikel hat eine ID von post-1 und eine Klasse von Inset. Das p -Tag hat eine Hervorhebungsklasse und das span-Tag hat keine ID oder Klasse.

Das CSS für den obigen HTML-Code könnte folgendermaßen aussehen:

/* This is a comment, it doesn't affect the code. We can use it to make notes or write instructions */
article { /* These styles will apply to every <article> tag on the page */

background: #eaeaea;  /* This makes the background gray using a HEX color code */

padding: 20px; /* give the article 20 pixels of space around the inside */

margin: 10px; /* give the article 10 pixels of space around the outside */

}

#post-1 { /* These styles will apply to only the tag with id of post-1 */

border: 1px solid green; /* green solid line around the container */

}

.highlight { /* These styles will apply to anything with a class of highlight */

background: yellow; /* give this text a yellow background */

}

span { /* These styles will apply to every <span> tag on the page */

font-weight: bold; /* bold this text */

text-transform: uppercase; /* make this text ALL CAPS */

}

Um mehr über CSS und seine Funktionsweise zu erfahren, gibt es viele fantastische Ressourcen. Einige großartige Anlaufstellen sind A List Apart Books, codeschool.coma, codecademy.com, lynda.com, css-tricks.com und wpbeginner.com. Jede dieser Ressourcen ist ein wenig anders; Einige bieten einen allgemeinen Ansatz zum Erlernen der Grundlagen, andere konzentrieren sich auf Anwendungsfälle und geben spezifische Code-Snippets oder Tutorials zu einer bestimmten Aufgabe. Jeder lernt auf unterschiedliche Weise, also finde heraus, was für dich richtig ist.

Siehe Code „In the Wild“

Wir haben zuvor über eine Möglichkeit gesprochen, „unter die Haube zu schauen“, aber eine andere Möglichkeit besteht darin, die in Ihren Browser integrierten Entwicklungstools zu verwenden. Bei den meisten Browsern können Sie den Code auf einer Webseite erkunden. Fahren Sie fort und klicken Sie mit der rechten Maustaste oder bei gedrückter Strg-Taste auf diesen Text und wählen Sie „Inspect“ oder „Inspect Element“. Es öffnet sich ein Fenster, das Ihnen das HTML-Tag und das entsprechende CSS zeigen sollte. Sie können sogar die Eigenschaften bearbeiten und sehen, wie sie aussehen, wenn sie geändert werden.

Google ist dein Freund

Im Zweifel Google! Im Ernst, es gibt so viele Leute, die über Code schreiben, die Chancen stehen gut, dass jemand darüber geschrieben hat, was Sie zu tun versuchen. Also Google und schau was du findest. Es kann sogar mehrere Möglichkeiten geben, das zu erreichen, was Sie anstreben, und Sie können den besten Weg finden, der Ihrem eigenen Stil und Ihren Umständen entspricht.

In die Praxis umsetzen

Sie müssen kein Thema von Grund auf neu erstellen, um einige dieser neu entdeckten Entwicklerfähigkeiten zu nutzen. Ich ermutige Sie, klein anzufangen. Versuchen Sie, ein vorhandenes Design zu optimieren, z. B. einige Farben zu ändern oder eine andere Schriftart zu verwenden. Wie ich bereits erwähnt habe, gibt es bessere Möglichkeiten, den Code eines Designs zu bearbeiten, als den Editor zu verwenden. Designs bieten Updates, und wenn Sie die Designdateien direkt bearbeitet haben, überschreibt ein Designupdate Ihre Änderungen. Eine der einfachsten Möglichkeiten, benutzerdefinierten Code zu einem vorhandenen Design hinzuzufügen, ist über ein Plugin. Und das perfekte Plugin für CSS ist Simple Custom CSS von John Regan und Danny van Kooten. Auf diese Weise können Sie Ihrer Website einige Ihrer eigenen CSS hinzufügen, ohne die Themendateien durcheinander zu bringen, und es eignet sich hervorragend, um kleine visuelle Änderungen an Ihrer WordPress-Website vorzunehmen.

Formalisieren Sie Ihren Arbeitsablauf

Sobald Sie sich beim Arbeiten mit einigen kleineren Codeschnipseln über das Dashboard wohler fühlen, möchten Sie einen formelleren Workflow für Ihre Entwicklungsaufgaben. Die Workflows von Entwicklern können von sehr einfach bis extrem komplex reichen. Es gibt gute Gründe für einige komplexere Arbeitsabläufe, aber wir beginnen mit den Grundlagen. Die zwei Dinge, die Sie haben müssen, wenn Sie Code außerhalb des Dashboards bearbeiten möchten, sind ein Code-Editor und ein FTP-Programm, mit dem Sie Dateien von Ihrem Server ablegen und abrufen können. Elegant Themes hat einen großartigen Beitrag, der Code-Editoren vergleicht. Es ist eine hervorragende Ressource, wenn Sie herausfinden möchten, welcher Editor der richtige für Sie ist. Einige Code-Editoren haben FTP eingebaut, aber es gibt auch viele kostenlose oder kostengünstige Optionen.

Profi-Tipp: Ein weiteres großartiges Tool für den Workflow eines WordPress-Entwicklers ist DesktopServer von ServerPress. Damit können Sie mit wenigen Klicks lokal eine WordPress-Seite auf Ihrem Computer einrichten und aufbauen.

Versuchen Sie, ein untergeordnetes Thema zu erstellen

Nachdem Sie nun eine formellere Bearbeitungsumgebung haben, versuchen Sie, ein untergeordnetes Thema zu erstellen. Dies ist ein benutzerdefiniertes Design, das auf einem anderen Design basiert. Beide Themes müssen auf Ihrer Website installiert sein, damit es funktioniert, und das untergeordnete Theme sollte dasjenige sein, das aktiviert ist. Die zwei Dinge, die für ein Child-Theme benötigt werden, sind style.css und functions.php -Dateien. Das Genesis-Framework nutzt diese Funktionalität sehr gut und ist ein großartiger Ort, um einzusteigen und mit dem Aufbau einiger Ihrer Entwicklungsfähigkeiten zu beginnen. Carrie Dils hat mehrere lynda.com-Kurse zur Verwendung von Child-Themes mit Genesis absolviert. Es ist ein fantastischer nächster Schritt auf Ihrer Reise vom Designer zum Entwickler.

Lassen Sie sich nicht entmutigen

Es ist natürlich, dass Sie irgendwann entmutigt werden, wenn Sie in das Erlernen von Code einsteigen, aber seien Sie es nicht. Jeder war dort. Selbst erfahrene Entwickler haben Tage, an denen sie das Gefühl haben, nichts zu wissen. Einige der besten Möglichkeiten, diese Hürden zu überwinden, bestehen darin, mit anderen auf derselben Reise in Verbindung zu bleiben. Twitter, Slack und die Teilnahme an den WordPress.org-Foren sind großartige Möglichkeiten, um in Verbindung zu bleiben. Folgen Sie einigen Blogs wie dem Layout, und Sie können Beziehungen pflegen und dabei lernen. Einige meiner Lieblingsmenschen, die mir auf meiner Entwicklungsreise geholfen haben, sind Carrie Dils, Tom McFarlin und John Regan.

Wo soll ich von hier aus gehen?

Sobald Sie das Gefühl haben, HTML und CSS gut im Griff zu haben, ist der nächste logische Schritt JavaScript, oder Sie können noch einen Schritt weiter gehen und sich im WordPress-Codex vertiefen, um zu erfahren, wie Sie Teile von WordPress-Inhalten in Ihren Code ziehen können. Viel Spaß beim Codieren!