WordPressのチャイルドテーマ入門

  • WordPress
  • 更新:Jul 27、2013

だから、あなたはそれがWordPressの世界であなたの微調整を始めていると想像し、あなたは多くの素晴らしいテーマを見つけました。 プレミアムテーマもたくさんありますが、そのほとんどは価格に見合った価値があります(プロ仕様の外観とコード用の本)。 そして、あなたが見つけるほとんどのテーマは とても近いしかし、まったくあなたが望むものはありません。 メニューバーを少し動かすこと、フォントを置き換えること、新しいテキストブロックを追加することは良いことでしょう。

まあ、これがおなじみのようであれば、このガイドはあなたのためです。 ここでは、子テーマの世界に飛び込みます。ここでは、購入した素晴らしいテーマを壊したり、元に戻せないため将来の更新を失ったりすることなく、必要なことはほとんど何でもできます。

テーマファイルを変更せずに外観を編集する

簡単に言えば、これはChildテーマのテーマです。元のファイルを変更せずにカスタマイズします。 あなたが明示的に言っていない限り、子供のテーマは基本的にあなたのメインテーマ(親)と同じ機能と外見を持ちます。

それには少なくとも2ファイル、style.cssとfunctions.phpファイルが含まれますが、他のすべてのファイルは親テーマから取得されますので、親ファイルを使用する新しいファイルを子テーマディレクトリに作成しない限りです。

ここでは多くの可能性がありますが、主な利点は、元のテーマに簡単に戻ることができることと、全く異なるフォルダで行われるため、編集内容を失うことなくメインテーマを更新できることです。

手を汚してみましょう

だから最初のステップは、/ wp-content / themes /フォルダの下に新しい子テーマディレクトリを作成することです。 それを "Twenty-Child"と呼んで、基本的なstyles.cssファイルを作成しましょう:

/ *テーマ名:20の子供のテーマURI:http://www.webrevenue.co説明:子供のテーマを今すぐ学習する著者:Rochester Oliveira作者URI:http://www.webrevenue.co/author/rochester/テンプレート:twentytwelve * / / *メインテーマCSSファイルを呼び出す* / @import( "../ twentytwelve / style.css"); / *下に必要なものを追加する* /

パラメータは(省略可能な他のパラメータの中でも)次のとおりです。

  • テーマ名:テーマ選択画面で表示される名前
  • テーマURI:そこに表示されるリンク
  • 説明:これは何かを覚えておくための簡単な説明
  • 著者:誰が子供のテーマを作成した
  • 著者URI:著者のサイトにリンクしたい場合
  • テンプレート:メインテーマフォルダ(メインテーマとは異なるテーマを使用する場合は、このパラメータを置き換えます)

このコードを追加すると、WP管理>外観>テーマの下に子テーマが表示されます。 これを今すぐ選択することができ、完了したすべての変更はサイトに表示されます。

子テーマの編集101

あなたがゼロのCSS知識を持っているなら、これは役に立たないかもしれませんよね? 違う! CSSは実際には非常に簡単で、多くのスニペットがあります。 ここでは、カスタマイズに役立つ簡単なヒントをいくつか紹介します。

#1 Firebugをインストールする

多くの人がChromeとSafariを愛しています(私もそうです)が、私にとってはFireFoxは開発の方がはるかに優れています。 ですから、もしあなたがそれを使いたいのであれば、現在の要素でアクティブなすべてのセレクタを理解するのに最適なツールである、firebugをインストールすることをお勧めします。

インストールしたら、F12を押すか、ページのどこかを右クリックして "Inspect Element"を選択します。 現在のページのHTMLとCSSの新しいウィンドウが表示されます(そして、他の多くのタブが便利です。後ほど説明しています)。

CSSボックスでは、現在の要素に適用されているすべてのCSSルールが上から下に表示され、上にはさらに特定のルールが表示されます。 それはクールですが、この情報で何ができるのか見てみましょう

#2 CSSの特異性(セレクターウェイト)

各CSSルールにはセレクタ、プロパティ、および値があります。 しかし、ブラウザーが同じ要素に影響を与える2以上のルールを見つけたら、どちらが適切かを選択する必要があります。 私たちは通常、何が考慮されるかを理解するためにこの "ルール"を持っています:

  • ! 重要な宣言は他のものを上書きする
  • インラインCSSは何も上書きしません! 重要なルール
  • 100ポイントに相当するID(#header、#footer、#container ...)
  • 10ポイントに相当するクラス(.main、.nav、.box)
  • 1ポイントに値するタグ(body、div、p、a)
  • ユニバーサルセレクタと疑似クラス(*、:hover、:after)は0相当の価値がありますが、

さて、これをよりよく理解するための例を見てみましょう。 サイトのヘッダーを右クリックすると、表示される最初のCSSが次のように表示されます。

.site-header {パディング:1.71429em 0; }記事、脇見、詳細、figcaption、図形、フッター、ヘッダー、hgroup、nav、section {display:block; }

最初のセレクタには10ポイントがあり(クラスであるため)、2番目のセレクタにはそれぞれ1ポイントがあります(コンマは異なるセレクタを分離するため)。 もしあなたが#header divのようなものを持っていたらセレクタが確かに最初に現れるでしょう。

なぜこれはとても重要なのですか?

CSSファイルを編集せずにメインテーマを編集するには、メインテーマで定義されているルールよりも多くのポイントを持つルールを常に使用する必要があります。 そして、あなたはこれに精通して簡単なコードを使用することができます。 たとえば、このプロパティを上書きするには:

.site-header {パディング:1.71429em 0; }

これをあなたの子供のテーマCSSに追加することはできますが、次のようにしないでください:

.site-header {パディング15px 0! 重要; }

これは悪いコードなので、たとえば、1ページで変更する必要がある場合は、再度上書きするのが難しくなります。 あなたはこれを簡単に使うことができます:

body .site-header {パディング:15px 0; }

このセレクタには元の11より大きい10ポイントがあるため、このコードが適用されます。

#3関数を有効に活用する

子のfunctions.phpファイルは、元のファイルにADDITIONで読み込まれる唯一のファイルです。 それはWPチームが行うスマートな回避策です。オリジナルの機能を維持して独自の機能を追加することができます。 キャッチは、子のテーマ関数が最初に読み込まれ、関数を宣言するときに競合を避けるために、テーマ開発者は次のようなことをしなければならない(MUST)

if(!function_exists( 'top_menu')){function top_menu(){//ここでクールなコード} add_action( 'wp_head'、 'top_menu'); }

子テーマファイルで関数を定義すると、元の関数が上書きされる可能性があるためです。 テーマ開発者がこの方法でこれを行わないと、IfいPHPエラーが発生します(同じ関数が2回作成されるため)。

#4いくつかのCSSプロパティを学ぶ

あなたはCSSを使って隠すことができることを知っていましたか? 右のセレクタを見つけるためにFirebugをインストールする必要がありますが、このコードを追加することでアイテムを非表示にすることができます:

本文a {ディスプレイ:なし}

これをさらに複雑にするには、小さなテキストしか追加できないため、値札の後ろに「On Sale!」というテキストが必要な場合、たとえば次のコードを使用できます。

.price del:after {color:red; コンテンツ: "On Sale!" }

どう思いますか?

このガイドについてどう思いますか? あなたは子供のテーマを使用することを検討しますか? あなたはすでにそれを使用していますか? 下記のコメント欄を使用してお知らせください。

ロチェスターオリベイラについて

私はブラジルのイタジュバ(MG)のウェブデザイナー兼起業家です。 あいまいなトピックについて書くこと、およびいくつかクールなことをすることが大好きです。

接続します。