Utilizar temas hijos y aplicación al proyecto

Clase 22 de 52 • Curso de Creación de Temas y Plugins en WordPress

Resumen

Los temas hijos son temas que podemos utilizar para modificar otros temas. Un tema hijo nos da la posibilidad de mantener los cambios que queremos hacer dentro de una plantilla. Esto funciona a través del cambio de estructuras de temas padres y la creación de temas hijos.
De esta forma siempre el tema padre podrá estar actualizado.

Javier Montesinos

student•

Temas Hijos. Interesante funcionalidad, similar a la herencia en POO permite heredar todo lo que tenga un tema padre de forma que en el hijo se puede especializar aquellos bloques o partes necesarias. Con template parts nos dejará ir al mínimo detalle de personalización.

Todos los bloques del tema padre se sustituyen por las implementaciones realizadas en el hijo, salvo style.css y functions.php que son complementarias, primero se ejecutan las del tema padre y al final se añaden las implementaciones del tema hijo.

Rafael Ochoa

student•

En caso de q se un tema padre tenga una actualizacion y en un tema hijo se implementen funcionalidades que entren en conflito con la actualizacion:: el WP tiene suficiente “inteligencia” para mostrarnos de alguna manera tales conflictos, o se deben descubrir a mano?

CRISTIAN VALENCIA VARGAS

student•

Esto sigue siendo una excelente pregunta. Alguien tiene respuesta a esto. Gracias.

Javier Montesinos

student•

Aplicando el ejemplo descrito en la clase 18: “… El archivo functions.php” para implementar el uso de la función alert_js en un tema hijo, deberemos cambiar la forma de obtener el path base del tema ya que el método get_template_directory_uri siempre nos llevará al base path del tema padre. Deberemos usar: get_stylesheet_directory_uri

Ejemplo implementado:

<?php
function alert_js() {
    wp_enqueue_script('alert_js', get_stylesheet_directory_uri().'/js/alert.js', array('jquery'), false, false);
}

add_action('wp_enqueue_scripts', 'alert_js');
?>

Mariana Valencia Gallego

student•

Muy buen aporte!

Abraham Solorzano

student•

Excelente aporte!

Jonathan Macalupu Reyes

student•

Para el ejercicio de la clase:

Creamos una carpeta llamada platzi-viajes
UN tema para que funcione necesita una referencia que se encuentra en el style.css
Para crear el tema hijo, crearemos un archivo de hoja de estilo (style.css) y copiaremos la información del Storefront:
/*! Theme Name: Storefront Theme URI: https://woocommerce.com/storefront/ Author: Automattic Author URI: https://woocommerce.com/ Description: Storefront is the perfect theme for your next WooCommerce project. Designed and developed by WooCommerce Core developers, it features a bespoke integration with WooCommerce itself plus many of the most popular customer facing WooCommerce extensions. There are several layout & color options to personalise your shop, multiple widget regions, a responsive design and much more. Developers will love its lean and extensible codebase making it a joy to customize and extend. Looking for a WooCommerce theme? Look no further! Version: 2.3.2 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: storefront Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options
Haremos cambios, personalizando los campos.
Adicionalmente, se coloca un atributo adicional denominado Template.
Template: storefront
Si cargamos el tema, se mostrará como el tema storefront padre.
Nota: el nombre que le colocamos al tema padre, tiene que llamarse como el directorio(carpeta) del tema.
Ahora, ¿cómo modificamos nuestro tema?
Ejemplo: Vamos a cambiar para este caso la página 404.php
Creamos un archivo con nombre 404.php dentro de nuestra carpeta platos-viajes y copiamos todo el contenido dentro del archivo creado.
Luego podemos hacer cualquier tipo de modificaciones.
Cada archivo que queremos sustituir, debemos de crearlo dentro de la carpeta de nuestro tema hijo.
Nota Adicional: Para el caso de los estilos (style.css) del tema hijo, reemplazará los estilos de los del tema padre. Mientras que para el caso de las funciones implementadas del tema hijo (function.php), serán agregadas a las funciones del tema padre.

David Alejandro Sepulveda Sosa

student•

he dañado algo de mi sitio, error 500 No me gusta de platzy que no tenemos una asistencia real de los profes, entre los alumnos nos ayudamos y es bien el sitio seria mas especial con una asistencia de profes

Benjamín José Arteaga González

student•

Ten en cuenta que estás llegando a un curso que el primer comentario data de hace 3 años, puede que el profesor ni siquiera siga activo en la plataforma... Ademas, si quieres ayuda puedes explicar un poco más tu error 500, dar detalles o screenshots para que cualquiera te pueda ayudar, lo importante es solucionar y avanzar.

Andrés Aragón

student•

Sí deacuerdo muchas veces me he sentido perdido.

Ruben Ernesto Vilchez Villar

student•

Éste es el bloque que más me gustó . Gracias PLATZI.com 😃

Daniel Wieja

student•

Muy interesante, no lo sabia, yo siempre modificaba el tema principal. Usar temas hijos simplifica bastante las cosas.

Carlos Enrique Ramírez Flores

student•

yo tambien siempre hacia lo mismo jeje https://www.carlosramirezflores.com/

Manuel Fernando Marulanda Aguirre

student•

Es una muy buena práctica desglosar nuestro Tema hijo ya que hereda las funcionalidades básicas de un tema principal o tema padre y permite mejorarlas, modificarlas y ampliarlas.

Antes sucedía que cuando se modifica el tema y este se actualizaba, puff, perdíamos nuestros cambios, un tema hijo no se actualiza, no se sobrescribe, sólo hereda las funcionalidades del tema padre, lo que nos permite hacer realizar 2.000 cambios y nunca perderlos. Es la solución idónea para estos casos.

Yone Moreno Jiménez

student•

Los temas hijos son temas que podemos utilizar para cambiar otros temas. La idea es que si necesitamos actualizar el tema, las modificaciones desarrolladas se mantengan. Siemre que el padre se tenga que actualizar lo hará manteniendo nuestras modificaciones.

Vamos a modificar el tema storefront. Lo primero es crearnos el tema hijo. Nos creamos la carpeta platzi-viajes. Lo que ncesita wordpress es la referencia que se encuentra en style.css

Para crear el tema hijo nos creamos una hoja de estilos en platzi-viajes y copiamos la informacion del storefront. Para ello le ponemos un nombre. Al guardar veremos que hay un tema nuevo, eso si dañado porque solo tiene la style.css

Para onvertirlo en hijo iremos al Template y le ponemos storefront. El template sotrefront tiene que coincidir con el directorio en el que se encuentra.

Si queremos modificar la lantilla 404 lo que hacemos es copiarla y dentro de platzi viajes la creo con el mismo nombre. Además también podremos sobreescribir la header.

Además el style.css del hijo sobreescribe el del padre.

Jorge Luis Paiva Huamán

student•

RUTA recomendada para asimilar el tema. Vi una pregunta sobre este punto y para aprovechar este curso, "sigue tus instintos" (de necesidad desencadenada de aprendizaje..). pero tambien sigue este track: 1)html + ccs + js (todo basico) 2)Lenguaje PHP puro Luego de esto sigue:

Curso Práctico de WordPress 2)Curso Profesional de WordPress 3)Regresa a este curso. Respecto a 4) Creación y Optimización de Sitios Web con WordPress, creo q debe estar en otra linea, la de SEO con WP o mkt digital.

saludos

Juan Francisco

student•

recomendacion, siempre actualicen con ctrl+F5. eso me ha ayudado de muchos supuestos problemas. Ademas que la realidad del programador es siempre estar de foro en foro. El profesor explica muy bien los temas generales. Yo no sabia la logica de funcionamiento de wordpress hasta ahora. Siempre hay actualizaciones pero el core sigue igual

Miguel Evander Pérez Pérez

student•

si nos podrías explicar un poco más a fondo sobre la lógica de funcionamiento de wordpress.

Luis Ángel Cuandon Salazar

student•

Ctrl+F5 es para cargar sin cache, en las herramientas del desarrollador en la sección de red o network, esta un checkbox de deshabilitar cache, siempre recomendado si andas haciendo cambios web

Juan Goiriz

student•

donde aprendo a programar para entender too lo que dice rafa?

Jose L. Figueroa

student•

@gabrielgoiriz diría que le éches un ojo al curos para aprender a programar o si ya tienes bases al de introducción a PHP que es el que se necesita para WP.

Rimak Castañeda Mejia

student•

Hola a todos! Tengo una duda enorme, es posible modificar codigo HTML del tema hijo heredado del padre??

Mil gracias por su aporte.

Naudy José Romero Valero

student•

Claro, pero siempre trata de mantener la retrocompatibilidad cuando se actualize el tema se va a dañar tu site.

Cristhian Ortellado

student•

Por si tienen duda de que haya cambiado algo por el tiempo en que se hizo este curso o simplemente no lograron entender bien les dejo un link donde explica mas gráficamente https://www.youtube.com/watch?v=WRvikl5LfGA&ab_channel=JavierMenoyo-Dise%C3%B1oWebf%C3%A1cil Me parece extremadamente útil esta clase en especial por si hay algún evento como navidad donde te pidan modificar ciertos aspectos de la pagina principal que tarde o temprano deberá volver a su estado anterior, si ya tocan wordpress como yo sabran que hacerlo retrocediendo en las revisiones de la plantilla esto no seria muy limpio de nuestra parte.

Alberto Ramírez Caballero

student•

Si lo hacemos tal cual se muestra en el ejemplo no heredaremos los estilos del tema padre, para hacerlo deberemos crear en el tema hijo el archivo functions.php y añadir el siguiente código:

<?php
	function my_theme_enqueue_styles() {

		$parent_style = 'parent-style'; // Estos son los estilos del tema padre recogidos por el tema hijo.

		wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
		wp_enqueue_style( 'child-style',
			get_stylesheet_directory_uri() . '/style.css',
			array( $parent_style ),
			wp_get_theme()->get('Version')
		);
	}
	add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Russel Quiam

student•

Hola, qué valor debe de ir en la variable $parent_style? debo de escribir tal cual lo pones 'parent-style' o el nombre del directorio o del archivo css del tema padre?

Efraín Sastré

student•

Buen aporte.

Abel Fernando Yupanqui Rojas

student•

Excelente aporte sobre los temas hijos, te hacen la vida más fácil en caso que exista alguna actualización en wordpress que borre los cambios que hemos realizado a nuestros proyectos ;)

lesier gg

student•

Que copadisimo esta el curso

Brayan Jeshua

student•

Excelente Curso! El mejor hasta ahora 😄

Walter Jesus Santiago Gonzalez

student•

Buen día,

https://developer.wordpress.org/themes/advanced-topics/child-themes/

Juan Miguel Jimenez

student•

Para agregar la miniatura del tema tenemos que agregar una imagen preferiblemente de 880 pixeles de ancho por 660 de alto y con el nombre screenshot.png y la colocamos en la raíz de nuestra carpeta del tema.

Andrés Madrigal

student•

Hay alguna de hacer el tema hijo desde el panel de administrador?

Diego Forero

Team Platzi•

No, es necesario hacerlo desde el sistema de archivos, el admin de wordpress no ofrece esa funcionalidad, puede que exista algún plugin que lo permita pero de forma nativa no.

Andrés Madrigal

student•

Tendre que omitir esta parte, de momento ando sin acceso al panel de administrador. Igual esta muy ingenioso el método

Utilizar temas hijos y aplicación al proyecto

Introducción al curso

¡Actualizamos este curso!

¿Qué podemos hacer con WordPress?

¿Debería crear un sitio desde cero o usar un template de WordPress?

¿Por qué aprender WordPress?

Introducción a WordPress y WordPress.org

Conociendo WordPress

WordPress como un blog

WordPress como un CMS

WordPress como un framework

WordPress en el futuro

Repasando WordPress

¿Qué debes hacer antes de comenzar?

Instalar WordPress en un hosting con Softaculous

Instalar WordPress en un servidor con acceso SSH

Instalar WordPress en un servidor con acceso FTP

Instalar WordPress en un servidor con WP-cli

Instalar WordPress en local

Proyecto - Instalación Inicial

Temas en WordPress

Instalar un tema en WordPress

Modificar un tema de forma correcta: La estructura de archivos

Modificar un tema de forma correcta: Cómo crear plantillas específicas

Modificar un tema de forma correcta: Los template parts

Modificar un tema de forma correcta: El archivo functions.php

Utilizar temas hijos y aplicación al proyecto

Gestión de usuarios

Gestión de usuarios básica

Restricción de contenidos

Creación de nuevos roles de usuario - aplicado al proyecto

Maquetadores visuales

Usando Divi como maquetador visual

Aplicar Visual composer en maquetación visual

Usar Gutenberg como maquetador visual

Utilizar WordPress como CMS o como Framework

Custom Post Types - CPT de viajes adaptable a nuestro proyecto

Custom Fields

Formatear tu CPT para mostrarlo en Frontend

Aprender a utilizar la REST API de WordPress

Creación de plugins en WordPress

Plugins básicos que deberíamos utilizar

Jetpack

ManageWP

Plugins de caché

Cookie Law Info

Really Simple SSL

Yoast SEO

Updraft Plus

Cómo crear un plugin

Proyecto - darle diseño y contenido a nuestro sitio

Proyecto - despublicar entradas con Post Expirator y cierre

Contenido Bonus

Seguridad en WordPress

Convierte tu instalación local en un entorno de testing con distintas versiones de PHP

WooCommerce

Instalación de WooCommerce

Configuración básica de WooCommerce

Configuraciones de compra y correos electrónicos en WooCommerce

Crear productos para tienda virtual

Proceso de venta y Pasarelas de Pago

Productos variables

¿Qué es Sensei?