Путь каждого к тому, чтобы стать веб-разработчиком, выглядит немного по-разному. Для меня, как и для многих людей, я начинал как дизайнер. WordPress позволяет легко создать и запустить фантастически выглядящий сайт, не зная кода. Как дизайнер, вы можете менять темы, настраивать параметры, добавлять плагины и многое другое для управления внешним видом сайта. Но, в конце концов, многие дизайнеры хотят пойти еще дальше и диктовать пиксель за пикселем, как должен выглядеть сайт.

Есть два способа сделать это: нанять разработчика для реализации вашего дизайна или приобрести некоторые навыки разработки самостоятельно. Даже если вы наймете разработчика, будут времена, когда знание того, как вести разработку, будет большим преимуществом. Кроме того, когда вы можете удовлетворить потребности своих клиентов в разработке, вы становитесь для них еще более ценным и можете соответственно увеличить свою ставку.

Переход от дизайнера к разработчику — это большое дело. Я собираюсь предложить несколько простых шагов, чтобы вы могли начать переход от того, кто создает дизайн сайта, к тому, кто может создавать и реализовывать этот дизайн.

Хорошие новости, вы в правильном месте

Скорее всего, если вы читаете The Layout, вы хотя бы немного знакомы с WordPress. WordPress открывает дверь для перехода от дизайнера к разработчику лучше, чем любая другая платформа в Интернете. Одним из способов сделать это является редактор, который можно найти на панели инструментов WordPress в разделе «Внешний вид» > «Редактор».

Вы можете просмотреть весь код темы прямо в панели инструментов WordPress без каких-либо специальных инструментов или доступа к серверу. Он также предоставляет возможности для редактирования кода, однако я бы не советовал делать это здесь (мы поговорим о лучших способах сделать это позже). Это отличное место, чтобы заглянуть и посмотреть, что происходит. Так что вперед, загляните под капот вашей темы и посмотрите, сможете ли вы начать разбираться в том, что там есть.

Обычно вы увидите здесь три разных типа файлов. Чтобы упростить ситуацию, думайте об этих файлах как о «теле» вашего веб-сайта. Файлы PHP (.php) содержат HTML (кости) и PHP (нервы, соединяющие все с мозгом, с базой данных). Таблицы стилей (.css) — это оболочка вашего сайта, определяющая его внешний вид. JavaScript (.js) можно рассматривать как мускулы сайта, обычно контролирующие движущиеся части и реагирующие на то, как сайт используется и взаимодействует с ним. Идите вперед и исследуйте немного. Видите ли вы какие-либо описательные слова, указывающие, для какого раздела сайта предназначен код? Или слова, описывающие некоторые визуальные аспекты сайта?

Другой отличный способ, которым WordPress сокращает разрыв между дизайнером и разработчиком, заключается в том, что он разбивает вещи на части, позволяя вам легко определить раздел, который вы хотите отредактировать, и внести изменения только в одну часть сайта. WordPress отделяет контент от шаблонов от функций сайта. Он также использует единую структуру среди файлов, поэтому вы можете переключаться между сайтами и по-прежнему легко находить файлы, которые хотите отредактировать.

Не бойся

Одна из фраз, которые я чаще всего использую при обучении других, звучит так: «Не бойтесь, вы не можете испортить это так, как я не смогу исправить». В мире очень мало того, что нельзя исправить. Конечно, вы захотите воспользоваться инструментами, которые облегчат вам отмену, если ваши изменения пойдут не так, как планировалось. Два замечательных инструмента, которые предоставляет Flywheel, — это их функция Staging и возможность легко делать резервную копию и восстанавливать ее. Когда вы решите перейти к коду, используйте промежуточный сайт для внесения изменений. Таким образом, вы не рискуете своим работающим сайтом и можете легко сбросить тестовую среду, если это необходимо. Если вы непреднамеренно внесете изменения на свой работающий сайт, не бойтесь, просто восстановите последнюю резервную копию, и менее чем через пять минут вы вернетесь в нужное русло. Эти инструменты должны вселить в вас уверенность, чтобы начать делать первые шаги в редактировании кода!

Совет: как только вы немного освоитесь с кодом, я бы посоветовал вам изучить контроль версий, либо Git, либо SVN, в качестве третьего уровня безопасности и передовой линии отслеживания изменений и обнаружения сбоев до того, как ваш код будет запущен.

С чего начать?

Теперь, когда мы рассмотрели некоторые первоначальные умственные препятствия, с чего вам следует начать? Если вы дизайнер, то наиболее естественным местом для начала работы с кодом будет CSS. Как мы упоминали ранее, это оболочка нашего сайта; он контролирует, как выглядит сайт и как он организован. Прежде чем мы сможем анализировать CSS, нам нужно понять, как он работает с HTML. HTML имеет множество тегов для различения содержимого внутри. Эти теги могут иметь множество различных атрибутов, которые предоставляют некоторую дополнительную информацию о теге и его содержимом. Мы рассмотрим два атрибута: id и class . Вот фрагмент кода с тремя разными тегами HTML. Вы заметите, что не каждый тег имеет идентификатор или класс. Они не обязательны, но помогают отличать теги на одной странице друг от друга. Идентификаторы должны использоваться только один раз на странице, тогда как классы могут повторяться и использоваться несколько раз.

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

Итак, у нас есть теги <article> , <p> и <span> . Статья имеет идентификатор post-1 и класс вставки. Тег p имеет класс выделения, а тег span не имеет идентификатора или класса.

CSS для приведенного выше HTML может выглядеть так:

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

}

Чтобы больше узнать о CSS и о том, как он работает, есть множество фантастических ресурсов. Отличными источниками для начала являются A List Apart Books, codeschool.coma, codecademy.com, lynda.com, css-tricks.com и wpbeginner.com. Каждый из этих ресурсов немного отличается; некоторые предлагают общий подход, изучают основы, а другие фокусируются на вариантах использования и предоставляют конкретные фрагменты кода или учебные пособия по конкретной задаче. Все учатся по-разному, так что найдите то, что подходит именно вам.

Посмотрите на код «В дикой природе»

Ранее мы говорили об одном способе «заглянуть под капот», но есть и другой способ — использовать инструменты разработки, встроенные в ваш браузер. Большинство браузеров позволяют исследовать код на веб-странице. Идите вперед и щелкните правой кнопкой мыши или щелкните по этому тексту, удерживая клавишу Ctrl, и выберите «Проверить» или «Проверить элемент». Появится окно, которое должно показать вам тег HTML и соответствующий CSS. Вы даже можете редактировать свойства и видеть, как они выглядят при изменении.

Гугл твой друг

Если есть сомнения, Google! Серьезно, так много людей пишут о коде, есть вероятность, что кто-то написал о том, что вы пытаетесь сделать. Так Google и посмотреть, что вы найдете. Может быть даже несколько способов добиться того, к чему вы стремитесь, и вы можете найти лучший способ, учитывая ваш собственный стиль и обстоятельства.

Применение на практике

Вам не нужно создавать тему с нуля, чтобы использовать некоторые из этих новых навыков разработчика. Я призываю вас начать с малого. Попробуйте внести некоторые изменения в существующую тему, например изменить некоторые цвета или использовать другой шрифт. Как я уже отмечал ранее, есть лучшие способы редактирования кода темы, чем использование редактора. Темы предлагают обновления, и если вы редактировали файлы темы напрямую, обновление темы заменит ваши изменения. Один из самых простых способов добавить пользовательский код в существующую тему — использовать плагин. И идеальный плагин для CSS — это Simple Custom CSS от Джона Ригана и Дэнни ван Кутена. Это позволяет вам добавить на сайт немного своего собственного CSS, не испортив файлы темы, и отлично подходит для внесения небольших визуальных изменений на ваш сайт WordPress.

Формализуйте свой рабочий процесс

Как только вы научитесь работать с небольшими фрагментами кода через Dashboard, вам понадобится более формальный рабочий процесс для ваших задач разработки. Рабочие процессы разработчика могут варьироваться от очень простых до чрезвычайно сложных. Есть веские причины для более сложных рабочих процессов, но мы собираемся начать с основ. Если вы хотите редактировать код вне Dashboard, у вас должны быть две вещи: редактор кода и FTP-программа, которая позволит вам размещать и получать файлы с вашего сервера. В Elegant Themes есть отличный пост, посвященный сравнению редакторов кода. Это отличный ресурс, когда вы пытаетесь определить, какой редактор вам подходит. Некоторые редакторы кода имеют встроенный FTP, но есть также множество бесплатных или недорогих вариантов.

Совет: еще один отличный инструмент для рабочего процесса разработчика WordPress — DesktopServer от ServerPress. Это позволяет вам настроить и создать сайт WordPress на вашем компьютере локально всего за несколько кликов.

Попробуйте создать дочернюю тему

Теперь, когда у вас есть более формальная среда редактирования, попробуйте создать дочернюю тему. Это пользовательская тема, основанная на другой теме. Обе темы должны быть установлены на вашем сайте, чтобы они работали, и дочерняя тема должна быть активирована. Две вещи, необходимые для дочерней темы, это файлы style.css и functions.php . Фреймворк Genesis очень хорошо использует эту функциональность и является отличным местом, чтобы начать развивать свои навыки разработки. Кэрри Дилс прошла несколько курсов на lynda.com по использованию дочерних тем в Genesis. Это фантастический следующий шаг на пути от дизайнера к разработчику.

Не расстраивайтесь

Вполне естественно, что, приступая к изучению кода, в какой-то момент вы будете обескуражены, но не расстраивайтесь. Все были там. Даже у опытных разработчиков бывают дни, когда им кажется, что они ничего не знают. Один из лучших способов преодолеть эти препятствия — оставаться на связи с другими людьми в том же путешествии. Twitter, Slack и участие в форумах WordPress.org — отличные способы оставаться на связи. Подпишитесь на некоторые блоги, такие как Layout, и вы сможете развивать отношения и учиться на этом пути. Некоторые из моих любимых людей, которые помогали мне в моем пути развития, — это Кэрри Дилс, Том МакФарлин и Джон Риган.

Куда мне идти отсюда?

Как только вы почувствуете, что хорошо разбираетесь в HTML и CSS, следующим логическим шагом будет JavaScript, или вы можете сделать еще один шаг и изучить Кодекс WordPress, чтобы узнать, как вставлять фрагменты контента WordPress в свой код. Удачного кодирования!