web-dev-qa-db-ja.com

CSSとテーマ開発を学び始める方法は？

CSSとWordPressのテーマ開発を学ぶためのあなたの提案は何ですか？

私は4年以上前からWordPressを使ってきましたが、CSSやテーマデザインに慣れたことは一度もありません（あちこちで微調整できますが、実際にはそれほどうまくいきません）。これらができるようになりたいのですが、どこから始めればいいのかわかりません。私が遭遇したガイドのほとんどはWPに特化したものではありません、そして私は私が余分な資料を経験することを恐れています。

ありがとう

themestheme-developmentcss
1
Tal Galili

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

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

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

次に、多層ネットワークアーキテクチャを使用します。PHPはサーバー上で実行され、HTMLとCSSはサーバーから提供されますが、クライアントコンピュータのブラウザで読み取り/処理されます。

そのため、たとえテーマが単純に見えるかもしれないとしても、WPを使うと、これはすべて交換可能に混ざり合います。

PHPは "テーマ"（PHP）ファイル内にあり、HTMLはそれらのテーマファイル内で生成され（そして同様に）、CSSはCSSファイル内にあります。

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

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

頑張れ。 4年経ってもこれまで理解できなかった場合は、自分で教育を受けてください。私は http://oreilly.com/catalog/9780596101978 のような本をお勧めします。

CSS自体は、HTMLと同様にW3Cによって非常によく定義されています。そこに定義は非常にユーザーフレンドリーではありませんが、それは正しいので、いくつかであなたも同様にたくさん学ぶことができます。 w3schoolsも同様にNiceで作られています（そして何年もかけてこのサイトはどうにかして作られていますが、少なくともいくつかの頭脳がその背後にあるように見えます）。 HTML/CSS、つまりWWWはあなたの情報源をつかむ：D

PHPにはphp.netがあります。ワードプレスにとっては、それは常に変化し、あなたの個人的なキャリアのリソースを消費するので、あまりそれに集中しないでください。とにかく発展し続けているので、あなたにぴったりのものを探し、ワードプレスに集中しすぎないでください。

5
hakre

CSSに関する限り、この分野にはWordPress特有のものはそれほど多くありません。 w3schools にアクセスして、チュートリアルを読んでください。テーマの作り方を学ぶことに関して、私がお勧めできる2つの最良のリソースは、コーデックスの テーマ開発者セクション とデフォルトのテーマ（今のところ、 20）。 テーマ開発 ページと テンプレート ページを読んで、良い結果を得てください。基本的な理解次に、開発者向けドキュメント（特に テンプレートタグ と を使用して、デフォルトテーマのソースコードを一読してください。参照として関数リファレンス ページ）。

これがお役に立てば幸いです。

3
John P Bloch

あなたがすることができる最も重要なことはあなたが一緒に遊ぶことができるローカルのWordPressインストールを作成することです。 （説明： Mac | Windows | Linux ）これを使うと、他の人が見なくても実験して間違いを犯すことができます。

最も早い習得方法は、既存のテーマを変更し、さまざまな フレームワーク用の子テーマを作成することです 。その中で、私の個人的なお気に入りは Thematic です。最初から始めるのは非常に難しいので、これらのリソースは実用化に役立ちます。

CSSを学ぶには、 w3schools.com はtheリソースです。多くのデザイナーにとって、 Firebug は不可欠なツールです。それなしで家を離れるな！

2
kylan

ステップ1：しっかりした親のテーマの子テーマを作成します。 A.テーマ別テーマをインストールしてください。 B.子供のテーマを作るための指示に従います。 （thematic-sample-child-themeフォルダをthematicフォルダの外側、wp-content/themesの下に移動します。これで、/ 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;
}

色とフォントを変更するだけで開始するのが最も簡単です。それから、角の丸みや浮動小数点のdivなどの空想的なものに入ることができます。

ステップ3：/ wp-content/themes/thematicディレクトリにある元のstyle.cssをガイドとして使用してください。本当にそのstyle.cssを勉強してください。各規則を理解しやすくするために、 http://reference.sitepoint.com/css のような参照を使用してください。

子供のテーマを使えば、あなたは好きなだけ変更することができます。たとえば、上記のように#brandロゴのみを変更するものもあります。あなたがもっと試みるほど、あなたはもっと学ぶでしょう。

2
Marjorie Roswell

http://digwp.com/ 彼らの本は本当に便利なので理解しやすいです。彼らのブログ！

0
user3401

Kylanは、FirebugをFirefoxについて言及しました。

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

いくつかの格好良いテーマをダウンロードしてからFirebugを使ってそれらを探りましょう。私が始めたとき、それは私をたくさん助けてくれました。

0
Nohl