Instalación y Personalización de Themes en WordPress

Podés instalar themes en WordPress de tres formas diferentes. Desde el repositorio oficial de wordpres.org, mediante un archivo .zip o manualmente copiando los archivos en la carpeta correspondiente.

Repositorio oficial

En este caso WordPress permite instalar themes desde su repositorio utilizando solamente el admintrador. Para lograrlo tenés que seguir los siguientes pasos:

1. Lo primero que tenés que hacer es entrar al administrador de temas en Apariencia > Temas y hacer clic en Añadir nuevo

2. Una vez en esa página, podés usar el búscador que está en la esquina superior derecha o los filtros personalizados que están a la izquierda para navegar las diferentes posibilidades.

3. Haz clic en el botón Instalar

4. Por último haz clic en Activar

Instalación mediante un archivo .ZIP

Este método consiste en subir un archivo .zip desde el administrador, este archivo corresponde a la carpeta principal del theme comprimida en dicho formato. Podés utilizar esta opción cuando tengas un theme que no se encuentra en el repositorio oficial. Por ejemplo, uno que hayas comprado o desarrollado por tu cuenta.

1. Al igual que en el método anterior, tenés que ir a la pantalla de instalación desde el menú lateral con la siguiente ruta Temas > Añadir Nuevo.

2. Haz clic en Añadir nuevo.

3. Buscá el archivo .zip con tu theme y haz clic en Instalar ahora

4. Por último, haz clic en Activar

Cómo subir los archivos de forma manual

Por último, existe una forma manual de realizar la instalación. Esto consiste en mover la carpeta principal del theme a la carpeta wp-contet/themes de WordPress. Este método lo podemos utilizar cuando el servidor no provee permisos de escritura para el sitio (no permirte crear, modificar o eliminar archivos).

En este caso vas a ver como subir los archivos utilizado Filezilla, pero podés usar cualquier cliente FTP.

1. Iniciá la conexión con el servidor y ubicate en la carpeta de principal del sitio, donde se encuentra la instalación de WordPress.

2. Luego ve a la carpeta wp-content/themes y subí la carpeta principal del theme.

3. Por último dirigite al administrador de temas en Apariencia > Temas y activá el theme que acabas de subir, haciendo clic en el botón Activar.

Si estás utilizando una instalación local, basta con que copies la carpeta principal de tu theme en la carpeta /wp-content/themes/.

Child Theme

Cuando utilizás themes desarrollados por terceros, tenés que asumir que en un futuro ese desarrollador o empresa va a actualizarlo. Si hacés cambios modificando o agregando código directamente sobre los archivos de ese theme, cuando lo actualicés, perderás todas las modificacioens que hayas hecho en el mismo. Para solucionar este problema, WordPress te da la opción de crear un child theme. Un child theme es un theme que usa los archivos un "padre”, es decir, del theme que originalmente estabas utilizando. Sin embargo, permite agregar código propio que sobreescribirá las funcionalidades del "tema padre". Esto permite independizar las personalizaciones del código original.

A continuación vamos a crear uno utilizando como "padre" al theme Twenty Twenty, desarrollado por el equipo de Wordpress.

1. Lo primero que tenés que hacer es crear una carpeta en /wp-content/themes. El nombre de la misma puede ser cualquiera pero, para seguir las buenas practicas, lo recomendable es usar el nombre del tema padre seguido de "-child", en este caso twentytwenty-child.

3. Dentro de esa carpeta tenés que crear los archivos style.css e index.php.

4. En el archivo style.css tenés que inicializar el child theme colocando los siguientes datos dentro de un comentario:

/*
Theme Name: Twenty Twenty child
Theme URI: https://wordpress.org/themes/twentytwenty/
Version: 1.0
Description: Tema hijo de Twenty Twenty
Author: Cristian Ramanzin
Author URI: https://github.com/ramitaenlarama
Template: twentytwenty
*/

Los datos importantantes de está configuración son:

• Theme Name : Nombre del tema hijo.
• Template : Nombre exacto de la carpeta donde se encuentra el tema padre.

5. Una vez que el child theme este inicializado tenés que activarlo desde el administrador de temas en Apariencia > Temas. Posicioná el cursor encima de él y presioná el botón Activar.

6. Por último, para poder mantener el diseño que tiene el tema padre, tenés que importar el css que contiene los estilos utilizados. Para eso dentro de tu child-theme vas a crear el archivo function.php con el siguiente código:

<?php

function child_theme_assets() {
 
 wp_enqueue_style( 'estilos-padre', //handle para estilos de tema padre
                    get_template_directory_uri() . '/style.css' //get_template_directory_uri() retornara la ubicación del tema padre
                );

 wp_enqueue_style( 'estilos-hijos',
                    get_stylesheet_directory_uri() . '/style.css', //get_stylesheet_directory_uri() retornara la ubicación de la hoja de estilos del child-theme 
                    array('estilos-padre'), //usa como depencia la hoja de estilos del tema padre.
                    '1.0' //Versión de la hoja de estilos 
                    );
}
add_action( 'wp_enqueue_scripts', 'child_theme_assets' );

Tenés en cuenta que todo lo que desasarrollés en esta carpeta tendrá mayor prioridad que el tema padre. Es decir, que si añadís una propiedad o un archivo de alguna de las vistas ya existentes (single.php, page.php,etc), los originales serán reemplazados por los tuyos.

Ahora ya tenés tu tema hijo activo y preparado para trabajar. Desde ahora podés agregar tu código sin necesidad de moficar los archivos del theme desarrollado por terceros. Cuando el theme padre se actualice, todo tu código estará a salvo en tu child theme.