How to Create Your Own Wordpress Theme Como criar seu próprio tema Wordpress

Have you ever wanted to create your own custom wordpress theme? Alguma vez você já quis criar seu próprio costume wordpress tema? 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… Eu vou mostrar-lhe como começar a aprender a prostituir-se afastado em seu próprio tema WP neste tutorial em apenas uma questão de minutos ...

This is the second installment in the Esta é a segunda parcela no Managing Wordpress More Effectively Series Gerir mais eficazmente série 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! - Para que você possa obter o controle do seu blog e torcer cada último bit fora de seu conteúdo e visitantes, poupando-lhe tempo e tornando-lhe mais dinheiro!

If you’re a regular reader of this blog, you might notice that JTPratt’s Blogging Mistakes now has a new theme! Se você for um leitor regular deste blog, você vai perceber que JTPratt's Blogar Mistakes tem agora um novo tema! 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. Acho que um blog cresce com o blogger, e o maior erro que você pode fazer é não modificar o seu blog para exibir seu progresso. I started out in 2007 with a really nice theme (Prosense), because it did most of what I wanted and looked professional. Eu comecei em 2007 com um fora muito simpática tema (Prosense), porque ele fez mais do que eu queria e olhou profissional. But I hacked and hacked and hacked it some more to slowly get rid of things I didn’t like. Mas eu cortada e cortada cortada e mais alguns para que lentamente se livrar de coisas que eu não gostei. Finally - I just had to say enough is enough and create my own Wordpress theme just exactly the way I wanted it. Finalmente - eu só tive de dizer basta e criar a minha própria Wordpress tema exatamente do jeito que eu queria isso.

Wordpress Theme Hacking Wordpress tema "hacking"

If you’re curious and you know some HTML and CSS (even just enough to be dangerous) this guide was made for you. Se você estiver curioso e sabe algum HTML e CSS (mesmo que apenas o suficiente para ser perigoso) este guia foi feito para você. 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”. Isto não é definitiva nem guide nada, mas vai dar para começar e tenho certeza que ele lhe dará algumas boas idéias para criar seu próprio "personalizado Wordpress tema". This is the “How to Create Your Own Wordpress Theme” tutorial, or “How to Hack Wordpress Themes”. Este é o "Como Criar Wordpress Theme" tutorial, ou "Como Hack Wordpress Temas". The first thing you need to do is get the A primeira coisa que você precisará fazer é pegar o Theme Test Drive 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. Eu usei esse plugin para duas semanas, para que eu pudesse hack e testar meu novo tema a morte antes de pô-lo ao vivo. You see, it allows you to set a theme that only the admin will see when logged into the Wordpress. Você vê, ele permite que você defina um tema que apenas o administrador vai ver quando conectado ao 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. Então, enquanto você estiver conectado, você verá o novo tema personalizado que você está construindo, mas todos os seus visitantes vão ver a regular um.

Creating Your Own WP Theme from a Copy Criar o seu próprio tema a partir de uma cópia WP

Now login to your web site in FTP and download the theme you’re using now to your desktop. Agora, faça o login no FTP em seu site e faça o download do tema você está usando agora para seu desktop. Give the folder a unique name like “custom-theme” or something. Dê à pasta um nome único tipo "custom-tema" ou algo assim. 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). Estou indo para mostrar-lhe como criar seu próprio tema, começando a modificar uma segunda cópia do que você está usando atualmente um (sem que ninguém, mas você sabendo sobre ele). Now, using Notepad (or any text editor) open the “style.css” file. Agora, usando o Bloco de Notas (ou qualquer editor de texto) abrir o "style.css" arquivo. At the top of the file are some comment lines. No topo do arquivo estão algumas linhas de comentário. 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. Quando você vai para o "Apresentação -> Temas" Wordpress no seu painel de instrumentos, os títulos e as descrições dos temas que tem instalado provir do "style.css" arquivo desses temas. The style file you just opened should already have comments like this as the first few lines like this: O estilo arquivo que você acabou de abrir já deveria ter comentários como este que as primeiras linhas desta forma:

 /* 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. Modificar todas as linhas com as suas próprias informações, elimine a "screenshot.png" arquivo da pasta e, em seguida, fazer upload de toda a pasta de volta ao seu tema no diretório FTP. If you have a graphics editor, you could instead open the screenshot file and modify it to go with your theme. Se você tiver um editor gráfico, você poderia abrir a tela em vez arquivo e modificá-lo para ir com o seu tema. I created a custom one so I could tell my backup from my live one like this: Criei um costume um modo posso dizer ao meu backup do meu viver um como este:

Once you’ve uploaded the folder to your theme directory, go back to your WP dashboard and “Presentation -> Themes” tab. Depois que você enviou o tema para o seu diretório pasta, volte para o WP tablier e "Apresentação -> Temas" tab. Your new theme should now be an option. O novo tema deverá agora ser uma opção. 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. Se você também criou uma "screenshot.png" (ele deve ser chamado exatamente isso) e carregou-o na pasta também - a nova imagem do seu tema vai aparecer assim como no meu exemplo acima.

How to Test a Wordpress Theme as Admin Only Como testar a um Wordpress Theme Apenas como Admin

Now, enable the “Theme Test Drive” plugin you downloaded and installed if you haven’t already. Agora, permitir que o "Tema Test Drive" plugin você baixou e instalou se já não o fez. Go to “Presentation -> Theme Test drive”, choose your new theme from the dropdown and click the “enable” button. Ir para a "Apresentação -> Theme Test Drive", escolha o seu novo tema na lista suspensa e clique no botão "habilitar" botão.

That’s it - now your ready to start theme hacking! That's it - agora pronto para iniciar o seu tema "hacking"! Go to the “Presentation -> Theme Editor” tab and in the drop down menu your “current” theme will be listed like this: Vá para a "Apresentação -> Theme Editor" na guia e no seu menu drop-down "atual", tema será listada como este:

That’s my current theme everyone sees. Aquele é meu atual tema todos vejam. 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: Antes de eu começar a edição do teste tema só vou ver como admin eu preciso mudar para que o tema em um editor como este:

Now in the right hand list of files, find the one labeled “Main Index” and click on it. Agora em sua mão direita lista de arquivos, achar etiquetados a um "índice principal" e clique sobre ele. 10 or 20 lines in you should see something like this: 10 ou 20 linhas em que você deve ver algo como isto:

 <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. Logo após a entrada div tag acrescentar um monte de texto aleatório, salve o arquivo, e em outra guia ou janela do navegador carga até o seu blog home page. Does it contain the random text? Será que contêm o texto aleatório? If it does - great! Caso isso aconteça - uma grande! If not, go back and follow the directions again to see what you did wrong. Se não, volte e siga as instruções novamente para ver o que você fez de errado. 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 Agora eu não sei quanta code HTML e CSS sabem - por isso, se você precisa de uma referência, não se esqueça de visitar e favorito W3Schools which is a free online resource for web coding. que é um recurso on-line gratuita para codificação da web. They have a reference page for each and every tag, and many free tutorials. Eles têm uma referência para cada página e cada etiqueta, e muitos tutoriais livre.

What is the “Wordpress Loop”? Qual é o "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. Dependendo do volume código HTML e CSS sabem (e estão dispostos a mexer com) agora você remover o texto aleatório e começar andar com seu tema. 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. Lembre-se - só você pode ver as mudanças (enquanto você estiver conectado como administrador), e você pode até fazer grandes alterações à barra lateral, cabeçalho e rodapé. The code I just showed you is what puts the posts on the main page. O código Eu só lhe mostrou o que coloca os posts na página principal. Not the titles or meta information, just the post content itself. Nem os títulos ou meta informações, basta postar o conteúdo propriamente dito. You home page (Main Index) contains a “loop”. Você home page (principal índice) contém um "loop". It’s called the “Wordpress loop” because by default your Main Index shows 10 posts. É chamado o "Wordpress loop" por omissão, porque o seu principal índice mostra 10 lugares. 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. O código PHP para o fundo diz olhe (em Inglês) "Uma vez que você encontrar os primeiros lugares, fazer estas coisas repetidas vezes até chegar ao décimo posto. 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. Então, se você colocar algo "no ciclo" (como uma imagem ou texto) é a exibição em sua página principal índice 10 vezes antes afer ou o conteúdo de cada post começando com o primeiro até o último.

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”. Estou lhe dizendo isso porque se você quiser um gráfico no topo de sua página antes de os lugares (como o meu) que você tem que colocá-la "antes do 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”. Se você quiser que ela depois de todos os lugares, como o 336 × 280 anúncio no fundo de minha página principal índice, ele tem que ir ", após o loop". While EVERY theme is a bit different I this is what you look for: Embora cada tema é um pouco diferente é o que eu olhe para você:

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

The Wordpress loop starts with the have_posts line and ends with the endwhile line. O ciclo inicia-se com o Wordpress have_posts linha e termina com o endwhile linha. Before and after those 2 lines would be “before and after the loop”. Antes e depois destas 2 linhas seria "antes e depois do loop". Somewhere in between those 2 lines would be placing something “in the loop”. Algures entre aqueles em 2 linhas seria colocar algo "no ciclo". I wanted to explain this to you before you started hacking around and wondered why your changes showed up in weird place. Eu queria explicar isso para você antes que você começou em torno de "hacking" e se perguntou por que razão as suas alterações mostraram-se em lugar estranho. 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. Para prática, tente adicionar algum tipo de código ou de um script de anúncio (ou apenas uma imagem vinculada, se você souber o código), antes ou após o circuito fechado em seu principal índice página. 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. Se você for novo a esta prática é boa, e você deve perceber o porquê de tantos de nós hack nosso tema à mão - é simplesmente impossível ter um plugin para cada pequena alteração que pretende efectuar.

Your First Wordpress Theme Hack Seu primeiro tema Wordpress Hack

Now I’m going to teach you your first real ‘hack’. Agora eu estou indo para ensinar-lhe o seu primeiro verdadeiro '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. Digamos que você quer mostrar algum tipo de texto, imagem ou anúncio de mais baixo Índice sua página principal, mas não antes ou depois de "o ciclo", e não depois que todos os 10 lugares. You have to insert a line of code to tell “the loop” to display it only once (and where) Você tem que inserir uma linha de código para dizer "o ciclo" para exibi-lo apenas uma vez (e quando)

 <?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. A primeira linha é aquela que você copie e cole no seu principal índice arquivo, antes de colocá-la na contagem e endwhile linhas exatamente como no meu exemplo. 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”. Essa linha de código PHP diz ao lacete (em Inglês) "enquanto estiver contando, após o segundo posto imprimir o conteúdo dos principais índices de-ad.php arquivo". 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. Isto significa, naturalmente, é preciso criar um arquivo chamado 'main-index-ad.php »(ou seja lá como você queira chamá-lo) e adicione o script ou código ou o que quiser depois de colocar o segundo posto. Make the change in your Main Index file and “save”. Faça a mudança em seu principal índice arquivo e "salvar". Upload the main-index-ad.php file to your theme folder, and then reload your home page to test your very first theme hack. Faça o upload dos principais índices de-ad.php arquivo para o seu tema pasta, e depois refrescar a sua home page para testar o seu primeiro tema muito hack. Did it work? Funcionou?

So far, we’ve been working on only the “Main Index” or index.php file for theme hacks. Até agora, já estávamos trabalhando apenas sobre os "Principais Index" index.php ou arquivo de tema hacks. 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. Embora cada tema é um pouco diferente, quase cada uma tem um índice principal, um único Post, um arquivo página, Modelo 404 (arquivo não encontrado), lateral (por vezes 2), Comentários, e Arquivos página. Some themes also have a Category page, but if they don’t the Archives.php page will be used for category pages too. Alguns temas também têm uma página da categoria, mas se não o Archives.php página será usada para a categoria páginas também. 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. Eu recordá-lo porque se você o anúncio algo para a página inicial, você pode também queremos que ele apareça em lugares simples, ou páginas, ou categoria páginas. Like in the previous example you might consider making several files with ads, text, or images and uploading them to your theme directory. Tal como no exemplo anterior é bom considerar fazer vários arquivos com anúncios de texto, ou as imagens e enviá-las para o seu diretório tema. You can use the same line of code in the previous example to include any file before or after the loop. Você pode usar a mesma linha de código no exemplo anterior para incluir qualquer arquivo antes ou após o loop. Just remove the count statement like this: Basta remover a contar afirmação como esta:

 <?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. É muito mais a acrescentar coisas mais inteligentes para as suas páginas com um arquivo como este se ele vai estar em vários lugares. Otherwise, you have to manually modify multiple files. Caso contrário, você tem de modificar manualmente vários arquivos. If you do it like this, in the future when you need to change that content, you just edit the one file. Se você fizer isso como este, no futuro, quando você precisar alterar esse conteúdo, basta editar a um arquivo.

Your Second Wordpress Theme Hack Seu segundo tema Wordpress Hack

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. Por muito tempo eu queria que tivesse a acrescentar ao comentário contar com meu post sobre meus títulos índice página onde estaria ligada à realidade postar um comentário. Oh - an I wanted a little comment graphic beside them too. Ah - um comentário que eu queria um pouco gráfico ao lado deles também. Basically “inside the loop” you just add the following PHP code somewhere are your post title: Basicamente "dentro do ciclo" que você acabou de adicionar o seguinte código PHP em algum lugar estão os seus post título:

 <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. A primeira linha é o código que você precisa encontrar "no ciclo", que imprime o título post posição. Your may look slightly different, just look for “the_title” in the line. Seu olhar maio ligeiramente diferente, basta olhar para "the_title" na linha. Right after that paste the two lines in my example. Logo depois que colar as duas linhas no meu exemplo. You’ll meed to modify the first line with the name of and correct path to your comment icon. Você galardão para modificar a primeira linha e com o nome de caminho correto para o seu comentário ícone. You’ll need to create one or find a free suitable one on the web. Será necessário criar um ou encontrar um adequado um livre na web.

Adding a plugin to do the Hacking for You Adicionando um plugin para fazer o Hacking para Você

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. Há ainda algumas coisas que o Wordpress "não irá fazer" o que eu preferia ter no meu blog que são facilmente adicionados com um plugin. For most of these things I use Para a maioria dessas coisas eu uso Lester Chan’s Wordpress Plugins 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. Eu uso o WP-PageNavi para a navegação no fundo de minha home page, e substituiu o horrível "anterior" e "próximo" padrão wordpress navegação laços com ela. I use WP-PostRatings for the star voting on each post. Eu uso o WP-PostRatings para as estrelas na votação sobre cada posto. WP-Post Views displays the post count for each post, in addition to the “most viewed” posts in my sidebar. WP-Post Views exibe a contagem de postagens para cada post, para além da "mais vistos" posts no meu sidebar. The WP-Print plugin is for the printer friendly page link for posts. O WP-Print é plugin para o amigável da impressora página link para os 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. Com todos esses Lester Chan Wordpress plugins, uma vez que você instala e ativá-las, tudo que você tem que fazer é copiar e colar a linha de código PHP e páginas sobre os lugares que você queira que o plugin para mostrar algo. You get that code on the documentation “usage” page for each plugin on Lester’s site. Tira essa documentação sobre o código "usos" de cada página do site do plugin em Lester. 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. Depois de fazer as duas primeiras hacks, deverá ser bastante fácil de adicionar o código às suas páginas para o modelo hacks plugin para o trabalho.

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. Para além dos plugins Lester Chan, nas minhas páginas após os posts sobre a minha página principal, você verá algumas opções para o gosto do visitante "inscrever-se neste feed", "este e-mail", "digg isto", etc Estas funcionalidades realmente vêm de FeedBurner. I know on a lot sites I see people adding a “social” plugin to display a bazillion options for all the tagging sites. Conheço um monte de sites vejo as pessoas adicionando um "social" bazillion um plugin para exibir o tagging opções para todos os 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. Eu uso o FeedBurner para o meu feed (como a maioria dos blogueiros fazem), e eles têm um "FeedBurner Feedsmith" plugin que irá acrescentar que "flare", após seus posts - Acho que tenho muito mais opções do que qualquer ajuda social em torno plugin. If you download and enable that plugin from Feedburner, you have to add the provided PHP code to your template as well. Se você baixar e permitir que o plugin do FeedBurner, você tem que adicionar o código PHP fornecido ao seu modelo tão bem.

Hacking Your Theme Stylesheet Hacking seu tema de estilo

Your stylesheet contains all properties of all the colors and sizes of items on your blog. Seu estilo contém todas as propriedades de todas as cores e os tamanhos dos itens em seu blog. It has background and link colors, font sizes, bold, italics, you name it. Possui fundo e elo cores, tamanhos fonte, negrito, itálico, a escolha é sua. In your dashboard theme editor click on “Stylesheet” to bring up this file. Em seu painel temático editor clique em "estilo" para abrir este arquivo. 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. É o mesmo que você adicionou a um tema de propriedades em seu computador em um editor de texto no início deste artigo. 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. SEU estilo é mais do que provavelmente vai ser completamente diferente do meu, e edição, não será tão fácil quanto copiar e colar o mais cedo hacks. What you need to know is that every web page is a “document” that has “elements”. O que você precisa saber é que cada página da web é um "documento" que tem "elementos". 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”. Os elementos estão na configuração de uma "caixa modelo", e itens como div's, parágrafos (p's), vãos, o corpo, posições (h's), blockquote, ea lista tags (ul, ol, li ou underordered list, lista ordenada, e lista) são todas as "boxes". In CSS code everything “nests” and “properties” can be assigned to elements at any level. No código CSS tudo "ninhos" e "propriedades" pode ser atribuída a elementos, de qualquer nível. Here’sa diagram example: Aqui o diagrama exemplo:

That image is an example of how all the boxes would look if you drew them all out. Essa imagem é um exemplo de como todas as caixas iria ficar se você chamou-os todos para fora. Here’s how those boxes look as (well formatted) HTML code: Veja como aquelas caixas olhar como (bem formatados) código 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. Eu queria que você visualize antes de você iniciar esse estilo entrecortado por isso você poderia saber sobre como funciona nidificação. If you change the (font) “color” to grey at the “body” level all the text on the page will be grey. Se você mudar o (font) "cor" para cinza, o "corpo" nível de todo o texto na página será cinzenta. 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. Se você também alterar a cor de verde no "li" lista item ou nível, todo o texto na página será cinzento exceto os itens de lista, que será verde. 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. Se você mudar o ponto ou "p" a cor original vermelho, em seguida, tanto o texto e UL P será vermelho, o texto será LI verde, mas o resto do corpo e da div texto acima desses níveis ainda será cinzenta. This is called “inheritance”, and properties start at the highest level and stay that property until changed lower down the nesting chain. Isto é chamado de "herança", e propriedades começar ao mais alto nível e ficar imóvel até que mudaram a nidificação cadeia inferior para baixo.

The first thing you might want to hack is your link colors and properties. A primeira coisa que você pode querer hack é o seu elo cores e propriedades. There are sooooo many ways to change your links to make them stand out. Sooooo, existem muitas maneiras de alterar seus links para torná-los se destacam. A hyperlink is an “a” or anchor tag. Um hiperlink é um "a" ou tag âncora. There are 3 states of a link which are normal, visited, and hover. Há 3 estados de um link que são normais, visitou, e pouse. Normal is what the color of the link is before you click it. Normal é aquilo que a cor do link é antes de você clicar nele. Visited is the color of the link once you’ve visited it. Visitada é a cor do link visitado, uma vez que você tiver. And hover is the color of the link when your mouse goes over it. E ficar suspenso no ar é a cor do link quando o mouse passa sobre ela. For all three of these states of a link you can change the color, text-decoration, background, and many other properties. Para todos os três destes estados de um link você pode mudar a cor, text-decoration, plano de fundo, e muitas outras propriedades. In my stylesheet I have entries to change link properties for the entire body of all my pages like this: No meu estilo tenho inscrições para alterar propriedades link para todo o corpo de todas as minhas páginas como este:

 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). Como você vê, você pode mudar a cor para os diferentes estados de 3 ligações, você pode alterar o texto decoração (para qualquer estado), ou a cor de fundo (para qualquer estado). You can also leave any of these properties out. Você também pode deixar qualquer uma destas propriedades fora. For the text decoration property you could use any of these values: solid, underline, overline, line-through, none, dotted, or dashed. Para o texto decoração imóvel que você poderia usar qualquer um desses valores: sólidos, sublinhado, sobrescrito line-through, nenhum, pontilhada ou tracejada. 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: Enquanto o meu código acima exemplo colorida controla o link para um corpo inteiro de uma página, você também pode mudá-las a qualquer nível, talvez como sua barra lateral:

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

Experiment by modifying the link colors in your stylesheet now. Experiência cores, alterando o link em seu estilo agora. Then experiment further by changing font sizes and colors. Depois, mais experiência, alterando font tamanhos e cores. To find cool color schemes to change colors of text, links, or backgrounds Para localizar fixe esquemas de cores para alterar as cores de texto, links, ou backgrounds Use this CSS color chart for reference Utilize esta cor CSS para a referência gráfico . 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. É provavelmente a melhor cor gráfico tenho visto em anos, principalmente porque é baseado em cores e tintas pantone tira amostras de uma loja de material de construção.

The last wordpress theme hack (in this article) I’ll show you is for headings. O último tema wordpress hack (neste artigo) eu vou mostrar para vocês é rubricas. 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. Um título é um "H" tag gosta <H1> <h2> <h3> <h4>, etc Cada posto deverá ter um (título) posição, e cada elemento ou seção na barra lateral tem uma posição. 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. Conforme demonstrado anteriormente no meu esquema - uma posição é uma "caixa" e que a casa tem propriedades, como pano de fundo, estofamento, margem, (texto) cor, (link) color, border, border-style, e muito mais. By default in Wordpress the post headers are just linked text. Por padrão o Wordpress no post são apenas cabeçalhos texto ligado. 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. Enquanto isso é ok, como vocês podem ver na minha página principal e meu post páginas Prefiro uma borda preta, uma cor de fundo, e algumas padding. In my sidebar I gave the sections headings a background image, a bottom border, and some margines. Na minha barra lateral que dei as seções rubricas uma imagem de fundo, um fundo fronteira, e alguns margines. The list elements also have a bottom border. A lista também elementos têm um fundo fronteira.

 #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. No código de exemplo acima eu mostrei-lhe quase todo o meu sidebar propriedades de estilo para que você possa ter uma idéia das muitas maneiras diferentes que você pode personalizar um cabeçalho eo item da lista. You can see how I gave the sidebar H2 header a backround image instead of just a color. Você pode ver como eu dei a barra lateral H2 cabeçalho um backround imagem em vez de apenas uma cor. This the code I used to format the properties of the post headings: Este o código que eu usei para formatar as propriedades do pós designações:

 .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. Em vez de apenas ter ligado texto que dei o meu post rubricas uma cor de fundo de cinza, uma sólida 1 pixel preto fronteira, e alguns padding na esquerda e direita lados. Now I think it’s much easier to see where one post ends an the next begins on my pages. Agora acho que é muito mais fácil ver onde termina um a um posto próximo começa nas minhas páginas.

Use What You’ve Learned to Hack Your Theme More Use o que você aprendeu a prostituir-se o seu tema mais

I’ve give you a way to hack away at your Wordpress theme without changing how your visitor’s see it. Eu dar-lhe um caminho para fora hack no seu Wordpress tema sem alterar a forma como o visitante vê-lo. I’ve told you about the Wordpress loop, and how to add things before, after, and inside it. Eu já te contei sobre o Wordpress ciclo, e como adicionar coisas antes, depois, e no seu interior. 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. Nós cortada e acrescentou alguns código PHP, e então cortada nosso tema de estilo para alterar as propriedades de afectar o layout e design da página. 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! Eu não posso te ensinar tudo que você precisa saber para criar seu próprio tema personalizado inteiro em apenas um lugar - mas posso começá-lo começou! Now you know enough about Wordpress themes to be dangerous and customize your own. Agora você sabe o suficiente sobre Wordpress temas que são perigosos e personalize o seu próprio. Visit and bookmark Visite e favorito W3Schools.com for your HTML and CSS reference needs. HTML e CSS para sua referência precisa. Research and read more articles explaining how to hack and customize your Wordpress theme further like the Investigação e leia mais artigos explicando como fazer o hack e personalize o seu Wordpress como o tema mais tutorials at WPDesigner.com tutoriais em WPDesigner.com .

Please comment if this article helped you, you had a question, or a great worpress theme hack or customization to add! Por favor, comente este artigo se te ajudei, você tinha uma pergunta, ou um grande tema worpress hack ou customização de acrescentar! I hope you found this information valuable - if so please feel free to bookmark, digg, and stumble this page! Espero que tenha encontrado essa informação valiosa - nesse caso sinta-se livre para marcar, digg, e tropeçar nesta página!

Tags: tutorial , wordpress-hack