Web開発者になるまでの道のりは少し異なります。 私にとって、多くの人にとって、私はデザイナーとして始めました。 WordPressを使用すると、コードを知らなくても、見栄えのするサイトを簡単に立ち上げて実行できます。 デザイナーは、テーマの変更、設定の調整、プラグインの追加など、サイトの外観を制御するためにさまざまなことを行うことができます。 しかし、結局のところ、多くの設計者はさらに一歩進んで、サイトがどのように見えるかをピクセルごとに指示したいと考えています。

これを実現するには、2つの方法があります。開発者を雇って設計を実装するか、自分で開発スキルを習得します。 開発者を雇ったとしても、開発の仕方を知っていることが大きな財産になることがあります。 さらに、クライアントの開発ニーズに対応できるようになると、クライアントにとってさらに価値が高まり、それに応じてレートを上げることができます。

デザイナーから開発者への飛躍は大きな仕事です。 サイトのデザインを作成する人から、それらのデザインを作成して実装できる人への移行を開始できるように、いくつかの簡単な手順を提案します。

良いニュースです、あなたは正しい場所にいます

あなたがここでレイアウトを読んでいるなら、あなたは少なくともWordPressに少し精通している可能性があります。 WordPressは、Web上の他のどのプラットフォームよりも優れた方法でデザイナーから開発者に移行するための扉を開きます。 これを実現する1つの方法は、WordPressダッシュボードの[外観]>[エディター]にあるエディターです。

特別なツールやサーバーへのアクセスなしで、WordPressダッシュボードでテーマのすべてのコードをすぐに表示できます。 コードを編集する機能も提供しますが、ここでそれを行うことはお勧めしません（これを行うためのより良い方法については後で説明します）。 これは、覗いて何が起こっているかを確認するのに最適な場所です。 ですから、先に進んでテーマの内部を見て、そこにあるものを理解し始めることができるかどうかを確認してください。

通常、ここには3種類のファイルが表示されます。 物事を単純化するために、これらのファイルをWebサイトの「本体」のように考えてください。 PHPファイル（.php）には、HTML（骨）とPHP（すべてを脳、データベースに接続する神経）が含まれています。 スタイルシート（.css）はサイトのスキンであり、サイトがどのように見えるかを決定します。 JavaScript（.js）はサイトの筋肉と考えることができ、通常は可動部分を制御し、サイトがどのように使用され、相互作用しているかに反応して応答します。 さあ、少し探索してください。 コードがサイトのどのセクションに対応しているかを示す説明的な言葉はありますか？ または、サイトの視覚的な側面のいくつかを説明する言葉ですか？

WordPressがデザイナーと開発者の間のギャップを埋めるもう1つの優れた方法は、物事を細かく分割して、編集するセクションを簡単に識別し、サイトの一部だけに変更を加えることができることです。 WordPressは、Webサイトの機能からテンプレートからコンテンツを分離します。 また、ファイル間で一貫した構造を使用しているため、サイト間を移動しながら、編集するファイルを簡単に見つけることができます。

恐れることはありません

他の人を訓練するときに私が最もよく使用するフレーズの1つは、「恐れることはありません。私が修正できない方法でこれを台無しにすることはできません」です。 元に戻せないものは世界にほとんどありません。 もちろん、編集が計画どおりに進まなかった場合に、簡単に元に戻すことができるツールを利用することをお勧めします。 Flywheelが提供する2つの優れたツールは、ステージング機能と、バックアップを簡単に作成してそこから復元する機能です。 コードに飛び込むことにした場合は、ステージングサイトを使用して編集を行ってください。 これにより、ライブサイトを危険にさらすことなく、必要に応じてステージング環境を簡単にリセットできます。 ライブサイトに誤って変更を加えた場合でも、恐れることはありません。最新のバックアップを復元するだけで、5分以内に元の状態に戻ります。 これらのツールを使用すると、コードを編集するための簡単な手順を開始できます。

ヒント：コードにもう少し慣れたら、セキュリティの第3層として、バージョン管理（GitまたはSVN）を検討し、コードが公開される前に変更を追跡してグリッチをキャッチすることをお勧めします。

どこから始めますか？

最初の精神的なハードルのいくつかに対処したので、どこから始めるべきですか？ デザイナーの場合、コードの操作を開始する最も自然な場所はCSSです。 前に述べたように、これは私たちのサイトのスキンです。 サイトの外観とレイアウトを制御します。 CSSを分析する前に、CSSがHTMLでどのように機能するかを理解する必要があります。 HTMLには、コンテンツを区別するためのさまざまなタグがあります。 これらのタグは、タグとそのコンテンツに関する追加情報を提供する多くの異なる属性を持つことができます。 これから説明する2つの属性は、 idとclassです。 これは、3つの異なるHTMLタグを含むコードスニペットです。 すべてのタグにIDまたはクラスがあるわけではないことに気付くでしょう。 これらは必須ではありませんが、同じページ上のタグを互いに区別するのに役立ちます。 IDは、ページで1回だけ使用する必要がありますが、クラスは繰り返し使用して複数回使用できます。

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

したがって、タグ<article> 、 <p> 、および<span>があります。 ArticleのIDはpost-1で、インセットのクラスがあります。 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です。 これらのリソースはそれぞれ少し異なります。 一般的なアプローチを提供し、基本的なアプローチを学ぶものもあれば、ユースケースに焦点を当て、特定のタスクに関する特定のコードスニペットまたはチュートリアルを提供するものもあります。 誰もがさまざまな方法で学習するので、自分に合ったものを見つけてください。

「IntheWild」のコードを見てください

「内部を覗く」方法の1つについては前に説明しましたが、別の方法は、ブラウザに組み込まれている開発ツールを使用することです。 ほとんどのブラウザでは、Webページのコードを調べてみることができます。 先に進み、このテキストを右クリックまたはCtrlキーを押しながらクリックして、[検査]または[要素の検査]を選択します。 HTMLタグと対応するCSSを表示するウィンドウがポップアップ表示されます。 プロパティを編集して、変更したときにどのように表示されるかを確認することもできます。

Googleはあなたの友達です

疑わしいときは、Google！ 真剣に、コードについて書いている人は非常に多いので、誰かがあなたがやろうとしていることについて書いている可能性があります。 だからグーグルとあなたが見つけたものを見てください。 あなたが目指していることを達成するためのいくつかの方法さえあるかもしれません、そしてあなたはあなた自身のスタイルと状況を与えられた最良の方法を見つけることができます。

それを実践する

これらの新しく見つかった開発者スキルのいくつかを利用するために、テーマを最初から作成する必要はありません。 小さく始めることをお勧めします。 色を変更したり、別のフォントを使用したりするなど、既存のテーマに微調整を加えてみてください。 前に述べたように、エディターを使用するよりも、テーマのコードを編集するためのより良い方法があります。 テーマは更新を提供します。テーマファイルを直接編集した場合、テーマの更新によって変更が上書きされます。 既存のテーマにカスタムコードを追加する最も簡単な方法の1つは、プラグインを使用することです。 そして、CSSに最適なプラグインは、JohnReganとDannyvanKootenによるSimpleCustomCSSです。 これにより、テーマファイルを台無しにすることなく独自のCSSをサイトに追加でき、WordPressサイトに小さな視覚的な変更を加えるのに最適です。

ワークフローを形式化する

ダッシュボードを介してコードの小さなスニペットを操作することに慣れたら、開発タスクのより正式なワークフローが必要になります。 開発者のワークフローは、非常に単純なものから非常に複雑なものまでさまざまです。 より複雑なワークフローには十分な理由がありますが、基本から始めます。 ダッシュボードの外部でコードを編集する場合に必要な2つのものは、コードエディターとFTPプログラムです。これにより、サーバーにファイルを配置したり、サーバーからファイルを取得したりできます。 エレガントなテーマには、コードエディタを比較したすばらしい投稿があります。 どのエディタがあなたに適しているかを判断しようとするとき、それは優れたリソースです。 一部のコードエディタにはFTPが組み込まれていますが、無料または低コストのオプションもたくさんあります。

ヒント：WordPress開発者のワークフローに最適なもう1つのツールは、ServerPressのDesktopServerです。 これにより、数回クリックするだけで、ローカルでコンピューター上にWordPressサイトをセットアップして構築できます。

子テーマを作成してみてください

より正式な編集環境ができたので、子テーマを作成してみてください。 これは、別のテーマに基づくカスタムテーマです。 サイトを機能させるには、両方のテーマをサイトにインストールする必要があります。また、子テーマがアクティブ化されている必要があります。 子テーマに必要な2つのものは、 style.cssファイルとfunctions.phpファイルです。 Genesisフレームワークは、この機能を非常にうまく活用しており、開発スキルのいくつかを構築し始めるのに最適な場所です。 Carrie Dilsは、Genesisでの子テーマの使用に関するいくつかのlynda.comコースを実施しました。 これは、デザイナーから開発者への旅の素晴らしい次のステップです。

落胆しないでください

コードの学習に飛び込むと、ある時点で落胆するのは当然ですが、そうはなりません。 誰もがそこにいました。 経験豊富な開発者でさえ、何も知らないと感じる日があります。 これらのこぶを乗り越えるための最良の方法のいくつかは、同じ旅で他の人とのつながりを保つことです。 Twitter、Slack、WordPress.orgフォーラムへの参加はすべて、接続を維持するための優れた方法です。 レイアウトのようないくつかのブログをフォローしてください。そうすれば、関係を築き、その過程で学ぶことができます。 私の開発の旅で私を助けてくれた私のお気に入りの人の中には、キャリー・ディルズ、トム・マクファーリン、ジョン・リーガンがいます。

ここからどこへ行けばいいの？

HTMLとCSSをうまく理解できたら、次の論理的なステップはJavaScriptです。または、さらに一歩進んでWordPress Codexを掘り下げて、WordPressコンテンツの一部をコードに取り込む方法を学ぶことができます。 ハッピーコーディング！