WordPressの子供向けテーマ開発の手引き

WordPressの開発者が子テーマを使い始めている理由はいくつかあります。彼らはあなたに別の既存のテーマの上にユニークなレイアウトをカスタマイズする機会を与えます。これは自分自身のテーマを構築して遊んでみたい初心者に最適です。.

さらに、多くのプレミアムデザインは時間の経過とともに新しいアップデートをリリースします。コアテーマファイルに変更を加えている場合、それらは更新を実行するときに上書きされますが、子テーマは別々になっていてきれいに隠れています。これは、既存のプレミアムテーマを構築し、その過程での時間を節約できることを意味します。.

このガイドでは、WordPressの子テーマを作成するための基本的な概念と、それがなぜそんなに良いアイデアなのかを紹介します。.

入門

子供のテーマは見かけほど難しくありません。親テーマを使用しないことの利点は、すべてのHTML / CSSを最初から作成する必要がないということです。子テーマはあなたが含むテンプレートファイルを自動的に使用します。 sidebar.php または footer.php. しかし、それらが見当たらない場合、あなたの子テーマはその親から同じファイルを引っ張ります。.

この機能は、既存のテンプレートをカスタマイズするための非常に大きな自由を提供します。クリスマスや新年のデザインパターンを追加するなど、特別なイベントのためにあなたのウェブサイトの周りのエリアを修正するのにも最適です。.

必要なファイル

WordPressで子テーマを設定するには、単一の.cssスタイルシートしか必要ありません。また、新しいディレクトリを作成する必要があります。 / wp-content /テーマ あなたの子供のテーマを収容するフォルダあなたに注意を払う ではない このフォルダを親テーマの中に作成しますが、それと並行して同じテーマのディレクトリに作成します。.

多くの場合、開発者は新しいCSSファイルと同じフォルダにfunctions.phpとscreenshot.pngを含めます。スクリーンショットはあなたのWordPress管理者パネルに表示され、機能テーマファイルはたくさんのバックエンドの変更に使用することができます。.

しかし今のところ私達は主要なスタイルシートに焦点を合わせるべきです。これは一般的に呼ばれています style.css そして、重要なメタ情報を持つコメントヘッダを含みます。親のディレクトリ名を含めると、テーマは子としてのみ表示されるため、これは重要です。以下はヘッダコメントの例です。

 / *テーマ名：Twenty Eleven ChildテーマURI：http：//example.com/説明：Twenty Elevenデザインの子テーマAuthor：Jake Rocheleau作者URI：http：//www.hongkiat.com/blog/テンプレート：twentyelevenバージョン：0.1 * / 

の値 テンプレート 付随する親テーマのディレクトリ名になります。それ以外のすべての他のタグは標準のWordPressテーマに精通しているべきです.

すべての親PHPテンプレートが使用されますが、元の親のstyle.cssは ではない 自動的にインポートされます。元のスタイルを使用したい場合は、それを子供のstyle.cssドキュメントの先頭に追加する必要があります。下記はWP Twenty Elevenテーマを含む例です。.

 @import url（ "…/twentyeleven/style.css"）; 

新しいスタイルを設定する

テーマにCSSルールを適用するのは、オリジナルを編集するのと同じくらい簡単です。どの要素をターゲットにする必要があるかがわかっている場合は、自分の子テーマに同じセレクタを使用します。.

リンクや段落を本当に簡単に変更してデモすることができます。さまざまな要素をターゲットにするために、元のTwenty Elevenテーマのコードを使用しました。時には、古いデザインを上書きするために、より具体的なセレクターを使用する必要があります。.

 ボディパディング：0 1.4em; #page margin：1.667em auto;最大幅：900ピクセル。 色：＃5281df;テキスト装飾：なし。フォントファミリー：カリブリ、タホマ、アリアル、サンセリフ。 a：フォーカス、a：アクティブ、a：ホバーtext-decoration：underline;  

これらの変更で、私は全体的な体の大きさを減らして、そしてまた端からいくらかのパディングを取り除きました。これらのセレクターはすべて、元の.css文書にリストされています。異なるフォントスタックと色の選択を含むすべてのアンカーリンクのいくつかのプロパティも変更していることは注目に値する.

！重要なこと

CSSには、他のスタイルよりも優先されるという特別な宣言があります。構文は次のように表示されます。 !重要 感嘆符で始まり、CSSプロパティの末尾で終わります。あなたがあなた自身のカスタムルールを上書きしている親テーマからのカスケードスタイルがあるならば、これは必要です.

 色：＃5281df！重要です。テキスト装飾：なし。フォントファミリー：カリブリ、タホマ、アリアル、サンセリフ。  

上に私は自分のオリジナルの変更をコピーして、重要な条項でアンカーテキストの色を編集しました。これは、同じセレクタ深度の他のすべてのスタイルよりも優先されます。より定義された要素（のような #access li：ホバー> a）は通常、独自のスタイルを保持します 色 私たちのオリジナルのセレクターから継承されたものです。この場合、私たちの親テーマはアンカーリンクにfont-familyプロパティを設定しないので、継承の問題には遭遇しません。.

あなたがあなたの変更を固執させることに問題があるならば、あなたの財産声明の終わりにこれらの重要なマークの1つを飛び出させてみてください。これはすべての継承問題を完全に解決するものではありませんが、思ったよりもずっと頻繁に便利になります。.

クローニング機能.php

メインスタイルシートとは異なり、あなたの子供のテーマは自動的にその親の機能をインポートします。つまり、新しいテーマでアクティブにするためにPHPコードをコピーする必要はありません。それでも、もしあなたが関数のいくつかを再定義したいのなら、あなたは別のfunctions.phpを構築しそしてあなたの新しいコードでどんな変更でも書くことができます.

例として、テンプレートの起動時にいくつかのJavaScriptファイルを解析する関数を作りました。これにより、jQueryスクリプトとSWFObjectスクリプトの古いバージョンが削除されます。 wp_head エリア.

 //ロード機能のためにjsファイルをキューに入れるmytheme_js（）if（is_admin（））return; wp_deregister_script（ 'jquery'）; wp_register_script（ 'jquery'、 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'）; wp_enqueue_script（ 'jquery'）; wp_deregister_script（ 'swfobject'）; wp_register_script（ 'swfobject'、 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'）; wp_enqueue_script（ 'swfobject'）; add_action（ 'init'、mytheme_js）; 

あなたが親のfunctions.phpからコードをインポートしているならば、あなたは異なる関数名を使わなければならないことを指摘しておくべきです。そうでなければ、PHPは致命的なエラーを出し、あなたは間違いを直すためにサーバーにFTPしなければならないでしょう。.

テーマファイルの操作

テーマの最も広範なカテゴリは、カスタムレイアウトとページタイプの構築です。デフォルトでは、あなたの子供のテーマはその親のテーマファイルをすべて継承します。しかし、あなたは新しい子テーマファイルを作成するオプションを持っており、WPはそれらを「プライマリ」テンプレートとして登録するでしょう。.

例えば archive.php そして index.php アーカイブのアーカイブとホームページの画面をそれぞれ表示するために使用されます。 HTMLを編集する必要のある変更がある場合は、親ファイルを複製して子のテーマディレクトリで編集した方が安全です。.

カスタムページテンプレート

テンプレートファイルについて話している間に、私はWordPressの機能の一部を紹介したいと思います。新しいコンテンツを作成するときに管理パネルから選択できるページと投稿のテンプレートを作成できます。親テーマが新しいカスタムテンプレートファイルを持っていなくても、WordPressはまだ子の代わりに子を使用します。 page.php または single.php.

最初にpage-offer.phpという名前の新しいファイルを作成します。これになります “特別なオファー” 他のすべてのものとは異なるテーマのプロモーションページ。ここでは、元のページコードをコピーすることも、テーマを完全に最初から構築することもできます。 WordPressにこの新しいテンプレートについて知らせるために必要な唯一のコードは、PHPでのコメント設定です。.

この方法に代わるもう1つの方法は、固有のID番号に基づいて名前が付けられたカスタムページを作成することです。そのため、デフォルトをロードする代わりに archive.php 著者ページの場合は、次のようなファイルを作成できます。 著者ID.php IDはユーザーの一意のWordPress ID番号です。このシステムはあなたのサイトの各作者のために新しいテンプレートファイルを作成する必要があるのでもっと負担がかかりますが.

これら2つの手法を他のテンプレートファイルと組み合わせることができれば、さらに便利になります。特にカテゴリとタグは、独自のテーマファイルを使用してうまく機能します。また、コンテンツの添付ファイルにリンクしている場合は、MIMEタイプごとに異なるテンプレートレイアウトを検討する必要があります。簡単なJPEG画像の添付ファイルとして、以下のテンプレート階層を含めました。

• image.php
• jpeg.php
• image_jpeg.php
• attachment.php

便利なWordPressツール

WordPress自体には、カスタマイズをすべて管理できる多用途のプラグインシステムがあります。子供のテーマはとても新しいので、サードパーティのリリースの猛攻撃は（まだ）ありません。しかし、開発時間を少し短くするためにチェックアウトできるツールがいくつかあります。.

明白な言及は、最新のWordPress 3.xバージョン用に構築されテストされたワンクリックチャイルドテーマプラグインです。それはあなたの管理者にメニューリンクを追加します “テーマ” 現在アクティブなテーマを使用して自動的に子供を作成するためのセクション。あなたがFTPをめちゃくちゃにしたくないし、いくつかの新しいアイデアで遊んで探しているならこれは素晴らしいです.

管理パネル内でこれらのファイルを編集する予定の場合は、より明確な構文の強調表示もお楽しみいただけます。これはWordPressではデフォルトでは提供されていませんが、高度な機能のためにAdvanced Code Editorをインストールすることができます。これにより、PHPコードブロックとHTML / CSSを介したワーキングが、ずっと管理しやすくなります。.

追加のリソース

このガイドのすべてのヒントとともに、テーマ開発者にとって重要な一連のリンクを共有したいと思います。このテーマについてもっと深く学ぶためにあなたがチェックアウトできるたくさんの素晴らしい記事と無料の子供のテーマがすでにあります。これらのリソースの素晴らしいコレクションを以下に追加しました。

• 8つの無料の21の子テーマ
• ワードプレスオンラインコーデックス»子テーマ
• フックとフィルタを使ってWordPressの子テーマを作成する方法
• 子どもをテーマにした言葉
• WordPressで子テーマを作成、変更、および使用する方法

結論

この記事を読んだ後は、WordPressの子テーマを構築するプロセスがより明確になることを願っています。子テーマがCSSとPHPの両方のテンプレートを親から継承する方法を説明しようとしました。さらに、特定のファイルを操作して独自のテーマを作成するのはとても簡単です。.

.