この記事はによって貢献されていますPSDtoWP.net
おそらく、ここから始めるのが最善でしょうwhy。 すべてのウェブサイトの約四分の一はWordPress、オンラインbloggingプラットホームで動く。 これにより、地球上で最も人気のあるオープンソースのコンテンツ管理システムの1つになります。
ウェブデザイナーの大多数は、代替案があるものの、まだPhotoshopを使用してウェブサイトを設計しています。 これは、ウェブサイトのデザイナーの多くは、応答WordPressのテーマにPSDファイルを変換する方法についての方法を見つける必要があることを意味します！
さて、これはかなり簡単に見えるかもしれません。 しかし、WORDPRESSのウェブサイトにPSDファイルを変換することは正確に簡単ではありません。 それはちょうどPhotoshopのスキルよりも多くを必要とします！ WORDPRESSで使用できる応答テーマにあなたのPSDファイルを有効にするためには、HTML、CSS、JavaScriptなどのフロントエンドのweb開発言語だけでなく、バックエンドプログラ
さて、whyが邪魔になったので、howに進む時間です！ どのように確かに容易ではありませんが、それはまだステップを理解するために非常に簡単な5で達成することができます！
ステップ1:ウェブデザインを作成する
既にサイトをデザインしている場合は、ステップ2にスキップします。
単にロゴを作成し、メニュー、サイドバー、フッター、コンテンツを一緒に置くよりも、ウェブサイトを作ることにもっとたくさんあります。 このパズルのピースは、最初の場所で作成する必要があり、この作成のプロセスは、誰もがそう簡単に行うことができるものです。
スポンサーメッセージ
あなたが作成するwebデザインは、フォームと機能の間の完璧なバランス、優れたユーザーエクスペリエンスに食料調達するwebデザインである必要があ
Research
見た目と機能の基準をうまく満たすwebデザインを作成するには、いくつかの深刻な研究を行う必要があります。 まず第一に、あなたの対象者層はだれであり、何があなたの対象者層がほしいと思うか。 これらは明らかにあなたの研究の重要な側面です。
スポンサーメッセージ
他から学ぶ
あなたが研究する必要がある網の設計のもう一つの面はあなたの競争相手が適用した技術である。 これらの競合他社は、あなたよりも確立されている可能性が最も高いので、あなたは確かに彼らが使用するデザインから多くのことを学ぶことがで あなたの研究を行って、あなたのウェブサイトがどのように見えるべきかについての良いアイデアを持っていたら、あなたは機能について考え始 どんな機能にあなたの網の設計に所有してほしいか。
ワイヤーフレーム
すべてを整理したら、紙の上にそれを取得します。 Draw&あなたが前方に移動するように視覚的な援助を持っているために、あなたのサイトをどのように見えるように想像するものをスケッチ！
デザイン
物理的なスケッチ/ワイヤーフレームの作成が完了したら、船長の椅子に飛び乗ってPhotoshopを起動する準備が整いました。 本格的に始める前に最初に行う必要があるのは、XXgridなどの列ベースのグリッドを使用していることを確認することです。 これはあなたのデザインが本当に整頓され、整列して見えるようになります！ これは美学のためだけではありません。 列ベースのグリッドを使用して整列したデザインを作成すると、HTMLとCSSを開発するフロントエンド開発者やフロントエンド開発者が、タブレットやスマー
次のステップに進む前に、PSDデザインファイルをレイヤーに整理しておく必要があることを覚えておいてください。
: PSDをスライスする
スポンサーメッセージ
あなたが完全に満足しているwebデザインを作成したら、それはクランチの時間です。 基本的にあなたが今する必要があるのは、PSDからWordPressへのプロセスです。
最近のウェブサイトはすべてHTML5とCSS3を使用して構築されています。 これらはXHTMLやCSS2よりもはるかに優れていますが、すべてのボタン、境界線、グラデーション、丸みを帯びたエッジ、および画像を使用して作成される他のすべての機能の代わりに、CSS3コーディングの機能部分として作成されるためです。 したがって、PSDファイルをスライスすることは、基本的には今だけPSDから背景画像をスライスする必要があります！
これを行うには、デザインの作成に使用したソフトウェアに応じて、PhotoshopまたはIllustratorのいずれかでファイルを開く必要があります。 デザイナーが自分の仕事を正しく行っていれば、フォルダとレイヤーを備えた構造化されたデザインファイルを作成し、必要なものを簡単に見つけるこ Webデザインを研究し、スライスする必要があると思う画像を探します。 これらは基本的にCSS3を使用して作成できない画像、通常はロゴと背景画像です。 ここで画像をスライスする方法をお読みください。
CSSを使用してこれらの背景画像を置き換えると、読み込み時間が大幅に低下します。 平均的なインターネットユーザーは長い読み込み時間に耐えることができないので、これはあなたのサイトに多くのユーザーを引き付けるでしょう！
ステップ3：HTML、CSS3、JavaScript（jQuery）を作成します
PSDファイルから画像をスライスしたら、HTML5とCSS3を作成します。 最初に行う必要があるのは、indexを作成する新しいフォルダを作成することです。htmlとスタイル。css。 また、imagesまたはimgというサブフォルダ（好きな方）を作成し、抽出した画像をこのフォルダに配置します。 JavaScriptまたはjsという別のフォルダを作成します。 これは後で行うため、すべてのJavaScriptファイルとjQueryファイルを適切にマークされた場所に保存できます。 すべてのフォルダ、ファイル、サブフォルダの作成が完了したら、HTML5とCSS3の構築を開始します。
HTML5
HTML5は、XHTMLとHTMLの両方の機能を持つ比較的新しい言語です。 この言語は、基本的に文書の基本的な構造を作成するだけでなく、ページのすべての要素を指定するために使用されます。 HTML5には、<header>、<nav>、<aside>、<footer>要素（およびその他）など、ウェブサイトのさまざまなセクションに個別の要素があり、普遍的に読みやすいきちんとした構造化された文書を作成することができます。 ここでは、HTML5についての記憶を学習または更新するために使用できる優れたリソースをいくつか紹介します。
HTMLリソース
W3Schoolsは、HTML5の基礎を学ぶための数トップのウェブサイトです。 この言語のすべての要素と属性は、簡単な学習体験のために作り、デモを使用して説明し、教えられています。
Mozilla Developer’s Section–人気のあるブラウザMozilla Firefoxの背後にある人々は、彼らのウェブサイト上で開発者のセクションを持っています。 このセクションを使用して、初心者でも高度なコーダーでも、そこにあるチュートリアルを通じてHTML5について多くのことを学ぶことができます。
スポンサーメッセージ
Web Design Tuts-このウェブサイトには多くの異なるHTML5チュートリアルがあり、そのうちのいくつかは無料であり、そのうちのいくつかは有料です。
W3–このウェブサイトは、ウェブの寿命を確保するために作成されたすべてのオープンウェブ標準の開発を担当しています。 ここでは、HTML5とその最新の開発のすべてについての詳細な情報を見つけることができます。
W3Validator–HTML5を完了したら、このvalidatorを介して配置します。 あなたのHTML5がw3open web標準を満たしているかどうかを教えてくれます！
CSS3
CSSはカスケードスタイルシートを指し、CSS3はこのフロントエンド言語の最新バージョンです。 CSS3は、HTML5を使用して作成された要素の裸の骨を取り、それらの形状、位置とスタイルを取るために使用されます。 これにより、すべての要素がサイトの全体的なデザインで確認される一貫したwebデザインを作成できます。 あなたはCSS3を使用したら、あなたのHTML5は、順番にそれが多くのより速くロードするだけでなく、それが検索エンジンによってより速くインデックス化されることを可能にすることができます、多くのクリーンで、よりよく構造化されることがわかります。 以下は、CSS3についてのあなたの記憶を学ぶか、リフレッシュするのに役立ついくつかのリソースです：
CSSリソース
W3CSS–W3は、CSS3チュートリアルと様々なCSS3セ これについての最良の部分は、すべてのチュートリアルでは、あなたが学んだことを適用することができます”それを自分で試してみて”ペー
CSS3を学ぶ–MozillaはFirefoxブラウザの作成者だけではありません。 また、CSS3に精通しているだけでなく、言語に関する知識を更新するのにも最適な場所です。
CSS WebデザインTuts–このウェブサイトは、あなたが通過することができますチュートリアルの全体の宝庫が含まれています。 これらのチュートリアルのいくつかは支払われる必要がありますが、他のものはまだ完全に無料であり、CSS3セレクタ、プロパティ、値について多くのことを教えることができます。
W3CSS–これはCSS3web標準を開発する非常にコミュニティであるため、このウェブサイトは、最新のCSS3ニュースで更新滞在するのに最適な場所です。 また、言語に関する技術情報を見つけるのに最適な場所です。
CSS Validator–これは、webサイトを公開する前にすべてのCSS3を実行するバリデータです。 これは、CSS3がW3によって設定されたweb標準を満たしていることを確認するためです！
レスポンシブデザイン
インターネットは創業以来長い道のりを歩んできました。 これは、スマートフォンやタブレットの出現、そして私たちの日常生活へのこれらのタイプの技術の拡散によるものです。 これらのデバイスの絶大な人気の結果として、インターネットの総ユーザーのかなりの部分は、平均的なラップトップよりもかなり小さい画面でウェブサ さらに、彼らは自分の指を使用して、カーソルを使用していないこれらのwebサイトと対話します。 したがって、現代のウェブサイトは、そこにあるさまざまなタイプのデバイスに適応できる必要があります。 これがレスポンシブデザインの出番です。 レスポンシブデザインを使用して、設計者は、それが上で表示されているデバイスの種類に基づいて、その全体のレイアウトを調整することができ
HTML5とCSS3の構築を開始する前に、新しいwebサイトにレスポンシブデザインを採用するかどうかを事前に決定することをお勧めします。 これは、webサイトのデザインの応答部分をコーディングするときに、CSS3メディアクエリを使用する必要があるためです。 これらのメディアクエリを使用すると、画面解像度ごとに異なるテクスチャとスタイルを定義できます。
固定幅を使用しないことを覚えて、代わりにパーセンテージを使用してください。 これは、あなたのメディアクエリ内で定義された解像度のためだけでなく、それらの間の解像度のすべてのためにあなたのウェブサイトを最適化 これは、今日出てくるスマートフォン、タブレット、コンピュータは非常に多くの異なるサイズ、したがって解像度を持っているので、あなたのウェブサイトのた
レスポンシブリソース
ここでは、あなたのメモリを更新したり、レスポンシブデザインと関連するすべてのコーディングについて学ぶために使用できるいくつかの素晴らしいリソースがあります。
Googleレスポンシブ–これはCSS3メディアクエリを使用してレスポンシブデザインに慣れていないあなたのための素晴らしいリソースです。
レスポンシブWebデザインの原則–レスポンシブwebデザインとアダプティブwebデザインの違いを理解するには、この記事を読んでください。 それはあなたが詳細に物事を理解するのに役立ついくつかの素晴らしい例を持っています！
流体グリッド–Ethan Marcotteによるこの優れた記事を使用して、流体グリッドとその使用方法について学ぶことができます。 記事に記載されている例を自分で使用してみてください！
Responsive front-end framework
CSS3メディアクエリに関する限り、ロープを学びたくない場合、または単に十分な時間がない場合は、代わりにresponsive front-end frameworkを使用してみてくださ グリッドフレームワークを使用する場合は、HTML5を使用して作成されたフレームワークをCSS3に接続するために、事前定義されたクラスとIdを使用するため、HTMLと同様にCSSに同じフレームワークを適用する必要があることに注意してください。 応答性のフロントエンドフレームワークを使用すると、確かにあなたのウェブサイトをはるかに高速に開発することができますが、欠点には、それはまた、
最も人気のあるフロントエンドフレームワークのいくつかは次のとおりです:
Bootstrap–この応答性の高いフレームワークは実装が非常に簡単で、追加のボーナスは、CDNを使用してウェブサイトの読み込み速度の影響も軽減することです。
LESS–これは、適応型レイアウトを作成できる応答型のCSSグリッドフレームワークではなく、適応型のCSSグリッドフレームワークです。
Foundation–これは、webサイトの読み込み速度への影響を最小限に抑えるために、ファイルサイズが絶対に小さいフロントエンドグリッドフレームワークです。
JavaScript(vs CSS3)
JavaScriptは現在、世界で最も人気のあるプログラミング言語の一つです。 これは、幅広いブラウザでサポートされていることと、jQueryなどのライブラリやnodeなどのバックエンドシステムが含まれていることによるものです。jsだけでなく、AngularJSのようなフレームワーク。 それは非常に多くの開発者がこのプログラミング言語によって誓うことも不思議ではありません！ しかし、最近では、JavaScriptの機能の多くがCSS3アニメーションに引き継がれ始めているため、JavaScriptは時代遅れになり始めています。
Javascriptリソース
W3–このウェブサイトで利用可能な優れたチュートリアルのおかげで、JavaScriptを初めて使用する場合は、これを開始するのに最適な場所です。
jQuery–JavaScriptの経験があれば、このようなライブラリの使用を開始して、より簡単にプログラムすることができます。 jQueryは、マイルで最も人気のあるJavaScriptライブラリです。
NodeJS–バックエンドシステムを好むが、同時にJavaScriptを愛する場合は、このウェブサイトをチェックしてください。
AngularJS–このフレームワークを使用してHTMLとJavaの強力な力を組み合わせ、いくつかの動的なビューを取得します。
あなたはおそらくまた、CSS3を使用することができますが、あなたのウェブサイト上の要素をアニメーション化するためにJavaScriptを使用して開始する前に、次のリソースをチェックアウトしてください：
CSS3アニメーション–もう一度私たちは私たちのCSS3チュートリアルのためにw3schoolsに目を向ける。 異なるCSS3アニメーションのすべてを理解するために、このウェブサイト上で利用可能なデモを熟読。
Mozilla Animations–Mozillaが提供している九つのサンプルと例でCSS3アニメーションの知識をさらに深めます。
ステップ四：WordPressのテーマファイルを構築
今、あなたは正常にHTML5、CSS3とJavaScriptにあなたのPSDデザインを変換していることを、それは主要な変換のための時間です：完全な応答WordPressのテーマにあなたのHTMLを回します。 あなたのテーマが実際に動作することを確認するために、WordPressのテンプレートの階層に従うことを忘れないでください。 一般的な順序は、ヘッダーで開始することです。php、インデックスが続きます。php、フッター。phpとスタイル。css。 あなたのウェブサイトのすべてのページのこれらの四つの型板を使用する。
テンプレート階層がどのように機能するかを完全に理解したら、HTMLファイルを分割し始める必要があります。 あなたはあなたのWordPressのインストールで見つけることができるthemesフォルダ、そのアドレスは/wp-content/themes/であるフォルダを作成することから始めることがで ファイルヘッダーを作成します。このフォルダ内のphp。 このファイルは、ドキュメントタイプと、メタ、タイトル、スタイルシート、javascriptなど、ページのヘッダーに属するすべての項目を宣言するために使用するものです。 これが完了したら、フッターを作成します。phpとあなたのHTML文書にフッター要素のすべてを貼り付けます。 Webサイトのデザインにサイドバーが含まれている場合は、sidebarという名前のファイルを作成します。phpも同様に、このファイル内の適切なコーディングのすべてを含めます。
これらのファイルであなたのウェブサイトのすべての要素の作成が完了したら、あなたのホームページの作成を開始する必要があります。 これを行うにはいくつかの方法があります。 たとえば、単にindexを作成できます。php、フロントページ。phpまたはページホーム。phpでは、これらのファイルのいずれかがあなたがやろうとしていることに適しているので、最終的な選択は完全にあなた次第です。 今、あなたはあなたのホームページのための三つのテンプレートのうちの一つを作成完了していること,のすべてを含めます.あなたが作ったphpファイル。 あなたの上、底および側面が準備ができているので、中間のあなたのホームページのHTML5を貼れば首尾よくあなたのウェブサイトのホームページを作成し あなたのウェブサイトのすべてのページのための同じプロセスに単に続き、次および最後のステップに進むことができる。
ステップファイブ：ワードプレス内蔵のタグと機能を使用してください
あなたが正常にあなたのワードプレスのテーマを作成したら、あなたは今、あなたが何かを変更したいたびにテーマファイルを変更するのではなく、管理者パネル内からあなたのウェブサイトを編集できることを確認する必要があります。 おそらく、管理パネルを介してすべてのコンテンツを編集可能にするための最も人気のあるWordPressの機能は、add_meta_box関数を追加することです。 単に各ページ上のコンテンツのメタボックスを設定し、あなたが行ってもいいです！
あなたのウェブサイトのコア機能を作成することは、WordPressを使用して非常に簡単です。 例えば、ウェブサイトにリンクなどの情報を表示することは、WordPressの機能を使用して簡単に行うことができます。 利用可能なすべての機能を確認するには、WordPressの機能リファレンスページを確認してください。
同様に、WordPressはまた、テンプレートタグを提供しています。 これらは本質的に機能そのものであり、唯一の違いは、それらをより効率的にする特定のテーマのために特別に作成されたということです。
WordPress menu
ウェブサイトの管理パネルにログインすると、管理パネルを使用して編集する必要がないように、メニューと外観のメニュー項目を変更したいと思 これは、WordPressを使用しているという事実のおかげでかなり簡単です、あなたがする必要があるのは、テンプレートファイルのメニューリストをPHPの1行に置
内部ページのヘッダーまたはフッターが異なる状況がある可能性があります。 この機能をwebサイトに追加するには、条件付きタグを追加するだけです。 これにより、選択したページまたは投稿に異なるコードを適用できます。
WordPressウェブサイトが開発サーバー上で起動して実行されたら、ライブサーバー上で取得するだけです。 ここでは、WordPressサイトを段階的に移動する方法を非常に詳細に説明する記事があります。 単に提供されるすべての六つの手順に従うと、あなたのウェブサイトを起動し、時間がないのライブサーバー上で実行されています。