Un tema en WordPress nos permite tener un diseño coherente en todo el sitio, desde las páginas informativas hasta las páginas de entradas. Al crear plantilla en WordPress, tenemos un control total sobre las funciones y ajustes, lo que nos permite personalizar elementos individuales o todo el tema para resaltar y diferenciar nuestro contenido del resto del sitio.
Es por esto que vamos a poder verificar y entender en esta guía algunos de los pasos para la creación de una plantilla de WordPress.
Tabla de contenidos
- 1 ¿Qué son las plantillas en WordPress?
- 2 Partes de una plantilla en WordPress
- 3 Crear plantilla WordPress para post
- 4 Crear plantilla WordPress para páginas
- 5 Crear plantilla de WordPress para categorías y archivos
- 6 Diseño personalizado para tu tema
- 7 Mejora el diseño de la hoja de estilos
- 8 Uso de códigos responsive
- 9 Como empaquetar un tema WordPress
- 10 Conclusiones
¿Qué son las plantillas en WordPress?
WordPress nos permite gestionar plantillas que incluyen páginas, entradas para el blog, menús y multimedia. Aunque WordPress los gestiona, también podemos modificarlos según nuestras necesidades.
Cuando instalamos un CMS en este caso WordPress, viene con un tema básico llamado TwentyTwenty. Sin embargo, podemos eliminarlo y trabajar en base a nuestro propio tema. Para hacer esto, es necesario tener conocimientos de código y comprender cómo modificar la plantilla o tema. También podemos utilizar un tema existente en lugar de crear uno desde cero, lo cual puede ahorrar tiempo.
Con WordPress, podemos modificar elementos y adaptar el diseño de nuestro sitio. Podemos cambiar colores, espacios de visualización y la disposición de los elementos. WordPress nos permite crear un diseño personalizado para nuestras necesidades.
Herramientas para crear una plantilla en WordPress
Si tenemos que enumerar las herramientas con las cuales vamos a poder crear o recrear nuestras plantillas o temas, podemos enumerar las más importantes:
WordPress
Cuando creamos un tema o plantilla para WordPress, la herramienta principal que utilizamos es el propio CMS. WordPress nos permite gestionar tanto blogs como páginas web. Además de las plantillas disponibles en el sitio oficial de WordPress, existen otras opciones de plantillas premium (de pago) que nos ofrecen una amplia variedad de diseños para personalizar nuestro sitio web. Con estas plantillas, podemos modificar los elementos que deseamos según nuestras preferencias.
Desde plantillas o temas orientados a blogs donde las personas al ingresar al sitio tienen una vista general de todas las entradas que se catalogarian como paginas de entradas en WordPress, hasta una página más corporativa donde se muestra información de una empresa o entidad. Todas estas son creadas con un complejo sistema de códigos para hacer que el usuario pueda ver estos sitios más estilizados a como se nos presenta de buenas a primera lo que sería una instalación de WordPress
Así mismo WordPress consta de un sistema de plugins para WordPress en donde nos permite extender mucho más las funciones básicas de una instalación, permitiéndonos instalar ajustes específicos según nuestros requerimientos.
Servidor local
La siguiente herramienta que necesitamos es instalar WordPress localmente. Esto nos permite trabajar en nuestro dispositivo o computadora sin conexión a internet y sin preocuparnos por indexaciones no deseadas. Esta es una de las mejores herramientas si lo que estamos buscando es el desarrollo de un sitio web o en este caso una plantilla para WordPress en un entorno de pruebas o sanbdbox WordPress, en donde no corremos ningún riesgo al generar un error por desconocimiento.
Utilizar un entorno de desarrollo local para trabajar en plantillas de WordPress ofrece la ventaja de tener un control completo y trabajar a nuestro propio ritmo. Nuestro equipo o PC se convierte en un servidor, lo que significa que los recursos son ilimitados si tenemos un equipo de alta gama con suficiente memoria. Adicionalmente en caso de necesitar trabajarlo en otro sitio se puede hacer por medio de una exportación o simplemente copiando todos los archivos. Uno de los programas más sencillos de utilizar es el de localWP.
Editor de código
Los editores de código abierto son herramientas indispensables para desarrolladores y personas que trabajan en la creación de temas. Estos editores ayudan a generar un código limpio y eficiente para el sitio web. El uso de las herramientas adecuadas mejora la productividad de forma significativa. En lugar de utilizar editores de texto básicos, es recomendable utilizar editores de código que ofrecen funciones adicionales para facilitar el trabajo.
Existen varios editores entre los cuales destacamos los siguientes:
Visual studio code: es un editor de código desarrollado por Microsoft. Es un software libre y cuenta con una amplia variedad de extensiones que facilitan la escritura de código en diferentes lenguajes de programación. Es muy popular entre los desarrolladores debido a su capacidad para gestionar de forma eficaz los códigos utilizados en nuestros sitios.
Atom: es un editor de código versátil que funciona en sistemas operativos como Windows, Mac y Linux. Es muy útil para trabajar con WordPress, ya que verifica y valida el código para asegurarse de que sea compatible con la plataforma. Además, ofrece la detección de errores y resalta las sentencias incorrectas en el código, lo que facilita la corrección de errores.
Sublime text: es un editor de código que nos permite crear y editar diferentes tipos de código para diversas plataformas. Al igual que otros editores, ofrece una amplia gama de complementos y plugins que mejoran su funcionalidad. Muchos usuarios nuevos eligen este editor debido a su interfaz intuitiva y fácil de usar.
Partes de una plantilla en WordPress
Hay que tener en cuenta que no siempre los temas que creamos o los que instalamos en nuestro sitio no tienen todas las partes de un tema, muchas veces solo poseen las secciones que están editando; sin embargo, podemos mencionar las partes clásicas de un tema o plantilla WordPress:
Contenido: Esta es la parte más fundamental del sitio, es la que muestra como el nombre lo indica su propio contenido ya sea entrada o páginas.
Header.php: Los headers en WordPress constan de la sección que muestra la parte superior del sitio normalmente esta compuesta por el menú, logo y en algunos casos por un breadcrumb o miga de pan para poder orientarnos por el sitio.
Footer.php: Este footer de WordPress es la parte contraria a lo que sería el header, va ubicado al final del todo en nuestro sitio y usualmente muestra información como copyright y derechos de ley.
Sidebar.php: Este muestra el contenido personalizado en una barra lateral del sitio, usualmente se muestra solo en páginas de categorías o entradas de blog.
Para los próximos pasos es conveniente descargar un tema base como es la plantilla de bootstrap para poder guiarnos en caso de perdidas, o bien un tema por ejemplo TwentyTwenty para poder trabajar en base a este.
Crear plantilla WordPress para post
Al crear un tema, es necesario generar las plantillas mencionadas en puntos anteriores. Sin embargo, la edición de estas plantillas es opcional, ya que en su mayoría se llaman a otros códigos que hemos generado. En este caso, nos centraremos en la edición del archivo single.php, que es la plantilla utilizada para mostrar las entradas o posts. A continuación, veremos algunas funciones que podemos utilizar para esta edición.
the_title(): Se utiliza para mostrar el título de los artículos de blog que publiquemos.
the_author(): Implementa el nombre del autor de la entrada o pagina que se asigne.
the_category(): Se utiliza para crear una categoría de post.
the_date(): Es utilizado para mostrar la fecha de publicación de la entrada o página.
the_post_thumbnail(): Se usa para mostrar la imagen destacada de la entrada.
the_content(): Muestra todo el contenido o cuerpo de esta entrada para poder mostrar todo.
Todos estos o bien los que necesitamos mostrar se implementan en un archivo con el nombre single.php en la carpeta del tema. En este vamos a agregar lo siguiente:
<?php get_header(); ?>
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Post Content Column -->
<div class="col-lg-8">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- Title -->
<h1 class="mt-4"><?php the_title(); ?></h1>
<!-- Author -->
<p class="lead">
Por
<?php the_author(); ?>
</p>
<hr>
<!-- Date/Time -->
<p>Publicado <?php the_date();?> </p>
<hr>
<!-- Preview Image -->
<?php the_post_thumbnail('destacada',array( 'class' => 'img-fluid rounded' )); ?>
<hr>
<!-- Post Content -->
<?php the_content(); ?>
<hr>
<?php endwhile; else : ?>
<p>Lo siento, no hemos encontrado ningún post.</p>
<?php endif; ?>
</div>
<!-- Sidebar Widgets Column -->
<?php get_sidebar(); ?>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<?php get_footer(); ?>
Una vez hecho esto tenemos el contenido estático establecido en cualquier post que creemos dentro de nuestro WordPress, todos mostraran la misma información, ya que toma el contenido directamente de la base de datos que se genera para cada una de las entradas que se desarrollan en el sitio. Incluyendo elementos como el sidebar al final del mismo y una declaración de llamado a post de forma dinámica a través del código the_content(), de esta forma podemos ver las páginas de entradas de forma correcta en nuestro propio tema creado.
Crear plantilla WordPress para páginas
Si hemos editado el archivo single.php para crear entradas personalizadas, podemos utilizar esa base para generar un archivo que funcione para las páginas que creamos. Solo debemos modificar el nombre del archivo y lo llamamos page.php, ya que el archivo single.php se utiliza más que nada para las entradas y el archivo page.php será el que utilizaremos para las páginas que creamos.
Como podemos tomar de base el código anterior vamos a utilizar todo solo eliminando el código que corresponde a las entradas, ya que las páginas trabajan llamando otro código diferente, de tal forma que quede así:
<?php get_header(); ?>
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Post Content Column -->
<div class="col-lg-8">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- Title -->
<h1 class="mt-4"><?php the_title(); ?></h1>
<!-- Author -->
<p class="lead">
Por
<?php the_author(); ?>
</p>
<hr>
<!-- Date/Time -->
<p>Publicado <?php the_date();?> </p>
<hr>
<!-- Preview Image -->
<?php the_post_thumbnail('destacada',array( 'class' => 'img-fluid rounded' )); ?>
<hr>
<!-- Post Content -->
<?php the_content(); ?>
<hr>
<?php endwhile; else : ?>
<p>Lo siento, no hemos encontrado ningún post.</p>
<?php endif; ?>
</div>
<!-- Sidebar Widgets Column -->
<?php get_sidebar(); ?>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<?php get_footer(); ?>
Una vez tenemos esto ya será posible visualizar las páginas de forma correcta, luego podemos ir modificando ajustes, pero hay que tener en cuenta que esto se puede hacer por medio de la edicion CSS en WordPress, y la base que sería esta ya estaría en cada página.
Crear plantilla de WordPress para categorías y archivos
En WordPress, los archivos y categorías no se muestran automáticamente. Por defecto, el contenido se muestra de forma cronológica, pero podemos personalizarlo. Para mostrar archivos y categorías, debemos hacer llamados específicos en nuestro código. Es importante crear las categorías en WordPress antes de mostrarlas en nuestro sitio.
El archivo que normalmente se modifica y se edita para poder tener las categorías es variable según si vamos a editar las etiquetas, la fecha y demás elementos, pero de manera general el archivo que vamos a crear o modificar es el de archive.php. En este vamos a generar los datos que toma esta categoría y archivos generales del tema:
<?php
/*
Template Name: Archives
*/
get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php the_post(); ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php get_search_form(); ?>
<h2>Archives by Month:</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
<h2>Archives by Subject:</h2>
<ul>
<?php wp_list_categories(); ?>
</ul>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Es importante recordar que podemos probar todos los ajustes que realicemos y, en caso de que no funcionen, podemos consultar cómo se ha creado una plantilla existente. Podemos utilizar las plantillas como ejemplos y descargarlas para modificarlas según nuestras necesidades. Aprendemos mejor a través de los ejemplos, por lo que si encontramos una plantilla similar a lo que queremos, podemos utilizarla como punto de partida y realizar los cambios necesarios.
Teniendo en cuenta que lo que nos interesa es la estructura porque los estilos no se dan en el código del tema sino en el código CSS del sitio.
Diseño personalizado para tu tema
El diseño visual y la disposición de las páginas de un sitio web son controlados por las hojas de estilo CSS. Para que un tema de WordPress sea reconocido como válido, es necesario contar con un archivo CSS que especifique elementos como las fuentes y los colores.
Con el objetivo de crear un archivo de hoja de estilo, es recomendable ubicarlo en la misma carpeta del tema. En este archivo, se debe incluir información relevante como el nombre del tema, la versión, la descripción y el autor. Esta información será mostrada en el panel de control del administrador de WordPress.
Es importante tener en cuenta que esta información debe ser escrita como un comentario CSS de varias líneas, con cada cabecera en su propia línea y comenzando con una palabra clave. Puedes encontrar una lista completa de las palabras clave de cabecera para los temas en la página WordPress Codex.
Aquí tienes un ejemplo como referencia:
/*
Theme Name: Mi tema
Author: Nombre
Author URI: https://www.dominio.com/
Description: 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
*/
Al llegar a este punto, tu tema se hará visible en el panel de control de WordPress. Al dirigirte a Apariencia > Temas, encontrarás Mi tema con una imagen de caja de verificación en blanco y gris.
Aunque tengamos esto vamos a tener una página en blanco sin estilos al activar nuestro tema, para que no nos pase esto debemos crear algunas reglas CSS para que cambien ciertas cosas dentro de nuestra web. Agregamos el código CSS para cambiar el color de fondo teniendo en cuenta que todos los cambios que se hagan a este código tendrán que ser luego del cierre de la etiqueta */.
body {
background-color: #f9f9f9;
font-family: Helvetica;
}Es importante ir conociendo los códigos que vamos a agregar a nuestro archivo CSS, el que tenemos en el panel anterior es solo para agregar un color al fondo del sitio, de igual forma cambiar o estipular la fuente en helvética para todo lo que sería parte del body.
Es importante tener en cuenta que si queremos que nuestro sitio sea diferente, debemos trabajar más en los estilos que este va a tener activos recordando que este archivo se puede modificar las veces que nosotros necesitemos hasta lograr los estilos que sean de nuestro agrado.
Mejora el diseño de la hoja de estilos
El diseño de un sitio web en WordPress puede ser mejorado en gran medida utilizando CSS de manera efectiva. Al elegir construir un tema podemos personalizarlo al máximo para que este sea más atractivo a los visitantes. Es importante comprender los conceptos básicos de CSS y utilizar selectores específicos para aplicar estilos de elementos que necesitemos, sin contar que podemos organizar nuestro CSS de tal manera que sea coherente y fácil para el mantenimiento vamos a ver algunos consejos generales para tener una mejor hoja de estilos:
Utilizar selectores específicos: cuando nos referimos a selectores en específico, hacemos referencia a los códigos exactos de los elementos que vamos a modificar, esto nos ayuda a mantener un mejor control de los elementos y evitar conflictos de visualización a medida que trabajemos en estos.
Evitar el uso excesivo de estilos inline: si bien es muy tentador el utilizar en nuestro HTML el propio código CSS aún más cuando estamos construyendo desde cero nuestro tema, esta práctica no es muy beneficiosa para nosotros, ya que en términos de mantenimiento dificulta más las acciones automatizadas.
Utiliza reglas CSS reutilizables: si tenemos varios textos que comparten el mismo estilo CSS, lo mejor que podemos hacer es agrupar estos mismos en uno solo, de tal forma que no saturamos nuestro archivo y en caso de querer hacer cualquier cambio resulta más sencillo.
Mantener el código organizado: el código CSS puede parecer desastroso en ciertas ocasiones, sin embargo, podemos organizarlo y mejorarlo con el uso de comentarios (/* Este es un comentario de una línea en CSS */) si utilizamos este en el inicio de cada código que agreguemos podemos indicar que estamos editando con este mismo y mantener un orden dentro del archivo style.css
Experimenta y prueba nuevos estilos: Lo mejor que podemos hacer para mejorar nuestro CSS es probar cosas nuevas, si tenemos la posibilidad de cambiar estilos lo ideal es hacerlo así vamos a ir viendo de qué manera nuestro sitio se ajusta a nuestros gustos.
El mejorar el código CSS de un sitio lleva tiempo y práctica, pero podemos llegar a tener un mejor archivo si aplicamos estos consejos en nuestro día a día editando y modificando nuestro sitio.
Uso de códigos responsive
Los media queries son una herramienta que podemos utilizar para que nuestros sitios se adapten en gran medida a cualquier dispositivo que lo abra, este adapta el mismo para que se visualice sin problemas en pantallas grandes o pequeñas, para tener una mejor idea de su uso imaginemos un texto que esta visible con el 50% de la web (ancho) esto quiere decir que si bajamos la resolución y lo abrimos con un teléfono va a ser apenas legible.
En lo que nos ayudan los media queries es a decirle a nuestro archivo style.css que este texto al llegar a una resolución cambie de 50% a 100%, siendo este visible en teléfonos y no llegando a ser difícil de leer, no solo aplica a textos, puede utilizarse en cada uno de los aspectos de nuestro sitio logrando cambiar el comportamiento de todo el sitio solo modificando el tamaño de la pestaña.
Para lograr este tipo de ajustes se utilizan varias reglas que vamos a ver a continuación:
- max-width: define el ancho máximo del área visible del navegador.
- min-width: determina el ancho mínimo del área visible.
- orientation: verifica si la pantalla está en modo vertical u horizontal.
Para conocer la lista completa podemos hacerlo mediante la web de desarrollo de Mozilla. Un ejemplo de estos códigos puede ser el siguiente:
@media screen and (max-width: 800px) {
.div777 {
width: 60%;
}
}
Como empaquetar un tema WordPress
Una vez tenemos hecho todo nuestro tema y queremos proceder a lo que sería la exportación del mismo para llevarlo a nuestro WordPress simplemente debemos realizar un archivo comprimido en formato .zip, esto debido a que las extensiones que se utilizan como son PHP, CSS, JavaScript y CSS. Estas no tienen que compilarse en un ejecutable para poder ser instaladas en un WordPress, directamente podemos trabajar la misma sin realizar muchos pasos.
Luego de esto simplemente incluimos los archivos finales y subimos a nuestro WordPress de la forma manual mediante el instalador de WordPress.
Conclusiones
El proceso de creación de un tema puede resultar complicado en varios aspectos. Sin embargo, tener una guía, como un tema existente que nos guste, facilita enormemente el proceso. Podemos optar por crear un tema desde cero o modificar aspectos de uno ya existente, siempre teniendo en cuenta los elementos básicos que componen estos archivos.
Es importante conocer la estructura de escritura de los términos y saber dónde ubicarlos dentro del archivo correspondiente a cada sección que estemos creando. Una ventaja de crear nuestro propio tema es que podemos gestionarlo completamente, sin depender de terceros para realizar actualizaciones. Además, podemos realizar modificaciones directamente en el código, en lugar de depender de actualizaciones continuas en formato predefinido.
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y WooCommerce en Webempresa.
