Attention Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!


Este artículo está en proceso de desarrollo, o de traducción. Una persona sigue trabajando en este documento, de modo que por favor no edites esto sin intentar contactar al autor. El contenido de este documento podría no ser verificable o válido. La información puede cambiar rápidamente. BORRADOR Spanish Codex

WordPress y CSS

Los Temas (Themes) de WordPress utilizan una combinación de archivos de plantilla, etiquetas de plantilla, y hojas de estilo CSS para generar el aspecto de tu sitio en WordPress.

Archivos de Plantilla 
Template files are the building blocks which come together to create your site. In the WordPress Theme structure, the header, sidebar, content, and footer are all contained within individual files. They join together to create your page. This allows you to customize the building blocks. For example, in the Default WordPress Theme, the multi-post view found on the front page, category, archives, and search web pages on your site, the sidebar is present. Click on any post, you will be taken to the single post view and the sidebar will now be gone. You can choose which parts and pieces appear on your page, and customize them individually, allowing for a different header or sidebar to appear on all pages within a specific category. And more. For a more extensive introduction to Templates, see Stepping Into Templates.
Etiquetas de Plantilla 
Template tags are the bits of code which provide instructions and requests for information stored within the WordPress database. Some of these are highly configurable, allowing you to customize the date, time, lists, and other elements displayed on your website. You can learn more about template tags in Stepping Into Template Tags.
Hojas de Estilo CSS 
This is where it all comes together. On every template file within your site, there are XHTML tags and CSS references wrapped around your template tags and content. In the style sheet within each Theme are commands for the page's structure. Without these instructions, your page would simply look like a long typed page. With these instructions, you can move the building block structures around, making your header very long and filled with graphics or photographs, or simple and narrow. Your site can "float" in the middle of the viewer's screen with space on the left and right, or stretch across the screen, filling the whole page. Your sidebar can be on the right or left, or even start midway down the page. How you style your page is up to you. But the instructions for styling are found in the style.css file within each Theme folder.

To help you understand more about how CSS works in relationship to your web page, you may wish to read some of the articles cited in these lists:

  • Templates - Comprehensive list of WordPress Theme and Template articles (a good starting point is Using Themes, and there are also many advanced articles in this list)
  • Blog Design and Layout - Comprehensive list of resources related to site design in WordPress
  • WordPress Lessons - Lessons on all aspects of WordPress