Languages: বাংলা • English • Español • 日本語 한국어 • Português do Brasil • Русский • 中文(简体) • 中文(繁體) • (Add your language)
Este artículo es acerca de desarrollar Temas de WordPress. Si deseas aprender más acerca de como instalar y usar los Temas, revisa Usar temas. Este asunto se distingue de Usar temas porque discute los aspectos técnicos de escribir código para construir tus propios Temas en vez de cómo activar los temas u obtener nuevos temas.
Los Temas de WordPress son ficheros que trabajan conjuntamente para crear el diseño y funcionalidad de un sitio de WordPress. Cada tema puede ser diferente, ofreciendo muchas opciones para que los dueños de sitios cambien al instante la apariencia de su sitio web.
Puede que desees desarrollar temas de WordPress para tu propio uso,para el proyecto de un cliente o para mandarlas al directorio de temas de Wordpress submit to the WordPress Theme Directory. ¿Porqué sino deberías construir un tema de Wordpress?
Un tema de WordPress también tiene muchos beneficios.
¿Porqué deberías construir tu propio tema de WordPress? Esa es la verdadera pregunta.
Los temas de WordPress deberían codificarse utilizando las siguientes normas:
Los temas de WordPress habitan en subdirectorios del directorio de temas de WordPress (por defecto wp-content/themes/) el cuál no puede ser directamente movido can not be directly moved usando el fichero wp-config.php. çel subdirectorio de temas contiene todos los ficheros de hojas de estilo de tema, ficheros de plantilla template files, y ficheros de funciones opcionales (functions.php), ficheros JavaScript e imágenes. Por ejemplo, un tema llamado "test" residiría en el directorio wp-content/themes/test/. Evita usar números para el nombre del tema, ya que previene de que sea mostrado en la lista de temas disponibles.
WordPress incluye un tema por defecto en cada nueva instalación. Examina los ficheros en el tema por defecto concienzudamente para conseguir una mejor idea de como construir tus propios ficheros de tema.
Para una guía visual, mira esta infografía sobre anatomía de temas de WordPress.
Los temas de WordPress típicamente consisten de tres tipos principales de ficheros, además de imágenes y ficheros JavaScript.
Veamoslos individualmente.
El tema mas simple posible es un tema hijo que incluya únicamente un fichero style.css, más alguna imagen. Esto es posible porque es un hijo de otro tema el cual actúa como su progenitor.
Para una guia detallada para temas hijo, mira Temas Hijo en español, o en inglés Child Themes.
Además de información de estilo CSS para tu tema, style.css provee detalles sobre el tema en forma de comentarios. La hoja de estilo debe proveer detalles sobre el tema en forma de comentarios. No se permiten dos temas que tengan los mismos detalles listados en su comentario encabezadosheaders, ya que esto conllevará problemas en el diálogo deseleccion de tema Theme selection dialog. Sí haces tu propio tema copiando uno ya existente, asegúrate de que cambias su información lo primero.
Lo siguiente es un ejemplo de las pocas primeras lineas de la hoja de estilos, llamada el encabezado de hoja de estilo, para el tema "Twenty Thirteen":
/* Theme Name: Twenty Thirteen Theme URI: http://wordpress.org/themes/twentythirteen Author: the WordPress team Author URI: http://wordpress.org/ Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready Text Domain: twentythirteen This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */
NB: El nombre usado para el autor se sugiere que sea el mismo que el nombre de usuario de wordpress.org del autor de tema, aunque puede ser el verdadero nombre del autor también. La opción es del autor del tema.
Nota la lista de etiquetas usadas para describir el tema. Estas permiten al usuario encontrar tu tema utilizando el filtro de etiqueta. Aquí tienes la lista completa de etiquetas permitidas.
Las líneas de comentario del encabezado de style.css son requisito para que WordPress sea capaz de identificar el tema y lo muestre en el panel de administration Administration Panel bajo Diseño Design > Temas Themes como una opción de tema disponible junto con otros temas instalados.
Un tema opcionalmente puede usar un archivo de funciones, que reside en el subdirectorio "theme" y es llamado: functions.php. Este archivo actúa, básicamente como un plugin, y si está presente en el tema que estás usando, es cargado automáticamente durante el inicio de WordPress (tanto para páginas de administración como para páginas externas). Usos Sugeridos para este archivo:
El Tema por defecto de WordPress contiene un archivo functions.php que define muchas de estas características, asi que es posible que desees usarlo como modelo. Ya que functions.php básicamente funciona como un complemento, la lista Function_Reference es el mejor lugar para obtener más información sobre lo que puede hacer con este archivo.
Nota para decidir cuándo agregar funciones a functions.php o a un complemento específico:
Te puedes encontrar con que necesites que la misma función esté disponible para más de un tema principal o tema "padre". Si ese es el caso, la función debe crearse en un plugin en lugar de un functions.php para el tema específico. Esto puede incluir etiquetas de plantilla y otras funciones específicas. Las funciones contenidas en los complementos/plugins serán vistas por todos los temas.
Templates son archivos fuente `PHP` utilizados para generar las páginas solicitadas por los visitantes, y se envían como `HTML`. Los archivos de plantilla están formados por `HTML`, `PHP`, y WordPress Template Tags.
Miremos las diversas plantillas que se pueden definir como parte de un tema.
WordPress te permite definir plantillas separadas para los diversos aspectos de tu sitio. Sin embargo, no es esencial tener todos estos diferentes archivos de plantilla para que tu sitio funcione completamente. Las plantillas se eligen y se generan en función de la Template Hierarchy, según las plantillas disponibles en un tema en particular.
Como desarrollador de Temas, puedes elegir qué tanta personalización deseas implementar usando plantillas. Por ejemplo, como caso extremo, puedes usar solo un archivo de plantilla, llamado index.php como la plantilla para todas las páginas generadas y mostradas por el sitio. Un uso muy común es tener diferentes archivos de plantilla para generar resultados diferentes, para permitir la máxima personalización.
Aquí esta la lista de archivos "Theme" reconocidos por WordPress. Por supuesto, su Tema puede contener cualquier hoja de estilos, imágenes o archivos. Sólo tenga en cuenta que lo siguiente tiene un significado especial para WordPress -- vea Template Hierarchy para más información.
These files have a special meaning with regard to WordPress because they are used as a replacement for index.php, when available, according to the Template Hierarchy, and when the corresponding Conditional Tag returns true. For example, if only a single post is being displayed, the is_single() function returns 'true', and, if there is a single.php file in the active Theme, that template is used to generate the page.
At the very minimum, a WordPress Theme consists of two files:
Both of these files go into the Theme directory. The index.php template file is very flexible. It can be used to include all references to the header, sidebar, footer, content, categories, archives, search, error, and any other page created in WordPress.
Or, it can be divided into modular template files, each one taking on part of the workload. If you do not provide other template files, WordPress may have default files or functions to perform their jobs. For example, if you do not provide a searchform.php template file, WordPress has a default function to display the search form.
Typical template files include:
Using these template files you can put template tags within the index.php master file to include these other files where you want them to appear in the final generated page.
Here is an example of the include usage:
<?php get_sidebar(); ?> <?php get_footer(); ?>
The default files for some template functions may be deprecated or not present, and you should provide these files in your theme. As of version 3.0, the deprecated default files are located in wp-includes/theme-compat. For example, you should provide header.php for the function get_header() to work safely, and comments.php for the function comments_template().
For more on how these various Templates work and how to generate different information within them, read the Templates documentation.
The files defining each Page Template are found in your Themes directory. To create a new Custom Page Template for a Page you must create a file. Let's call our first Page Template for our Page snarfer.php. At the top of the snarfer.php file, put the following:
<?php /* Template Name: Snarfer */ ?>
The above code defines this snarfer.php file as the "Snarfer" Template. Naturally, "Snarfer" may be replaced with most any text to change the name of the Page Template. This Template Name will appear in the Theme Editor as the link to edit this file.
The file may be named almost anything with a .php extension (see reserved Theme filenames for filenames you should not use; these are special file names WordPress reserves for specific purposes).
What follows the above five lines of code is up to you. The rest of the code you write will control how Pages that use the Snarfer Page Template will display. See Template Tags for a description of the various WordPress Template functions you can use for this purpose. You may find it more convenient to copy some other Template (perhaps page.php or index.php) to snarfer.php and then add the above five lines of code to the beginning of the file. That way, you will only have to alter the HTML and PHP code, instead of creating it all from scratch. Examples are shown below. Once you have created the Page Template and placed it in your Theme's directory, it will be available as a choice when you create or edit a Page. (Note: when creating or editing a Page, the Page Template option does not appear unless there is at least one template defined in the above manner.)
WordPress can load different Templates for different query types. There are two ways to do this: as part of the built-in Template Hierarchy, and through the use of Conditional Tags within The Loop of a template file.
To use the Template Hierarchy, you basically need to provide special-purpose Template files, which will automatically be used to override index.php. For instance, if your Theme provides a template called category.php and a category is being queried, category.php will be loaded instead of index.php. If category.php is not present, index.php is used as usual.
You can get even more specific in the Template Hierarchy by providing a file called, for instance, category-6.php -- this file will be used rather than category.php when generating the page for the category whose ID number is 6. (You can find category ID numbers in Manage > Categories if you are logged in as the site administrator in WordPress version 2.3 and below. In WordPress 2.5 the ID column was removed from the Admin panels. You can locate the category id by clicking 'Edit Category' and looking on the URL address bar for the cat_ID value. It will look '...categories.php?action=edit&cat_ID=3' where '3' is the category id). For a more detailed look at how this process works, see Category Templates.
If your Theme needs to have even more control over which Template files are used than what is provided in the Template Hierarchy, you can use Conditional Tags. The Conditional Tag basically checks to see if some particular condition is true, within the WordPress Loop, and then you can load a particular template, or put some particular text on the screen, based on that condition.
For example, to generate a distinctive stylesheet in a post only found within a specific category, the code might look like this:
<?php
if ( is_category( '9' ) ) {
get_template_part( 'single2' ); // looking for posts in category with ID of '9'
} else {
get_template_part( 'single1' ); // put this on every other category post
}
?>
Or, using a query, it might look like this:
<?php
$post = $wp_query->post;
if ( in_category( '9' ) ) {
get_template_part( 'single2' );
} else {
get_template_part( 'single1' );
}
?>
In either case, this example code will cause different templates to be used depending on the category of the particular post being displayed. Query conditions are not limited to categories, however, see the Conditional Tags article to look at all the options.
It is possible to use the WordPress plugin system to define additional templates that are shown based on your own custom criteria. This advanced feature can be accomplished using the "template_redirect" action hook. More information about creating plugins can be found in the Plugin API reference.
To load another template (other than header, sidebar, footer, which have predefined included commands like get_header()) into a template, you can use get_template_part(). This makes it easy for a Theme to reuse sections of code.
When referencing other files within the same Theme, avoid hard-coded URIs and file paths. Instead reference the URIs and file paths with bloginfo(): see Referencing Files From a Template.
Note that URIs that are used in the stylesheet are relative to the stylesheet, not the page that references the stylesheet. For example, if you include an images/ directory in your Theme, you need only specify this relative directory in the CSS, like so:
h1 {
background-image: url(images/my-background.jpg);
}
When developing Themes, it's good to keep in mind that your Theme should be set up so that it can work well with any WordPress plugins users might decide to install. Plugins add functionality to WordPress via "Action Hooks" (see Plugin API for more information).
Most Action Hooks are within the core PHP code of WordPress, so your Theme does not have to have any special tags for them to work. But a few Action Hooks do need to be present in your Theme, in order for Plugins to display information directly in your header, footer, sidebar, or in the page body. Here is a list of the special Action Hook Template Tags you need to include:
For a real world usage example, you'll find these plugin hooks included in the default Theme's templates.
As of WordPress 3.4, a new Theme Customization feature is available by default for nearly all WordPress themes. The Theme Customization admin page is automatically populated with options that a theme declares support for with add_theme_support() or using the Settings API, and allows admins to see non-permanent previews of changes they make in real time.
Theme and plugin developers interested in adding new options to a theme's Theme Customization page should see the documentation on the Theme Customization API. Additional tutorials on the Theme Customization API are available at the Ottopress.com website.
You should escape dynamically generated content in your Theme, especially content that is output to HTML attributes. As noted in WordPress Coding Standards, text that goes into attributes should be run through esc_attr() so that single or double quotes do not end the attribute value and invalidate the XHTML and cause a security issue. Common places to check are title, alt, and value attributes.
There are few special template tags for common cases where safe output is needed. One such case involves outputing a post title to a title attribute using the_title_attribute() instead of the_title() to avoid a security vulnerability. Here's an example of correct escaping for the title attribute of a post title link when using translatable text:
<a href="<?php the_permalink(); ?>" title="<?php sprintf( __( 'Permanent Link to %s', 'theme-name' ), the_title_attribute( 'echo=0' ) ); ?>"><?php the_title(); ?></a>
Replace deprecated escape calls with the correct calls: wp_specialchars() and htmlspecialchars() with esc_html(), clean_url() with esc_url(), and attribute_escape() with esc_attr(). See Data_Validation for more.
To ensure smooth transition for language localization, use the WordPress gettext-based i18n functions for wrapping all translatable text within the template files. This makes it easier for the translation files to hook in and translate the labels, titles and other template text into the site's current language. See more at WordPress Localization and I18n for WordPress Developers.
Implement the following template tags to add WordPress-generated class attributes to body, post, and comment elements. For post classes, apply only to elements within The Loop.
When developing a Theme, check your template files against the following template file standards.
Here's an example of a correctly-formatted HTML5 compliant head area:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<?php wp_footer(); ?> </body> </html>
<h2><?php printf( __( 'Search Results for: %s' ), '<span>' . get_search_query() . '</span>'); ?></h2>
<script type="text/javascript"> /* <![CDATA[ */ // content of your Javascript goes here /* ]]> */ </script>
Create a screenshot for your theme. The screenshot should be named screenshot.png, and should be placed in the top level directory. The screenshot should accurately show the theme design and saved in PNG format. The recommended image size is 600x450. The screenshot will only be shown as 300x225, but the double-sized image allows for high-resolution viewing on HiDPI displays.
Themes can optionally support the Customize Screen. For an example code, see A Sample WordPress Theme Options Page.
When enabling the availability of the Customize Screen for a user role, use the "edit_theme_options" user capability instead of the "switch_themes" capability unless the user role actually should also be able to switch the themes. See more at Roles and Capabilities and Adding Administration Menus.
If you are using the "edit_themes" capability anywhere in your Theme to gain the Adminstrator role access to the Customize Screen (or maybe some custom screens), be aware that since Version 3.0, this capability is not assigned to the Adminstrator role by default in the case of WordPress Multisite installation. See the explanation. In such a case, use the "edit_theme_options" capability instead if you want the Adminstrator to see the "Theme Options" menu. See the additional capabilities of Adminstrator role when using WordPress Multisite.