Como modificar y personalizar mi tema de WordPress

Una de las tantas ventajas de crear un blog en WordPress, es poder disponer de gran cantidad de temas para escoger entre ellos, uno con un estilo personal que nos guste.
Hay miles de temas disponibles (plantillas), algunos de ellos creados por WordPress y el resto por la comunidad.
La gran mayoría son completamente gratis, algunos requieren de pago para características avanzados y otros son .
No obstante a los más exigentes nos atraerá la posibilidad de modificar los temas y crear uno completamente personal, que resuma todas nuestras exigencias.
No es necesario ser un desarrollador, ni poseer conocimientos avanzados para hacerlo.
En este artículo que es simbólico porque es el primero de mi nuevo blog, explico como hacerlo detalladamente, además sus ventajas, lo que animará a todos los lectores que poseen un blog o piensen crearse uno de ellos en el futuro.

Como hacer cambios en WordPress

Los cambios al estilo o configuración de un blog en WordPress, se pueden hacer de diversas formas:
Todo lo anterior lo explicamos en esta publicación.

Temas de WordPress, cual escoger

Como decíamos hay una gran cantidad de temas disponibles, para los que usamos este CMS (Sistema de gestión de contenidos), que se pueden instalar.

No obstante los profesionales recomiendan usar uno de los temas bases de WordPress, incluidos en la instalación.
Esto es por problemas de seguridad.
Explican que las brechas de seguridad en WordPress, generalmente se deben a los temas creados por terceros y a los plugins.
Los que dispongan de algún tiempo libre y conocimientos elementales, pueden instalar uno de estos temas y personalizarlo completamente a su gusto.
En este artículo tomo como ejemplo el tema Twenty Seventeen, el ultimo disponible en el momento de la publicación.

Como modificar mi tema de WordPress

WordPress incluye en el de control, en el menú de Apariencia, varias opciones básicas para personalizar el tema (menús, widgets, etc) y un editor para hacer cambios en el código.
Los cambios con el editor pueden ser peligrosos y no se recomiendan.
Los que deseen hacer cambios y modificaciones avanzadas en el tema, deben de usar uno de los siguientes métodos o ambos inclusive:
Ambos se pueden crear de forma sencilla y a continuación explicamos detalladamente como hacerlo.

Editar y subir los archivos al servidor

Como decíamos anteriormente, no recomiendo usar el editor incluido en el de control.
La mejor opción es descargar a la computadora el archivo del tema desde WordPress, hacer los cambios y modificaciones localmente y subir el resultado al servidor mediante FTP o SFTP.
La opción ideal aunque no imprescindible, es XAMPP, para poder visualizar los cambios antes de hacerlos efectivos.

Usar un Child theme de WordPress

Un Child Theme (preferimos usar el nombre original en inglés), es un tema secundario que contienen archivos de configuración, que son priorizados antes que el original.
De esa forma no es necesario modificar los archivos originales del tema y podremos experimentar sin temor alguno.
La otra ventaja es que no son alterados al actualizar el tema original, lo que ocurre regularmente.

Como crear un Child theme (tema descendiente) en WordPress

Accede a la carpeta de temas en el directorio o carpeta: “wp-content -> themes”.
Crea una nueva carpeta y dale el nombre del tema instalado, agregándole al final el sufijo: –child.
Por ejemplo: “twentyseventeen-child”.

En el de control de WordPress en “Apariencia -> Temas”, selecciónalo y actívalo.

Es todo, ya podemos comenzar a hacer cambios en el nuevo tema activado.
En dicha carpeta podemos crear un archivo de estilo CSS para modificar el estilo visual del blog y un archivo de configuración PHP para hacer cambios en la configuración.
Además podemos hacer copias de los archivos individuales del tema, que necesitamos modificar.

Crear archivo de estilo CSS del tema

A continuación debemos crear un archivo de estilo llamado “style.css”, en el que agregaremos las reglas para modificar por completo el estilo visual del tema.
Para eso crear un nuevo archivo de texto llamado style.css y cópialo en el interior de la carpeta Child.
Abre el archivo con un editor de texto plano (no Microsoft Word) e introduce en la parte superior lo siguiente

/*
Theme Name: Twenty Seventeen Child Theme
Template: twentyseventeen
Author: Norfi
*/
@import url("../twentyseventeen/style.css");

Sustituye el nombre del tema o plantilla, si se trata de una diferente.
A continuación se pueden agregar todas las reglas de estilo necesarias en dicho archivo.
Recomiendo como editor a Notepad++, es gratis y software libre.

Reglas CSS de ejemplo para WordPress

Son varios los cambios que se pueden hacer en el estilo del blog usando CSS.
A continuación muestro algunas líneas de ejemplo del código empleado en el style.css del tema child que empleo en este blog, del tema original Twenty Seventeen a dos columnas.
Las líneas encerradas con los caracteres /* texto */, son solo comentarios y se pueden eliminar.
Modifica el código a tu gusto y pégalo en el interior del archivo style.css:

 /* Cambiar fuente */
body{font-family:sans-serif;}
/* Color de fondo del footer */
.site-footer {background-color: #eeeeee;}
/* Reducir altura del footer */
.site-footer .wrap {padding-bottom: 1em;padding-top: 1em;}
/* Ocultar la fecha de publicación */
.entry-meta .posted-on {display:none;}
/* Vista de escritorio */
@media screen and (min-width: 48em) {
/* Aumentar tamaño del texto */
body,button,input,select,textarea {font-size: 18px;}
/* Aumentar tamaño del nombre del blog */
.site-title {font-size: 30px;}
/* Aumentar tamaño del título de la página */
.single-post .entry-title,.page .entry-title {font-size:36px;}
/* Aumentar ancho de la página, del contenido y de la barra lateral */
.wrap {max-width: 1100px;}
.has-sidebar #secondary {width: 25%;}
.has-sidebar:not(.error404) #primary {float: left;width: 71%;}}

Para conocer la clase que debemos modificar de cualquier elemento de una página, podemos seleccionarlo con el ratón en el navegador Google Chrome y usar la opción “Inspeccionar” en el menú contextual.
En otros artículos comparto más ejemplos útiles, para los que no posean experiencia en el uso de CSS.

Modificar las plantillas del tema

Cada post o página en WordPress, se crean usando varios archivos o plantillas independientes, que se unen dependiendo del tipo de publicación.
Debemos comprender esta estructura para poder modificar algunas de las secciones, si es necesario.
Por ejemplo una entrada o post, se crea usando las siguientes plantillas:
Todas se encuentran en la raíz del tema.
Cada una de ella posee plantillas secundarias que se encuentran en el interior de la carpeta llamada “template-parts”.
Algunos cambios estructurales (imposibles con CSS), requieren copiar uno de estos archivos a la carpeta chill del tema y modificarlos.
A continuación un ejemplo.

Sustituir los créditos de WordPress en el footer

De forma predeterminada en el área del footer se muestra un enlace a la Política de privacidad del sitio (si se ha hecho) y en el crédito “Creado con WordPress” con un enlace a su sitio web.
Para sustituir esto haz lo siguiente:
Copia el archivo site-info.php situado en la ruta: template-parts/footer del tema original, al interior del tema child.
Abre el archivo con un editor de texto y sustituye las siguientes instrucciones, por la línea más abajo.
Cambia el enlace y el texto según tus necesidades.

<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyseventeen' ) ); ">
<?php printf( __( 'Proudly powered by %s', 'twentyseventeen' ), 'WordPress' ); ?>	</a> 
-	
<a href="https://norfipc.descargarjuegos.org/">NorfiPC</a> Copyright &#xa9; 2019

Crear archivo de configuración del tema con functions.php

Para modificar parámetros de configuración y comportamiento del blog en aspectos que no son visuales, podemos crear en el interior de la carpeta child, un archivo de configuración llamado “functions.php”, usando un simple archivo de texto plano vacio.
En él se pueden agregar instrucciones en lenguaje PHP.
Podemos crearlo manualmente de forma similar al archivo anterior.
En otros artículos compartiremos hacks destinados a modificar varios aspectos del blog, que requieren ser introducidos en functions.php.

Crear un plugin personal para modificar el tema de WordPress

Un plugin personal es una herramienta similar a las que podemos encontrar por cientos en WordPress, que permiten modificar la configuración de varios parámetros del blog.
Consiste en un sencillo archivo de configuración, al que podemos agregarle instrucciones.
Además de hacer cambios en el estilo y configuración del blog, con el podremos prescindir de la gran mayoría de plugins que habitualmente instalamos, simplemente agregando algunas instrucciones.
En otro artículo llamado: Usar y configurar WordPress sin plugins, me extiendo más en este tema y explico detalladamente como usar esta útil opción.

Otras páginas relacionadas

✓ Como usar y configurar WordPress sin plugins
✓ Como crear un sitemap.xml para WordPress sin plugins
✓ Convertir los enlaces externos en NoFollow en WordPress


Comparte

Sígueme en las redes sociales