每个人成为 Web 开发人员的道路看起来都有些不同。 对我来说，对很多人来说，我都是从设计师开始的。 WordPress 可以让您在不知道任何代码的情况下轻松启动并运行一个外观精美的网站。 作为设计师，您可以更改主题、调整设置、添加插件，以及做很多事情来控制网站的外观。 但归根结底，很多设计师想要更进一步，逐个像素地规定网站的外观。

有两种方法可以做到这一点：聘请开发人员来实现您的设计或自己获得一些开发技能。 即使您聘请了开发人员，有时知道如何进行某些开发也是一项巨大的资产。 另外，当您可以处理客户的开发需求时，您对他们来说变得更有价值，并且可以相应地提高您的费率。

从设计师到开发人员的飞跃是一项艰巨的任务。 我将建议采取一些简单的步骤，以便您可以开始从创建网站设计的人过渡到可以构建和实施这些设计的人。

好消息，你来对地方了

如果您在这里阅读 The Layout，那么您至少对 WordPress 有点熟悉。 与网络上的任何其他平台相比，WordPress 为人们从设计师转变为开发人员打开了大门。 实现此目的的一种方法是编辑器，它可以在 WordPress 仪表板的外观 > 编辑器下找到。

您可以在 WordPress 仪表板中查看所有主题的代码，无需任何特殊工具或服务器访问权限。 它也提供了编辑代码的功能，但是，我不建议在这里这样做（我们稍后会讨论更好的方法）。 这是一个让您窥视并了解正在发生的事情的好地方。 因此，继续深入了解您的主题，看看您是否可以开始理解其中的内容。

您通常会在此处看到三种不同类型的文件。 为简化起见，请将这些文件视为您网站的“正文”。 PHP 文件 (.php) 包含 HTML（骨骼）和 PHP（将一切连接到大脑、数据库的神经）。 样式表 (.css) 是您网站的外观，决定了它的外观。 JavaScript (.js) 可以被认为是网站的肌肉，通常控制移动部件并对网站的使用和交互方式做出反应和响应。 继续探索一下。 您是否看到任何描述性词语表明该代码适用于网站的哪个部分？ 或者描述网站某些视觉方面的词语？

WordPress 缩小设计师和开发人员之间差距的另一种好方法是将事物分解成碎片，使您可以轻松识别要编辑的部分并仅对网站的一部分进行更改。 WordPress 将内容与模板与网站的功能分开。 它还在文件之间使用一致的结构，因此您可以在站点之间跳转，并且仍然可以轻松找到要编辑的文件。

不要害怕

我在培训他人时最常使用的短语之一是，“不要害怕，你不能以我无法解决的方式把事情搞砸。” 世界上没有什么是无法挽回的。 当然，如果您的编辑未按计划进行，您将希望利用这些工具可以轻松撤消。 Flywheel 提供的两个很棒的工具是它们的暂存功能以及它们轻松进行备份和从中恢复的能力。 当您决定跳入代码时，请使用暂存站点进行编辑。 这样您就不会冒着您的现场站点的风险，并且可以在需要时轻松地重置您的登台环境。 如果您无意中对实时站点进行了更改，不用担心，只需恢复您的最新备份，不到五分钟，您就会回到正轨。 这些工具应该让您有信心开始在编辑一些代码时采取一些小步骤！

专业提示：一旦您对代码更加熟悉，我会鼓励您探索版本控制，无论是 Git 还是 SVN，作为第三层安全性以及在代码上线之前跟踪更改和捕捉故障的第一线。

从哪里开始？

现在我们已经解决了一些最初的心理障碍，你应该从哪里开始？ 如果你是一名设计师，那么最自然的开始使用代码的地方就是 CSS。 正如我们之前提到的，这是我们网站的皮肤； 它控制网站的外观和布局方式。 在剖析 CSS 之前，我们需要了解它是如何与 HTML 一起工作的。 HTML 有多种标签来区分其中的内容。 这些标签可以有许多不同的属性，这些属性提供了一些关于标签及其内容的附加信息。 我们要查看的两个属性是id和class 。 这是一个包含三个不同 HTML 标记的代码片段。 你会注意到并不是每个标签都有一个 id 或 class。 它们不是必需的，但它们有助于区分同一页面上的标签。 Id 只能在页面上使用一次，而类可以重复使用多次。

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

所以我们有标签<article> 、 <p>和<span> 。 文章的 id 为post-1和一类 inset。 p标签有一个高亮类，而 span 标签没有 id 或类。

与上述 HTML 一起使用的 CSS 可能如下所示：

/* 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。 这些资源中的每一个都有些不同。 有些提供一般的、学习基础的方法，而另一些则专注于用例，并提供特定任务的特定代码片段或教程。 每个人都以不同的方式学习，所以找到适合自己的。

查看代码“In the Wild”

我们之前谈到了一种“窥探”的方法，但另一种方法是使用浏览器内置的开发工具。 大多数浏览器都会让您在网页上的代码中进行探索。 继续并右键单击或 ctrl 单击此文本，然后选择“检查”或“检查元素”。 将弹出一个窗口，显示 HTML 标签和相应的 CSS。 您甚至可以编辑属性并查看更改后的外观。

谷歌是你的朋友

如有疑问，谷歌！ 说真的，有很多人写代码，很可能有人写过你正在尝试做的事情。 所以谷歌看看你找到了什么。 甚至可能有几种方法可以实现您的目标，并且您可以根据自己的风格和情况找到最佳方法。

付诸实践

您不必从头开始构建主题来利用这些新发现的开发人员技能。 我鼓励你从小处着手。 尝试对现有主题进行一些调整，例如更改某些颜色或使用不同的字体。 正如我之前提到的，有比使用编辑器更好的方法来编辑主题代码。 主题提供更新，如果您直接编辑了主题文件，主题更新将覆盖您的更改。 将一些自定义代码添加到现有主题的最简单方法之一是通过插件。 完美的 CSS 插件是 John Regan 和 Danny van Kooten 的 Simple Custom CSS。 这使您可以将一些自己的 CSS 添加到您的网站而不会弄乱主题文件，并且非常适合对您的 WordPress 网站进行小的视觉更改。

正式化您的工作流程

一旦您通过仪表板更轻松地处理一些较小的代码片段，您将需要一个更正式的工作流程来完成您的开发任务。 开发人员的工作流程可以从非常简单到极其复杂。 一些更复杂的工作流程有充分的理由，但我们将从基础开始。 如果您想在 Dashboard 之外编辑代码，您必须拥有的两件事是代码编辑器和 FTP 程序，这将允许您从服务器放置和获取文件。 优雅主题有一篇很棒的文章比较代码编辑器。 在尝试确定适合您的编辑器时，这是一个极好的资源。 一些代码编辑器内置了 FTP，但也有很多免费或低成本的选择。

专业提示：另一个适用于 WordPress 开发人员工作流程的好工具是 ServerPress 的 DesktopServer。 这使您只需单击几下即可在本地计算机上设置和构建 WordPress 站点。

尝试创建一个子主题

现在您有了一个更正式的编辑环境，请尝试创建一个子主题。 这是基于另一个主题的自定义主题。 这两个主题都必须安装在您的站点上才能正常工作，并且子主题应该是已激活的主题。 子主题需要的两件事是style.css和functions.php文件。 Genesis 框架非常好地利用了这个功能，是一个很好的地方，可以让你开始培养你的一些开发技能。 Carrie Dils 在 lynda.com 上完成了几门关于在 Genesis 中使用儿童主题的课程。 这是您从设计师到开发者旅程中奇妙的下一步。

不要气馁

当你开始学习代码时，很自然地，在某些时候你会气馁，但不要灰心。 每个人都去过那里。 即使是经验丰富的开发人员也有过他们觉得自己一无所知的日子。 克服这些困难的一些最佳方法是在同一旅程中与其他人保持联系。 Twitter、Slack 和参与 WordPress.org 论坛都是保持联系的好方法。 关注 Layout 之类的博客，您可以在此过程中培养关系并学习。 Carrie Dils、Tom McFarlin 和 John Regan 是我最喜欢追随的在我的发展历程中帮助过我的一些人。

我应该从这里去哪里？

一旦你觉得你对 HTML 和 CSS 有了很好的处理，下一个合乎逻辑的步骤是 JavaScript，或者你可以更进一步，深入研究 WordPress Codex，学习如何将 WordPress 内容片段提取到你的代码中。 快乐编码！