How to Create Your Own Wordpress Themeどのように自分のWordpressのテーマを作成する

Have you ever wanted to create your own custom wordpress theme? あなたがこれまで独自のカスタムワードプレスのテーマを作成することがありますか？ I’ll show you how to start learning to hack away at your own WP theme in this tutorial in just a matter of minutes… 私はこの分の距離の問題ではチュートリアルにWPを採用、独自のテーマでハッキングを学び始めるのをお教えしましょう...

This is the second installment in theこれは、 2番目の割賦です Managing Wordpress More Effectively Series Wordpressの管理をより効果的にシリーズ - so you can get control of your blog and wring every last bit out of your content and visitors, saving you time and making you more money! -つまり、あなたのブログのコントロールを得ることができますし、コンテンツや訪問者のうち最後のビットを絞ると、時間を節約してもっとお金を作る！

If you’re a regular reader of this blog, you might notice that JTPratt’s Blogging Mistakes now has a new theme!このブログの定期的な読者している場合は、間違いJTPrattのブログは現在、新しいテーマを持っていることかもしれない！ I think that a blog grows with the blogger, and the biggest mistake you can make is not modifying your blog to display your progress.私は、ブログのブロガー、そして成長する場合は、最大の過ちを犯すことができます。進展を表示するためにあなたのブログの編集ではないと思う。 I started out in 2007 with a really nice theme (Prosense), because it did most of what I wanted and looked professional.私は2007年には本当にすてきなテーマ（ Prosense ） 、ほとんどのため、私が望んでいたとプロ見えたで始まった。 But I hacked and hacked and hacked it some more to slowly get rid of things I didn’t like.しかし、私ハッキング、ハッキングしてハッキングをもう少しゆっくりになる私のようにしていないものを捨てる。 Finally - I just had to say enough is enough and create my own Wordpress theme just exactly the way I wanted it.最後に-私は十分と言っていただけで十分だと私自身のW ordpressのテーマを私は望んでは正確に道を作成します。

Wordpress Theme Hacking Wordpressのテーマハッキング

If you’re curious and you know some HTML and CSS (even just enough to be dangerous) this guide was made for you.好奇心旺盛している場合と、一部のHTMLとCSS （だけでも危険であるのに十分な）は、このガイドを知っているあなたのために作られた。 This isn’ta definitive guide or anything, but it will get you started and I’m sure it will give you some good ideas to create your own “custom Wordpress theme”.この決定的なガイドまたは何もないが、あなたを始め、私はあなたの"カスタムWordpressのテーマを作成する独自のいくつかの良いアイデアを与えると確信しているになるだろう" 。 This is the “How to Create Your Own Wordpress Theme” tutorial, or “How to Hack Wordpress Themes”.これは、 "どのように独自のWordpressのテーマ" 、またはチュートリアルを作成することです" Wordpressのテーマをハックする方法" 。 The first thing you need to do is get theやらなければならないことは最初のものは得られて Theme Test Drive テーマをテストドライブ plugin.プラグイン。 I used this plugin for two weeks, so I could hack and test my new theme to death before putting it live.私は2週間なので、ハッキング可能性があると死を前に、私の新しいテーマを入れライブ試験は、このプラグインを使用します。 You see, it allows you to set a theme that only the admin will see when logged into the Wordpress.を参照してください、それは、あなたのテーマは、管理者のみが表示されますが、ワードプレスにログインし設定することができます。 So as long as you’re logged in, you will see the new custom theme you’re building but all your visitors will see the regular one.そこでログインしている限り、あなたが構築しているすべての訪問者は、通常の1つが表示されますは、新しいカスタムテーマが表示されます。

Creating Your Own WP Theme from a Copy WPを採用コピーから独自のテーマを作成する

Now login to your web site in FTP and download the theme you’re using now to your desktop.現在のFTPでお客様のWebサイトにログインすると、現在のテーマを使用しているデスクトップにダウンロードしてください。 Give the folder a unique name like “custom-theme” or something.フォルダの"カスタムテーマは"か何かのようなユニークな名前を付けます。 I’m going to show you how to create your own theme by starting to modify a second copy of the one you’re currently using (without anyone but you knowing about it).私は方法の1つを使用している現在の2番目のコピーを変更してスタートして、独自のテーマを作成するにお見せするつもりです（誰にでもそれについて知らない） 。 Now, using Notepad (or any text editor) open the “style.css” file.さて、メモ帳を使用して（または任意のテキストエディタ） "のファイルは、 " style.cssを開きます。 At the top of the file are some comment lines.ファイルの先頭ではいくつかの行をコメントしている。 When you go to “Presentation -> Themes” in your Wordpress dashboard, the titles and descriptions of the themes you have installed come from the “style.css” file of those themes.行くときに"プレゼンテーション->テーマ"あなたのW ordpressのダッシュボードは、タイトルとは、 " s tyle.css"のテーマのファイルからインストールされているテーマの説明にしてください。 The style file you just opened should already have comments like this as the first few lines like this:そのスタイルは既にこのように、最初の数行は、このようなコメントをしているファイルを開く必要があります：

 /* Theme Name: JTPratts Custom Theme Theme URI: http://www.jtpratt.com Description: No nonsense custom theme developed in house. Author: JTPratt's Blogging Mistakes Author URI: http://www.jtpratt.com 

Modify all those lines with your own details, delete the “screenshot.png” file from the folder, and then upload the entire folder back to your theme directory in FTP.は、 " screenshot.pngフォルダから削除する"ファイル、および独自の詳細をすべての行を変更し、後ろのFTPでお客様のテーマのディレクトリにフォルダ全体をアップロードします。 If you have a graphics editor, you could instead open the screenshot file and modify it to go with your theme.グラフィックエディタがある場合は、あなたの代わりに、スクリーンショットをファイルとそれをテーマに行って変更を開く可能性がある。 I created a custom one so I could tell my backup from my live one like this:私はカスタムの1つなので、このような私の生活を伝える可能性があるから私のバックアップを作成：

Once you’ve uploaded the folder to your theme directory, go back to your WP dashboard and “Presentation -> Themes” tab.お客様のテーマのディレクトリに、あなたのWPを採用ダッシュボードと"プレゼンテーション->テーマ"タブに戻っているフォルダにアップロードしている。 Your new theme should now be an option.あなたの新しいテーマは現在、オプションをする必要があります。 If you also created a “screenshot.png” (it must be named exactly that) and uploaded it in the folder too - the new picture of your theme will show up as well as in my example above.場合も" （正確には）名前を付けてください" screenshot.pngを作成し、フォルダにもそれをアップロード-あなたのテーマの新しい画像だけでなく、上記の私の例で表示されます。

How to Test a Wordpress Theme as Admin OnlyどのようにテストをWordpressのテーマに管理者としてのみ

Now, enable the “Theme Test Drive” plugin you downloaded and installed if you haven’t already.今は、 "テーマのテストドライブ"のプラグインをダウンロードしてインストールされていない場合に有効にします。 Go to “Presentation -> Theme Test drive”, choose your new theme from the dropdown and click the “enable” button. "プレゼンテーションの移動->テーマをテストドライブ"は、ドロップダウンし、 " "ボタンをクリックしてから新しいテーマを有効にする]を選択します。

That’s it - now your ready to start theme hacking!それはそれは-今すぐあなたのテーマのハッキングを開始する準備！ Go to the “Presentation -> Theme Editor” tab and in the drop down menu your “current” theme will be listed like this: "プレゼンテーションに移動->テーマエディタ"タブと"現在の"テーマをこのように、ドロップダウンメニューが表示されます：

That’s my current theme everyone sees.それは私の現在のテーマみんなの見ている。 Before I start editing the test theme only I will see as admin I need to switch to that one in the theme editor like this:前に私は私に変更する必要がある管理者として表示されますがテストを開始する1つのテーマを編集するエディタで次のようにテーマ：

Now in the right hand list of files, find the one labeled “Main Index” and click on it.ファイルの一覧を今すぐ右手に、 1つの標識を見つける"メインインデックス" 、それをクリックします。 10 or 20 lines in you should see something like this:このように表示されるはずの10 〜 20行：

 <div class="entry"> <?php the_content('Read the rest of this entry &raquo;'); ?> </div> ） <div class="entry"> <?php the_content('Read the rest of this entry &raquo;'); ?> </div> » <div class="entry"> <?php the_content('Read the rest of this entry &raquo;'); ?> </div> 

Right after the div entry tag add a bunch of random text, save the file, and in another tab or browser window load up your blog home page.直後のエントリには、 divタグ、ランダムなテキストの束は、ファイルの保存を追加し、別のタブやブラウザのウィンドウの読み込みにあなたのブログのホームページをバックアップします。 Does it contain the random text?は、ランダムな文字列が含まれていますか？ If it does - great!場合には-素晴らしいです！ If not, go back and follow the directions again to see what you did wrong.前に戻っていない場合は、再度間違って自分のしたことを確認するの指示に従ってください。 Now I don’t know how much HTML and CSS code you know - so if you need a reference be sure to visit and bookmark今はどれだけのHTMLとCSSコードを知っている-場合には必ず訪問するとブックマークの参照が必要なのか分からない W3Schools W3Schoolsの which is a free online resource for web coding.ウェブ符号化のための無料のオンラインリソースです。 They have a reference page for each and every tag, and many free tutorials.彼らはそれぞれ、すべてのタグを、多くの無料のチュートリアルページを参照している。

What is the “Wordpress Loop”?何をされている"ワードプレスループ"とは？

Depending on how much HTML and CSS code you know (and are willing to mess with) now you remove the random text and start messing around with your theme.に応じてどの程度のHTMLとCSS （との邪魔をして）する場合は、ランダムな文字列を削除してあなたのテーマをいじり始めるとは分かっているコードです。 Remember - only you can see the changes (while you’re logged in as admin), and you can even make major changes to the sidebar, header, and footer.覚えている-オンリーユー（中に管理者としての）記録して、変更内容を見ることができる、あなたも、サイドバー、ヘッダーに大きな変更を加えることができる、とフッター。 The code I just showed you is what puts the posts on the main page.私は何のメインページには、投稿置くことが分かったのコードです。 Not the titles or meta information, just the post content itself.は、タイトルやメタ情報は、記事自体のコンテンツ。 You home page (Main Index) contains a “loop”.あなたのホームページ（メインインデックス） "のような"ループ含まれています。 It’s called the “Wordpress loop” because by default your Main Index shows 10 posts.これは、デフォルトがして、メインインデックスの10件の投稿が表示されますが、 "ワードプレスループ"と呼ばれる。 The PHP code for the look basically says (in English) “once you find the first posts, do these things over and over until you reach the tenth post.見た目のためのPHPコードは基本的に1回（英語） "の場合、このようなことをするまで繰り返し行うの10分の1に達する最初の投稿記事を見つけるだ。 So if you put something “in the loop” (like a picture or text) is would display on your Main Index page 10 times before or afer the content for each post beginning with the first until it reached the last.画像やテキストですので、もし"をループ内で何かをする" （ ）のようなあなたのメインインデックスページに10回の前または各記事の最後に到達するまでで始まる最初のコンテンツだaferが表示される。

I’m telling you this because if you want a graphic at the top of your page before the posts (like mine) you have to place it “before the loop”.理由の場合は"ループの前に配置する必要があるの投稿鉱山（ ）のように前に、ページの上部にあるグラフィックしたいのですが、この"話だけど。 If you want it after all the posts, like the 336×280 ad at the bottom of my Main Index page, it has to go “after the loop”.場合は、すべての記事を後にし、私のメインインデックスのページの下部にある336 × 280の広告のように、 "ループの後に"している。 While EVERY theme is a bit different I this is what you look for:すべてのテーマを私はあなたに何が見えては少し異なっている：

 <?php if (have_posts()) : ?> <?php endwhile; ?> 

The Wordpress loop starts with the have_posts line and ends with the endwhile line.ワードプレスループはhave_posts線やendwhileで始まる行で終了する。 Before and after those 2 lines would be “before and after the loop”.これらの2行を前に、後に"前とは、ループの後になる" 。 Somewhere in between those 2 lines would be placing something “in the loop”.これらの2行との間のどこかに"は、ループ内で"何かに配置される。 I wanted to explain this to you before you started hacking around and wondered why your changes showed up in weird place.周りのハッキングを開始する前に、変更内容とその理由を示して変な場所に不思議に思った私はあなたにこの説明している。 For practice, try adding some kind of code or script for an ad (or just a linked image if you know the code) before or after the loop on your Main index page.練習については、コードを知っている場合は、広告用のコードやスクリプトの一部のような（または単にリンク画像を追加する）前に、またはお客様のメインのインデックスページには、ループ後にしてください。 If you’re new at this it’s good practice, and you should be figuring out why so many of us hack our theme by hand - it’s just impossible to have a plugin for every little modification you want to make.この練習での良い、新しいていると、なぜ多くの皆さんが私たちの手によって我々のテーマ侵入を把握する必要があります-あなただけを作りたいごとに少し修正するためのプラグインがあることは不可能です。

Your First Wordpress Theme Hackあなたの最初のワードプレステーマのハッキング

Now I’m going to teach you your first real ‘hack’.今私はあなたの最初の'本物'ハックを教えるつもりだ。 Let’s say you want to show some kind of text, image, or ad further down your Main Index page, but not before or after “the loop” and not after all 10 posts.あなたのテキスト、画像、または広告をメインインデックスのページをさらにいくつかの種類を表示させたいと言うが、前または"後はないよ、ループ"と、すべての10件の投稿がした。 You have to insert a line of code to tell “the loop” to display it only once (and where) "一度だけを表示するには、ループ"と言ってコードの行を挿入する必要がある（と場所）

 <?php if ($count==2) { include('main-index-ad.php'); } ?> <?php $count = $count + 1; ?> <?php endwhile; ?> 

The first line is the one you copy and paste into your Main Index file, put it before the count and endwhile lines just like in my example.最初の行の1つをコピーして貼り付けますメインインデックスファイルには、行数とendwhile前に、私の例のように言うだけです。 That line of PHP code says to the loop (in English) “while you counting, after the second post print the contents of the main-index-ad.php file”. PHPコードのこの行は、ループ（英） "を数えながら、印刷後に2番目の投稿の内容とは、メインインデックス- ad.phpファイル" 。 This means of course, you have to create a file called ‘main-index-ad.php’ (or whatever you want to call it) and add the script or code or whatever you want to put after the second post.このコースの場合は、ファイル'メインインデックスad.php ' （またはどのような場合は）とは、スクリプトやコード、またはどのような場合は、 2番目の投稿をしたい後に追加したいと呼ばれるコールを作成する必要があることを意味します。 Make the change in your Main Index file and “save”.あなたのメインインデックスファイルの変更をする" "保存してください。 Upload the main-index-ad.php file to your theme folder, and then reload your home page to test your very first theme hack.アップロードは、メインインデックス- ad.phpあなたのテーマのフォルダにファイルをクリックして、非常に最初のテーマはハッキングをテストするお客様のホームページを再度読み込んでください。 Did it work?でしたが、仕事ですか？

So far, we’ve been working on only the “Main Index” or index.php file for theme hacks.これまでのところ、我々に従事していることだけが"メインインデックス"やハッキングをテーマにindex.phpファイルを作成します。 Although every theme is a bit different, nearly every one has a Main Index, a Single Post, a Page file, 404 Template (file not found), Sidebar (sometimes 2), Comments, and Archives page.ただし、すべてのテーマですが少し、ほぼすべての1つ別の（ファイルが見つからない） 、アーカイブページのサイドバー（時には2 ） 、コメントはメインインデックスは、 1つのポストは、ページファイル、 404テンプレートをしている。 Some themes also have a Category page, but if they don’t the Archives.php page will be used for category pages too.いくつかのテーマもカテゴリのページがある場合は、そのページはありませんArchives.phpカテゴリページにも使用されます。 I point this out because if you ad something to the homepage, you might also want it to appear on single posts, or pages, or category pages.場合は、ホームページに広告を何かのため、また、 1つの記事を、またはページ、またはカテゴリページに表示されることをお勧めします私はこの指摘している。 Like in the previous example you might consider making several files with ads, text, or images and uploading them to your theme directory.あなたの広告、テキスト、または画像を、あなたのテーマのディレクトリにアップロードでいくつかのファイルを考えることができると、前の例では同様。 You can use the same line of code in the previous example to include any file before or after the loop.は、前の例では、ループの前または後に任意のファイルを含むようにコードの同じラインを使用することができます。 Just remove the count statement like this:このようにカウントステートメントを削除：

 <?php include('name-of-my-file.php'); ?> （ ' <?php include('name-of-my-file.php'); ?> 

It’s much smarter to add things to your pages with a file like this if it’s going to be in multiple places.その方がずっと賢く、このようなファイルをあなたのページに物事を追加する場合は、複数の場所になるんだろうね。 Otherwise, you have to manually modify multiple files.そうでなければ、複数のファイルを手動で変更する必要があります。 If you do it like this, in the future when you need to change that content, you just edit the one file.このような場合には、将来的にそのコンテンツを変更するとき、あなたは、 1つのファイルを編集する必要があります。

Your Second Wordpress Theme Hackあなたの2番目のWordpressのテーマハッキング

For quite a while I had wanted to add the comment count under my post titles on my index page where they would be linked to actually post a comment.についてはかなり長い間望んでいた私は私の記事のタイトルの下で私のインデックスページに表示されるコメントの数を追加することが、実際にはコメントの投稿にリンクされる。 Oh - an I wanted a little comment graphic beside them too.オ-私も彼らの横に小さなグラフィックのコメントを望んでいた。 Basically “inside the loop” you just add the following PHP code somewhere are your post title:あなたはどこかには、以下のPHPコードを追加して、ループ"基本的に"の中にあなたの記事のタイトルは：

 <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2> <?php $comments_img_link= '<img src="/wp-content/images/comments-icon.gif"  title="comments" alt="comments" />'; comments_popup_link($comments_img_link .' Comments(0)', $comments_img_link .' Comments(1)', $comments_img_link . '  Comments(%)');?> " <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2> <?php $comments_img_link= '<img src="/wp-content/images/comments-icon.gif"  title="comments" alt="comments" />'; comments_popup_link($comments_img_link .' Comments(0)', $comments_img_link .' Comments(1)', $comments_img_link . '  Comments(%)');?> = <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2> <?php $comments_img_link= '<img src="/wp-content/images/comments-icon.gif"  title="comments" alt="comments" />'; comments_popup_link($comments_img_link .' Comments(0)', $comments_img_link .' Comments(1)', $comments_img_link . '  Comments(%)');?> <img <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2> <?php $comments_img_link= '<img src="/wp-content/images/comments-icon.gif"  title="comments" alt="comments" />'; comments_popup_link($comments_img_link .' Comments(0)', $comments_img_link .' Comments(1)', $comments_img_link . '  Comments(%)');?> 

The first line is the code you need to find “in the loop” which prints out the post title heading.最初の行に"見出しは、記事のタイトルをプリントアウトするループ"を検索するために必要なコードです。 Your may look slightly different, just look for “the_title” in the line.あなたのわずかに異なるだけを探す" the_title "の行に見えるかもしれませんが。 Right after that paste the two lines in my example.右私の例では、 2行の後に貼り付けます。 You’ll meed to modify the first line with the name of and correct path to your comment icon.あなたの名前とコメントをアイコンに正しいパスとの最初の行を変更するに報いよ。 You’ll need to create one or find a free suitable one on the web.を1つ作成したり、ウェブ上の無料の適当な1つを見つける必要があります。

Adding a plugin to do the Hacking for Youプラグインを追加するためのハッキングを行うには

There’s still a few things that Wordpress “won’t do” what I prefer to have on my blog that are easily added with a plugin.まだいくつかのことは、 Wordpressの" "私は自分のブログには、簡単にプラグインで追加されることをどう考えて希望するのは無理だよ。 For most of these things I use私使用して、これらのものの大部分 Lester Chan’s Wordpress Pluginsレスターチャンのワードプレスプラグイン . 。 I use WP-PageNavi for the navigation at the bottom of my home page, and replaced the horrible “previous” and “next” default wordpress navigation links with it.私は自分のホームページの下部にあるナビゲーション、 WPを採用- PageNaviを使用して、恐ろしい" "それに伴い、 "次へ"以前のデフォルトのワードプレスのナビゲーションリンクを交換。 I use WP-PostRatings for the star voting on each post.私は使用してWPを採用、各記事の星の議決をPostRatings 。 WP-Post Views displays the post count for each post, in addition to the “most viewed” posts in my sidebar. WPを採用ポスト回数は、 "最も"の記事を私のサイドバーで表示に加えて、各記事の投稿の数が表示されます。 The WP-Print plugin is for the printer friendly page link for posts.プラグインの投稿は、 WPを採用、印刷用の印刷用ページのリンクされています。 With all these Lester Chan Wordpress plugins, once you install and activate them, all you have to do is copy and paste the line of PHP code on the pages and places you want the plugin to display something.これらすべてのレスターチャンWordpressのプラグインでは、一度インストールし、それらを有効には、すべてをコピーするだけですし、ページ上でPHPのコードの行を貼り付け、何かを表示するプラグインを配置します。 You get that code on the documentation “usage” page for each plugin on Lester’s site.あなたがレスターのサイト上の各プラグインのページの"ドキュメント"の使い方には、コードを取得。 After doing the first two hacks, it should be pretty easy to add the code to your template pages for the plugin hacks to work.最初の2つのハッキングして後、かなりのコードを追加して仕事をするためにプラグインをハッキングのページをテンプレートに簡単にする必要があります。

In addition to the Lester Chan plugins, on my pages after the posts on my main page you’ll see some options for visitor’s like “subscribe to this feed”, “email this”, “digg this”, etc. These features actually come from Feedburner.は、レスターチャンのプラグインに加えて、私のメインページには、投稿した後に、ページ上では、 "この" 、 "この"等これらの機能はDiggの訪問ユーザーの電子メールのように"このフィード"を購読するためのオプションが表示されます。実際にフィードバーナーから来ています。 I know on a lot sites I see people adding a “social” plugin to display a bazillion options for all the tagging sites.私は人々が" "プラグインのすべてのタグ設定のサイトの膨大な数のオプションを表示するには社会的な追加を参照してください多くのサイトで知っている。 I use Feedburner for my feed (like most bloggers do), and they have a “Feedburner Feedsmith” plugin that will add that “flare” after your posts - which I think have much more helpful options than any social plugin around.私は自分のフィード（フィードバーナーを使用するかのようにほとんどのブロガー） 、と彼らは、 " "自分の投稿後、フレア-が追加されると思う"フィードバーナーF eedsmith"プラグインがあれば社会的なプラグインが周りよりもはるかに役立つオプション。 If you download and enable that plugin from Feedburner, you have to add the provided PHP code to your template as well. Feedburnerの場合はダウンロードしてからプラグインを有効にすると、あなたもテンプレートを提供するPHPコードを追加する必要があります。

Hacking Your Theme Stylesheetあなたのテーマのスタイルシートをハッキング

Your stylesheet contains all properties of all the colors and sizes of items on your blog.あなたのスタイルシートのすべての色と、ブログ上のアイテムのサイズのすべてのプロパティが含まれています。 It has background and link colors, font sizes, bold, italics, you name it.この背景とリンクの色、フォントサイズ、太字、イタリックしている、という名前を付けます。 In your dashboard theme editor click on “Stylesheet” to bring up this file.スタイルシート"をテーマに、ダッシュボードエディタをクリックして"このファイルを開きます。 It’s the same one you added the theme properties to on your computer in a text editor at the very beginning of this article.これは、同じ1つにするには、コンピュータ上で、この資料の冒頭には、テキストエディタでのテーマのプロパティを追加。 YOUR stylesheet is more than likely going to be completely different than mine, and editing it won’t be as easy as the earlier copy and paste hacks.きっとあなたのスタイルシートを完全に地雷とは異なるが、起こっている、それが簡単にはいかないだろう編集としては、以前のコピーと貼り付けハッキング。 What you need to know is that every web page is a “document” that has “elements”.するかを知る必要は、すべてのWebページは、 "要素がある"ドキュメント" "です。 The elements are setup in a “box model”, and items like div’s, paragraphs (p’s), spans, the body, headings (h’s), blockquote, and list tags (ul, ol, li or underordered list, ordered list, and list) are all “boxes”.この要素は、 "ボックスモデル"のセットアップ、およびdivを、項（画） 、スパンは、身体、見出し（ク） 、ブロック、およびリストタグ（ 、オル、李またはunderorderedのULのような項目ですリストは、リストを指示したとリスト）は、すべての"箱です" 。 In CSS code everything “nests” and “properties” can be assigned to elements at any level. CSSコードはすべての要素に任意のレベルで割り当てることができます"巣"と"プロパティを" 。 Here’sa diagram example:以下の図の例：

That image is an example of how all the boxes would look if you drew them all out.そのイメージを描いた場合、それらすべてをどのようにすべての箱に見えるかの例です。 Here’s how those boxes look as (well formatted) HTML code:ここのようにこれらのボックスとして（も） HTMLコードフォーマット：見る

 <body> <div> <p> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </p> </div> </body> 

I wanted you to visualize this before you started stylesheet hacking so you would know about how nesting works.作品について知っているので、営巣する前に、スタイルシートのハッキングを始めた私はこの目に見えるようにしたかった。 If you change the (font) “color” to grey at the “body” level all the text on the page will be grey.場合） " " "体"レベルは、ページ上のすべてのテキストとなる色は灰色で、灰色に（フォントを変更します。 If you also change the font color to green at the “li” or list item level, all the text on the page will be grey except the list items, which will be green.場合にも、グリーンには、 "李"またはリストアイテムレベルでは、フォントの色を変更すると、そのページ上のすべてのテキストをすることになっては緑になるリストの項目は、灰色を除く。 If you change the paragraph or “p” font color to red, then both the P and UL text will be red, the LI text will be green, but the rest of the body and div text above those levels will still be grey.場合は赤にし、両方のPとのULテキスト、テキストは、李赤緑されますされますが、段落または" p "がフォントの色変化は、体とそれらの水準を上回ってdivをテキストの残りの部分は灰色になります。 This is called “inheritance”, and properties start at the highest level and stay that property until changed lower down the nesting chain.この"継承"と呼ばれ、プロパティは、最高レベルでの開始とそのプロパティ滞在まで下げるネストチェーンを変えた。

The first thing you might want to hack is your link colors and properties.をハックすることがまず最初にあなたのリンクの色とプロパティです。 There are sooooo many ways to change your links to make them stand out.あなたのリンクに変更し、それをスタンドをsooooo多くの方法があります。 A hyperlink is an “a” or anchor tag.のハイパーリンクは、 " 1 "またはアンカータグです。 There are 3 states of a link which are normal, visited, and hover.そこは普通のことですので、リンクは、訪問の3州、ホバーしている。 Normal is what the color of the link is before you click it.通常のリンクの色とは何かである前に、クリックします。 Visited is the color of the link once you’ve visited it.一度それにアクセスした訪問は、リンクの色です。 And hover is the color of the link when your mouse goes over it.とホバーのリンクの場合は、マウスを超える色です。 For all three of these states of a link you can change the color, text-decoration, background, and many other properties. 3つすべての場合は、色、テキストの装飾、背景を変更することができるのリンク、および他の多くのプロパティのこれらの国の。 In my stylesheet I have entries to change link properties for the entire body of all my pages like this:私のスタイルシートでは私はこのようなすべてのページのリンクのプロパティを変更するには全身のエントリがあります：

 body a { color: #0033CC; text-decoration: none; } body a:visited { color: #003399; } body a:hover { text-decoration: underline; color: #003399; background: #000000; } （ body a { color: #0033CC; text-decoration: none; } body a:visited { color: #003399; } body a:hover { text-decoration: underline; color: #003399; background: #000000; } 

As you see, you can change the color for the 3 different states of links, you can change the text decoration (for any state), or the background color (for any state).見て分かるようにすると、任意の状態（ ） 、または背景色を任意の状態（ ）のテキスト装飾を変更することができますリンクの3つの状態のための色を変更することができます。 You can also leave any of these properties out.また、これらのプロパティを残すことができます。 For the text decoration property you could use any of these values: solid, underline, overline, line-through, none, dotted, or dashed.これらの値を使用する可能性がある任意のテキストを装飾プロパティの場合： 、固体、スルーoverlineラインを強調する、なし、点線、または駆け込みました。 While my code example above controls the link color for an entire body of a page, you can also change them at any level, like maybe your sidebar:私は上記のコード例は、ページの全体を体には、リンクの色を制御すると、どのレベルでも、おそらくあなたのサイドバーのように変更することができます：

 #sidebar a:hover { text-decoration: underline; } （ #sidebar a:hover { text-decoration: underline; } 

Experiment by modifying the link colors in your stylesheet now.あなたのスタイルシートのリンク色を変更して実験する。 Then experiment further by changing font sizes and colors.フォントのサイズや色を変更することでその後さらに実験。 To find cool color schemes to change colors of text, links, or backgroundsテキスト、リンク、または背景の色を変更するにはクールなカラースキームを検索するには Use this CSS color chart for reference 参考のために、このCSSのカラーチャートを使用して . 。 It’s probably the best color chart I’ve seen in years, mainly because it is based on pantone colors and paint strip samples from a hardware store.これはおそらく、最高のカラーチャートを見てきた私は年間で、主には、 PANTONEカラーは、塗料片のサンプルでは、ハードウェアベースのストアからだ。

The last wordpress theme hack (in this article) I’ll show you is for headings.最後のワードプレスのテーマ（この記事で）私はあなたの見出しが表示されますハック。 A heading is an “H” tag like <H1> <H2> <H3> <H4>, etc. Every post should have a (title) heading, and every widget or section in your sidebar has a heading.見出し<H1> <H2> <H3> <h4>当サイトのような"時間"タグなどすべての投稿は（タイトルが必要）の見出し、およびすべてのウィジェットをしているかをサイドバーには、見出しのセクションがある。 As shown earlier in my diagram - a heading is a “box” and that box has properties, like background, padding, margin, (text) color, (link) color, border, border-style, and more.前述のように私の図に示す-見出しは、 "ボックス"とは、ボックスで、背景のようなプロパティは、パディング、マージン、 （テキスト）の色、 （リンク）の色、枠線、境界線スタイル、および詳細。 By default in Wordpress the post headers are just linked text.ワードプレスのデフォルトでは、ポストヘッダーだけでテキストリンクされている。 While that’s ok, as you can see on my Main page and my post pages I prefer a black border, a background color, and some padding.その中のオクラホマ、あなたが私のメインページと私に黒い縁が、背景色を好む私の投稿ページで、いくつかのパディングを見ることができます。 In my sidebar I gave the sections headings a background image, a bottom border, and some margines.私のサイドバーでは、私のセクションの見出し、およびいくつかのmargines背景画像は、下の国境を与えた。 The list elements also have a bottom border.リストの要素は、下の縁がある。

 #sidebar ul { margin-bottom:5px; padding-left:5px; } #sidebar .sidebar_left ul h2 { padding-bottom: 1px; border-bottom: solid 1px #999999; font-size: 1.1em; } #sidebar h2 { background: #B0E2FF  url('/wp-content/images/header-bkg.gif') no-repeat; padding-left: 7px; padding-bottom: 0px; } #sidebar .sidebar_right ul h2 { padding-bottom: 1px; border-bottom: solid 1px #999999; font-size: 1.1em; } 

In the code example above I showed you nearly all my sidebar stylesheet properties so you can get an idea of the many different ways you can customize a header and list item.ので、あなたはヘッダーとリストアイテムをカスタマイズすることができます多くの異なる方法のアイデアを得ることができます上記のコード例では、ほぼすべて私が私のサイドバーのスタイルシートのプロパティを見せた。 You can see how I gave the sidebar H2 header a backround image instead of just a color.あなたがどのように私は、サイドバーのヘッダーの代わりに水素だけの色をイメージしたbackround見ることができます。 This the code I used to format the properties of the post headings:私は形式には、投稿の見出しのプロパティを使用これは、コード：

 .post h2 { background: #CCCCCC; border: 1px solid; border-color: #000000; padding-left: 10px; padding-right: 10px } 

Instead of just having linked text I gave my post headings a background color of grey, a solid 1 pixel black border, and some padding on the left and right sides.代わりに、左と右サイドにいくつかのパディングに自分の記事の見出し灰色の背景色は、固体1ピクセル黒い縁を与えただけのテキストリンクしている。 Now I think it’s much easier to see where one post ends an the next begins on my pages.現在、私はずっとここで1つの記事を参照してください終了する方が簡単だと思うが、私のページには次の始まり。

Use What You’ve Learned to Hack Your Theme Moreあなたのテーマを使用して、ほかのハッキングには何を学んだ

I’ve give you a way to hack away at your Wordpress theme without changing how your visitor’s see it.あなたはあなたのWordpressのテーマを変更せずにハックする方法をした訪問者がどのように参照してください。 I’ve told you about the Wordpress loop, and how to add things before, after, and inside it.私はWordpressのループの詳細については、どのようにしている前に、後のものを追加し、その中。 We hacked and added some PHP code, and then hacked our theme stylesheet to change properties to affect the layout and design of the page.私たちはハッキングと一部のPHPコードを追加して、レイアウトやデザインに影響を与えるには、ページのプロパティを変更するには我々のテーマのスタイルシートをハッキング。 I can’t teach you everything you need to know to create your own entire custom theme in just one post - but I can get you started!私はあなたを知って全体を1つだけの記事で、独自のカスタムテーマを作成する必要がすべてを教えることはできない-でも私はあなたを得ることができます開始！ Now you know enough about Wordpress themes to be dangerous and customize your own.これで十分に危険なことを知っていて、自分のWordpressのテーマをカスタマイズします。 Visit and bookmarkにアクセスしてブックマーク W3Schools.com for your HTML and CSS reference needs.あなたのHTMLとCSSの参照が必要です。 Research and read more articles explaining how to hack and customize your Wordpress theme further like theより多くの記事をハックする方法を研究し、さらにお客様のWordpressのテーマをカスタマイズするような説明を読む tutorials at WPDesigner.com WPDesigner.comでチュートリアル . 。

Please comment if this article helped you, you had a question, or a great worpress theme hack or customization to add!あなたが質問するか、大きなテーマworpressハッキングやカスタマイズを追加していた場合、この記事のコメントを助けてください！ I hope you found this information valuable - if so please feel free to bookmark, digg, and stumble this page!私がこの情報を貴重な-もしそうならば望みを発見してくださいブックマークに無料、 D iggは、感じて、このページつまずく！

Tags:タグ： tutorialチュートリアル , 、 wordpress-hackワードプレス-ハック