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:
Lo primero que tenés que hacer es entrar al administrador de temas en Apariencia > Temas y hacer clic en Añadir nuevo
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.
Haz clic en el botón Instalar
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.
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.
Haz clic en Añadir nuevo.
Buscá el archivo .zip con tu theme y haz clic en Instalar ahora
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.
Iniciá la conexión con el servidor y ubicate en la carpeta de principal del sitio, donde se encuentra la instalación de WordPress.
Luego ve a la carpeta wp-content/themes y subí la carpeta principal del theme.
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.
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.
Dentro de esa carpeta tenés que crear los archivos style.css e index.php.
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.
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.
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:
<?phpfunctionchild_theme_assets(){wp_enqueue_style('estilos-padre',//handle para estilos de tema padreget_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.
Me pasaba que al crear la carpeta twentytwenty-child con sus archivos index.php, style.css y functions.php no me salían los estilos del tema padre, esto es porque al crear el nuevo archivo index.php vacío, sobreescribimos el del tema padre y por eso no podemos ver nada.
Cuando queramos modificar ligeramente algunas páginas o secciones del tema padre, podemos copiar el archivo del tema padre en nuestra carpeta del tema hijo y ahí realizar las pequeñas modificaciones :).
Osea que por el momento para que el tema hijo tome los estilos del tema padre hay que copiar el archivo index.php del padre en el hijo o eliminar el index.php del hijo?
Sería copiar el archivo index.php del padre en la carpeta del tema hijo. Y en ese index.php de la carpeta del tema hijo haces las modificaciones que quieres, ya que esto hará que se vean tus cambios en el tema. :)
Les comparto un enlace del Developer Hanbook de WordPress que da más explicación de los temas hijos.
Yo me encontré con el detalle de que no estaba tomando como tal el tema padre a pesar de haber hecho los pasos como los explica el profesor. En la parte de index.php del tema hijo, se debe colocar el código de la misma manera que lo elaboramos previamente
<?php get_header();?><?php get_footer();?>
una duda, el nombre del archivo no es functions.php(con 's' al final)? , saludos! ✌🏼
Hola! Si, el nombre correcto del archivo es functions.php.
así es, el archivo se llama functios.php (con la S)... a mi me pasó que cometí el error y nombraba las funciones como "functions myfunction()..." y allí efectivamente no va la S....
Déjame saber si mi aporte fue útil .. y mucho éxitos...!!
Que bien explicado, en mi trabajo me toca hacer algo con wordpress y no sabia nada sobre estos childs menos mal hago el curso, gracias platzi.
Sabia información de Child-themes. Está muy bacano el curso!
Para los que quieran saber un poco más de los temas hijos pueden ver esta clase https://platzi.com/clases/1154-wordpress/8198-utilizar-temas-hijos-y-aplicacion-al-proyecto/
que es parte del Curso de Creación de Temas y Plugins en WordPress.
El curso es parecido a este, aunque no está tan bien explicado y ya está medio antiguo, lo pueden usar como un complemento a este.
¿Se coloca algo dentro de index.php? Lo dejé vacío y no estoy visualizando nada.
en mi caso, al archivo index.php no le hice ninguna modificación, solo tiene estas dos líneas...
<?php
// Silence is golden.
Déjame saber si fue claro mi aporte y muchos éxitos...!!!
ARCHIVOS OBLIGATORIOS QUE NECESITAMOS PARA INICIALIZAR UN THEME?
Excelente información. Estaría aún mejor si se usara español neutro para redactar el contenido.
Usted se refiere al español latino verdad?
En cuanto a mis preferencias, no tengo problema con eso!
Sólo creo que sería más ilustrativa la información en un video :) (no se si más adelante del curso exista como tal)
Yo tampoco tengo preferencias sobre que español usar. Soy español pero me encanta el argentino... : )
Este contenido es repetido pero vale la pena repasar nuevamente este procedimiento.
Me gustó la explicación que dieron aquí para reafirmar. La verdad a mí me quedo mas claro.
Por favor aclárenme una duda soy nuevo en esto de CMS y WordPress.
No se supone que WordPress permite gestionar contenido ( imágenes, texto) sin tener que tocar una línea de código? Terminé de ver todo este modulo y veo que de todas formas hay que codificar, y tener conocimiento de php, js, css, html, entre otros como bootstrap.
Entonces por que usarlo? No es mejor hacer el proyecto de la forma tradicional incluso usando un frame work, si de todas formas se tiene que hacer código? O es que se refiere al usuario final? es decir la persona que administre la web quien podrá gestionar el contenido de la web sin tener que tocar una lineal de código? (Pero esto no se menciona en ningún momento).
Yo creí que con WordPress se podia crear la web de manera sensilla, casi como arrastrar y soltar todos los componentes que quiero que la web tenga. Y si quiero algo muy especifico me daba la opción de programarlo en php.
Espero puedan aclararme esa duda. Gracias.
Lo mismo pensé yo, esto tiene una estructura algo rara y confusa.
Es porque en este curso tambien nos estan enseñando a ahcer temas desde cero, pero no es algo obligatorio, facilmente puedes usar un tema ya hecho e irlo modificando a tu gusto y dado el caso tocar un poquito de código. Un saludo!!
Excelente review @Cristian Ramanzin
Para crear temas hijos tambien se puede usar el plugin: child theme
No lo e probado, lo intentaré para ver que tal funciona, gracias por el aporte :)
Excelente explicacion
Hola. ¿Sitios donde descargar temas interesntes? Gracias
¡Hola, David! Te dejo un link donde puedes descargar temas y plugin interesantes para Wordpress.
¡Nunca pares de aprender! 💚
Muchas gracias
Como puedo hacer un pop up y que se abra cuando me tocan una página?
Hola Alberto,
Hay muchas formas. Una de mis favoritas es crear el popup de tal forma que funcione con puro CSS (Puedes seguir este tutorial para lograrlo).
Y luego, agregar el trigger que quiras para activarlo con JavaScript. En tu caso, cuya condición es la de "tocar una página" podrías hacer el trigger así:
// Seleccionar el elemento que activa el popup, en el caso del ejemplo que te compartí, el checkbox cuyo id es "login-popup"const popupTrigger =document.getElementById("login-popup");// Activar checkbox al cargar una páginawindow.onload=()=> popupTrigger.checked=true;
bueno vimos que heredo los estilos... pero alguien sabe si heredo algo más? a alguien más le esta dejando un sabor amargo este curso? tiene temas buenos pero como que a la hora de la hora te deja el mal sabor de boca como, pero que hizo? como lo hizo? por que?
