Droga każdego do zostania programistą internetowym wygląda trochę inaczej. Dla mnie, jak dla wielu osób, zaczynałem jako projektant. WordPress ułatwia uruchomienie i uruchomienie fantastycznie wyglądającej witryny bez znajomości kodu. Jako projektant możesz zmieniać motywy, dostosowywać ustawienia, dodawać wtyczki i robić wiele, aby kontrolować wygląd witryny. Ale w końcu wielu projektantów chce pójść o krok dalej i dyktować piksel po pikselu, jak wygląda strona.

Można to osiągnąć na dwa sposoby: zatrudnić programistę, który zaimplementuje Twój projekt, lub samodzielnie zdobyć pewne umiejętności programistyczne. Nawet jeśli zatrudnisz programistę, będą chwile, kiedy wiedza o tym, jak zrobić jakiś program, będzie wielkim atutem. Dodatkowo, kiedy potrafisz obsługiwać potrzeby rozwojowe swoich klientów, stajesz się dla nich jeszcze bardziej wartościowy i możesz odpowiednio zwiększyć swoją stawkę.

Przeskok od projektanta do dewelopera to duże przedsięwzięcie. Zasugeruję kilka prostych kroków, które możesz wykonać, aby rozpocząć przejście od osoby, która tworzy projekty witryn, do kogoś, kto może tworzyć i wdrażać również te projekty.

Dobra wiadomość, jesteś we właściwym miejscu

Są szanse, że jeśli czytasz The Layout, jesteś przynajmniej trochę zaznajomiony z WordPressem. WordPress otwiera drzwi dla kogoś, kto może przejść od projektanta do programisty lepiej niż jakakolwiek inna platforma w sieci. Jednym ze sposobów, w jaki można to osiągnąć, jest Edytor, który można znaleźć na pulpicie nawigacyjnym WordPress w obszarze Wygląd> Edytor.

Możesz wyświetlić cały kod motywu bezpośrednio na pulpicie nawigacyjnym WordPress bez specjalnych narzędzi lub dostępu do serwera. Daje również możliwość edycji kodu, jednak nie sugerowałbym tego tutaj (o lepszych sposobach na to porozmawiamy później). To świetne miejsce, aby rzucić okiem i zobaczyć, co się dzieje. Więc idź dalej i zajrzyj pod maskę swojego motywu i zobacz, czy możesz zacząć rozumieć, co tam jest.

Zazwyczaj zobaczysz tutaj trzy różne rodzaje plików. Aby uprościć sprawę, pomyśl o tych plikach jak o „treści” Twojej witryny. Pliki PHP (.php) zawierają HTML (kości) i PHP (nerwy łączące wszystko z mózgiem, bazę danych). Arkusze stylów (.css) to skórka Twojej witryny, określająca jej wygląd. JavaScript (.js) można traktować jako mięśnie witryny, zwykle kontrolujące ruchome części oraz reagowanie i reagowanie na sposób korzystania z witryny i interakcji z nią. Śmiało i trochę zbadaj. Czy widzisz jakieś opisowe słowa, które wskazują, do której sekcji witryny jest przeznaczony kod? Lub słowa opisujące niektóre wizualne aspekty witryny?

Innym świetnym sposobem, w jaki WordPress wypełnia lukę między projektantem a programistą, jest dzielenie rzeczy na kawałki, co pozwala łatwo zidentyfikować sekcję, którą chcesz edytować, i wprowadzić zmiany tylko w jednej części witryny. WordPress oddziela treści z szablonów od funkcji strony. Wykorzystuje również spójną strukturę między plikami, dzięki czemu możesz przeskakiwać między witrynami i nadal łatwo znajdować pliki, które chcesz edytować.

Nie bój się

Jednym z wyrażeń, którego najczęściej używam podczas szkolenia innych, jest: „nie bój się, nie możesz tego zepsuć w sposób, którego nie potrafię naprawić”. Na świecie jest bardzo niewiele rzeczy, których nie można cofnąć. Oczywiście będziesz chciał skorzystać z narzędzi, które ułatwią cofnięcie zmian, jeśli Twoje zmiany nie pojdą zgodnie z planem. Dwa świetne narzędzia, które zapewnia Flywheel, to funkcja Staging i możliwość łatwego tworzenia kopii zapasowej i przywracania z niej. Kiedy zdecydujesz się przejść do kodu, użyj witryny testowej, aby wprowadzić zmiany. W ten sposób nie ryzykujesz swojej aktywnej witryny i w razie potrzeby możesz łatwo zresetować środowisko testowe. Jeśli przypadkowo dokonasz zmiany w swojej aktywnej witrynie, bez obaw, po prostu przywróć najnowszą kopię zapasową i za mniej niż pięć minut jesteś z powrotem na dobrej drodze. Te narzędzia powinny dać ci pewność, że zaczniesz robić małe kroki w edycji kodu!

Porada od specjalistów: gdy już poczujesz się trochę bardziej komfortowo z kodem, zachęcam Cię do zbadania kontroli wersji, Git lub SVN, jako trzeciej warstwy bezpieczeństwa i pierwszej linii śledzenia zmian i wyłapywania usterek przed uruchomieniem kodu.

Gdzie zacząć?

Skoro omówiliśmy już niektóre z początkowych przeszkód mentalnych, od czego powinieneś zacząć? Jeśli jesteś projektantem, najbardziej naturalnym miejscem do rozpoczęcia pracy z kodem będzie CSS. Jak wspomnieliśmy wcześniej, jest to skórka naszej witryny; kontroluje wygląd strony i jej układ. Zanim będziemy mogli przeanalizować CSS, musimy zrozumieć, jak działa z HTML. HTML ma wiele tagów do rozróżniania treści. Tagi te mogą mieć wiele różnych atrybutów, które dostarczają dodatkowych informacji o tagu i jego zawartości. Dwa atrybuty, którym będziemy się przyglądać, to id i class . Oto fragment kodu z trzema różnymi tagami HTML. Zauważysz, że nie każdy tag ma identyfikator lub klasę. Nie są wymagane, ale pomagają odróżnić od siebie tagi na tej samej stronie. Identyfikatory powinny być używane tylko raz na stronie, natomiast klasy mogą być powtarzane i używane wielokrotnie.

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

Mamy więc tagi <article> , <p> i <span> . Artykuł posiada id post-1 i klasę wkładki. Znacznik p ma klasę podświetlenia, a znacznik span nie ma identyfikatora ani klasy.

Kod CSS powiązany z powyższym kodem HTML może wyglądać tak:

/* 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 */

}

Aby zagłębić się w CSS i jak to działa, istnieje wiele fantastycznych zasobów. Świetnymi miejscami na początek są A List Apart Books, codeschool.coma, codecademy.com, lynda.com, css-tricks.com i wpbeginner.com. Każdy z tych zasobów jest nieco inny; niektóre oferują ogólne podejście, uczą się podstaw, a inne skupiają się na przypadkach użycia i podają konkretne fragmenty kodu lub samouczki dotyczące konkretnego zadania. Każdy uczy się na różne sposoby, więc znajdź to, co jest dla Ciebie odpowiednie.

Spójrz na kod „Na wolności”

Rozmawialiśmy wcześniej o jednym ze sposobów „zajrzenia pod maskę”, ale innym sposobem jest użycie narzędzi programistycznych wbudowanych w przeglądarkę. Większość przeglądarek umożliwia eksplorację kodu na stronie internetowej. Śmiało i kliknij prawym przyciskiem myszy lub ctrl kliknij ten tekst i wybierz „Sprawdź” lub „Sprawdź element”. Pojawi się okno, które powinno pokazać tag HTML i odpowiadający mu CSS. Możesz nawet edytować właściwości i zobaczyć, jak wyglądają po zmianie.

Google to twój przyjaciel

W razie wątpliwości Google! Poważnie, jest tak wiele osób piszących o kodzie, są szanse, że ktoś napisał o tym, co próbujesz zrobić. Więc Google i zobacz, co znajdziesz. Może być nawet kilka sposobów na osiągnięcie tego, do czego dążysz, i możesz znaleźć najlepszy, biorąc pod uwagę własny styl i okoliczności.

Wprowadzanie go w życie

Nie musisz budować motywu od zera, aby skorzystać z niektórych z tych nowo odkrytych umiejętności programistów. Zachęcam do małych startów. Spróbuj wprowadzić pewne poprawki do istniejącego motywu, na przykład zmienić niektóre kolory lub użyć innej czcionki. Jak wspomniałem wcześniej, istnieją lepsze sposoby edytowania kodu motywu niż użycie Edytora. Motywy oferują aktualizacje, a jeśli bezpośrednio edytowałeś pliki motywów, aktualizacja motywu zastąpi Twoje zmiany. Jednym z najłatwiejszych sposobów dodania niestandardowego kodu do istniejącego motywu jest użycie wtyczki. A idealną wtyczką do CSS jest Simple Custom CSS autorstwa Johna Regana i Danny'ego van Kootena. Pozwala to na dodanie własnego kodu CSS do witryny bez zepsucia plików motywu i doskonale nadaje się do wprowadzania niewielkich zmian wizualnych w witrynie WordPress.

Sformalizuj swój przepływ pracy

Gdy już nauczysz się pracować z mniejszymi fragmentami kodu za pośrednictwem pulpitu nawigacyjnego, będziesz potrzebować bardziej formalnego przepływu pracy dla swoich zadań programistycznych. Przepływy pracy programistów mogą wahać się od bardzo prostych do bardzo złożonych. Istnieją dobre powody dla bardziej złożonych przepływów pracy, ale zaczniemy od podstaw. Dwie rzeczy, które musisz mieć, jeśli chcesz edytować kod poza Dashboardem, to edytor kodu i program FTP, który pozwoli ci umieszczać i pobierać pliki z twojego serwera. Elegant Themes ma świetny post porównujący edytory kodu. To doskonałe źródło informacji, gdy próbujesz określić, który edytor jest dla Ciebie odpowiedni. Niektóre edytory kodu mają wbudowane FTP, ale istnieje również wiele darmowych lub tanich opcji.

Porada od specjalistów: kolejnym doskonałym narzędziem do przepływu pracy programisty WordPress jest DesktopServer firmy ServerPress. Dzięki temu za pomocą kilku kliknięć możesz skonfigurować i zbudować witrynę WordPress na swoim komputerze lokalnie.

Spróbuj stworzyć motyw potomny

Teraz, gdy masz bardziej formalne środowisko edycji, spróbuj utworzyć motyw podrzędny. To jest niestandardowy motyw oparty na innym motywie. Oba motywy muszą być zainstalowane w Twojej witrynie, aby działały, a motyw podrzędny powinien być tym, który jest aktywowany. Dwie rzeczy wymagane dla motywu potomnego to pliki style.css i functions.php . Framework Genesis bardzo dobrze wykorzystuje tę funkcjonalność i jest doskonałym miejscem do wskoczenia i rozpoczęcia budowania niektórych umiejętności programistycznych. Carrie Dils odbyła kilka kursów lynda.com dotyczących używania motywów potomnych w Genesis. To fantastyczny kolejny krok w Twojej podróży od projektanta do programisty.

Nie zniechęcaj się

To naturalne, że kiedy wskoczysz do nauki kodu, w pewnym momencie zniechęcisz się, ale nie bądź. Wszyscy tam byli. Nawet doświadczeni programiści mają dni, w których czują, że nic nie wiedzą. Jednymi z najlepszych sposobów na pokonanie tych garbów są pozostawanie w kontakcie z innymi podczas tej samej podróży. Twitter, Slack i uczestnictwo w forach WordPress.org to świetne sposoby na pozostanie w kontakcie. Śledź niektóre blogi, takie jak Layout, a będziesz mógł pielęgnować relacje i uczyć się po drodze. Niektóre z moich ulubionych osób, które pomogły mi w mojej podróży do rozwoju, to Carrie Dils, Tom McFarlin i John Regan.

Dokąd mam się udać?

Gdy poczujesz, że dobrze znasz HTML i CSS, następnym logicznym krokiem jest JavaScript lub możesz pójść o krok dalej i zagłębić się w WordPress Codex, aby dowiedzieć się, jak wciągać fragmenty treści WordPress do swojego kodu. Udanego kodowania!