CSSとテーマ開発の学習を開始する方法は？

wordpress.stackexchange https://wordpress.stackexchange.com/questions/288

  •  16-10-2019
  •  | 
  •  

質問

CSSとWordPressテーマ開発を学習するためのあなたの提案は何でしょうか？

私は4年以上WordPressを使用していますが、CSSやテーマデザインに本当に満足したことはありませんでした（あちこちで微調整することができましたが、それはあまりしていません）。私はこれらをすることができるようになりたいと思っていますが、どこから始めればいいのかわかりません。私が出会ったほとんどのガイドはWP固有ではなく、冗長な資料を調べるのではないかと心配しています。

ありがとう

役に立ちましたか？

解決

まず、ものによって異なります。 WPはCSSではなく、CSSはWPでもありません。しかし、WPテーマはCSSを利用しています。したがって、CSSについて学んだ場合、基本的に間違っているわけではありません（CSSで良いことは、間に一般的です すべて ウェブサイト）。他の部分はHTMLです。そして、あなたはPHPを持っています。

したがって、これらは互いに使用される3つのコンピューター言語です。

  • プログラミング言語：PHP
  • 構造言語：HTML
  • ドメイン固有の言語：CSS

次に、マルチレイヤーネットワークアーキテクチャがあります。PHPはサーバーで実行され、HTMLとCSSはサーバーによって提供されますが、クライアントコンピューターのブラウザによって読み取り /処理されます。

したがって、テーマがシンプルに見える場合でも、WPではこれがすべて交換可能になり、あなたは自分で再び物を分解する必要があります。

PHPは「Theme」（PHP）ファイルにあり、HTMLはこれらのテーマファイル内で生成されます（および同様です）。CSSはCSSファイルにあります。

だから基本的に、あなたは自分が学びたいことを自分自身に決める必要があります。ほとんどのリソースは、PHPとHTML/CSSの間で異なります。

あなたの質問に基づいて、私はあなたにCSSを学ぶことしか提案できません。カスケードを完全に理解した後、それは非常に強力です。 HTMLフォアハンド（PHPではなく、HTMLだけ）を知る必要があります。最終的には、CSSはWebサイトの視覚的表現にとって非常に重要であり、あらゆるWebサイトを飾るための電力ツールです。そのため、WordPressのテーマでさえ、すべてでそれを使用できます;）

頑張れ。 4年後まで理解していない場合は、教育をしてください。私は本のような本を提案します http://oreilly.com/catalog/9780596101978 これは自己教育に最適です（練習の隣）。

CSS自体は、HTMLと同様にW3Cによって非常によく描かれています。定義はあまりユーザーフレンドリーではありませんが、それは正しいので、いくつかの場合、そこにも多くを学ぶことができます。 W3Schoolsも同様に作られています（そして、そのサイトは何らかの形で長年にわたってそれを作っています。少なくともいくつかの脳はその背後にあるように見えます）。 html/css、それはwwwです、あなたのソースをつかんでください：D

PHPにはPHP.NETがあります。 WordPressの場合、それは常にあなたの個人的なキャリアのリソースを変えて消費しているので、あまり集中しないでください。とにかくよく保管されているので、あなたにとって良いものを探してください、WordPressにあまり焦点を合わせないでください。

他のヒント

CSSに関する限り、この分野にはWordPress固有のものはあまりありません。行きます w3schools チュートリアルを確認します。テーマの構築方法を学ぶ限り、私が推奨できる2つの最高のリソースはコーデックスのものです テーマ開発者セクション デフォルトのテーマ（今の時点で、20）。読んでください テーマ開発 ページと テンプレート 良い基本的な理解を得るためのページ。次に、開発者のドキュメントを使用して、デフォルトテーマのソースコードを読んでください（特に テンプレートタグ と 関数参照 参照として）。

これが役立ったことを願っています！

ステップ1：堅実な親のテーマの子テーマを作成します。 A.テーマのテーマをインストールします。 B.子供のテーマを作るための指示に従ってください。 （テーマサンプル - チルド - テーマフォルダーをテーマフォルダーの外側、WPコンテンツ/テーマの下に移動します。これで、/wp-content/themes/thematic、および/wp-content/themes/thematic-sample-を作成しました。 Child-Theme。C。後者のディレクトリを新しい優先テーマ名に変更します。D。外観画面に移動し、新しいテーマをアクティブにします。

ステップ2：styles.cssを編集し、CSSを実験します。 A.たとえば、追加： 

#primary, #secondary {
   background-color: #e8e8d6;   
   margin-right: 10px;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   padding:18px 0 0;
}

#branding {
    background: url(http://example.com/wp-content/uploads/2010/09/example.jpg) top left no-repeat;
}

色とフォントを変更するだけで始めるのが最も簡単です。そうすれば、丸い角、フローティングダイビングなどの豪華なものに入ることができます。

ステップ3：/wp-content/themes/thematicディレクトリのオリジナルStyle.cssをガイドとして使用します。本当にそのstyle.cssを研究してください。次のような参照を使用します http://reference.sitepoint.com/css 各ルールを理解するのに役立ちます。

子供のテーマを使用すると、好きなだけ変更できます。たとえば、上に示すように、#Brandロゴのみを変更するものもあります。試してみるほど、学習します。

あなたができる最も重要なことは、あなたが遊ぶことができるローカルWordPressインストールを作成することです。 （指示： マック | ウィンドウズ | Linux）これにより、世界の他の地域を見ずに実験して間違いを犯すことができます。

学習する最速の方法は、既存のテーマを変更し、さまざまなものの子供のテーマを作成することです フレームワーク. 。それらのうち、私の個人的なお気に入りはです テーマ. 。ゼロから始めるのは非常に難しいので、これらのリソースはあなたが地面に走るのを助けることができます。

CSSを学ぶために、 w3schools.com は 資源。多くのデザイナーにとって、 Firebug 不可欠なツールです。それなしで家を出ないでください！

キランはFirefoxのFirebugに言及しました。

それは、他の人がどのように自分のテーマを構築したかを見るための本当に素晴らしいツールです。

いくつかのクールなテーマをダウンロードしてから、FireBugを使用してそれらを探索します。それは私が始めたときに私をたくさん助けました。

これらの人たちは私を大いに助けてくれました（そしてまだそうしています） http://digwp.com/彼らのBookisは本当にハンドソンで理解しやすく、彼らのブログもそうです！

ライセンス： CC-BY-SA と 帰属
所属していません wordpress.stackexchange
scroll top