¿Cómo crear un tema de WordPress? Guía de 5 pasos utilizando código
Un tema de WordPress te permite tener un diseño consistente para tus páginas y entradas, cambiando la apariencia de todo el sitio web. Dicho esto, instalar un tema de WordPress prefabricado podría impedirte tener un control total sobre su funcionalidad y diseño.
Por suerte, puedes crear un tema de WordPress desde cero, para personalizar completamente tu sitio web de WordPress como desees. Además, crear tu propio tema de WordPress personalizado ayuda a reducir el desorden de código en los archivos del tema y a mejorar el rendimiento del sitio.
Sin embargo, necesitarás tener algunos conocimientos básicos de codificación para crear tu propio tema, ya que tiene que estar escrito en PHP, HTML, CSS y Javascript. Por lo tanto, este tutorial te mostrará cómo crear un tema de WordPress utilizando HTML5 y CSS3.
Descarga la hoja de trucos HTML definitiva
Tabla de Contenidos
¿Qué es un diseño responsivo?
Los dispositivos suelen tener diferentes pantallas y cada una de ellas varía en color, funcionalidad y resolución. Algunos funcionan en modo horizontal, mientras que otros lo hacen en modo vertical. Además, muchos dispositivos pueden alternar entre estos modos.
Por esta razón, es primordial crear una plantilla de WordPress personalizada que responda a varias resoluciones de pantalla.
El diseño responsivo (responsive en inglés) consiste en mostrar tu sitio web en el mejor formato para los visitantes en función del tamaño de su pantalla. El diseño de la página responde al espacio disponible y el contenido se coloca correctamente: nada queda cortado, desbordado y tu sitio web tiene un aspecto lo más limpio posible.
Para medir la alineación responsiva de tu diseño, debes pensar en el diseño de tu sitio web como una serie de cuadrículas en lugar de píxeles (px). Luego, divide el ancho de las cuadrículas para cada sección de contenido en porcentajes (%).
En el caso de las imágenes, puedes configurarlas con el ancho máximo: 100% de su tamaño real y la altura en automático. La anchura y la altura de la imagen se ajustarán automáticamente cuando se reduzca el tamaño de la pantalla. Así, si colocas una imagen de 200px de ancho dentro de un div que ocupa el 100% de la pantalla, se mantendrá en su ancho real.He aquí un ejemplo de buena y mala sintaxis para construir un diseño responsivo:
/* GOOD WIDTH */
.inline-text-box {
width: 50%;
}
/* BAD WIDTH */
.inline-text-box {
width: 800px;
}
/* GOOD IMAGE */
img {
max-width: 100%;
height: auto;
}
/* BAD IMAGE */
img {
width: 100%;
height: auto;
}
Teniendo esto en cuenta, vamos a aplicar estos principios de diseño web responsivo para crear un tema de WordPress con HTML5 y CSS3.
5 Pasos para crear un tema de WordPress responsivo usando HTML5 y CSS3
HTML5 es la última versión del lenguaje de marcado web HTML que ayuda a mostrar el contenido de forma coherente en cualquier ordenador, tableta o teléfono móvil.
Además, HTML5 ofrece una función de metaetiqueta viewport que controla la visualización de tu sitio web en cada navegador con la etiqueta <meta>, dentro de la etiqueta <head></head>.
Para crear un tema de WordPress totalmente responsivo, también puedes utilizar la función CSS3 media queries. Establece reglas específicas y controla cómo se comportará tu sitio en varios tamaños de pantalla.
Considera la posibilidad de instalar WordPress localmente cuando desarrolles un tema. Esta es una gran manera de experimentar con las de WordPress, sin preocuparte por dañar tu sitio web. Tampoco necesitas tener un nombre de dominio o alojamiento web hasta que quieras estar en línea.
Conociendo esto, vamos a entrar en los pasos para crear un tema personalizado de WordPress. Aplicaremos tanto la etiqueta meta viewport, como las consultas de medios mientras lo construimos.
1. Crea y almacena los archivos de plantillas
Por lo general, los temas de WordPress pueden crearse utilizando sólo dos archivos de plantilla en el directorio de temas:
- index.php: prepara una plantilla para que el tema muestre su contenido.
- style.css: gestiona el aspecto visual del tema.
Sin embargo, el desarrollo de un tema de WordPress también requerirá varios archivos de apoyo para añadir más flexibilidad a la hora de personalizarlo. Esos archivos de plantilla incluyen:
- header.php: contiene cualquier HTML que vaya en la parte superior de tus páginas, empezando por <!DOCTYPE html>.
- footer.php: contiene el HTML que va en la parte inferior de tu sitio web, incluyendo </html>.
- functions.php: añade funcionalidad al tema, desde menús y colores hasta scripts y hojas de estilo.
- sidebar.php: genera elementos de la barra lateral.
- single.php: muestra una sola entrada de una página en particular.
- page.php: muestra el contenido de una sola página.
Como desarrollador de temas, eres libre de personalizar cada archivo de plantilla. WordPress elegirá y generará plantillas basadas en la jerarquía de plantillas. Lo navegará hasta encontrar un archivo que coincida y en consecuencia, mostrará la página. Teniendo esto en cuenta, crea una nueva carpeta para los componentes dentro de tu carpeta de temas de WordPress, antes de crear un tema de WordPress desde cero.
Consejo profesional
El nombre de la carpeta no debe ser el mismo que el de otro tema. Además, si piensas compartir tu trabajo, comprueba que no hay ningún tema con el mismo nombre en el directorio de temas de WordPress.org.
Una vez que tengas una carpeta para almacenar el tema, crea los archivos esenciales de la plantilla de WordPress. Cada archivo de plantilla PHP debe utilizar el nombre correcto tal y como se define en la documentación de WordPress.
Considera que para hacer diferentes diseños para tus posts, páginas y otras partes de tu sitio web, tienes que crear plantillas separadas que contengan HTML5 y PHP, que se apliquen a cada sección.
Consejo profesional
Si deseas utilizar tipos de entradas personalizadas, puedes crear plantillas que sólo se apliquen a las entradas de ese tipo. Sin embargo, si quieres que las entradas de una categoría específica tengan estilos diferentes, utiliza declaraciones “if-then” dentro del bucle.
Ahora, vamos a los pasos:
- Accede a la sección del Administrador de Archivos en tu hPanel. A continuación, dirígete a public_html -> wp-content -> carpeta themes.
- Crea una nueva carpeta. Ten en cuenta que la carpeta debe tener un nombre único, descriptivo y corto. No utilices números ni espacios.
- Utilizaremos “my theme” en este ejemplo.
- Primero vamos a crear las plantillas personalizadas y nos centraremos en el contenido más adelante. Los archivos incluyen header.php, index.php, footer.php, functions.php, sidebar.php, single.php y page.php
Ahora que tienes todos los archivos de la plantilla PHP listos, pasemos a configurar la hoja de estilos CSS.
2. Configura la hoja de estilos CSS inicial
Las hojas de estilo CSS controlan el diseño visual y la disposición de las páginas del sitio web. Cada tema de WordPress necesita una hoja de estilos para mostrar elementos como las fuentes y los colores. Sin un archivo CSS, WordPress no reconocerá tu tema personalizado como válido.
Con esto en mente, crea un archivo de hoja de estilo en la misma carpeta del tema. Añade la información necesaria, incluyendo el nombre del tema, la versión, la descripción y el autor en la parte superior del archivo style.css. WordPress mostrará estos datos en el panel de control del administrador.
La información debe ser escrita como un comentario CSS de varias líneas. Cada cabecera en su propia línea, comenzando con una palabra clave. Encuentra la lista completa de palabras clave de cabecera para los temas en la página WordPress Codex – File Header.
He aquí un ejemplo:
/* Theme Name: My Theme Author: Hostinger Author URI: https://www.hostinger.es/tutoriales/ Description: Mi primer tema responsivo de HTML5 Version: 1.0 License: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html */
Consejo profesional
Las dos últimas líneas son necesarias si deseas compartir tu tema en WordPress.org. Si vas a utilizar el tema para tu propio sitio web de WordPress, no es necesario que las incluyas.
En este punto, tu tema ya será visible en tu panel de control de WordPress. Ve a Apariencia -> Temas y verás My theme con una imagen de caja de verificación blanca y gris.
Sin embargo, obtendrás una página de inicio en blanco si activas el tema. Esto se debe a que tu archivo index.php está vacío y no hay plantillas disponibles. Añade una única regla al archivo CSS que cambie el color de fondo de la página. Inserta una línea en blanco después del cierre del comentario */ en la décima línea. A continuación, pega el siguiente código debajo de ella:
* {
box-sizing: border-box;
}
body {
background-color: #f9f9f9;
font-family: Helvetica;
}
Entendamos este código desglosándolo.
La primera entrada es una parte importante del estilo responsivo. <*> o el símbolo del asterisco, coincide con cada elemento del documento HTML. Establece que la anchura y la altura finales de cada elemento de la página deben incluir el contenido, el relleno y el borde. Por lo tanto, esta regla añade efectivamente el relleno dentro de la caja en lugar de fuera de ella.
Mientras tanto, el segundo elemento cambia el color de fondo a blanco y establece la fuente por defecto que se utilizará en el tema.
Ten en cuenta que el código anterior sólo añade elementos básicos a tu tema personalizado. Volveremos al archivo style.css una vez que hayamos configurado los otros archivos y la estructura general del sitio web esté lista.
3. Haz que el tema de WordPress sea funcional
Antes del proceso de desarrollo del tema de WordPress, te recomendamos añadir algunos fragmentos de código a los archivos functions.php y sidebar.php, para mejorar la flexibilidad del tema. Por ejemplo, añadir áreas con widgets o crear miniaturas de publicaciones e imágenes destacadas en páginas específicas.
functions.php
Cada navegador tiene diferentes configuraciones por defecto para elementos como los márgenes y el relleno de la página. Por ello, debes realizar una normalización de CSS para asegurarte de que tu tema tiene el mismo estilo y comportamiento en todos los navegadores.
Para conseguirlo, incluye un archivo CSS llamado normalize.css en tu archivo functions.php. Este archivo permitirá que los navegadores muestren tu sitio de forma consistente, independientemente de esos elementos.Para crear uno, inserta el siguiente código en functions.php:
<?php
// This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we
// use an online version of the css file.
function add_normalize_CSS() {
wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
}
add_action('wp_enqueue_scripts', 'add_normalize_CSS');
Este código hará que WordPress elija el archivo normalize.css de la fuente adjunta.
A continuación, activa los widgets de la barra lateral añadiendo el siguiente código después de la función anterior:
// Register a new sidebar simply named 'sidebar'
function add_widget_support() {
register_sidebar( array(
'name' => 'Sidebar',
'id' => 'sidebar',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
}
// Hook the widget initiation and run our function
add_action( 'widgets_init', 'add_widget_support' );
¡Importante! Si omites este fragmento de código, el enlace del menú de widgets no será visible en el panel de control del administrador y no podrás añadir ningún widget.
Luego, registra un menú de navegación personalizado para activar la función Apariencia -> Menú. Añade el siguiente código:
// Register a new navigation menu
function add_Main_Nav() {
register_nav_menu('header-menu',__( 'Header Menu' ));
}
// Hook to the init action hook, run our navigation menu function
add_action( 'init', 'add_Main_Nav' );
Una vez hecho esto, guarda y cierra el archivo.
sidebar.php
Lo siguiente que hay que tener en cuenta al crear tu propio tema de WordPress es la visualización de las barras laterales. Para ello, utiliza la función get_sidebar(). Esta permite que la barra lateral y los widgets aparezcan en cualquier lugar de tu tema.
Inserta el siguiente código en el archivo sidebar.php. A continuación, guarda los cambios.
<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
<aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar' ); ?>
</aside>
<?php endif; ?>
La primera línea le dice a WordPress que si no hay barra lateral, no debe mostrarse. La segunda establece los atributos del elemento que contiene los widgets. Mientras tanto, la tercera línea es la función de WordPress para mostrar la barra lateral.
4. Construye un diseño para tu tema personalizado
Ahora pasaremos a crear el diseño de tu tema de WordPress modificando los archivos header.php, index.php, footer.php, single.php, page.php, style.php usando media queries.
header.php
El archivo header.php definirá la parte superior de tu documento. Este debe tener:
- La declaración DOCTYPE: indica al navegador web cómo interpretar el documento.
- Función language_attributes(): introduce el código del idioma elegido durante la instalación en la apertura de la etiqueta <html>.
- Elementos de cabecera HTML <head></head>: es donde se almacenan los metadatos. Son las etiquetas <title></title> , <meta></meta> , <link></link>, la etiqueta is_front_page() junto con las funciones bloginfo() dentro de ella y el gancho de acción wp_head().
- Función body_class(): da a tu cuerpo las clases CSS por defecto, establecidas por WordPress.
- wp_nav_menu (): muestra el menú de navegación de la página en la cabecera de tu sitio.
Hay muchas técnicas para hacer un tema de WordPress responsivo. Una de ellas es el uso de metaetiquetas. Inserta la siguiente metaetiqueta bajo el título de tu entrada, para que tu sitio web se ajuste automáticamente a tamaños de pantalla más pequeños y viewports:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Una vez añadido, tendrás un sitio compatible con todos los navegadores y con capacidad de respuesta para móviles.
El archivo final header.php tendrá este aspecto:
<!DOCTYPE html>
<html <?php language_attributes(); ?>
<head>
<title><?php bloginfo('name'); ?> » <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="my-logo">
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1>
</header>
<?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?>
Si quieres utilizar un logotipo como cabecera, sustituye <?php bloginfo(‘name’); ?> por el código de la imagen dentro de las etiquetas <header>.
index.php
El archivo index.php define la página de inicio. También se utilizará como diseño por defecto si no se encuentran plantillas específicas como single.php y page.php.
Utiliza etiquetas de plantilla, como get_header, get_sidebar y get_footer, para asegurarte de que el código de la cabecera, la barra lateral y el pie de página se incluyen en tu página de inicio. También tendrás que insertar los elementos semánticos de HTML5: <section>, <main>, <header> y <article>.
Algunos de los elementos tendrán clases asignadas, que se escribirán en el archivo style.css.
¡Importante! Las etiquetas de cabecera pueden utilizarse varias veces en cualquier página y no se refieren específicamente a la cabecera de la página. Las secciones y los artículos deben tener los elementos de cabecera si hay texto dentro de h1, h2, etc. Si no hay texto de cabecera en una sección o artículo, estas etiquetas pueden omitirse.
Para mostrar una lista de entradas y sus extractos con más etiquetas de plantilla, tendrás que utilizar el bucle de WordPress. Haciendo esto también se llamará a los últimos posts a la página de inicio.
Así, la sintaxis final del archivo index.php tendrá el siguiente aspecto:
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-loop">
<header>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
By: <?php the_author(); ?>
</header>
<?php the_excerpt(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>
En el código anterior, el bucle comienza en <?php if ( have_posts() ) : continua con ( have_posts() ) : the_post(); ?> y termina en <?php endif; ?>.
Para más detalles, echa un vistazo a las siguientes etiquetas de plantilla utilizadas dentro del bucle:
- <?php the_permalink(); ? >: produce la URL correcta de la entrada actual.
- <?php the_title_attribute(); ? >: muestra el título de la entrada en un formato seguro para el atributo title del enlace.
- <?php the_title(); ? >: muestra el título de la entrada.
- < strong><?php the_author(); ? >< /strong>: emite el nombre del autor.
- <?php the_excerpt(); ? >: realiza el extracto del post, que se autogenerará si no escribes el tuyo.
Más adelante aprenderemos más sobre las etiquetas de las plantillas y los bucles de WordPress.
footer.php
Este archivo es donde debes definir el pie de página de cada página. Cierra cualquier etiqueta <body> y <html> que aún esté abierta desde el archivo header.php. Sin este archivo PHP, te darás cuenta de que la barra de administración no aparece cuando visites tu página de inicio, tus publicaciones o tus páginas.
Define tu pie de página utilizando el elemento semántico HTML5 <footer></footer>. Para garantizar que cualquier código final de WordPress y JavaScript se añada a la página, debe incluir también el gancho de acción wp_footer().
<footer>
<p>Copyright © 2019</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Al guardar este archivo se cerrará cualquier etiqueta HTML abierta en otros archivos de plantilla.
Hablaremos más sobre los ganchos de acción más adelante en este tutorial.
single.php
El archivo single.php dicta el diseño de las entradas individuales en tu sitio web. Puede ser completamente diferente del index.php.
Aquí, usaremos la función the_content() para mostrar el post completo. Sin embargo, no añadiremos la barra lateral a los posts y eliminaremos también el enlace en el título.
El código PHP completo debería ser así:
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-full-width">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-full">
<header>
<h2><?php the_title(); ?></h2>
By: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no post was found!</p>
</article>
<?php endif; ?>
</section>
</main>
<?php get_footer(); ?>
Una vez guardado, tus entradas se mostrarán como una sola página sin barra lateral.
page.php
El archivo page.php describe la forma en que se muestran las páginas. Puede ser diferente del índice y del diseño del post.
Consejo profesional
Recuerda que si el archivo page.php no existe, se utilizará la plantilla index.php en su lugar. Además, las páginas de tu sitio web no utilizarán el mismo diseño que el utilizado en el archivo single.php.
Para que las diferencias sean más visibles, volveremos a añadir la barra lateral a este diseño y haremos que el contenido de la página ocupe el 70% del ancho de la misma.
Añade el siguiente código al archivo page.php:
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-full">
<header>
<h2><?php the_title(); ?></h2>
By: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no page was found!</p>
</article>
<?php endif; ?>
</section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>
Una vez guardado, tendrás un diseño específico para tus páginas.
5. Mejora tu diseño en la hoja de estilos CSS
En la sección anterior, hemos mencionado la hoja de estilos CSS. Este archivo controla el diseño y la disposición de tu sitio web. Como ya hemos añadido algo de código al archivo, ahora vamos a modificar el diseño.
Para ello, añade el siguiente código al final del archivo style.css:
.my-logo,
footer {
width: 100%;
padding-left: 1%;
margin-bottom: 8px;
background-color: #78baff;
border: 1px solid #78baff;
}
body > header > h1 > a {
color: #ffffff;
font-weight: 400;
}
article > header {
}
footer {
margin-top: 4px;
}
a {
text-decoration: none;
}
/* 'Margin: 0 auto' centers block content on the page */
.wrap {
width: 99%;
margin: 0 auto;
}
.content-area {
display: inline-block;
}
.content-thin {
width: 70%;
}
.content-full-width {
width: 100%;
}
.content-area,
.primary-sidebar {
display: inline-block;
}
.primary-sidebar {
width: 25%;
padding: 1%;
vertical-align: top;
background-color: #ececec;
}
.article-loop {
width: 45%;
text-align: left;
margin: 5px;
padding: 10px;
}
.article-full {
width: 99%;
padding: 1%;
}
.article-loop,
.article-full {
display: inline-block;
vertical-align: top;
background-color: #FFF;
border-radius: 4px;
margin-bottom: 4px;
}
Una vez guardado, esto hará que varias cajas tengan un fondo blanco y un borde azul.
Consejo profesional
Experimenta cambiando el estilo y la anchura del CSS para ver cómo responde tu tema en distintas situaciones. Hazlo añadiendo CSS personalizado a tu sitio web con un plugin de WordPress o con el personalizador de temas.
Ahora que tienes la hoja de estilos y todas las plantillas necesarias listas, puedes navegar fácilmente por tus entradas y páginas. Tu nuevo tema personalizado debería tener este aspecto:
Uso de las consultas de medios
Las consultas de medios (media queries) son útiles para modificar la apariencia de tu sitio de WordPress en función del tipo de dispositivo, la resolución de pantalla o el ancho de la ventana gráfica del navegador. La función de consultas de medios en tu hoja de estilos CSS define la presentación de la página cuando se cambia la ventana gráfica (viewport).
Supongamos que tienes dos cuadros de texto que ocupan el 50% de la pantalla. A medida que la ventana del navegador se hace más pequeña, los cuadros se ajustan automáticamente para ocupar el 50% de la ventana en lugar de desaparecer por el lateral.
Si la ventana del navegador se hace demasiado pequeña para mostrar todo el texto de esos cuadros correctamente, puedes hacer que ocupen el 100% del tamaño de la ventana y que se muestren unos encima de otros.
Dado que nuestro diseño básico tiene dos cajas en línea en la página principal, podemos cambiar fácilmente la forma en que se comportan cuando la ventana del navegador es demasiado pequeña para mostrar el texto.
Así, cambiaremos el ancho de los posts cuando la ventana del navegador esté por debajo de 800px. En lugar de tener dos posts de lado a lado, cada uno tendrá su propia línea.
Para ello, utilizaremos algunas reglas de características de los medios de comunicación, como:
- max-width: define el ancho máximo del área visible del navegador.
- min-width: determina la anchura mínima del área visible.
- orientation: comprueba si la pantalla está en modo vertical u horizontal.
Consulta la lista completa de funciones multimedia en el sitio web de la Red de Desarrolladores de Mozilla.
Primero escribiremos una consulta de medios que afecte a la clase .article-loop. Esta establecerá que si el ancho de la ventana del navegador es inferior a 800px, la clase .article-loop debe utilizar el 99% del espacio disponible.
Por lo tanto, la consulta de medios sólo debe afectar a las pantallas y ventanas del navegador que tengan una anchura de 800px o menos.
Al final de la clase .article-loop, añade lo siguiente:
@media screen and (max-width: 800px) {
.article-loop {
width: 99%;
}
}
Después de guardar los cambios, dirígete a la página principal de tu sitio web. Cambia el tamaño de tu navegador y cuando pase de 800px de ancho, verás que los recuadros de cada entrada cambian y caen uno debajo del otro.
Añadiremos la siguiente consulta de medios de forma similar. Esta ordenará que el contenido principal y la barra lateral ocupen el 100% del espacio disponible. Esto hará que la barra lateral quede por debajo del contenido principal si la ventana del navegador es menor de 400px de ancho.
Este es el aspecto que debería tener el código:
@media screen and (max-width: 400px) {
.content-area,
.primary-sidebar {
width: 100%;
}
}
Consejo profesional
Puedes colocar las consultas de medios en cualquier lugar de la hoja de estilos o escribir consultas de medios específicas para elementos concretos justo debajo de la definición original. Sin embargo, si afectan a diferentes clases que se encuentran en distintos lugares, te recomendamos colocarlas en la parte inferior de la hoja de estilos.
¡Importante! Cambia las reglas de las consultas de medios para que se ajusten a tus necesidades y veas si hay mejores reglas que se puedan definir.
¿Qué son las etiquetas de plantilla, bucle y ganchos de acción de WordPress?
Tendrás que utilizar etiquetas de plantilla, bucles y ganchos de acción para integrar completamente tu tema con WordPress. A continuación, desglosaremos cada uno de estos elementos para ayudarte a entender cómo funcionan.
Etiquetas de la plantilla
Las etiquetas de plantilla (template tags), también conocidas como funciones de plantilla, son funciones PHP proporcionadas por WordPress para incluir fácilmente archivos de plantilla de tu tema en otro archivo o para mostrar alguna información de la base de datos.
Si quieres mostrar el pie de página en la página de inicio pero no en ninguna otra página, añade get_footer() al final del archivo index.php, pero no en el archivo page.php. Ten en cuenta que algunas etiquetas de plantilla deben ser utilizadas en un bucle de WordPress para que funcionen correctamente.
A continuación dos listas breves de algunas etiquetas de plantillas esenciales, para darte una idea de cuáles están disponibles.
Etiquetas de plantillas que incluyen archivos PHP:
- get_header(): incluye la plantilla header.php.
- get_sidebar(): llama a la plantilla sidebar.php.
- get_footer(): se dirige a la plantilla footer.php.
- get_search_form(): incluye la plantilla searchform.php.
Etiquetas de plantillas que muestran información de la base de datos:
- bloginfo(): muestra la información solicitada en el parámetro, como bloginfo(“nombre”) que muestra el nombre de tu sitio web.
- single_post_title(): presenta el título de la entrada vista actualmente cuando se utiliza en el archivo single.php.
- the_author(): muestra el autor de la entrada vista actualmente.
- the_content(): produce el texto principal de una entrada o página.
- the_excerpt(): muestra un extracto de cualquier entrada o página.
Para ver la lista completa de etiquetas de plantillas de WordPress, consulta el codex oficial de WordPress.
Bucle de WordPress
El bucle de WordPress (WordPress loop) es un conjunto de código que recupera las entradas solicitadas. El código HTML dentro del bucle mostrará todas las entradas solicitadas en una sola página: será una sola entrada o todas las entradas publicadas.
El bucle es una declaración abreviada if-then de varias líneas, compuesta por cuatro líneas de código. La primera línea indica que si se encuentra una entrada, se utilizará el siguiente código para mostrar la entrada. Si no se encuentra ninguna entrada que coincida, puedes definir un mensaje de reemplazo en su lugar.
El ejemplo por defecto de WordPress tiene este aspecto y la línea comentada es donde se escriben tus etiquetas HTML y de plantilla:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> // HTML and template tags here to define the layout, and what is shown from the post <?php endwhile; else : ?> <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p> <?php endif; ?>
Si quieres mostrar una entrada, utiliza la etiqueta de plantilla the_content() dentro del bucle para mostrar el contenido de la entrada. Mientras tanto, si quieres mostrar una lista de todas las publicaciones, puedes usar the_excerpt() dentro del bucle.
Ganchos de acción
Los ganchos de WordPress (WordPress hooks) son funciones PHP que se utilizan para manipular un proceso sin editar los archivos del núcleo. Hay dos tipos de hooks disponibles: acción y filtro. Los hooks de filtro se utilizan para modificar el código existente en el archivo function.php.
Por otro lado, los hooks de acción se utilizan para crear nuevas funciones. Tienen algunas funciones centrales de WordPress que añaden otro código HTML a las páginas. Además, los action hooks permiten a los plugins de WordPress adjuntar sus propias funciones también.
En la plantilla de la cabecera de tu tema, el gancho de acción wp_head() es llamado para incluir la cabecera HTML por defecto de WordPress dentro de las etiquetas <head></head>. En la sección de pie de página de tu tema, el gancho de acción wp_footer() es llamado para incluir el HTML y JavaScript por defecto, y ejecutar cualquier función adjunta por los plugins.
Si no utilizas los ganchos de acción al crear un tema de WordPress, faltará una parte importante el código fuente y los plugins no podrán funcionar correctamente.
Por ejemplo, no llamar a wp_footer() en tu plantilla footer.php hará que no aparezca la barra superior de administración cuando se inicie la sesión como administrador.
Esto se debe a que el código del núcleo de WordPress que muestra la barra de administración está unido al gancho de acción wp_footer(). Por lo tanto, las funciones relacionadas no pueden ejecutarse sin él.
Conclusión
Tanto si tienes un sitio web personal como uno de negocios, hay una amplia gama de opciones en los directorios de temas de WordPress.
Aunque instalar un tema predefinido es más fácil, es probable que tu sitio web tenga un aspecto similar al de otros sitios web que utilizan el mismo tema. Para crear una apariencia única e incluir funcionalidades avanzadas, tendrás que crear un nuevo tema propio.
En este artículo hemos repasado los cinco pasos fundamentales para crear un tema responsivo para tu sitio web de WordPress. Aquí tienes un resumen de ellos:
- Guarda los archivos del tema en una carpeta de temas.
- Construye una hoja de estilos CSS.
- Personaliza el archivo functions.php.
- Crea plantillas y diseños personalizados.
- Haz que tu tema responda a todos los tamaños de pantalla.
Una vez que hayas creado con éxito tu propio tema, te recomendamos que crees un tema hijo para él. Esto te permitirá conservar toda la personalización después de actualizar el tema principal.
En definitiva, esperamos que este artículo te haya ayudado en el proceso de creación del tema. Si tienes alguna pregunta o sugerencia, no dudes en dejarla en la sección de comentarios más abajo.
Descubre otras guías sobre temas de WordPress
Crear un tema hijo de WordPress
¿Cómo utilizar varios temas de WordPress?
¿Cómo crear un tema de WordPress? – Preguntas frecuentes
Esta sección cubrirá algunas de las preguntas más frecuentes sobre cómo crear un tema de WordPress
¿Es difícil crear tu propio tema de WordPress?
Desarrollar un tema de WordPress desde cero es relativamente fácil si tienes algunos conocimientos de HTML, CSS y PHP. Sin embargo, crear tu propio tema de WordPress puede ser tedioso.
Una excelente alternativa a los temas personalizados es utilizar un tema de inicio como Underscore o WP Rig.
¿Se puede ganar dinero con los temas de WordPress?
Sí, la mayoría de los desarrolladores de temas de WordPress venden sus creaciones a unos 59 dólares por licencia.
Hay varios mercados a los que puedes unirte para ganar dinero con los temas de WordPress (por ejemplo, Envato, Theme Forest y Code Canyon). Por ejemplo, la media de ventas anuales sólo en Theme Forest es de unos 17.355 dólares.
¿Cuánto tiempo toma crear un tema de WordPress?
Por lo general, el desarrollo de un tema de WordPress a medida lleva entre 2 y 3 semanas, dependiendo de la complejidad del código.
Por ejemplo, un desarrollador de temas de WordPress necesitará más tiempo para añadir la funcionalidad del constructor de páginas que para construir un diseño responsivo.
Diego es comunicador social, especialista en publicidad digital que trabaja constantemente en mejorar sus conocimientos de marketing digital, enfocándose en contenido y SEO. Idiomas, series, libros y cursos en internet son sus hobbies principales, además de los deportes. Este es su perfil de LinkedIn.
