Retomando la serie de tutoriales para Hestia, hoy aprenderemos a actualizar el tema a su versión PRO de la manera correcta y recomendada por ThemeIsle.
Si ya estamos usando un tema hijo personalizado para la versión que se descarga en WP.org, y queremos dar el salto a la versión PRO, tendremos que hacer algunos cambios para asegurarnos de que todas las opciones sean migradas y de no tener que volver a configurarlas.
Estos son los pasos para lograrlo:
1. En primer lugar, asegurarnos de que hayamos creado el tema hijo de la versión gratuita de Hestia, como se explica en esta entrada anterior. Para este ejemplo, el tema hijo de Hestia se llamará Hestia – Hijo, dentro de la carpeta hestia-child.
2. En segundo lugar, también tendremos que crear un tema hijo para Hestia PRO. Las instrucciones son casi exactamente las mismas que para crear el tema hijo de Hestia, con la salvedad de que tendremos que usar la plantilla hestia-pro en el archivo style.css y reemplazar theme_mods_hestia por theme_mods_hestia-pro en el archivo functions.php. Lo llamaremos Hestia PRO – Hijo.
Los códigos completos en la carpeta hestia-pro-child quedarán de la siguiente manera:
El archivo styles.css:
/* Theme Name: Hestia PRO - Hijo Theme URI: https://themeisle.com/themes/hestia Description: Tema hijo de Hestia PRO, por ThemeIsle. Author: Caribdis.Net Author URI: https://caribdis.net Template: hestia-pro Version: 1.0 License: GNU General Public License v2 License URI: http://www.gnu.org/licenses/gpl-2.0.html */
El archivo functions.php:
<?php
if ( !defined( 'ABSPATH' ) ) exit;
if ( !function_exists( 'hestia_child_parent_css' ) ):
function hestia_child_parent_css() {
wp_enqueue_style( 'hestia_child_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap' ) );
if( is_rtl() ) {
wp_enqueue_style( 'hestia_child_parent_rtl', trailingslashit( get_template_directory_uri() ) . 'style-rtl.css', array( 'bootstrap' ) );
}
}
endif;
add_action( 'wp_enqueue_scripts', 'hestia_child_parent_css', 10 );
/**
* Import options from the parent theme
*
* @since 1.0.0
*/
function hestia_child_get_parent_options() {
$hestia_mods = get_option( 'theme_mods_hestia-pro' );
if ( ! empty( $hestia_mods ) ) {
foreach ( $hestia_mods as $hestia_mod_k => $hestia_mod_v ) {
set_theme_mod( $hestia_mod_k, $hestia_mod_v );
}
}
}
add_action( 'after_switch_theme', 'hestia_child_get_parent_options' );3. Por último, en el archivo functions.php del tema hijo de Hestia Pro, a continuación del anterior, añadiremos el siguiente código:
add_action( 'after_switch_theme', 'hestia_pro_child_get_lite_options' );
/**
* Import lite options
*/
function hestia_pro_child_get_lite_options() {
$hestia_mods = get_option( 'theme_mods_hestia-child' );
if ( ! empty( $hestia_mods ) ) {
$hestia_big_title_title = '';
$hestia_big_title_text = '';
$hestia_big_title_button_text = '';
$hestia_big_title_button_link = '';
$hestia_big_title_background = '';
foreach ( $hestia_mods as $hestia_mod_k => $hestia_mod_v ) {
if ( $hestia_mod_k == 'hestia_big_title_title' ) {
$hestia_big_title_title = $hestia_mod_v;
}
if ( $hestia_mod_k == 'hestia_big_title_text' ) {
$hestia_big_title_text = $hestia_mod_v;
}
if ( $hestia_mod_k == 'hestia_big_title_button_text' ) {
$hestia_big_title_button_text = $hestia_mod_v;
}
if ( $hestia_mod_k == 'hestia_big_title_button_link' ) {
$hestia_big_title_button_link = $hestia_mod_v;
}
if ( $hestia_mod_k == 'hestia_big_title_background' ) {
$hestia_big_title_background = $hestia_mod_v;
}
set_theme_mod( $hestia_mod_k, $hestia_mod_v );
}
if ( ! empty( $hestia_big_title_title ) || ! empty( $hestia_big_title_text ) || ! empty( $hestia_big_title_button_text ) || ! empty( $hestia_big_title_button_link ) || ! empty( $hestia_big_title_background ) ) {
$tmp = array(
array(
'image_url' => $hestia_big_title_background,
'title' => $hestia_big_title_title,
'subtitle' => $hestia_big_title_text,
'text' => $hestia_big_title_button_text,
'link' => $hestia_big_title_button_link,
'id' => 'customizer_repeater_56d7ea7f40a56',
'color' => '#e91e63',
)
);
if ( ! empty($tmp) ) {
set_theme_mod( 'hestia_slider_content', json_encode( $tmp ) );
}
}
}
}Nota:
Lo más importante aquí es asegurarnos de que los nombres de las carpetas de los temas hijos coincidan con los del código. Si usamos un nombre distinto para la carpeta del tema hijo, tendremos que actualizar esta línea del código:
$hestia_mods = get_option( 'theme_mods_hestia-child' );
Por ejemplo, si nombramos la carpeta mi-tema-wp, el código será:
$hestia_mods = get_option( 'theme_mods_mi-tema-wp' );
¡Eso es todo! Una vez activado el tema hijo de Hestia PRO, tendremos los contenidos creados en la versión gratuita perfectamente migrados y todas las nuevas características adicionales de la versión extendida para ampliar la funcionalidad del sitio.
Recordemos las principales ventajas de Hestia PRO en esta tabla comparativa:
| Hestia | Hestia Pro | |
| Compatible con WooCommerce El tema es totalmente compatible con el plugin WooCommerce. Podemos crear una tienda en línea en cuestión de minutos. | Básico | Extendido |
| Opciones avanzadas de tipografía Opciones para personalizar el tamaño y familia de fuente en la página de inicio y las páginas internas y entradas. Además, la posibilidad de cambiar las opciones de tipografía en distintos dispositivos, como escritorio, tablet y celular. | – | Sí |
| Múltiples diseños de cabecera Hestia incluye varios diseños disponibles para el área de la cabecera. Hestia PRO contiene una opción extra, para un menú en pantalla completa | Básico | Avanzado |
| Slider Hestia PRO ofreces un slider integrado, que permite añadir ilimitadas diapositivas. | – | Sí |
| Animaciones Hestia PRO incluye animaciones totalmente integradas para todos los elementos de la página de inicio. De esta manera, la portada se vuelve más interactiva y tiene una mejor apariencia visual. | – | Sí |
| Fondo de vídeo Hestia PRO ofrece la opción de usar un vídeo de fondo en la cabecera de la página de inicio. Se puede usar un vídeo de la biblioteca de medios o uno alojado en YouTube. | – | Sí |
| Opciones de colores Se pueden cambiar los colores secundarios del tema, así como también la superposición de la cabecera, el texto de la cabecera y la barra de navegación. | Básico | Avanzado |
| Reordenar secciones Se puede cambiar el orden de las secciones de la página de inicio más rápida y fácilmente. | – | Sí |
| Barra superior Hestia incluye una sección de barra superior que se puede usar para los iconos de redes sociales, información de contacto o para mostrar un campo de búsqueda. En Hestia PRO las opciones de personalización se han extendido. Se pueden cambiar los colores y la alineación. | Básico | Avanzado |
| Personalizar la sección de la tienda Hestia PRO permite un mejor manejo de la sección de la tienda en la página de inicio. Se pueden filtrar los productos por categoría, o por fecha de publicación. También se puede agregar un shortcode de WooCommerce. | – | Sí |
| Secciones de la página de inicio Hestia incluye una gran variedad de secciones en la portada, tales como Título grande, Características, Acerca de, Tienda, Equipo, Cinta, Testimonios, Barra de clientes, Suscribirse, Blog y Contacto. Hestia PRO añade más secciones, como Slider, Portfolio y Precios. | Básico | Extendido |
| Icono del carrito en el menú principal Con Hestia PRO, al usar WooCommerce, se mostrará un icono del carrito en el menú principal. El carrito se actualiza automáticamente al agregar productos y facilita el proceso de compra para los usuarios. | – | Sí |
| Opción para seleccionar el número de columnas del pie de página Con Hestia PRO se puede cambiar fácilmente el número de columnas de widgets del pie de página de acuerdo con las necesidades del sitio. | – | Sí |
| Compatibilidad con mega menú Hestia ofrece compatibilidad con un atractivo mega menú. Más información aquí. | Sí | Sí |
| Estilo alternativo para el pie de página Hestia incluye un diseño alternativo para el área del pie de página. Se puede elegir el fondo negro o blanco. | – | Sí |
| Sección Portfolio La sección Portfolio tiene dos diseños posibles y una opción para abrir en Lightbox. | – | Sí |
| Sección de Planes de precios Una sección de precios con dos paquetes posibles. | – | Sí |
| Diseños de entradas y páginas Para cada entrada y página existe la posibilidad de seleccionar un diseño individual (Ancho completo, Barra lateral izquierda o Barra lateral derecha). También incluye un control genérico para los diseños de todas las páginas, si no es necesario seleccionar un diseño distinto para cada una. | Sí | Sí |
| Opciones adicionales para la página del blog Sección de Autores y Suscripción en la página del blog. | – | Sí |
| Diseño alternativo para la página del blog El diseño nuevo muestra las entradas en una posición alternada: una imagen a la derecha y una a la izquierda. | – | Sí |
| Opción para elegir una categoría determinada en la sección del blog En Hestia PRO es posible seleccionar entradas de una o más categorías en la sección Blog de la página de inicio. | – | Sí |
| Opción de ancho de la barra lateral Opción para controlar el ancho de la barra lateral en todas las páginas. El ancho del contenido se adaptará conforme. | – | Sí |
| Opción de ancho del contenido Opción para controlar el ancho de los contenedores en todas las páginas. | – | Sí |
| Reusar secciones de la página de inicio en otras páginas/widgets Con esta opción es posible recrear la página de inicio o una parte de ella en cualquier otra página del sitio. | – | Sí |
| Eliminar los créditos y copyright del pie de página Hestia Pro permite añadir fácilmente un texto para el copyright en el pie de página. | – | Sí |
| Opción para cambiar el diseño del pie de página Con esta opción se puede reordenar el diseño del área de widgets. Se puede añadir el menú a la derecha, a la izquierda o centrado, con el mensaje del copyright. | – | Sí |
| Compatibilidad con plugins de formularios Hestia PRO es totalmente compatible con Contact Form 7, WP forms, Ninja Forms, Formidable Forms, Visual Form Builder, Fast Secure Contact Form, Jetpack Contact form, MailChimp for WP, MailChimp List Subscribe e Easy forms for MailChimp. | – | Sí |
| Listo para traducción Hestia PRO es totalmente compatible con WPML y Polylang. Se puede usar fácilmente para sitios multiidioma. | – | Sí |
| Soporte rápido y amable En promedio, un usuario PRO recibe respuesta dentro de las 5 horas o menos. | – | Sí |
Tutorial original en inglés: How to upgrade from Hestia to Hestia PRO when using your own child themes.
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
Podrian hacer un video explicativo del paso a paso…
Al momento de seguir los pasos me dice: No encontramos el tema principal. Por favor, instala el tema principal “hestia-pro”.
Me podría ayudar?
gracias!
Hola, José.
Hestia Pro debe estar instalado. El procedimiento que se describe en esta entrada es para que puedas conservar intacta la configuración de la versión gratuita. El archivo
hestia-pro.zipse descarga de tu cuenta de ThemeIsle y se instala en WordPress desde Apariencia > Temas > Subir tema.Saludos.
hola como estas? disculpa me salga un poco del tema pero estoy trabajando con estas plantillas y me has aclarado dudas y he avanzado por eso te agradezco. Una pregunta como hago para crear una página para validar certificados de los cursos que dicto. Ejemplo: Cada certificado tiene un código único. La persona entrará en la página en la sección de verificación, colocará ese código, seria una simple caja de texto con un botón y al darle en el botón, debería verificar la existencia de ese código y arrojarle un mensaje que diga si es válido o no. ¿Qué me aconsejas?
Hola, Reinaldo.
Fijate si este plugin te sirve: Numbers generator and validator.
Saludos.
Genial muchas gracias ayuda mucho, una preguntica cómo hago para un página que no sea la principal agregar un botón como los que aparecen en la sección de llamada. Saludos
Hola, Reinaldo.
Tendrías que usar código HTML, que sería algo así:
Recordá usar el código dentro de la pestaña HTML del editor.
Saludos.
Gracias de nuevo todo a funcionado y lo del plugin fue genial es muy sencillo y cumple el cometido pero sabes quiero que la página donde lo coloque no quede tan simple y quise en la página alinear al plugin o al código que se coloca de el una imagen pero el plugin no me deja alinear ni moverlo queda colocado el plugin en la parte izquierda superior de la página y nada en su línea deja colocar así que la imagen siempre queda debajo de él. Quisiera colocar la imagen y alineada a ella el plugin. ¿Que me recomiendas? Y una vez más gracias
Hola, Reinaldo.
Lo más conveniente quizá sería usar Elementor. Así podés diseñar la página como quieras, y simplemente pegar el shortcode donde quede mejor.
Saludos.
Muchas gracias ya poco a poco avanzando
Hola cómo estás? Ya he logrado avanzar y la página logra agarrar forma pero hace rato diseñe una página de contenido sencilla y solo hice fue colocar texto y agregar dos imágenes y de pronto la página principal ya no muestra los botones en pantalla principal, el título de características y el de testimonios y el botón central de la primera llamada de acción. ¿No tengo temas? Limpie caché, y ya no sé que revisar. ¿Qué crees que sea? Esta es la página https://www.evirtual.com.ve y una vez más gracias por el apoyo
Hola, Reinaldo.
No sabría decirte la causa a simple vista. Probá desactivando plugins para ver si alguno está generando un conflicto.
Saludos.
Hola todo bien me tocó probar y probar y gracias a Dios di en una actualización y se arregló puedes visitar la página y ver cómo va ? gracias por responder y todo el apoyo. Saludos