How to Create Your Own Wordpress Theme Cómo crear tu propio tema de Wordpress

Have you ever wanted to create your own custom wordpress theme? ¿Alguna vez has querido crear su propio tema de 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… Te mostraré cómo empezar a aprender a hackear inmediatamente a su propio WP tema en este tutorial en tan sólo una cuestión de minutos ...

This is the second installment in the Esta es la segunda cuota en el Managing Wordpress More Effectively Series Gestión de Wordpress de manera más eficaz serie - 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 pueda obtener el control de su blog y exprimir hasta el último poco de su contenido y los visitantes, lo que permite ahorrar tiempo y hacer más dinero!

If you’re a regular reader of this blog, you might notice that JTPratt’s Blogging Mistakes now has a new theme! Si usted es un lector regular de este blog, usted podría notar que la JTPratt Blogging errores ahora tiene un nuevo 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. Creo que un blog crece con el blogger, y el error más grande que usted puede hacer es no modificar tu blog para mostrar su progreso. I started out in 2007 with a really nice theme (Prosense), because it did most of what I wanted and looked professional. Yo empecé en 2007 con un tema muy bonito (Prosense), porque lo hizo más de lo que yo quería y esperaba profesional. But I hacked and hacked and hacked it some more to slowly get rid of things I didn’t like. Pero yo hackeado y hackeado hackeado y es un poco más lentamente a deshacernos de cosas que no me gustó. Finally - I just had to say enough is enough and create my own Wordpress theme just exactly the way I wanted it. Por último - Yo sólo tenía que decir ya basta y crear mi propio Wordpress tema exactamente de la forma que yo quería.

Wordpress Theme Hacking Wordpress tema de la piratería

If you’re curious and you know some HTML and CSS (even just enough to be dangerous) this guide was made for you. Si usted es curioso y lo sabes HTML y CSS (aunque sólo lo suficiente como para ser peligroso) Esta guía fue hecha para usted. 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”. Esta guía no es definitivo ni nada, sino que empezar y estoy seguro de que le dará algunas buenas ideas para crear su propia "costumbre Wordpress tema". This is the “How to Create Your Own Wordpress Theme” tutorial, or “How to Hack Wordpress Themes”. Este es el "Cómo crear tu propio Wordpress Theme" tutorial, o "Cómo Hack Wordpress Temas". The first thing you need to do is get the La primera cosa que necesitamos hacer es obtener el Theme Test Drive Tema de prueba plugin. I used this plugin for two weeks, so I could hack and test my new theme to death before putting it live. He utilizado este complemento durante dos semanas, por lo que podría piratear y poner a prueba mi nuevo tema a la muerte antes de su puesta en vivo. You see, it allows you to set a theme that only the admin will see when logged into the Wordpress. Como ve, no le permite definir un tema que sólo el administrador cuando se registra en el 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. Así que, mientras usted está conectado, usted verá el nuevo tema personalizado que está, pero la construcción de todos sus visitantes ver el uno ordinario.

Creating Your Own WP Theme from a Copy Crear tu propio tema de WP una copia

Now login to your web site in FTP and download the theme you’re using now to your desktop. Ahora acceder a su sitio web en FTP y descargar el tema que se está usando ahora en su escritorio. Give the folder a unique name like “custom-theme” or something. Dar a la carpeta un nombre único como "tema personalizado" o algo así. 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). Voy a mostrar cómo crear tu propio tema de empezar a modificar una segunda copia de la que usted está utilizando actualmente (sin que nadie, pero a sabiendas de que sobre él). Now, using Notepad (or any text editor) open the “style.css” file. Ahora, con el Bloc de notas (o cualquier editor de texto) abrir el "style.css" archivo. At the top of the file are some comment lines. En la parte superior del archivo son algunas líneas de comentarios. 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. Cuando vaya a "Presentación -> Temas" en su tablero de Wordpress, los títulos y las descripciones de los temas que ha instalado proceden de la "style.css" archivo de esos temas. The style file you just opened should already have comments like this as the first few lines like this: El estilo de archivo que acaba de abrir ya deberían haber comentarios como este, como las primeras líneas como esta:

 /* 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 las líneas con sus propios detalles, elimine el "screenshot.png" archivo de la carpeta y, a continuación, subir la carpeta entera de vuelta a su tema en el directorio FTP. If you have a graphics editor, you could instead open the screenshot file and modify it to go with your theme. Si usted tiene un editor de gráficos, se puede abrir en lugar de la captura de pantalla y modificar el archivo para ir con su tema. I created a custom one so I could tell my backup from my live one like this: He creado una costumbre, así que uno podría decirle a mi copia de seguridad de mi vivir una como esta:

Once you’ve uploaded the folder to your theme directory, go back to your WP dashboard and “Presentation -> Themes” tab. Una vez que hayas subido la carpeta a tu directorio de tema, vuelve a tu tablero WP y "Presentación -> Temas" ficha. Your new theme should now be an option. Su nuevo tema ahora debería ser una opción. 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. Si usted ha creado también un "screenshot.png" (que debe llamarse exactamente eso) y subido en la carpeta demasiado - la nueva imagen de su tema se mostrarán, así como en mi ejemplo anterior.

How to Test a Wordpress Theme as Admin Only Cómo probar Wordpress un tema como administrador único

Now, enable the “Theme Test Drive” plugin you downloaded and installed if you haven’t already. Ahora, permitir que el "Tema probar" que ha descargado el plugin instalado y si no lo ha hecho. Go to “Presentation -> Theme Test drive”, choose your new theme from the dropdown and click the “enable” button. Vaya a "Presentación -> Tema probar", seleccione su nuevo tema de la lista desplegable y haga clic en el "permitir" el botón.

That’s it - now your ready to start theme hacking! Eso es todo - su ahora listo para iniciar el tema de hacking! Go to the “Presentation -> Theme Editor” tab and in the drop down menu your “current” theme will be listed like this: Vaya a la "Presentación -> Tema Editor" y en el menú desplegable de su "actual" es el tema será incluido como este:

That’s my current theme everyone sees. Esa es mi tema actual de todo el mundo ve. 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 empezar la edición de la prueba tema sólo voy a ver como administrador tengo que cambiar a uno que en el tema editor de este modo:

Now in the right hand list of files, find the one labeled “Main Index” and click on it. Ahora, en la mano derecha lista de archivos, busque el uno llamado "principal" y haga clic sobre él. 10 or 20 lines in you should see something like this: 10 o 20 líneas en que debe ver algo como esto:

 <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. Inmediatamente después de la entrada etiqueta div añadir un montón de texto aleatorio, guarde el archivo y, en otra pestaña o ventana del navegador cargar tu blog página de inicio. Does it contain the random text? ¿Contienen el texto al azar? If it does - great! Si lo hace - grandes! If not, go back and follow the directions again to see what you did wrong. Si no, vuelva atrás y siga las instrucciones de nuevo para ver lo que hiciste mal. 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 Ahora no sé cuánto HTML y CSS código ustedes saben - de modo que si usted necesita una referencia para estar seguros de visita y marcador W3Schools which is a free online resource for web coding. que es un recurso en línea libre de codificación web. They have a reference page for each and every tag, and many free tutorials. Tienen una página de referencia para todos y cada uno de etiqueta, y muchos tutoriales gratis.

What is the “Wordpress Loop”? ¿Qué es el "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. Dependiendo de la cantidad de HTML y CSS código ustedes saben (y están dispuestos a lío con) ahora de quitar el texto al azar y empezar a jugar alrededor con su 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. Recuerde - sólo usted puede ver los cambios (mientras usted está conectado como administrador), y puede incluso hacer cambios importantes en la barra lateral, cabecera y pie de página. The code I just showed you is what puts the posts on the main page. El código que acabo de mostró que es lo que coloca a los puestos en la página principal. Not the titles or meta information, just the post content itself. No los títulos o meta información, acaba de publicar contenido de la misma. You home page (Main Index) contains a “loop”. Usted página de inicio (principal) contiene un "bucle". It’s called the “Wordpress loop” because by default your Main Index shows 10 posts. Se llama el "Wordpress bucle", ya que por defecto, su principal índice muestra 10 puestos. 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. El código PHP para la apariencia, básicamente, dice (en Inglés) "una vez que encuentre el primer puestos, hacer estas cosas una y otra vez hasta llegar el décimo puesto. 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. Así que si poner algo "en el bucle" (como una imagen o un texto) es que aparezca en su página principal 10 veces antes de afer o el contenido de cada puesto que comienza con la primera, hasta que llegaron a la última.

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”. Yo estoy diciendo esto porque si quieres una gráfica en la parte superior de la página antes de los puestos (como el mío) que tienen lugar a que "antes de que el bucle". 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”. Si desea que después de todos los puestos, al igual que el 336 × 280 anuncios en la parte inferior de mi página principal, que tiene que ir "después de que el bucle". While EVERY theme is a bit different I this is what you look for: Si bien cada uno de los temas es un poco diferente que eso es lo que usted busca:

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

The Wordpress loop starts with the have_posts line and ends with the endwhile line. El Wordpress bucle se inicia con la have_posts línea y termina con el endwhile línea. Before and after those 2 lines would be “before and after the loop”. Antes y después de las 2 líneas sería "antes y después del bucle". Somewhere in between those 2 lines would be placing something “in the loop”. En algún lugar entre las 2 líneas sería poner algo "en el bucle". I wanted to explain this to you before you started hacking around and wondered why your changes showed up in weird place. Quería explicar esto antes de que usted comenzó en torno a la piratería y se pregunta por qué los cambios se presentaron en el lugar extraño. 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 la práctica, pruebe a añadir algún tipo de código o script para un anuncio (o simplemente una imagen vinculada si conoce el código) antes o después del bucle en su página de índice principal. 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. Si eres nuevo en esto de las buenas prácticas, y usted debe averiguar por qué tantos de nosotros hack nuestro tema a mano - es simplemente imposible tener un plugin para cada pequeño modificación que desee realizar.

Your First Wordpress Theme Hack Su primer tema Hack Wordpress

Now I’m going to teach you your first real ‘hack’. Ahora voy a enseñar que su primer '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 usted quiere mostrar algún tipo de texto, imagen o anuncio de más abajo de su página principal, pero no antes o después de "bucle" y no después de los 10 puestos. You have to insert a line of code to tell “the loop” to display it only once (and where) Tienes que insertar una línea de código para decir "el bucle" para mostrar sólo una vez (y cuando)

 <?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. La primera línea es la de copiar y pegar en su archivo de índice principal, puesto que antes de la cuenta y líneas endwhile al igual que en mi ejemplo. 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”. Esa línea de código PHP dice que el bucle (en Inglés) ", mientras que contar, después del segundo puesto de imprimir el contenido de los principales-índice-ad.php archivo". 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. Esto significa, por supuesto, usted tiene que crear un archivo llamado "índice principal-ad.php '(o lo que quieras llamarlo) y añadir la secuencia de comandos o el código o lo que quieras para poner después el segundo puesto. Make the change in your Main Index file and “save”. Hacer el cambio en su principal índice de archivo y "guardar". Upload the main-index-ad.php file to your theme folder, and then reload your home page to test your very first theme hack. Cargar el principal-indexar-ad.php archivo en su carpeta de tema y, a continuación, volver a cargar su página principal para poner a prueba su primer tema hack. Did it work? ¿Funcionó?

So far, we’ve been working on only the “Main Index” or index.php file for theme hacks. Hasta ahora, hemos estado trabajando únicamente sobre la "principal" o archivo index.php tema de 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. Aunque cada tema es un poco diferente, casi cada uno tiene un principal, un solo Post, un archivo de paginación, 404 de plantilla (archivo no encontrado), la barra lateral (a veces 2), Comentarios, Archivos y 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. Algunos temas tienen también una página de la categoría, pero si no la página Archives.php se utilizarán para la categoría páginas también. 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. Lo señalo porque si algo anuncio a la página principal, usted puede ser que también quieren que aparezca en una sola puestos, o páginas, o páginas de categorías. Like in the previous example you might consider making several files with ads, text, or images and uploading them to your theme directory. Al igual que en el ejemplo anterior usted puede ser que consideren la posibilidad de hacer varios archivos con anuncios, texto o imágenes y cargar a su directorio tema. You can use the same line of code in the previous example to include any file before or after the loop. Usted puede utilizar la misma línea de código en el ejemplo anterior para incluir cualquier archivo antes o después del bucle. Just remove the count statement like this: Simplemente quite el contar declaración como la siguiente:

 <?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. Es mucho más inteligente para añadir cosas a sus páginas con un archivo como si este va a ser en varios lugares. Otherwise, you have to manually modify multiple files. De lo contrario, usted tiene que modificar manualmente varios archivos. If you do it like this, in the future when you need to change that content, you just edit the one file. Si es así, en el futuro, cuando es necesario cambiar ese contenido, que acaba de editar el archivo.

Your Second Wordpress Theme Hack Su segundo tema 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. Por bastante tiempo me había querido añadir el comentario en virtud de contar con mi puesto de los títulos en mi página de índice en el que estaría vinculada a la realidad puesto un comentario. Oh - an I wanted a little comment graphic beside them too. Oh - Yo quería un poco un comentario gráfico junto a ellas también. Basically “inside the loop” you just add the following PHP code somewhere are your post title: Básicamente "en el interior del bucle" que acaba de añadir el siguiente código PHP en algún lugar se su 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. La primera línea es el código necesidad de encontrar "en el bucle", que muestra el título de partida. Your may look slightly different, just look for “the_title” in the line. Su aspecto puede variar ligeramente, sólo para mirar "the_title" en la línea. Right after that paste the two lines in my example. Inmediatamente después de que pegar las dos líneas en mi ejemplo. You’ll meed to modify the first line with the name of and correct path to your comment icon. Usted meed para modificar la primera línea con el nombre y el camino correcto a su comentario icono. You’ll need to create one or find a free suitable one on the web. Tendrá que crear una o encontrar un adecuado una libre en la web.

Adding a plugin to do the Hacking for You Adición de un plugin para hacer el Hacking para Usted

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. Hay todavía un par de cosas que Wordpress "no hacer" lo que yo prefiero tener en mi blog que sean agregados fácilmente con un plugin. For most of these things I use Para la mayoría de estas cosas que yo uso Lester Chan’s Wordpress Plugins Lester Chan plugins de Wordpress . 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. Yo uso WP-PageNavi para la navegación en la parte inferior de mi página de inicio, y sustituyó a la horrible "anterior" y "próximo" por defecto wordpress vínculos de navegación con ella. I use WP-PostRatings for the star voting on each post. Yo uso WP-PostRatings la estrella de la votación de cada puesto. WP-Post Views displays the post count for each post, in addition to the “most viewed” posts in my sidebar. WP-Post Reproducciones muestra el número de puestos para cada puesto, además de los "más vistos" puestos en mi columna lateral. The WP-Print plugin is for the printer friendly page link for posts. El WP-Print plugin para la página impresa enlace para los puestos. 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. Con todos estos Lester Chan Wordpress plugins, una vez que instalar y activar ellos, todo lo que tienes que hacer es copiar y pegar la línea de código PHP en las páginas y los lugares que desea el plugin para mostrar algo. You get that code on the documentation “usage” page for each plugin on Lester’s site. Usted recibe este código en la documentación "uso" de la página principal de cada plugin en el sitio de 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. Después de hacer los dos primeros hacks, debería ser bastante fácil añadir el código a las páginas de su plantilla para el plugin hacks para trabajar.

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. Además de los plugins Lester Chan, en mis páginas después de los puestos en mi página principal verás algunas opciones para los visitantes como "suscribirte a este feed", "este mensaje de correo electrónico", "Digg this", etc Estas características proceden en realidad de 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. Sé mucho sobre los sitios que veo la adición de un pueblo "social" plug-in para mostrar un bazillion opciones para el etiquetado de todos los sitios. 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. Yo uso de Feedburner para mi alimentación (como la mayoría de los bloggers lo hacen), y tienen un "de Feedburner Feedsmith" plugin que añadir que "los destellos" después de sus entradas - que creo que tienen mucho más opciones de ayuda social que cualquier plugin alrededor. If you download and enable that plugin from Feedburner, you have to add the provided PHP code to your template as well. Si descarga y permitir que el plugin de Feedburner de, usted tiene que añadir el código PHP siempre a su plantilla como así.

Hacking Your Theme Stylesheet Hacking su tema de estilos

Your stylesheet contains all properties of all the colors and sizes of items on your blog. Su hoja de estilo contiene todas las propiedades de todos los colores y tamaños de los artículos en su blog. It has background and link colors, font sizes, bold, italics, you name it. Tiene antecedentes y los colores de los enlaces, los tamaños de fuente, negrita, cursiva, que el nombre. In your dashboard theme editor click on “Stylesheet” to bring up this file. En su escritorio tema editor, haga clic sobre "estilos" para abrir este archivo. 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. Es la misma que añadió el tema de las propiedades en el equipo en un editor de texto al principio de este artículo. 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. SU estilo es más que probable va a ser completamente diferente a la mía, y la edición no será tan fácil como la anterior copiar y pegar hacks. What you need to know is that every web page is a “document” that has “elements”. Lo que hay que saber es que cada página web es un "documento" que tiene "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”. Los elementos están configurados en un "cuadro modelo", y temas como la div, los párrafos (p), se extiende, el cuerpo, las partidas (h), blockquote, y la lista de etiquetas (ul, ol, li o underordered lista, lista ordenada, y la lista) son todos "las cajas". In CSS code everything “nests” and “properties” can be assigned to elements at any level. En todo el código CSS "nidos" y "propiedades" puede ser asignado a los elementos de cualquier nivel. Here’sa diagram example: He aquí un diagrama de ejemplo:

That image is an example of how all the boxes would look if you drew them all out. Esa imagen es un ejemplo de cómo todas las casillas se vería si todos ellos se refirió a cabo. Here’s how those boxes look as (well formatted) HTML code: A continuación le indicamos cómo mirar los cuadros como (bien formateado) 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. Quiero que antes de visualizar esta hoja de estilo que empezó la piratería por lo que se sabe acerca de cómo las obras de anidación. If you change the (font) “color” to grey at the “body” level all the text on the page will be grey. Si cambia la (fuente) "color" gris en el "cuerpo" nivel de todo el texto en la página será gris. 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. Si, además, cambiar la fuente de color a verde en el "li" o elemento de la lista a nivel, todo el texto en la página será gris, excepto la lista de temas, que será de color 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. Si cambia el párrafo o "p" font color a rojo, a continuación, tanto el P y UL texto será de color rojo, el LI texto será de color verde, pero el resto del cuerpo y div texto por encima de los niveles seguirá siendo gris. This is called “inheritance”, and properties start at the highest level and stay that property until changed lower down the nesting chain. Esto se llama "la herencia", y las propiedades de inicio en el nivel más alto y permanecer hasta que la propiedad ha cambiado más abajo de anidación de la cadena.

The first thing you might want to hack is your link colors and properties. La primera cosa que usted podría querer truco es el puente de colores y propiedades. There are sooooo many ways to change your links to make them stand out. Sooooo Hay muchas maneras de modificar sus vínculos para que sobresalen. A hyperlink is an “a” or anchor tag. Un hipervínculo es una "a" o etiqueta de ancla. There are 3 states of a link which are normal, visited, and hover. Existen 3 estados de un enlace que son normales, visitó, y hover. Normal is what the color of the link is before you click it. Normal es lo que el color del vínculo antes de hacer clic en él. Visited is the color of the link once you’ve visited it. Visitado es el color del vínculo una vez que has visitado. And hover is the color of the link when your mouse goes over it. Hover y es el color del enlace cuando el ratón pasa sobre él. For all three of these states of a link you can change the color, text-decoration, background, and many other properties. Para todos los de estos tres estados de un vínculo puede cambiar el color, la decoración de texto, antecedentes, y muchas otras propiedades. In my stylesheet I have entries to change link properties for the entire body of all my pages like this: En mi hoja de estilo tengo entradas para cambiar las propiedades de enlace de todo el cuerpo de todos mis páginas como esta:

 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 puede ver, puede cambiar el color de los 3 estados diferentes de los vínculos, puede cambiar la decoración de texto (para cualquier estado), o el color de fondo (para cualquier estado). You can also leave any of these properties out. También puede salir de cualquier de estas propiedades a cabo. For the text decoration property you could use any of these values: solid, underline, overline, line-through, none, dotted, or dashed. Para el texto de propiedad decoración se puede usar cualquiera de estos valores: sólido, subrayar, overline, a través de la línea-, ninguno, de puntos, o defraudadas. 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: Si bien mi código de ejemplo anterior los controles en el vínculo de color para un cuerpo entero de una página, también puede cambiar en cualquier nivel, como podría ser la columna lateral:

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

Experiment by modifying the link colors in your stylesheet now. Experimento mediante la modificación de la relación de colores en tu estilo ahora. Then experiment further by changing font sizes and colors. Luego, experimento aún más por cambiar los tamaños de fuente y colores. To find cool color schemes to change colors of text, links, or backgrounds Para encontrar esquemas de color fresco para cambiar los colores de texto, enlaces, o los orígenes Use this CSS color chart for reference Utilice esta carta de colores CSS de referencia . 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. Es probablemente la mejor carta de colores que he visto en años, principalmente porque se basa en los colores PANTONE y tira de muestras de pintura de una ferretería.

The last wordpress theme hack (in this article) I’ll show you is for headings. El último tema de wordpress hack (en este artículo), te mostraré es de las rúbricas. 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. Una partida es una "H" como etiqueta <H1> <H2> <h3> ¿<h4>, etc Cada puesto debe tener una (título) partida, y cada sección o widget en su barra lateral tiene una partida. 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. Como se indica anteriormente en mi esquema - una partida es una "caja" y que la casilla tiene propiedades, como fondo, relleno, margen, (texto) color, (enlace) de color, fronteras, fronteras de estilo, y mucho más. By default in Wordpress the post headers are just linked text. Por defecto, en Wordpress el puesto son sólo los encabezados de texto vinculados. 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. Mientras que el bien, como puedes ver en mi página principal y páginas de mi Yo prefiero un borde negro, un color de fondo, y algunos de relleno. In my sidebar I gave the sections headings a background image, a bottom border, and some margines. En mi barra lateral me dio las secciones partidas una imagen de fondo, un fondo frontera, y algunos margines. The list elements also have a bottom border. La lista de elementos también tienen una parte inferior frontera.

 #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. En el código de ejemplo anterior me mostró que casi todos los de mi barra lateral de estilo propiedades para que usted pueda tener una idea de las muchas diferentes maneras en que usted puede personalizar la cabecera y un elemento de la lista. You can see how I gave the sidebar H2 header a backround image instead of just a color. Usted puede ver cómo me daba la barra lateral H2 encabezado una imagen de fondo en lugar de un sólo color. This the code I used to format the properties of the post headings: Este es el código que utiliza para dar formato a las propiedades de los post títulos:

 .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. En lugar de simplemente haber vinculado el texto que he dado mi puesto de partidas un fondo de color gris, un sólido de 1 píxel borde negro, y algunos de relleno en los lados izquierdo y derecho. Now I think it’s much easier to see where one post ends an the next begins on my pages. Ahora creo que es mucho más fácil ver dónde termina un puesto el próximo uno comienza en mis páginas.

Use What You’ve Learned to Hack Your Theme More Utilice lo que ha aprendido a piratear su tema más

I’ve give you a way to hack away at your Wordpress theme without changing how your visitor’s see it. He darle una forma de hack lejos en su Wordpress tema sin cambiar la forma en que su visitante de ver. I’ve told you about the Wordpress loop, and how to add things before, after, and inside it. Te he dicho sobre el bucle de Wordpress, y cómo las cosas antes de añadir, después, y dentro de él. 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. Hemos cortado y añadido algunas código PHP y, a continuación, hackeado nuestro tema de estilo para cambiar las propiedades que afectan a la disposición y el diseño de la 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! Yo no puedo enseñar todo lo que necesitas saber para crear su propio tema personalizado todo en un solo post - pero puedo empezar! Now you know enough about Wordpress themes to be dangerous and customize your own. Ahora sabes lo suficiente acerca de temas de Wordpress a ser peligroso y personalizar su propia cuenta. Visit and bookmark Visita y marcador W3Schools.com for your HTML and CSS reference needs. para el código HTML y CSS de referencia necesidades. Research and read more articles explaining how to hack and customize your Wordpress theme further like the Investigación y leer más artículos explicando cómo modificar y personalizar el tema de Wordpress como el más tutorials at WPDesigner.com Tutoriales WPDesigner.com en .

Please comment if this article helped you, you had a question, or a great worpress theme hack or customization to add! Por favor, comentar si este artículo ayudó a usted, había una pregunta, o una gran worpress tema hack o añadir a la personalización! I hope you found this information valuable - if so please feel free to bookmark, digg, and stumble this page! Espero que consideró que esta valiosa información - en caso afirmativo por favor siéntase libre de marcador, Digg, y tropezar esta página!

Tags: tutorial , wordpress-hack wordpress-Hack