WordPress difiere mucho del formato de plantillas a las que nos enfrentamos a diario, están construidas como bloques que se integran entre sí. Algunas partes el encabezado, pie de página se utilizan en todas las páginas, otros se utilizan en lugares específicos y a conveniencia del desarrollo.
Un sitio web tradicional consta de archivos XHTML con contenido, y archivos CSS que le imprimen las características visuales que le dan la presentación a nuestro sitio. De igual forma con wordpress pero de una forma especial.
Los temas en wordpress están ubicados en la carpeta wp-content/themes/ por ejemplo si tenemos un tema llamado prueba este estará en wp-content/themes/prueba/ dentro de este directorio encontraremos todos los archivos que son necesarios para el funcionamiento de la plantilla.
Para instalar una plantilla podemos subir los archivos por FTP la carpeta descomprimida con el theme al directorio /wp-content/themes/ de modo que la ruta quede /wp-content/themes/nueva-plantilla. Accedemos al panel de Administración, en la pestaña de Presentación, y encontramos en la lista de plantillas la que acabamos de subir. Se activa, haciendo clic en la imagen que la representa.
Estructura de una plantilla de WordPress:
Un plantilla básica de wordpress tiene una estructura simple de tres bloques, encabezado, contenido y pie de página, cada uno de estos bloques es generado por un archivo contenido en la base de la carpeta de nuestra plantilla.
Los bloques:
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage nombredelaplantilla
* @since nombre de la plantilla version 1.0
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta ...>
.
.
<title>/** Codigo PHP para mostrar el titulo */</title>
<link ... />
.
.
</head>
<body>
<div> ...
Content: En este bloque se inserta el contenido del blog, pueden ser 1 o varios archivos según nuestro diseño para esto no es necesario encontrar un archivo content.php dentro de nuestra estructura, puede hacer referencia a 1 o a muchos archivos.
</div> <!-- cierre del div contenedor -->
<footer>
</footer>
</body>
</html>
Archivos básicos en una plantilla
Miplantilla/
<?php get_header(); ?>
<?php get_footer(); ?>
El archivo de funciones:
Header: Contiene toda la información de apertura de un archivo html, y según el diseño puede contener, html para incluir menú, logo, información de la empresa, y demás.
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage nombredelaplantilla
* @since nombre de la plantilla version 1.0
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta ...>
.
.
<title>/** Codigo PHP para mostrar el titulo */</title>
<link ... />
.
.
</head>
<body>
<div> ...
Content: En este bloque se inserta el contenido del blog, pueden ser 1 o varios archivos según nuestro diseño para esto no es necesario encontrar un archivo content.php dentro de nuestra estructura, puede hacer referencia a 1 o a muchos archivos.
Footer: contiene todo el código html que se requiera para el final de nuestro documento, incluyendo copyright, menú de navegación, contacto, además de las etiquetas de cierre de nuestro documento html.
<footer>
</footer>
</body>
</html>
Archivos básicos en una plantilla
Miplantilla/
images/
index.php
header.php
footer.php
style.css
La estructura arranca con un archivo index.php El cuál cumple dos funciones básicamente:
- Incluir o llamar los otros archivos de la estructura de nuestra plantilla
- Incluir el bucle de WordPress para obtener la información de la base de datos y mostrarla en nuestro sitio ( mensajes, páginas, categorías etc )
Para una estructura simple necesitamos incluir otros dos archivos, el encabezado y el pie de página, que podemos llamar header.php / footer.php. Los tag que incluyen estos archivos dentro de nuestro index son:
<?php get_header(); ?>
<?php get_footer(); ?>
Con el fin de mostrar los mensajes y las páginas del blog (y para personalizar la forma en que estas se muestran), el archivo index.php debe ejecutar el bucle de wordpress, entre las llamadas al encabezado y el pie de página
Archivo style.css
Importancia: este archivo además de contener los estilos para la plantilla. Proporciona los detalles en forma de Comentarios que son leídos por wordpress para identificar la plantilla. NO se permite instalar dos temas con los mismos detalles. Esto produce un error en la lectura de la plantilla. Si se copia de otra plantilla para hacer su propio tema no olvide cambiar estos detalles.
Las líneas de detalles en el archivo style.css son requeridas para que WordPress sea capaz de identificar el tema y mostrarlo en el panel de administración.
Ejemplo tomado de la plantilla estándar "Twenty Ten":
/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: wordpressdotorg
Author URI: http://wordpress.org/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)
License:
License URI:
General comments (optional).
*/
Para cada instalación de wordpress este incluye plantillas por defecto. Recomendamos examinar estas plantillas para darse una mejor idea al construir su propio tema. Encontrará muchos otros achivos que resumimos en este post >>
El archivo de funciones:
Opcionalmente se puede usar un archivo de funciones, el cual se incluye dentro de directorio de nuestra plantilla y es llamado functions.php este archivo básicamente actúa como un plugin. Y se carga automáticamente durante la inicialización de wordpress (que sucede justo cuando nuestro sitio es llamado desde un navegador). Son códigos con acciones que necesitamos activar al arrancar nuestro sitio. Por ejemplo puede encontrar el register_sidebar(), que es el más típico que se usa para habilitar en el tema la funcionalidad de widgets.
También puede revisar: Archivos contenidos en una plantilla de wordpress
Si desea ayuda profesional para la creación de plantillas para wordpress visite nuestro sitio oficial y cotice: www.creandoweb.co
Encuentra las mejores plantillas para wordpress aquí listas para instalar !
Si te ha servido está guía, puedes invitarme un café !
No hay comentarios
Publicar un comentario
Desea contactar con nosotros, deje un comentario y pronto le daremos respuesta.