あなたはあなた自身のブログを始めたいが、あなたはしたくない既存のデザインを使用して粘着性があります。独自のテーマを作成するのは気が遠くなる可能性がありますが、いくつかの支援があれば、すぐにブログにユニークなデザインを作成できます。この投稿は、利用可能な最も人気のある（および無料の）ブログソフトウェアであるWordPressを使用して、すべてをまとめるのに役立ちます。
WordPressテーマを作成すると、サイトのルックアンドフィールを作成する前に、PHPコード（WordPressのプログラミングを使用するプログラミング言語）をまとめる必要があるため、ゼロから始めるときはかなりの作業が必要です。これらのファイルを事前に作成したファイルに加えて、WordPressサイトに必要な状態に見えるようにするために必要なCSSの骨格構造を提供することで、トラブルを節約します。 PHPコードはに基づいていますイアン・スチュワートの仕事、しかし、WordPress 3.3.1のために更新されました。あなたが始める準備ができているなら、ここにあなたが必要とするものがあります：
WordPress、インストールされ、準備ができています。テーマ開発中に、PHPとWordPressがインストールされているローカルWebサーバーを実行することを強くお勧めします。これにより、Webサーバーでライブを作成する変更をテストしません。これにより、開発がより速くなります。完了したら、Webサーバーに完成したテーマを単純にインストールできれば、準備ができています。ローカルで開発したい場合、開始する最も簡単な方法は、自己完結型のWebサーバーを使用することです。虫（Windows）または落とす（OS X）。 PHPとMySQLを備えたApache Webサーバーが含まれているので、できるので、できるようになります。WordPressをダウンロードしてインストールします迅速かつ簡単です。テーマを準備したら、適切なサーバーにWordPressをインストールするのは非常に簡単です。たとえば、私たちのお気に入りの初心者のホスト、DreamHost、ワンクリックのWordPressインストールを備えています。
私たちの空白のテーマファイル。ダウンロードして解凍します。
HTMLとCSSの基本的な知識（取得できますここ）。
WordPressサイト用に作成したデザイン（Photoshopで行う方法を学ぶことができますここ）。
オプション：WordPressに組み込まれたテーマエディターを使用したくない場合は、プログラミングに優しいテキストエディターを取得する必要があります。 （これが私たちの選択ですWindowsそしてx。）
オプション：WordPressサイトはおそらく空であり、コンテンツがないときにテーマを作成するのは難しいため、できますサンプルコンテンツをダウンロードします開発目的で（およびインポート）。これは、コンテンツを使用しないローカル開発環境で大きな助けになる可能性があります。おそらく、ライブサイトに追加したくない1）それが表示され、2）開発が完了したら削除することをお勧めします。
すべてを手に入れたら、テーマを作る準備ができています！
テーマファイルを知り、インストールしてください
LH_WORDPRESS_BLANK_THEME.ZIPファイルを解凍すると、ダウンロードされたファイルがあり、ファイルと2つのフォルダーが入ったフォルダーがあります。これらが何であり、何をしているのかの簡単なリストは次のとおりです。
404.php- ユーザーが存在しないWordPressサイトのページに移動しようとしたときの404の表示されていないエラーを表示する責任のあるページ。
archive.php- メインページによく似ていますが、アーカイブの投稿用にアーカイブされた投稿リストを表示します。
著者.php- 特定の著者のすべての投稿を表示します。基本的にはアーカイブページと同じですが、1人の著者だけです。
category.php- 特定のカテゴリにすべての投稿を表示します。
comments.php- 単一の投稿ページとコメントを受け入れると、このファイルはコメントフォームを表示するために使用されます。
footer.php- ページの下部に挿入されるフッター。このファイルを編集して、フッターに表示したいものを追加する必要があります。
functions.php- テーマのカスタム関数。 PHPを知っていて、何をしているのかを知らない限り、これをそのままにしておく必要があります。
header.php- WordPressサイトのすべてのページの上部にヘッダーを表示します。これは、メニューを生成するコードです。
IMG- テーマで使用しているカスタム画像のフォルダー。カスタム画像を使用していない場合は、これを空のままにしたり、削除したりできます。
index.php- プライマリブログロールページを表示します。 Header.php、sidebar.php、およびfooter.phpファイルを組み込んで、他の多くのページ（author.php、page.php、search.phpなど）と同様に、サイト全体を表示します。
page.php- 任意のページを表示します。これには、投稿が含まれませんが、WordPress管理者で作成した個々の静的ページが含まれます。
search.php-WordPressサイトの検索ウィジェットを介してユーザーがリクエストした検索結果を表示します。結果が見つからない場合、結果が得られなかったことをユーザーに通知します。
sidebar.php- このファイルには、サイドバーウィジェットのプライマリおよびセカンダリエリアが含まれています。 WordPress管理者を介してこれらの領域にウィジェットを追加でき、このファイルを編集する必要はありません。
single.php- コメントの有無にかかわらず、単一の投稿を表示します。
styles.css- これはこのガイドで編集するファイルであるため、赤で強調表示されています。これには、WordPressサイトに見たい方法で見えるようにするために必要なCSSの骨格構造が含まれています。あなたの作業の大部分はこのファイルに含まれます。
スタイル- 使用またはインポートできる追加のCSSファイルを含むフォルダー。これを使用しない場合は、削除するだけです。
tags.php- 特定のタグの投稿を表示します。
そのリストはおそらく少し威圧的に思えますが、これらのファイルのほとんどを編集する必要がない可能性があります。私たちはあなたにすべてが何をしているかを知ってほしかっただけです。少なくとも、編集するだけですstyles.css、そして多分footer.php（フッターにコンテンツを追加する場合）。あなたが何をしているのかがわかったので、この空白のテーマをWordPressにインストールしましょう。そうするために、次の手順に従ってください。
WordPress Adminセクションにログインします。おそらくこれがどこにあるか知っているでしょうが、そうでない場合は、デフォルトではhttps://yourdomain.com/wp-admin（または、Wamp/Mampを実行している場合は、デフォルトではhttp：// localhost：8888/wp-admin）。
左側のメニューの[外観]タブに移動し、[外観] - >テーマを選択します。
上部のメニュー（2つのタブのみがあります）から、インストールテーマを選択します。
[アップロード]リンクをクリックします。
[ファイルの選択]をクリックしてください。ボタンをクリックして、ダウンロードしたLH_WORDPRESS_BLANK_THEME.ZIPファイルを選択し、[今すぐインストール]をクリックします。
テーマがインストールされたら、[外観] - >テーマに戻って[]をクリックして見つけます。ブランクと呼ばれ、プレビュー画像がない必要があります。表示されたら、アクティブ化リンクをクリックしてアクティブなテーマにします。
または、FTP経由でインストールしたり、ローカルマシンの正しいディレクトリにファイルを移動することを好む場合は、LH_WordPress_Blank_Theme.Zipを解凍して「ブランク」（または必要なもの）を変更します。 WordPressインストールディレクトリにWPコンテンツフォルダーを見つけて開きます。内部に「テーマ」と呼ばれるディレクトリが表示されます。空白をコピーしてから、上記の手順の最後のステップに従って、WordPressサイトでアクティブにします。
WordPressのテーマをスタイルします
空白のテーマがインストールされていると、WordPressのテーマが見栄えを良くする準備ができています。しかし、現在、それは青、緑、黒のugい混乱のように見えます。メニュー、ウィジェット、またはコンテンツを追加していない場合、それほど良く見えないかもしれません。それでもコンテンツを追加する必要がある場合もサンプルコンテンツをダウンロードしますまたは、あなた自身のいくつかを作成します。サンプルコンテンツをインストールしても、WordPress管理者に移動し、[外観]セクションをクリックして、メニューとウィジェットの両方のサブセクションを編集する必要があります。ウィジェットサブセクションに移動し、（文字通り）いくつかのウィジェットをプライマリサイドバーとセカンダリーの両方のサイドバースペースにドラッグし、メニューサブセクションにメニューを作成します。すべての（おそらく偽の）コンテンツを準備したら、WordPressサイトにすべて表示されます。それはおそらく右側の画像のようなものになるでしょう。
すべてが整ったので、styles.cssファイルの編集を開始する必要があります。お気に入りのプログラミングに優しいテキストエディターで開くか、WordPress管理セクションの[外観]タブに移動して、エディターを選択してから、右側のメニューからstyles.cssを選択できます（デフォルトでまだ選択されていない場合）。いずれにせよ、使用する骨格CSS構造を確認する必要があります。編集したいすべてのスタイルを含めるわけではありませんが、スタイルの大部分をまとめるために必要な主なスタイルが含まれています。 （後で他の要素をどのように発見し、どのようにスタイルをスタイルするかについても説明します。したがって、提供したテンプレートよりもさらに進めたい場合は、簡単にできるようになります。）全員のデザインは少し変化するので、ほとんどのスタイルが使用できる特定のコードを提供するのではなく、ほとんどのスタイルが何をするかについて議論します。あなたはあなた自身のデザインとCSSの知識をテーブルに持って行く必要があるでしょうので、あなたが少し不安定に感じているならあなたはできることをCSSナイトスクールのレッスンでスキルを磨きます。したがって、これ以上苦労することなく、styles.cssファイルの概要を示します。私たちがカバーする各アイテムは、今のように見えるものと、スタイルを追加するとどのように見えるかを示します。
グローバル：一般的なスタイルのデフォルト
一般的なスタイルのデフォルトすでにあなたのためにかなりレイアウトされており、CSSをあまり知らなくてもかなり馴染みがあるはずです。ほとんどの場合、これらのスタイルは、ドキュメントのマージン（現在0ピクセル）のマージン、ページで使用するデフォルトのフォント、背景とテキストの色、さまざまな状態のリンクの外観などを設定するだけです。この情報をそのまま残すか、必要に応じて一般的な変更を加えることができます。ほとんどの場合、WordPressサイトのルックアンドフィールは、これらのスタイルにあまり影響を受けないことはありません。
ページレイアウト
ページレイアウトstyles.cssファイルのセクションには、2つのコードブロックのみが含まれています。Div＃コンテナそして、1つDiv＃コンテンツ。どちらの場合も、Divタグをターゲットにしています。呼ばれるもの容器ページ上のほとんどすべてを含むものですそうではありませんヘッダーまたはフッター。つまり、投稿、静的ページ、またはブログロール、コメント、サイドバーウィジェットがすべてこれに包まれています。容器。デフォルトでは、このすべてのコンテンツをヘッダーからほんの少し挿入するために、4PXマージンを与えました。好きなように調整して、ここで希望する新しいスタイルを追加できます。コンテンツ一方、Divには、投稿、静的ページ、またはブログロールのみが含まれます（およびそれらが表示されている場合はコメント）。ここに追加するスタイルは、そのコンテンツにのみ影響します。最初にやりたいことの1つは、このDivをページのどこかに配置することです。伝統的に、このCSSコードを使用して、左に配置されています。
float: left;
また、幅、マージンやパディングなど、サイトの特定の領域で違うものを定義したい可能性があります。これが私のサイトのコンテンツDIVスタイルのように見えるものです：
div#content{ width: 640px; float: left; margin: 0 0 0 51px; padding: 0 18px 0 0px;}ご覧のとおり、幅は640pxです。また、先ほど話したように、左に浮かんでいます。さらに、左側に51pxのマージンを追加し、右側に18％のパディングを追加しました。どの数字がどの辺に対応するかを知るにはどうすればよいですか？ CSSマージンとパディングコードでは、このようになります：上、右、下、左。これは簡単に覚えています。なぜなら、略されて、TRBLのように見えるからです。あなたがそれを聞くと、それはトラブルやひどいように聞こえます。いずれにせよ、それはそれを覚えるのに迅速かつ簡単な方法です。
ヘッダ
ヘッダーは、メニューの見た目を決定できるため、ページの楽しい部分です。ヘッダーに追加の要素があるかもしれませんが、テーマにheader.phpファイルをいくつか追加するいくつかの新しいものを追加することにした場合、メニューは依然としてメインの抽選です。メニュー項目は、スタイリングなしでは、次のように見えるリストスタイルで提供されます。
ページ1
2ページ
3ページ
4ページ
5ページ
ドットは緑ではありませんが、基本的にリストになります。あなたはそれを望んでおらず、おそらくあなたはページの上部に沿ってメニューを実行したいと思うでしょう。私たちはあなたのためにその問題を処理し、メニューをスタイリングして、順序付けられていないリストではなく、1つの直線のオプションとして表示されます。これを実現するCSSの2つのピースがあります。最初は.menuクラス 'UL（順序付けられていないリスト）要素に属します：
.menu ul{ list-style: none; margin: 0;}このコードは、デフォルトで順序付けられていないリストを使用してドットとマージンの調整を取り除きます。 2番目の関連するコードブロックは次のようになります。
.menu li{ display: inline; float: left; padding: 0 8px 0 4px;}このコードはリストにインラインを表示するように指示します。つまり、従来のリストではなく行に表示されます。さらに、各リスト項目（LI）は左に浮かぶように言われ（各アイテムを移動する自由度が少しあります）、右側に8pxのパディングがあり、左に4pxのパディングがあります（テキストはそれほどスクランチングされていません。すべてが基本メニューを手に入れるのに十分ではありません。 CSS：
.menu-item a{ font-size: 30px; text-decoration: none; color: #3eaf00;}.menu-item a:hover{ color: #5d8a05;}このコードはすべて、フォントサイズ（30pxまで）、フォントの色をグリーン（特に＃3EAF00）に設定し、デフォルトでリンクの下に表示される下線（テキスト廃止：なし）を削除することです。ホバー状態は、ユーザーがメニューリンクを越えたときに表示するわずかに暗い緑（＃5D8A05）を指定します。これはすべて非常に簡単な基本的なCSSですが、画像に頼らずにメニューをページ上の他のテキストとは異なるように見せることができます。テキストをさらに変更したい場合は、別のフォントを検討したり、すべてを上位または小文字のテキストに変換したりできます。良いWebフォントオプションが必要な場合は、に数百を見つけることができますGoogle Web Fontディレクトリ。
これらのスタイルの選択をしたら、メニューとヘッダーのスタイリングをかなり完了します。あなたが見つけて遊ぶことができる他のスタイルは間違いなくありますが、投稿の最後にそれらを見つける方法について説明します。
コンテンツ：投稿とページ
覚えておいてくださいDiv＃コンテンツ以前に定義したスタイル？この投稿の次の2つのコンテンツセクションのほとんどすべてのものは、そのdiv内に存在するスタイルに関連しています。ほとんどの
.Entry-Title
これは、異なるページヘッダーに関連するスタイルです。 Styles.cssファイルでは、H1、H2S、およびH3Sに最も頻繁に接続されていることがわかります。ポストヘッダーは、H＃タグがどのようなものかに関係なく.entry-Titleスタイルを採用するため、最初にH＃タグを指定して次に追加して、.entry-titleを追加して個別に定義できます。これは、h1.entry-titleやh2.entry-titleなど、styles.cssファイルのいくつかの事前定義されたコードブロックで確認できます。静的ページのタイトルも同じように機能しますが、スタイルは.page-titleであり、通常はそのスタイルとともにH1タグのみを使用します。つまり、H1.Page-Titleを超えたページタイトルのヘッダースタイルを定義する必要はないはずです。これらのタイトルのスタイリングは、他のテキストのスタイリングのようなものですが、それらを大きくしたいと考えています。それらが他のテキストと同じくらい小さい場合、彼らは彼らがすべきと同じように際立っていません。
.AlignRightそして.alignleft
これらの2つのスタイルは、エントリの左右に画像を単純に並べるだけです（おそらくどちらがどちらであるかを推測できます）。また、Styles.cssファイルでは、パディングが画像の3つの側面に適用されているが、1つではないことに気付くでしょう。なぜ？パディングのない側は、テキストの隣にない側です。これは、右に配置された画像上の画像の右側であり、左アライメント画像上の左側です。これは、画像がテキストのブロックを包み込んでいることにぎこちなくインデントされていないように行われます。 WordPressの投稿とページを作成し、画像を追加すると、エディター内の画像のアライメントを選択できます。これらのスタイルは、投稿内の任意のアライメント画像に自動的に適用されます。パディングを増やしたり減らしたりしたり、スタイルを追加したりしない限り、これら2つのクラスをそのまま残すことができます。
.entry-content
エントリコンテンツスタイルは、WordPressで作成したブログ投稿と静的ページの内容に適用されます。このクラスは、作成したコンテンツのボディにあるテキスト、画像、またはすべてのスタイルをほとんど適用します。ほとんどの場合、ここで多くのことをする必要はありません。必要なテキストスタイルを設定し、ヘッダー（H1、H2、H3など）、スタイルリスト、および基本的にはコンテンツセクションに特定のスタイルを作成する他の要素を決定できます。
.Entry-Utility
エントリユーティリティは、コンテキストを提供する各投稿の最後にある小さなセクションのクラスです。 RSSフィードだけでなく、投稿のカテゴリやタグなどの情報を提供します。あなたが単なる読者ではなく、WordPressサイトのライターである場合は、このセクションの「編集」リンクも表示されます。 .entry-utilityにスタイルを追加すると、このセクションがどのように見えるかが決まります。
.Entry-Meta
エントリーメタをエントリーユーティリティと混同するのは簡単ですが、それは異なります。著者名、日付、およびその他のメタデータが含まれています。重要な情報ではないため、テキストを小さくするなど、見た目を変更したい場合は、このクラスを編集する必要があります。
.Navigation
ナビゲーションは、テーマの下部にあるナビゲーションリンクをスタイリングするためのクラスです。ナビゲーションリンクは、古い投稿と新しい投稿を指すリンクです。
コンテンツ：コメント
コメントセクションはそうかもしれませんが思われる簡単なスタイリングタスクのように、実際にはブログの最も複雑なセクションの1つです。コメントフォーム自体は非常に簡単ですが、人々がコメントに返信し、それらの返信に返信すると、多くのネストされたコメントがあります。また、アバターだけでなく、多くのメタデータもあり、ユーザーのコメントと一緒に表示されます。これは、スタイルする要素がたくさんあることを意味します。
.comments
主に、H3、OL、Li、およびIMGの3つがあります。もちろん、H3はコメントヘッダーを指します。コメントは順序付けられたリストに投稿されるため、OL（順序リスト）およびLI（リスト項目）要素が必要です。ほとんどの場合、ヘッダーメニューからいくつかのスタイルを借りたいと思うことがあります。また、リストの各コメントの背景色を変更したり、他のスタイルを追加したりすることもできます。 .commentsクラスのOL要素とLI要素をスタイリングすることで、それを行うことができます。最後に、コメントにはユーザーにアバターが含まれているため、IMG要素のスタイリングが重要です。そのアバターは空白または一般的なものかもしれませんが、それはまだすべてのコメンターに表示されます。コメントクラス（.comments IMG）でIMGタグをスタイリングすると、コメントテキストとペアになったときのアバターがどのように動作するかを制御できます。
。コメント
以前のクラスと非常に同様の名前が付けられた.Commentは、特定のコメントに適用されるスタイルです。
。子供たち
子供は、コメントへの返信をターゲットにするために使用されるクラスです。これらの返信はコメントの子供と見なされます。返信への返信も子供と見なされます。
Div＃応答
Respons Divは、コメントの返信フォームを保持しているDivです。誰かがコメントを残したい場合は、そうするためにこのフォームを使用する必要があります。フォームをあなたが望むように見せるために、このdivをスタイリングしたいと思うでしょう。ほとんどの場合、テキストを変更するだけですが、特にユニークな外観のためにフォーム要素とボタンをスタイリングすることもできます。
コンテンツ：サイドバー
サイドバーのスタイリングは実際には非常に簡単ですが、非常に具体的になりたい場合は、より複雑になる可能性があります。 WordPressは2つのウィジェット領域を提供します。Div＃プライマリそしてDiv＃プライマリ。それらの各DIVを個別にターゲットにすることも、両方のスタイルを使用してスタイルを追加することもできます.widget-areaクラス。さらに、ウィジェット領域に追加する各ウィジェットは、surprise！ - aリストアイテムとして追加されます。.xoxoクラスはこのリストに適用され、各ウィジェットを必要に応じて分離してスタイリングするために使用できます。ただし、本当に具体的に取得したい場合は、各ウィジェットを直接ターゲットにする必要があります。次のセクションでそれを行う方法について説明します。
追加のスタイル
この空白のテーマを自分のテーマに変えるためにターゲットにする必要があるすべての基本的なスタイルについてお話したので、それをもう少し進める方法について説明しましょう。 WordPressテーマには含まれていますトン要素があるので、間違いなくスタイルを整えたいと思うことがあります。開発プロセスを経験しているときに彼らが何であるかを簡単に発見するために、必要なのは適切なツールだけです。
Chromeを使用している場合、その開発ツールはすぐに構築されます。テーマを開発しているときにテーマをプレビューし、開発者ツールを開きます。 [表示]メニューにアクセスして、開発者 - > [開発者]ツールを選択することで、それを行うことができます。 Firefox（および他の多くのブラウザ）で、JustFireBugをダウンロードしてインストールします、次に、FireBug拡張機能をクリックしてアクティブにします。どちらのツールを使用しても、画面が上下の半分に分割されます。上半分にはページが含まれ、下半分にはページコードが含まれます。ページ上の要素の上にマウスを付けると、コードで強調表示されているので、さらに検査できるようになります。これにより、要素が呼び出されたものがすぐにわかり、すでに適用されているスタイルが表示されます。その後、この知識を使用して、その要素（または適用されるクラス）に新しいスタイルを追加できます。 Styles.cssファイルに追加するすべてのスタイルを見つけるまで、それを続けてください。終了したら、完成したテーマがあります！
以前にWordPressのテーマを作成し、簡単にするための追加のヒントがある場合は、コメントで共有してください。さらに、このプロセスを使用してWordPressのテーマを自分で作成する場合は、コメントにもスクリーンショットを投稿してください。幸せなテーマ！
