How to Create Your Own Wordpress Theme 어떻게 자신의 WordPress의 테마를 만들

Have you ever wanted to create your own custom wordpress theme? 혹시 자신만의 맞춤 WordPress의 테마를 만들고 싶었던 적 있니? 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… 어떻게이 분을 그냥 문제에 튜토리얼에 자신만의 포스트 주제를 해킹하는 방법을 터득 시작을 보여 드릴게요 ...

This is the second installment in the 이것은에서 두 번째 할부입니다 Managing Wordpress More Effectively Series 워드보다 효과적으로 관리하는 일련의 - 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. 마침내 - 그냥 말할만큼 충분한이며 내 자신의 Wordpress 주제는 내가 원한 그냥있는대로 정확하게 만들 수있습니다.

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. 너도 알다시피, 그것은 당신의 테마는 관리자만이 볼 때 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. 그래서 당신에 기록될만큼, 당신이 건물이 있지만 모든 방문자가 정기적으로 하나가 표시됩니다 새 사용자 지정 테마를 보게됩니다.

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에서 귀하의 웹 사이트에 로그인하고 지금 사용중인 바탕 화면 테마를 다운로드합니다. Give the folder a unique name like “custom-theme” or something. 폴더로 "custom - 테마"또는 무언가처럼 고유의 이름을 지정합니다. 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). 어떻게 하나 현재 사용하고 계시는의 두 번째 복사본을 수정하기 시작하여 자신만의 테마를 만들 보여주겠다 (하지만 당신은 그것에 대해 아는 사람도없이). 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. 당신이 가야 할 때 "프레 젠 테이션 -> 테마"Wordpress 대시보드, 종이 및 "style.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: 저는 이렇게 정의 한 내 생활에서 내 백업을 말할 수있는 하나 만들어 :

Once you’ve uploaded the folder to your theme directory, go back to your WP dashboard and “Presentation -> Themes” tab. 귀하의 테마 디렉토리에 귀하의 포스트는 대시보드와 "프레 젠 테이션 -> 테마"탭으로 돌아가 폴더에 업로드했습니다. 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: 난 단지 내가 필요로 전환하기 전에 관리자로 나타납니다 테스트 편집을 시작할 테마를 주제로 한이 같은 편집기에서 :

Now in the right hand list of files, find the one labeled “Main Index” and click on it. 파일의 목록을 지금 오른손에 하나의 레이블을 찾을 "주요 지수가"그것을 클릭합니다. 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> 

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 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”? 뭔지는 "Wordpress 루프"?

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 개의 게시물을 보여주는 "Wordpress 루프"이라고했다. 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 코드는 기본적으로 한 영어 () "너, 그리고 너 이런 것들까지 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. 이 Wordpress 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 귀하의 첫 번째 WordPress의 테마를 해킹

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. 첫 번째 라인은 하나의 파일 복사 및 붙여넣기 귀하의 주요 지수로, 계산 및 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 코드의 그 라인은 루프 (영어) "하면서 카운트 이후에 두 번째 게시물을 인쇄했다의 내용을 주요 - 색인 - 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'(또는 무엇을 당신이 그것을), 스크립트 또는 코드이든 뭐든간에 당신은 두번째 게시물을 데려가고 싶다는 추가 연락하고 싶어 전화를 만드는 것을 의미합니다. 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. 비록 모든 주제가있는 비트, 거의 매일 한 가지 (발견하지) 파일, 아카이브 페이지의 사이드바 (가끔 2), 댓글 주요 지수 단일 포스트 페이지 파일, 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. 홈페이지에 광고를하면 뭔가가 있기 때문에, 당신은 또 하나의 게시물이나 페이지, 또는 카테고리 페이지에 표시하려는 것이 지적한다. 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. 이렇게하면, 나중에 그 내용을 변경할 때, 당신은 그저 하나의 파일을 편집해야합니다.

Your Second Wordpress Theme Hack 네 번째 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(%)');?> 

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. 바로 내 예제에서 두 줄을 붙여 넣습니다. 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. 하나를 만들거나 웹상에서 무료로 적합한 것을 하나 찾을 수 있어야합니다.

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. 내 홈 페이지의 하단에 탐색을위한 포스트 - PageNavi 사용하고 끔찍한 ""와 함께 "다음"기본 WordPress의 탐색 링크가 이전 대체했다. I use WP-PostRatings for the star voting on each post. 내가 사용하는 포스트 - 각 게시물에 대한 투표를위한 스타 PostRatings. WP-Post Views displays the post count for each post, in addition to the “most viewed” posts in my sidebar. 포스트 - 포스트 뷰, "가장"게시물을 내 사이드바에서 볼 이외에 각 게시물에 대한 게시물 개수가 표시됩니다. The WP-Print plugin is for the printer friendly page link for posts. 이 포스트 - 인쇄 플러그인 게시물에 대한 프린터 친숙 페이지 링크입니다. 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. 처음 두 해킹하고 후에 코드를 추가하는 작업이 꽤 플러그인 페이지 해킹에 대한 귀하의 템플릿을 쉽게 해결 되겠구나.

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. the 레스터 찬 플러그인 외에도, 내 메인 페이지에서 내 페이지에 있음 게시물 뒤, "이", "이", 등 이러한 기능을 digg 이메일로 방문자의처럼 "이 피드"에 가입을위한 몇 가지 옵션이 나타납니다 실제로 피드 버너에서 왔습니다. I know on a lot sites I see people adding a “social” plugin to display a bazillion options for all the tagging sites. 저도 사람 ""플러그인을 모두 사회에 태그를 사이트에 대한 추가 옵션을 표시 bazillion 많은 사이트에서 알아 볼 수있다. 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. 내 피드에 대한 (대부분의 블로거들은 피드 버너를 사용합니까), 그리고 그들은 그 ""귀하의 게시물 뒤 플레어 - 어떤 생각을 추가할 예정 "피드 버너 Feedsmith"플러그인이 어떤 사회적 플러그인은 주위보다 훨씬 더 도움이 옵션을 사용하십시오. If you download and enable that plugin from Feedburner, you have to add the provided PHP code to your template as well. 다운로드 및 피드 버너에서 플러그인을 활성화하면, 당신뿐 템플릿을 제공하는 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. 그것은 똑같은 한 당신에게 당신의 컴퓨터에이 문서의 맨 처음에서 텍스트 편집기에서 테마 속성을 추가. 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”. 당신이 알아야 할 모든 웹 페이지는 "요소가있는"문서 ""입니다. 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는, 단락 (P의), 걸쳐, 시체, 제목 (홈), 인용구, 목록 태그 (, 이런, 리자이나 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 인증 텍스트, 텍스트 LI 빨강 녹색 될 수도 있지만, 단락 또는 "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. 하이퍼 링크는 "A"또는 앵커 태그입니다. There are 3 states of a link which are normal, visited, and hover. 정상에는 링크를 방문의 3 개주와 hover가없습니다. 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. 와 hover 링크의 마우스를 할 때 그것을 넘어 색상입니다. For all three of these states of a link you can change the color, text-decoration, background, and many other properties. 세분 모두 색상, 텍스트 - 장식, 배경을 변경할 수있는 링크, 그리고 많은 다른 속성의 이러한 상태. 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; } 

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; } 

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. 지난 WordPress의 테마 (이 문서에) 난 니가 머리글을 위해 해킹을 보여줄께요. 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>이 같은 "H"가 태그 등 모든 게시물 (제목도한다)을 향하고, 그리고 모든 위젯이나 사이드바에 섹션을 가지고 가고있습니다. 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. 내가 얼마나 사이드바 헤더 H2를 대신 그냥 색상 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. 지금은 그게 많이 어디서 끝나는지 하나의 게시물을 쉽게 생각한다 차기 시작 내 페이지에 게재됩니다.

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! 난 당신을 알고 그냥 하나의 게시물에 자신만의 테마를 만들려면 전체를 정의하는 데 필요한 모든 가르쳐주지 못할 -하지만 난 당신을 구할 수 시작! 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! 난 당신이 정보의 가치 - 만약 발견 그러니 제발 희망을 즐겨찾기에 무료, digg, 기분이 페이지를 더듬다!

Tags: 태그 : tutorial 튜토리얼 , wordpress-hack 워드 - 해킹