Seguimos con el cuarto de los tutoriales para el tema gratuito Zerif Lite: hoy vamos a aprender a usar una imagen en lugar de los cuatro ítems que enumeran habilidades, ya que puede ocurrir que no necesitemos este tipo de presentación.
Para realizar este cambio, es necesario usar un tema hijo. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.
En primer lugar, deberá crear una carpeta llamada /sections/ dentro de la carpeta del tema hijo. Luego, copie el archivo /sections/about_us.php de la carpeta del tema padre y péguelo en la carpeta /sections/ del tema hijo.
Con un editor de texto (recomendado: Notepad++) abra el archivo about_us.php del tema hijo y busque el siguiente código:
<!-- SKILL ONE -->
<?php
if ( ! empty( $zerif_aboutus_feature1_nr ) || ! empty( $zerif_aboutus_feature1_title ) || ! empty( $zerif_aboutus_feature1_text ) ) {
echo '<li class="skill skill_1">';
if ( ! empty( $zerif_aboutus_feature1_nr ) ) {
echo '<div class="skill-count">';
echo '<input role="presentation" type="text" id="' . ( ! empty( $zerif_aboutus_feature1_title ) ? sanitize_title( $zerif_aboutus_feature1_title ) : '' ) . '" value="' . esc_attr( $zerif_aboutus_feature1_nr ) . '" data-thickness=".2" class="skill1" tabindex="-1">';
echo '</div>';
}
if ( ! empty( $zerif_aboutus_feature1_title ) ) {
echo '<div class="section-legend"><label for="' . sanitize_title( $zerif_aboutus_feature1_title ) . '">' . wp_kses_post( $zerif_aboutus_feature1_title ) . '</label></div>';
} elseif ( is_customize_preview() ) {
echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
}
if ( ! empty( $zerif_aboutus_feature1_text ) ) {
echo '<p>' . wp_kses_post( $zerif_aboutus_feature1_text ) . '</p>';
} elseif ( is_customize_preview() ) {
echo '<p class="zerif_hidden_if_not_customizer"></p>';
}
echo '</li>';
}
?>
<!-- SKILL TWO -->
<?php
if ( ! empty( $zerif_aboutus_feature2_nr ) || ! empty( $zerif_aboutus_feature2_title ) || ! empty( $zerif_aboutus_feature2_text ) ) {
echo '<li class="skill skill_2">';
if ( ! empty( $zerif_aboutus_feature2_nr ) ) {
echo '<div class="skill-count">';
echo '<input role="presentation" type="text" id="' . ( ! empty( $zerif_aboutus_feature2_title ) ? sanitize_title( $zerif_aboutus_feature2_title ) : '' ) . '" value="' . esc_attr( $zerif_aboutus_feature2_nr ) . '" data-thickness=".2" class="skill2" tabindex="-1">';
echo '</div>';
}
if ( ! empty( $zerif_aboutus_feature2_title ) ) {
echo '<div class="section-legend"><label for="' . sanitize_title( $zerif_aboutus_feature2_title ) . '">' . wp_kses_post( $zerif_aboutus_feature2_title ) . '</label></div>';
} elseif ( is_customize_preview() ) {
echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
}
if ( ! empty( $zerif_aboutus_feature2_text ) ) {
echo '<p>' . wp_kses_post( $zerif_aboutus_feature2_text ) . '</p>';
} elseif ( is_customize_preview() ) {
echo '<p class="zerif_hidden_if_not_customizer"></p>';
}
echo '</li>';
}
?>
<!-- SKILL THREE -->
<?php
if ( ! empty( $zerif_aboutus_feature3_nr ) || ! empty( $zerif_aboutus_feature3_title ) || ! empty( $zerif_aboutus_feature3_text ) ) {
echo '<li class="skill skill_3">';
if ( ! empty( $zerif_aboutus_feature3_nr ) ) {
echo '<div class="skill-count">';
echo '<input role="presentation" type="text" id="' . ( ! empty( $zerif_aboutus_feature3_title ) ? sanitize_title( $zerif_aboutus_feature3_title ) : '' ) . '" value="' . esc_attr( $zerif_aboutus_feature3_nr ) . '" data-thickness=".2" class="skill3" tabindex="-1">';
echo '</div>';
}
if ( ! empty( $zerif_aboutus_feature3_title ) ) {
echo '<div class="section-legend"><label for="' . sanitize_title( $zerif_aboutus_feature3_title ) . '">' . wp_kses_post( $zerif_aboutus_feature3_title ) . '</label></div>';
} elseif ( is_customize_preview() ) {
echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
}
if ( ! empty( $zerif_aboutus_feature3_text ) ) {
echo '<p>' . wp_kses_post( $zerif_aboutus_feature3_text ) . '</p>';
} elseif ( is_customize_preview() ) {
echo '<p class="zerif_hidden_if_not_customizer"></p>';
}
echo '</li>';
}
?>
<!-- SKILL FOUR -->
<?php
if ( ! empty( $zerif_aboutus_feature4_nr ) || ! empty( $zerif_aboutus_feature4_title ) || ! empty( $zerif_aboutus_feature4_text ) ) {
echo '<li class="skill skill_4">';
if ( ! empty( $zerif_aboutus_feature4_nr ) ) {
echo '<div class="skill-count">';
echo '<input role="presentation" type="text" id="' . ( ! empty( $zerif_aboutus_feature4_title ) ? sanitize_title( $zerif_aboutus_feature4_title ) : '' ) . '" value="' . esc_attr( $zerif_aboutus_feature4_nr ) . '" data-thickness=".2" class="skill4" tabindex="-1">';
echo '</div>';
}
if ( ! empty( $zerif_aboutus_feature4_title ) ) {
echo '<div class="section-legend"><label for="' . sanitize_title( $zerif_aboutus_feature4_title ) . '">' . wp_kses_post( $zerif_aboutus_feature4_title ) . '</label></div>';
} elseif ( is_customize_preview() ) {
echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
}
if ( ! empty( $zerif_aboutus_feature4_text ) ) {
echo '<p>' . wp_kses_post( $zerif_aboutus_feature4_text ) . '</p>';
} elseif ( is_customize_preview() ) {
echo '<p class="zerif_hidden_if_not_customizer"></p>';
}
echo '</li>';
}
?>Reemplácelo por completo por el siguiente código:
<li class="skill">
<img src="https://ruta-completa-a-la-imagen.jpg" alt="descripciondelaimagen" />
</li>Donde http://ruta-completa-a-la-imagen.jpg será la URL completa del archivo de imagen y descripciondelaimagen un texto que describa la foto. Guarde el archivo y listo.
También se pueden agregar dos fotos de menor altura. Para eso, cada foto debe formar parte de la lista sin ordenar, con la clase skill. El código sería el siguiente:
<li class="skill">
<img src="https://su-sitio-wordpress.com/wp-content/uploads/revslider/kenburns_fullwidth/kenburns1.jpg" alt="Foto 1" />
</li>
<li class="skill">
<img src="https://su-sitio-wordpress.com/wp-content/uploads/revslider/kenburns_fullwidth/kenburns3.jpg" alt="Foto 2" />
</li>
Tutorial original en inglés: How to replace Skills section with an image in Zerif
Ana Ayelén Martínez - Buenos Aires, Argentina
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.
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.
Últimas entradas de Caribdis.Net (ver todo)
- 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
Hola, gracias por tu tiempo.
Tengo una pregunta: No he econtrado nada que me interese meter en esos skills, por lo que me gustaría deshacerme de ellos… Hay alguna manera sencilla (nivel principiante total) de hacerlo? He logrado borrar la primera columna de texto, la del medio, e introducir un slider para aprovechar la sección, pero no logro deshacerme de los gráficos de skill.
Gracias de antemano
Hola, Mitxel.
Si dejás todos los campos en blanco, la sección de habilidades no se mostrará (se verán solo dos columnas, título de la izquierda y texto a la derecha).
Saludos.
Gracias, efectivamente así ha sido. Ya lo había hecho con otros plugins pero con este no sé por qué, supongo que por agotamiento ni se me había ocurrido. Sigo con el proyecto gracias a vuestra ayuda.
Saludos cordiales.
Primeramente quiero agradecer el esfuerzo que hiciste en realizar todos estos tutoriales, me han serido de mucho para realizar página web con zerif lite. No encnotre nada por internet, así que: MUCHAS GRACIAS! =).
También quería hacerte una consulta, espero puedas contestarme: Este tutorial lo entendí a la perfección y tengo todo claro, sin embargo: hay alguna manera de cambiar los skills por un video???
Hola, José.
Podés usar las instrucciones de esta entrada y en lugar del código de la imagen (
<img src="//ruta-completa-a-la-imagen.jpg" alt="descripciondelaimagen" />), usar el código del vídeo.Ejemplo, para un vídeo de YouTube, el código completo sería:
<li class="skill"> <iframe width="340" height="191" src="https://www.youtube.com/embed/7I8OeQs7cQA?rel=0&autoplay=1&controls=0&showinfo=0&loop=1" frameborder="0" allowfullscreen></iframe> </li>Para un vídeo subido a la Biblioteca de medios, el código completo sería:
<li class="skill"> <?php echo do_shortcode('[video loop="true" autoplay="true" width="340" height="191" mp4="http://urldelsitio/wp-content/uploads/video.mp4"][/video]'); ?> </li>Espero que te sirva.
Saludos.
Hola,
Muchas gracias por tomarte el tiempo para responder preguntas.
He seguido los pasos para insertar la imagen en vez de los porcentajes de habilidades, desde crear el tema hijo, la creación de los archivos y reemplazar el código por el par de lineas finales sin ningún resultado. En la página siguen apareciendo los porcentajes sin ninguna alteración.
¿Se supone que el cambio es automático?
Gracias
Hola, Ángel.
Gracias por tu comentario.
El tema hijo debe estar activado, desde Apariencia > Temas.
Saludos.
hola buenas tardes tenia una duda estoy usando esta plantilla, y cuando le agrego una pagina nueva y quiero agregar una imagen que me cubra todo el ancho de la pantalla nunca me deja … no se donde ubicarme si hay algo en los css del la plantilla padre.. necesito pegar imagenes de 90px alto por 100% ancho que me cubra toda la pantalla del monitor y siempre me pone como un margen en la pagina
Hola, Miller.
Me temo que no es posible en este tema, sin hacer modificaciones importantes en la plantilla de página.
Saludos.
Hola, estoy siguiendo todos vuestros tutoriales para modificar mi tema hijo de Zerif. Quiero hacer una pagina nueva y que tenga la apariencia de la seccion Our focus. ¿Es posible hacerlo?
Muchas gracias.
Hola, Jorge.
Fijate si te sirve el plugin Page Builder de Site Origin, que te permite insertar widgets en las páginas (hasta donde sé, corrigieron el error de que no guardaba la imagen).
Saludos.
Hola
Comentarte que me encantan tus artículos sobre este gran tema, y con los que estoy aprendiendo e introduciéndome en el mundo de wordpress.
Quería saber como sería posible el añadir un quinta habilidad, al igual que las cuatro por defecto
Hola, Fernando.
Gracias por tu comentario.
Está explicado aquí.
Saludos.
Muchísimas gracias. Pude conseguirlo.
Buenas. Yo estoy tratando de realizar esto y no lo consigo. Tengo el tema Zerif PRO, pero a la hora de quitar las habilidades y añadir la imagen, se me desconfigura toda la pagina.
Esto se debe a que tengo que crear también un tema hijo? Sino, cual es el fallo?
Gracias!
Hola, Raúl.
Este tutorial aplica únicamente a la versión Lite, ya que la sección correspondiente de Zerif PRO difiere en el código.
Saludos.
Y en la versión PRO, hay alguna forma de hacerlo? Gracias
Tendrías que hacer lo siguiente:
Template: zerif-proen lugar deTemplate: zerif-lite).about_us.phpde la carpeta/sections/del tema padre a la del tema hijo (crearla).about_us.phpcopiado y suprimir el código que va desde$there_is_skills = '';hastaif ( $there_is_skills!='' ) :/* SKILL ONE */hasta el últimoecho '</li>'; endif;con el código de las imágenes en el siguiente formato:echo '<li class="skill"> <img src="http://su-sitio-wordpress.com/wp-content/uploads/foto.jpg" alt="Foto 1" /> </li>';endif;Saludos.
Hola. Estoy tratando de hacer esto que me dices, peor no consigo que funcione… Quizás este haciendo algo mal… Y es que tengo algunas dudas:
– Si estoy usando el tema hijo que dejaste en la pagina que me distes, tengo también que crear la carpeta o vale la que viene como new_section?
– El código a quitar iría del primer $there_is_skills hasta el endif que cierra el /* SKILL FOUR */?
– Cual es el ultimo endif a quitar?
Gracias de antemano! 🙂
Hola, Raúl.
No uses el tema hijo ya creado, porque corresponde a Zerif Lite (el código de la nueva sección no aplica y no tiene sentido tenerlo presente). Usá simplemente el código que va en
style.cssy el código necesario defunctions.php(detallado en el Paso 1 de esta entrada).El código que está entre
if ( $there_is_skills!='' ) :y/* SKILL ONE */debe quedar intacto.Y el último
endif;es el que está arriba de la última líneazerif_after_about_us_trigger();En primer lugar felicitarde por tus tutoriales que están siendo de gran ayuda.
Quería consultarte un problema, he creado otra sección en el tema hijo y ahí he añadido una serie nueva de skills como los de la sección ‘about_us’. El problema lo tengo cuando en mi archivo functions del tema hijo añado los controles para el número, de (zerif_aboutus_feature1_nr) del customizer de la nueva sección que necesita la clase (Zerif_Customizer_Number_Control) ya que no me encuentra esta clase de number en mi archivo functions del thema hijo mostrandome el error (Fatal error: Class ‘Zerif_Customizer_Number_Control’ not found in C:\…\wp-content\themes\zerif-child\functions.php on line 95)
Mi duda es como puedo enlazarlo con la clase que está en el archivo customizer.php o si debo crear otra clase nueva o si cometo algún error.
Muchas gracias por atenderme
Hola, Bernart.
Gracias por tu comentario.
En efecto, tendrías que crear una nueva clase en
functions.php, que sería igual a la decustomizer.php, pero con un nombre distinto, por ejemplo,Zerif_Child_Number_Control. Y no olvidar referirla en el$wp_customize->add_controlde cada una de las cuatro nuevas skills.Saludos.
Muchas gracias por contestar tan rápidamente, y pude solucionarlo con tus indicaciones. Y perdona que te moleste con otra consulta, ya tengo creados los controles para la nueva sección de los skills y puedo añadirlos correctamente pero no logro que los inputs de título y texto de los skills me los actualice al momento en la previa del customizer. En los controles le tengo puesto igual que los originales con transport-postmessage y en el archivo customizer.js en la carpeta js de zerif-child pongo el código de los nuevos skills para cambiar el html. Pero no previsualiza el cambio en el customizer. Me faltará tocar algo más?
Hola, Bernart.
En teoría debería funcionar. Si lo incluiste correctamente con
customize_preview_init, fijate que en el archivocustomizer.jshayas reemplazado todas las variables_aboutus_por_newsection_(o el nombre que hayas elegido), y que uses la ID de la nueva sección (en lugar de#aboutus).Saludos.
Hola amigos,No hay otra manera de colocar una imagen es esta sección de habilidades?
He repetido varias veces los pasos sin lograr el resultado, incluso he probado cambiar el archivo /sections/about_us.php de la carpeta del tema padre y se borra por completo la sección.
Aprovecho la oportunidad para agradecer por los tutoriales .
Saludos
Alberto
Hola, Alberto.
Gracias por tu comentario.
No hay otra forma para el caso de esta sección. Fijate que no estés dejando vacío el campo Título de característica 1. Escribí allí al menos una letra o número, y guardá los cambios.
Saludos.
Hola Ana
Una cosa, tengo la pagina en tres idiomas con el plugin Polylang, las paginas las tengo en tres idiomas, con sus enlaces traducidos y linkados en la edicion de las paginas.
En los widgets de nuestro equipo y nuestro enfoque, tengo puesto los enlaces a una de las paginas, al cambiar el idioma, no hace caso, y se dirige automaticamente al enlace que le ordene, y no se puede editar los enlaces en traduciones de cadena del Polylang
Una solucion que se me ocurre es tener que triplicar los widgets para cada idioma, y visualizar cada uno para su idioma correspondiente, pero me parece un poco lioso, no entiendo entonces que beneficios tiene la pestaña de idiomas de la creacion de paginas, donde se pone la traduccion de cada pagina
Se entiende la pregunta? Sabes a que me refiero?
Sí, desde luego se entiende, y la manera correcta de hacerlo es crear los widgets correspondientes para cada idioma (seleccionar el que corresponde del menú El widget se muestra para:). Por supuesto que es más trabajo, pero es lo mismo que usar páginas en varios idiomas: hay que crear una nueva página o entrada para cada idioma que quieras mostrar en el sitio. No es que brinde algún beneficio en concreto, sino que es la herramienta para gestionar los distintos idiomas de manera ordenada. 🙂
Gracias por la aclaraciön
Gracias me ha funcionado perfectamente,
se podria meter un slider, en vez de una o dos fotos? o daria problemas?
Sí, se puede tranquilamente. En lugar de
<img src="http://ruta-completa-a-la-imagen.jpg" alt="descripciondelaimagen" />pegarías<?php echo do_shortcode('[metaslider id=511]'); ?>(ejemplo para Meta Slider).Saludos.
Funciona a la perfeccion
Muchisimas gracias
Me gustaria hacer una pregunta es que no encuentro la forma de hacerlo de otra manera:
En nuestro equipo, al poner el raton encima de uno de los miembros aparece un desplegable negro, es posible a parte del texto que introducimos, insertar un boton, por ejemplo, mas información?
Hola, Aritz.
Sí es posible, nada más tenés que introducir el código HTML para el enlace (
<a href="#">Más información</a>). Y para aplicar los mismos estilos de los botones, tendrías que usar las clases correspondientes. El campo descripción tendría que incluir algo similar a esto:Reemplazá el símbolo
#con la URL del enlace correspondiente y la clasered-btnpor la clasegreen-btn, oblue-btnoyellow-btnsi querés mantener los colores de cada ubicación.Saludos.
Bien, lo probare
Para ello supongo tengo que copiar el archivo our team de la carpeta padre a la carpeta sections del tema hijo e introducir el codigo html?
Muchas gracias
Saludos
No, no, eso iría dentro del campo Descripción del widget Nuestro Equipo.
Ok perfecto asi lo he hecho, Y funciona.
Muchisimas gracias
Hola, estoy queriendo cambiar la sección habilidades con una imagen pero estoy utilizando el tema “Zerius” en vez de Zerif Lite, el problema es que no encuentro el archivo about_us.php para modificar. lo que hice fue copiarlo de la versión Zerif Lite pero no funcionó. Me ayudan? Gracias!
Hola, Gabriel.
Si copiaste el archivo
about_us.phpde la carpeta/sections/de Zerif Lite, y lo pegaste en una carpeta/sections/(que tenés que crear) en Zerius, debería funcionar sin problemas. Fijate si no te estás salteando algún paso.Saludos.