No tenía planeado hacer un tutorial sobre la creación de temas hijos, pero como son muchas las consultas que me llegan al respecto decidí preparar esta entrada, que es básicamente una traducción de la sección Child Themes del Codex de WordPress, más un par de referencias a algunos recursos útiles que complementan esa información esencial.
En primer lugar…
¿Qué son los temas hijos?
Son temas que heredan la funcionalidad y estilos de otro tema, llamado “tema padre”. Los temas hijos son la manera recomendada de modificar un tema existente.
¿Por qué usar un tema hijo?
Existen varias razones por las cuales es práctica recomendada:
- Si modificamos un tema directamente y es actualizado, perderemos todos los cambios que hayamos hecho. Al usar un tema hijo, nos aseguramos de que los cambios se conserven.
- Usar un tema hijo puede acelerar el tiempo de desarrollo.
- Usar un tema hijo es la mejor manera de aprender sobre el desarrollo en WordPress.
¿Cómo crear un tema hijo?
Un tema hijo consta al menos de un directorio (el directorio del tema hijo), y dos archivos: style.css y functions.php, los cuales tendremos que crear.
El primer paso es crear un directorio para el tema hijo, que estará dentro de la carpeta /wp-content/themes. Se recomienda (aunque no es obligatorio, en especial si creamos un tema para uso público) que el nombre del directorio del tema hijo tenga como apéndice el término “-child”. Ejemplo, si estamos creando un tema hijo para Twenty Sixteen, la carpeta se llamaría twentysixteen-child.
Tendremos que asegurarnos de que el nombre del directorio no contenga espacios (ni caracteres especiales), ya que esto podría ocasionar errores. En la imagen de ejemplo, hemos denominado nuestro tema hijo “twentysixteen-child” para indicar que el tema padre es Twenty Sixteen.
El siguiente paso es crear la hoja de estilos (style.css), la cual debe comenzar con el siguiente encabezado:
/* Theme Name: Twenty Sixteen Child Theme URI: http://ejemplo.com/twenty-sixteen-child/ Description: Twenty Sixteen Child Theme Author: Juan Pérez Author URI: http://ejemplo.com Template: twentysixteen Version: 1.0.0 License: GNU General Public License v2 o superior License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-sixteen-child */
Aquí un par de cosas para tener en cuenta:
- Tendremos que reemplazar los textos de ejemplo con los datos correspondientes a nuestro tema.
- La línea
Templatepertenece al nombre del directorio del tema padre. El tema padre de nuestro ejemplo es Twenty Sixteen, así queTemplateserátwentysixteen. En el caso de usar otro tema padre, recordar usar el nombre de la carpeta que corresponda. - El único archivo que se requiere en un tema hijo es
style.css, perofunctions.phpes necesario para incluir los estilos de manera correcta.
El paso final es incluir los estilos del tema padre y del tema hijo. Aclaremos que el método anterior era importar la hoja de estilos del tema padre con @import. Esta ya no es una práctica recomendada, debido a que aumenta el tiempo de carga de las hojas de estilo. El método correcto para incluir la hoja de estilos del tema padre es agregar una acción wp_enqueue_scripts y usar wp_enqueue_style() en el archivo functions.php del tema hijo. Por lo tanto, tendremos que crearlo necesariamente. La primera línea del archivo debe ser una etiqueta PHP de apertura (<?php), después de la cual incluiremos las hojas de estilo del tema padre y del tema hijo. El siguiente ejemplo solo funciona si el tema padre usa únicamente un archivo style.css principal para contener todo el código CSS. Si el tema hijo tiene más de un archivo .css (por ejemplo, ie.css, style.css, main.css), debemos asegurarnos de mantener todas las dependencias del tema padre.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>Si el archivo style.css del tema hijo ya contiene código CSS (como ocurre por lo general), también tendremos que incluirlo. Asignando ‘parent-style‘ como dependencia garantizará que la hoja de estilos del tema hijo cargue después de la del tema padre. Incluir el número de versión asegura que también se pueda quebrar la caché para el tema hijo (esto es, decirle al navegador que descargue una nueva versión de la hoja de estilos si es que fue actualizada). El ejemplo completo se convertirá en:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // Este es 'twentysixteen-style' para the el tema Twenty Sixteen.
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' );
?>El tema hijo ya está listo para ser activado. Si vamos al panel de administración de WordPress, en el menú Apariencia > Temas, veremos el tema hijo en la lista y podremos activarlo.
Nota: es probable que tengamos que volver a guardar el menú (desde Apariencia > Menús o Apariencia > Personalizar > Menús) y las opciones del tema (incluidos el fondo y la imagen de cabecera), luego de activar el tema hijo.
Archivos de plantilla
Si queremos cambiar más que los estilos, el tema hijo puede sobrescribir cualquier archivo presente en el tema padre: tan solo hay que incluir un archivo con el mismo nombre en el directorio del tema hijo, el cual sobrescribirá el archivo equivalente del directorio del tema padre cuando cargue el sitio. Por ejemplo, si queremos cambiar el código PHP de la cabecera del sitio, podemos incluir un archivo header.php en el directorio del tema hijo y ese archivo se usará en lugar de header.php del tema padre.
También se pueden incluir archivos que no estén presentes en el tema padre. Por ejemplo, podríamos crear una plantilla más específica que alguna de las que se encuentren en el tema padre, como podría ser una plantilla de página o un archivo de categoría.
El archivo functions.php
A diferencia de style.css, functions.php del tema hijo no sobrescribe su contraparte del tema padre. Por el contrario, es cargada como adicional (para ser específicos, se carga justo antes del archivo del tema padre).
En ese sentido, functions.php de un tema hijo proporciona un método inteligente y libre de problemas para modificar la funcionalidad del tema padre. Digamos que queremos agregar una función PHP al tema. La manera más rápida sería abrir el archivo functions.php y colocar la función ahí dentro. Pero eso no es lo correcto, porque cuando se actualice el tema la función desaparecerá. Existe una alternativa y método correcto: crear un tema hijo y añadir la función en su respectivo archivo functions.php. La función hará exactamente el mismo trabajo desde allí, con la ventaja de que no será afectada por las futuras actualizaciones del tema padre. Importante: no debemos copiar el contenido del archivo functions.php del tema padre al del tema hijo.
La estructura de functions.php es simple: una etiqueta PHP de apertura al principio, y a continuación el código PHP personalizado. Allí podemos colocar las pocas o muchas funciones que queramos. El siguiente ejemplo muestra un archivo functions.php básico que nada más hace algo sencillo: añadir un enlace al favicon en el elemento HTML <head> de las páginas.
<?php // Etiqueta PHP de apertura - no hay que colocar absolutamente nada antes, ni siquiera espacios en blanco
// Función personalizada para incluir
function my_favicon_link() {
echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'my_favicon_link' );Un consejo para desarrolladores de temas: el hecho de que el archivo functions.php del tema hijo se cargue primero implica que las funciones del tema se puedan hacer “enchufables”. Esto quiere decir que se pueden reemplazar por las del tema hijo declarándolas de manera condicional. Por ejemplo:
if ( ! function_exists( 'theme_special_nav' ) ) {
function theme_special_nav() {
// Hacer algo.
}
}De esa manera, el tema hijo puede reemplazar una función PHP del tema padre simplemente declarándola de antemano.
Referir / Incluir archivos en el tema hijo
Cuando necesitemos incluir archivos que residan dentro de la estructura del directorio del tema hijo, usaremos get_stylesheet_directory(). Ya que el archivo style.css del tema padre es reemplazado por style.css del tema hijo, y style.css reside en la raíz del subdirectorio del tema hijo, get_stylesheet_directory() apunta a ese directorio y no al directorio del tema padre.
Aquí hay un ejemplo con require_once, que muestra que se puede usar get_stylesheet_directory cuando se refiera a un archivo dentro del directorio del tema hijo:
require_once( get_stylesheet_directory() . '/mi_archivo.php' );
Usar formatos de entrada
Un tema hijo hereda los formatos de entrada definidos por el tema padre. Al crear un tema hijo, debemos tener en cuenta que si usamos add_theme_support('post-formats') no se agregarán, sino que se sobrescribirán los formatos definidos por el tema padre.
Soporte RTL
Para incluir soporte de idiomas RTL tendremos que incluir un archivo rtl.css al tema hijo con el siguiente contenido:
/* Theme Name: Twenty Sixteen Child Template: twentysixteen */
WordPress solo cargará rtl.css si is_rtl() devuelve true.
Se recomienda añadir el archivo rtl.css al tema hijo aunque el tema padre no lo contenga.
Internacionalización
Los temas hijos, así como otras extensiones, se pueden traducir a otros idiomas con las funciones gettext.
Para internacionalizar un tema hijo debemos seguir los siguientes pasos:
- Agregar un directorio
/languages/dentro del directorio del tema hijo. - Añadir archivos de idioma, que serán
es_ES.poyes_ES.mo(dependiendo del idioma), a diferencia de los plugins, que tendrán que llamarsedominio-es_ES.xx. - Cargar un dominio de texto (textdomain), usando
load_child_theme_textdomain()en el archivofunctions.phpdurante la acciónafter_setup_theme. El dominio de texto definido enload_child_theme_textdomain()deberá usarse para traducir todas las cadenas presentes en el tema hijo. - Usar funciones GetText que añadan soporte
i18npara las cadenas.
Ejemplo: textdomain
<?php
/**
* Asignar el dominio de texto del tema hijo.
*
* Declarar el textdomain para este tema hijo.
* Las traducciones se pueden archivar en el directorio /languages/.
*/
function my_child_theme_setup() {
load_child_theme_textdomain( 'my-child-theme', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );
?>Ejemplo: funciones gettext
<?php esc_html_e( 'Code is Poetry', 'my-child-theme' ); ?>
Para resumir, todas las cadenas que usen el dominio de texto “my-child-theme” serán aptas para traducción. Y los archivos de traducción deberán estar presentes en el directorio /languages/ del tema hijo.
Otra información útil
Konstantin Kovshenin, del equipo de Automattic, nos cuenta en esta entrada por qué no hay que usar la regla @import. En pocas palabras, aunque el método funciona, lo mejor es evitarlo, ya que duplica el tiempo de carga del sitio.
En tanto, Kenneth John Odle desde su blog contesta algunas preguntas frecuentes relacionadas con los temas hijos. Veamos algunas:
¿Es necesario usar un tema hijo?
No, si estamos satisfechos con las opciones actuales que nos ofrece el tema. Sin embargo, si queremos hacer algo que el tema no hace, vamos a necesitar un tema hijo.
Por ejemplo, supongamos que el tema tiene una opción “Oscuro” y “Claro” para un esquema de color. Supongamos que “Oscuro” no es lo suficientemente oscuro, o bien es demasiado. Supongamos que queremos una opción de color rojo, o de color azul. Es para esto exactamente que se usa un tema hijo.
¿Por qué no simplemente editar los archivos del tema? Existe un editor en el panel de administración de WordPress, después de todo…
Sí, se puede hacer eso, pero aquí hay dos problemas grandes:
El primero es que tenemos que saber muy bien lo que estamos haciendo. Los archivos de temas por lo general son una combinación de PHP, HTML, CSS y JavaScript. Algo tan simple como olvidarse un punto y coma puede romper un sitio entero. A menos que estemos totalmente seguros de lo que estamos haciendo, corremos el riesgo de tirar abajo el sitio, incluido el administrador de WordPress, lo cual significa que ni siquiera podremos entrar para intentar corregir el error. En este punto, la única manera de arreglarlo es vía FTP, subiendo una copia nueva del tema, con lo cual los cambios realizados se perderán.
El segundo problema es que cuando el tema se actualice, los cambios también se perderán (y sí, de veras es necesario aplicar las actualizaciones cada vez que estén disponibles).
¿Tengo que actualizar el tema que estoy usando?
En una palabra, sí. Con frecuencia me encuentro con gente que cree que las actualizaciones son más un problema y que no valen la pena, y que optan por no actualizar nunca.
Aunque es cierto que las actualizaciones a menudo pueden ocasionar problemas (en especial actualizaciones primarias de WordPress), hacen dos cosas muy importantes para los sitios. La primera, ofrecen nuevas características que fueron solicitadas por los usuarios. La segunda, corrigen errores de seguridad que se encuentran en versiones anteriores, lo cual es vital para que los sitios no sean víctimas de ataques por parte de hackers.
¿Cuáles son los beneficios de usar un tema hijo?
El principal es que se puede dejar el tema actual intacto. Si sabemos que funciona, funciona. Y si metemos la pata en el tema hijo, siempre podemos volver al tema padre hasta que resolvamos el problema.
Otro beneficio es que podemos actualizar el tema padre sin preocuparnos de perder los cambios que hayamos hecho dentro del tema hijo. De esta manera, podremos aprovechar las nuevas características, así como también mantener el sitio seguro.
Por último, y lo más importante, es que podemos lograr cosas que el tema padre no nos ofrece.
¿Cuáles son las desventajas de usar un tema hijo?
Como dijimos antes, los temas de WordPress están construidos con una combinación de PHP, HTML y CSS (y casi siempre JavaScript), así que tendremos que tener cierta familiaridad con esos lenguajes para poder crear un tema hijo. Por suerte, casi todo lo que se necesita saber se puede encontrar en el Codex de WordPress, en los foros de soporte, o en Google, donde abundan los tutoriales gratuitos. Se puede lograr mucho con un simple “copiar y pegar”.
También la manera más fácil de crear y usar un tema hijo es tener acceso FTP al sitio. No todo el mundo lo tiene, y aunque lo tengamos, es otra tecnología que hay que dominar (aunque si se tiene un buen cliente de FTP, es muy fácil).
Otro aspecto para tener en cuenta es que las actualizaciones del tema padre a veces pueden ocasionar problemas de compatibilidad con el tema hijo. Esto sucede cuando el creador del tema usa otros selectores CSS, o cuando añade código para implementar alguna nueva funcionalidad, el cual no estará presente en el archivo correspondiente del tema hijo.
¿Cuándo debería crear un tema hijo?
Como ya dijimos, algunos usuarios están conformes con las opciones que ofrece su tema actual. Si estamos dentro de ese grupo, no tendremos que preocuparnos. Ahora, en el preciso instante en que pensemos: “Quisiera que el tema tuviera…” es cuando deberíamos crear un tema hijo.
Conclusión
Esta guía nos enseña a crear un tema hijo de la manera recomendada y genérica. Ha respondido también algunas preguntas frecuentes sobre el porqué de su uso. Pero vale recordar que muchas veces los desarrolladores de temas incluyen también un tema hijo de ejemplo, o proporcionan un tutorial para crearlo de acuerdo con sus propias directrices. Esto es porque podrían usar una prioridad diferente de carga de los estilos. Ante la duda, siempre consultar con la página del tema para el cual crearemos un tema hijo.
Por último, como no podíamos dejar de mencionar, existen plugins para crear temas hijos que nos ahorran todo el trabajo de hacerlo a mano. Basta con buscar en el repositorio de WordPress y probar. 🙂
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
Muchas gracias, sinceramente decidí hacer mi propio child theme a mi manera y lo que hice fue un desastre… así que llegué por aquí y gracias a este post, logré corregirlo y ahora sí me ha quedado perfecto. Deveras mil gracias por tomarte tu tiempo!
Buenos días, soy nuevo en wordpress y me surgió una inquietud.
¿Al crear el tema hijo existe alguna posibilidad de perder los avances que había hecho en el padre?
Hola, Will.
Gracias por tu comentario. La respuesta es la misma que esta. Por las dudas, siempre podés hacer una vista previa antes de activar el tema hijo, y en caso de que no conserve los cambios hechos en el personalizador, consultá la documentación del tema padre por si requiere alguna manera específica de crear su respectivo tema hijo, o bien podés probar agregando el siguiente código en el archivo
functions.php:if ( get_stylesheet() !== get_template() ) { add_filter( 'pre_update_option_theme_mods_' . get_stylesheet(), function ( $value, $old_value ) { update_option( 'theme_mods_' . get_template(), $value ); return $old_value; // prevent update to child theme mods }, 10, 2 ); add_filter( 'pre_option_theme_mods_' . get_stylesheet(), function ( $default ) { return get_option( 'theme_mods_' . get_template(), $default ); } ); }Saludos.
pero como se crea el archivo ???????
quiero crear una carpeta dentro de : /wp-content/themes/
solo como
Hola, Paul.
Podés crear los archivos en tu PC (con un editor de texto como Notepad++) y luego subirlos a la carpeta de instalación de WordPress de tu servidor vía FTP, o bien comprimir esos archivos creados en tu equipo en un ZIP y subirlo e instalarlo desde Apariencia > Temas > Subir tema.
Otra alternativa, si tu servidor cuenta con administrador y editor de archivos, es crear la carpeta del tema hijo y archivos directamente dentro de
/wp-content/themes/.Saludos.
Buenas tardes, tengo algunas dudas, te agradezco enormemente la ayuda que me puedas brindar.
1. Instalé el plugin para el botón de regresar al inicio como el tuyo, sin embargo no me sale reflejado en mi página web, no sé si me falta agregarle algo más.
2. en la parte de nuestro enfoque coloqué todos los servicios que brindamos, sin embargo me gustaría que cuando abro cada servicio al final de la página de cada uno quiero que me salga como un tipo slide con los demás servicios que se ofrecen y que el cliente no tenga que retroceder y regresar al inicio sino que ahí mismo pueda darle clic a cualquier otro servicio, no sé si me explico bien :-).
3. Cómo cambio el color de los iconos de redes sociales de la página de inicio es que cuando coloco el cursor sale el color rojo y lo quiero cambiar a otro color.
4. Cómo hago para colocarle al blog una imagen y la palabra blog arriba de todas las entradas, así como lo tiene el tuyo.
5. Cómo hago para justificar el texto de la pestaña nuestro equipo y bajar el texto, ya que coloqué una imagen como fondo pero el texto me sale muy arriba y sin justificar.
Mil gracias por toda tu ayuda.
Saludos.
Hola, Dayanna.
Disculpas por la demora.
Te respondo punto por punto:
#team .section-legend { text-align: justify; margin-top: 40px /* reemplazar por valor deseado */; }Saludos.
Buenas noches, me gusta mucho tus respuestas son muy acertadas, y pues en este momento tengo una para ti, resulta que me gusto una plantilla, y tiene su propio tema hijo. se llama eris lite, mi pregunta es si es posible crear un tema hijo con otro tema hijo, en este caso como te digo con eris lite… que pena no se si ya realizaron esta pregunta en algún momento… te agradecería la respuesta. o que me reenvíes a esa respuesta..
Hola, Leonardo.
No es posible y tampoco es necesario, porque los archivos que ya existen en el tema hijo sí se pueden editar.
Saludos.
muchas gracias por tu respuesta…. hummm bueno… el unico problema con esta plantilla es que no esta acompañado del tema padre entonces me limita demasiado… bien te agradezco mucho.
me podrías recomendar un tema que sea sencillo minimalista para crear tema hijo.. gracias.
Hola, Lengriv.
Si es un tema hijo no puede funcionar nunca sin el tema padre. Debés estar confundido y sí es un tema padre (por lo cual podrás crear el tema hijo correspondiente).
Saludos.
hola, gracias por tus notas, son geniales.
nunca antes habia usado un tema hijo, y mi unica duda ahora que esta creado es ¿cómo lo activo?
Gracias!
Hola, Ale.
Gracias por tu comentario.
El tema hijo se activa exactamente igual que cualquier otro, desde Apariencia > Temas.
Saludos.
Hola
En primer lugar muchas gracias por tus aportaciones. Yo cree el tema hijo pero olvidé activarle, así que trabajé directamente sobre la plantilla zerife lite. Mi pregunta es, porque ya tengo la web casi concluida. El caso es que ayer me di cuenta y cuando activé zerif child pero ya no me deja acceder a la biblioteca de medios.
Mi pregunta es:
¿Puedo exportar toda esa información del tema padre al hijo? ¿O tengo que volver a crear el tema hijo?
Hola, Jos.
Gracias por tu comentario.
El tema hijo se puede crear/activar en cualquier momento, y no perderás ningún cambio que hayas hecho en el personalizador o las páginas, entradas, categorías y etiquetas que existan. Ahora bien, si modificaste archivos
phpdel tema padre, sí deberás aplicar los cambios en los archivos del tema hijo (de lo contrario, en la próxima actualización se sobrescribirán).Saludos.
Hola de nuevo Ana,
Se me olvidó decirte que la única forma que tuve de hacer funcionar la plantilla hijo con Zerif Lite es copiando y pegando en functions.php un código que encontré en el soporte de la propia plantilla:
Me gustaría saber si esto me puede traer problemas al haber una actualización, si me va a ralentizar la web o cualquier cosa negativa…
Mil millones de gracias. Un saludo.
Hola, Hugo.
No vas a tener ningún problema con el tema hijo; al contrario, sirve para no perder las personalizaciones de código que hayas hecho si el tema padre se actualiza.
Saludos.
Hola Ana,
Soy nuevo y un analfabeto del diseño web. Sigo tus indicaciones, pero lo hago mal porque no queda la plantilla como debería.
He instalado wamp y wordpress. He seleccionado el tema Zerif Lite.
Al crear el tema hijo y seleccionarlo, la cabecera pasa de el blanco original a negro, los botones de la foto principal pierden sus colores y pasan a azul sin cambiar de tonalidad cuando estamos sobre ellos, las negritas desaparecen de los títulos…
He creado la carpeta zerif-lite-child y dentro los archivos functions y style.
En el style.css he puesto tal cual:
/*
Theme Name: Zerif Lite
Theme URI: http://localhost/hache/zerif-lite-child/
Description: Zerif Lite Child Theme
Author: Hache ALF
Author URI: http://localhost/hache
Template: zerif-lite
Version: 1.0.0
License: GNU General Public License v2 o superior
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: zerif-lite-child
*/
En el functions.php he probado los dos ejemplos que ponías pero con ninguno me funciona.
¿Me podrías indicar qué estoy haciendo mal o que textos debo cambiar? O, incluso indicarme el texto que debo copiar y pegar para mi tema zerif lite.
Mil gracias de antemano.
Un saludo
Hola, Hugo.
Si seguís las instrucciones del paso 1 que figura en este tutorial, no deberías tener problemas.
Saludos.
Hola consulta si tengo activo un tema padre con contenido como imagenes y widget de sitiorigen etc. ¿Como hacer para crear un tema hijo y no perder el contenido que ya tengo?
Hola Srta ante todo te felicito por todo lo que logras y haces y sobre todo con lo mucho nos ayudas tus aportes son de lo mejor A1 y no me vas a creer pero por ti me he metido casi ya varios dias de lleno en armar mi web con tus aportes muchas gracias guapa. Y bueno no me quedo otra que escribirte por este medio para pedirte que porfavor te lo ruego me puedas ayudar con estos puntos que te recalco a continuacion:
1)como poder cambiar el color de los nombres del menu al pasar el mouse por defecto en mi caso sale rojo quisiera un turquesa o algo la cosa es como se puede hacer eso.
2)como poder cambiar el boton de busqueda de Tienda a negro en el mio sale rojo.
3)cambiar el color de enviar mensaje de mi formulario de contacto.
4)aun no entiendo como colocar los logos de los clientes, si me podes detallar que enlaces tuyos tendria que ir viendo en orden. 🙁
5)cuando le paso el dominio de mi web por la pagina page speed de google para ver cual optima es me salen errores vos sabes que son esos?.
6)una cosa mas trata de enviar un mensaje en mi formulario de contactenos de mi web y veras que si lo envia pero regresa al inicio y luego vuelve a bajar al mismo lugar de contactenos pero quisiera que no haga esa movida sino que se quede ahi no mas estable, sabes como se logra eso?
Saludos
Lucian
Hola, Lucian.
Gracias por tu comentario. Van punto por punto:
1) Respuesta aquí.
2) Respondido aquí.
3) Respuesta aquí.
4) Tenés que agregar los widgets Zerif – Widget de clientes en el panel Área de clientes de Secciones de la página de inicio en el personalizador. Ver tutorial aquí.
5) PageSpeed no te muestra errores, sino sugerencias. La mayoría podés pasarlas por alto, salvo que notes que la página tarda demasiado en cargar.
6) El comportamiento predeterminado es que el mensaje de envío exitoso aparezca sin dar ningún salto (aunque la página se desplace apenas, esto sí es normal). Fijate que no sea un plugin el que interfiere.
Saludos.
eres una genia enserio me has ayudado como no tienes idea muchisisisisisimas gracias pero en el punto 1) no entiendo o no veo cuando pones cambiar el color de la linea? donde se ve esa diferencia ? me lo podes indicar en la plantilla de zerif lit, porfa.
2) en el punto dos me referia al boton de buscar que sale en la pestaña Tienda que tambien sale negro en tu imagen aparte de los de añadir al carrito ese boton buscar del lado derecho de la barra lateral es el que quisiera ponerlo negro.
y en el punto 3) que te escribi hice lo que me mandaste pero todo esta ok pero con el codigo de pasar el mouse aun no hace el cambio y sigue saliendo ese color rojo enserio aun se resiste 🙁 .
Referente al punto 6 ) no es ningun plugin por lo que veo ayudame con eso se ve feo si has entrado a mi pagina vez como cuando se envia el mensaje sube y luego regresa a su sitio.
Una cosa mas hay alguna forma de hacer que salga un icono al momento de que carga la pagina pero eso del formulario me tiene loco gracias
Hola, Lucian.
La línea es el subrayado que aparece en el enlace activo del menú.
En cuanto al punto dos, el código sería:
/* Botón */ .woocommerce-page .woocommerce input[type="submit"] { background: #000; } /* Botón al posar el puntero */ .woocommerce-page .woocommerce input[type="submit"]:hover { background: #666; }Punto 3, agregale
!importantantes del punto y coma.Punto 6 e icono de carga previa (que no funciona en las últimas versiones), te sugiero que lo plantees en el foro de soporte, porque esto es algo que cambió en alguna de las actualizaciones recientes.
Saludos.
Hola de nuevo Ana. SI te digo no consigo hacerlo, lo explicas muy bien y parece sencillo, pero creo con el contenido que dices el style.ccs y el funtion.php con la informacion que pones y al activar el child theme me cuelga la web.
Te pregunto, si tienes esos archivos para Divi ya creados me los podrias pasar , es que tengo ahora el child con @import y quiero con este sistema hacer la web mas rapida en carga pero como te comento, no soy capaz y me cuelga la web, asi que algo estoy haciendo mal.
He mirado tambien la web de la cual veo que tradujiste por si algun paso faltase o algo asi y no veo nada .
Muchas gracias
Hola, Serjunco.
Si se cuelga el sitio puede ser a causa de que el archivo
functions.phptiene una configuración de caracteres incorrecta, o un espacio antes de la etiqueta de apertura.Podés descargar un zip de aquí.
Saludos.
Muchas gracias Ana.
Lo pruebo el archivo esta semana.
Seria como dices algun espacio o algo por que a simple vista lo veia igual ??
Hola Ana. Te queria preguntar acerca de la opcion de tema hijo.
En mi web tengo el tema hijo ya creado con la opcion primera de @import que aqui cuentas que tarda mas en cargar, por lo que aprovechando voy a cambiar y borrar el tema hijo para hacerlo de la otra forma que comentas,
Como recordaras mi tema en Divi.
Comentas varias acciones pero ya me pierdo totalmente “El paso final es incluir los estilos del tema padre y del tema hijo. Aclaremos que el método anterior era importar la hoja de estilos del tema padre con @import. Esta ya no es una práctica recomendada, debido a que aumenta el tiempo de carga de las hojas de estilo. El método correcto para incluir la hoja de estilos del tema padre es agregar una acción wp_enqueue_scripts y usar wp_enqueue_style() en el archivo functions.php del tema hijo. Por lo tanto, tendremos que crearlo necesariamente. La primera línea del archivo debe ser una etiqueta PHP de apertura (<?php), después de la cual incluiremos las hojas de estilo del tema padre y del tema hijo. El siguiente ejemplo solo funciona si el tema padre usa únicamente un archivo style.css principal para contener todo el código CSS. Si el tema hijo tiene más de un archivo .css (por ejemplo, ie.css, style.css, main.css), debemos asegurarnos de mantener todas las dependencias del tema padre."
Podrias explicarlo en mas detalle, para poder hacerlo un "tonto" como yo?
Muchas gracias de nuevo
Hola, Serjunco.
En pocas palabras, significa que si tu tema hijo tiene más de una hoja de estilos, es necesario cargarlas en el orden correcto. Quizás el ejemplo es confuso, porque depende del tema padre.
En el caso de Divi (como en la mayoría de los temas), el primer código es suficiente:
<?php add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } ?>Saludos.
Hola, gracias por tus excelentes tutoriales. Consulta: (Uso Zerif lite:) Si hago una modificación con Siteorigin en el tema padre si actualizo el tema se borran los widgets añadidos ? Saludos
Hola, Andrés.
Gracias por tu comentario.
No deberías tener problemas al activar el tema hijo. Ante la duda, hacé una vista previa y dentro del personalizador navegá hasta la página que contenga esos widgets creados con el Page Builder, para comprobar que se ven correctamente.
Saludos.
hola una consulta disculpa que la suelte por aqui ando desesperado como se puede hacer esta opcion de que al seleccionar “añadir al carrito” te lleve a la parte de arriba que dice ver carrito y ponerle esas estrellas a los articulos ? aqui te dejo el enlace http://celularesmex.com/tienda/?add-to-cart=136
por cierto si le das refrescar a la pagina esa sale un iconito de carga cosa que no sale en el tema hijo del tutorial ademas si te vas a inicio de esa web veras que cuando llenas formulario se queda estatico ahi y no como en el mio que hace un salto al inicio y luego baja otra vez para enviar otro
Saludos por cierto cuando envio un mensaje atraves de mi formulario en la barra luego dice esto: http://ishop-technology.com/?pcf=1#contact encambio en la de la web de demo sale asi cuando envias dos http://celularesmex.com/?pcf=1&pcf=1&pcf=1#contact osea me percate que tambien hace el salto ese pero en blanco en el mio se ve como se mueve la web me dejo entender ayudamee pleasee
Hola, Lucian.
Esas dos cosas son ajustes de WooCommerce (desmarcar Activar botones AJAX en Ajustes > Productos > Mostrar y activar valoraciones en Ajustes > General).
Saludos.
Hola, buena noche
Antes que otra cosa quiero felicitarte por tus aportes, son geniales y de gran utilidad. Tengo una duda y no se si me puedas apoyar con esto, veo que tu sitio tiene un botón inferior de scroll-up. Mi pregunta es la siguiente: ¿Como puedo configurar en mi sitio un botón similar al tuyo en funcionalidad y efectos? Espero me puedas orientar, ya que no conozco aún mucho sobre esto.
Gracias, saludos cordiales.
Hola, Damien.
Gracias por tu comentario.
Lo más sencillo y rápido es instalar un plugin.
Saludos.