Como anticipamos hace unas semanas, algunos de los tutoriales dedicados al tema gratuito Zerif Lite, de ThemeIsle, han quedado desactualizados para la nueva versión que se descarga del repositorio de WordPress. Aunque varios ya han sido ajustados para que apliquen en lo posible a ambas versiones, este que es el más complicado había quedado pendiente y requería una nueva entrada, por su extensión.
En este tutorial, vamos a aprender a crear una sección personalizada nueva para la página frontal, que llamaremos “Sección nueva”.
Podrá cambiar esta denominación al título que mejor se ajuste a sus necesidades, pero para estas instrucciones, simplemente recrearemos la sección “Características” que ya existe, y la colocaremos a continuación.
Paso 1:
En primer lugar, por favor asegúrese de que está usando un tema hijo de Zerif. Si ya tiene creado el tema hijo, salte al Paso 2.
La manera recomendada de crear un tema hijo para este tema es la siguiente:
Cree una carpeta en /wp-content/themes/ denominada /zerif-child/. Cree un archivo nuevo en un editor de texto (por ejemplo, Notepad++), con el nombre functions.php. Copie el siguiente código en este archivo y guárdelo en la carpeta /zerif-child/:
<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 99);
function child_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/custom.css', array( $parent_style ));
}
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 );
} );
}
?>Cree otro archivo nuevo en la carpeta /zerif-child/ con el nombre style.css y pegue el siguiente código:
/* Theme Name: Zerif Hijo Theme URI: https://wordpress.org/themes/zerif-lite/ Description: Tema hijo de Zerif Lite, por ThemeIsle. Author: Caribdis.Net Author URI: https://caribdis.net/ Template: zerif-lite Version: 1.0 License: GNU General Public License v2 License URI: http://www.gnu.org/licenses/gpl-2.0.html */
Podrá editar el nombre del tema, la descripción, el autor, la versión y las URI de acuerdo con sus necesidades. Solo asegúrese de que Template coincide con el nombre de la carpeta del tema padre.
Por último, cree un archivo en la carpeta /zerif-child/ con el nombre custom.css (que se usará en caso de aplicar estilos personalizados).
Y como nunca está de más recordarlo, una vez creado, activar el tema hijo.
Paso 2:
Segundo, en la carpeta del tema hijo, cree una carpeta con el nombre /sections/. En esa carpeta, cree un archivo nuevo con el nombre new_section.php. Este será el archivo que mostrará el contenido para esta sección. Como ya mencionamos, para este ejemplo simplemente tomaremos como referencia la sección “Características”, por lo cual usaremos el mismo código HTML del archivo our_focus.php del tema padre. Por el momento, lo dejaremos como está.
Paso 3:
Aquí tendremos que añadir la sección nueva en la página frontal. Duplicaremos la sección “Nuestro enfoque”.
Copiamos el archivo content-frontpage.php a la carpeta del tema hijo y lo editamos de la siguiente manera:
Al final de esta porción de código:
/* OUR FOCUS SECTION */
$zerif_ourfocus_show = get_theme_mod('zerif_ourfocus_show');
if( isset($zerif_ourfocus_show) && $zerif_ourfocus_show != 1 ):
zerif_before_our_focus_trigger();
get_template_part( 'sections/our_focus' );
zerif_after_our_focus_trigger();
endif;Añadimos esto:
/* SECCIÓN NUEVA */
$zerif_newsection_show = get_theme_mod('zerif_newsection_show');
if( isset($zerif_newsection_show) && $zerif_newsection_show != 1 ):
get_template_part( 'sections/new_section' );
endif;De acuerdo con la posición donde queremos insertar la nueva sección, buscaremos el código encabezado por el título de la sección correspondiente. Por ejemplo, si queremos la nueva sección antes de Quiénes somos, pegaremos el código de /* SECCIÓN NUEVA */ justo al final del código encabezado por /* RIBBON WITH BOTTOM BUTTON */ y justo antes del código encabezado por /* ABOUT US */.
Paso 4:
En este punto, no se ve nada diferente, porque no hemos añadido la nueva sección al Personalizador. Este es el siguiente paso.
Ahora tendremos que abrir el archivo functions.php del tema hijo y añadir lo siguiente, antes del cierre de la etiqueta php ?> (si lo hubiere):
/*******************************************/
/************* NUEVA SECCIÓN *************/
/*******************************************/
function caribdis_customizer( $wp_customize ) {
$wp_customize->add_panel( 'panel_newsection', array(
'priority' => 32,
'capability' => 'edit_theme_options',
'theme_supports' => '',
'title' => __( 'Nueva Sección', 'zerif-lite' )
));
$wp_customize->add_section( 'zerif_newsection_section' , array(
'title' => __( 'Contenido', 'zerif-lite' ),
'priority' => 1,
'panel' => 'panel_newsection',
'description' => __( 'El contenido principal de esta sección se puede personalizar desde el menú Personalizar -> Widgets. Allí podrá añadir cualquier widget.', 'zerif-lite' )
));
/* show/hide */
$wp_customize->add_setting( 'zerif_newsection_show', array('sanitize_callback' => 'caribdis_sanitize_customizer'));
$wp_customize->add_control(
'zerif_newsection_show',
array(
'type' => 'checkbox',
'label' => __('¿Ocultar nueva sección?','zerif-lite'),
'section' => 'zerif_newsection_section',
'priority' => 1,
)
);
/* new_section title */
$wp_customize->add_setting( 'zerif_newsection_title', array('sanitize_callback' => 'caribdis_sanitize_customizer','default' => __('NUEVA SECCIÓN','zerif-lite')));
$wp_customize->add_control( 'zerif_newsection_title', array(
'label' => __( 'Title', 'zerif-lite' ),
'section' => 'zerif_newsection_section',
'settings' => 'zerif_newsection_title',
'priority' => 2,
));
/* new_section subtitle */
$wp_customize->add_setting( 'zerif_newsection_subtitle', array('sanitize_callback' => 'caribdis_sanitize_customizer','default' => __('Escriba la descripción de esta sección aquí.','zerif-lite')));
$wp_customize->add_control( 'zerif_newsection_subtitle', array(
'label' => __( 'Subtítulo de la nueva sección', 'zerif-lite' ),
'section' => 'zerif_newsection_section',
'settings' => 'zerif_newsection_subtitle',
'priority' => 3,
));
}
add_action( 'customize_register', 'caribdis_customizer' );
function caribdis_sanitize_customizer( $input ) {
return wp_kses_post( force_balance_tags( $input ) );
}
function caribdis_sanitize_checkbox( $input ) {
if ( $input == 1 ) {
return 1;
} else {
return '';
}
}
function new_section_widgets() {
register_sidebar( array(
'name' => __( 'Barra lateral de nueva sección', 'zerif-lite' ),
'id' => 'new-section-sidebar',
'description' => __( 'Widgets para la nueva sección', 'zerif-lite' ),
'before_widget' => '<div class="col-lg-3"><aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside></div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'new_section_widgets' );
function zerif_newsection_header_title_function() {
$zerif_newsection_title_default = get_theme_mod( 'zerif_newsection_title' );
if( ! empty ( $zerif_newsection_title_default ) ) {
$zerif_newsection_title = get_theme_mod( 'zerif_newsection_title_2', $zerif_newsection_title_default );
} elseif ( current_user_can( 'edit_theme_options' ) ) {
$zerif_newsection_title = get_theme_mod ( 'zerif_newsection_title_2', sprintf( '<a href="%1$s" class="zerif-default-links">%2$s</a>', esc_url( admin_url( 'customize.php?autofocus[control]=zerif_newsection_title' ) ), __( 'Nueva sección','zerif-lite' ) ) );
} else {
$zerif_newsection_title = get_theme_mod ( 'zerif_newsection_title_2' );
}
if( !empty($zerif_newsection_title) ):
echo '<h2 class="dark-text">'.wp_kses_post( $zerif_newsection_title ).'</h2>';
elseif ( is_customize_preview() ):
echo '<h2 class="dark-text zerif_hidden_if_not_customizer"></h2>';
endif;
}
function zerif_newsection_header_subtitle_function() {
if ( current_user_can( 'edit_theme_options' ) ) {
$zerif_newsection_subtitle = get_theme_mod( 'zerif_newsection_subtitle', sprintf( __( 'Change this subtitle in %s','zerif-lite' ), sprintf( '<a href="%1$s" class="zerif-default-links">%2$s</a>', esc_url( admin_url( 'customize.php?autofocus[control]=zerif_newsection_subtitle' ) ), __( 'Sección Nueva','zerif-lite' ) ) ) );
} else {
$zerif_newsection_subtitle = get_theme_mod( 'zerif_newsection_subtitle' );
}
if( !empty($zerif_newsection_subtitle) ):
echo '<div class="section-legend">'.wp_kses_post( $zerif_newsection_subtitle ).'</div>';
elseif ( is_customize_preview() ):
echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
endif;
}
add_action( 'zerif_newsection_header_title', 'zerif_newsection_header_title_function' );
add_action( 'zerif_newsection_header_subtitle', 'zerif_newsection_header_subtitle_function' );
function zerif_newsection_header_title_trigger() {
do_action( 'zerif_newsection_header_title' );
}
function zerif_newsection_header_subtitle_trigger() {
do_action( 'zerif_newsection_header_subtitle' );
}Ahora sí veremos la nueva sección en el Personalizador:
Paso 5:
El paso final es hacer la conexión entre la nueva sección en el archivo functions.php y el archivo new_section.php creado antes.
Para hacer esto, reemplazaremos todo el contenido del archivo new_section.php por el siguiente código:
<section class="focus" id="nuevaseccion">
<div class="container">
<!-- SECTION HEADER -->
<div class="section-header">
<!-- SECTION TITLE AND SUBTITLE -->
<?php
/* Title */
zerif_newsection_header_title_trigger();
/* Subtitle */
zerif_newsection_header_subtitle_trigger();
?>
</div>
<div class="row">
<?php
if ( is_active_sidebar( 'new-section-sidebar' ) ) {
dynamic_sidebar( 'new-section-sidebar' );
} else echo 'Añada algunos widgets aquí';
?>
</div>
</div> <!-- / END CONTAINER -->
</section> <!-- / END NEW SECTION -->Con este último paso, podremos ver el área de widgets para la nueva sección en el Personalizador:
Los widgets que coloquemos en esta sección se repartirán en cuatro columnas.
Para tener en cuenta: con esta configuración no se podrán usar los widgets destinados a otras secciones de Zerif, tales como Testimonios, Enfoque o Quiénes somos.
En caso de necesitar tres, dos o una única columna, tendremos que buscar la siguiente línea de código en el archivo functions.php:
'before_widget' => '<div class="col-lg-3"><aside id="%1$s" class="widget %2$s">',
Y reemplazar el valor de la clase "col-lg-3" por: "col-lg-4" para tres columnas; "col-lg-6" para dos columnas, y "col-lg-12" para una columna.
Por otro lado, es posible usar los widgets de Zerif – Nuestro enfoque, y solo tendremos que modificar las siguientes líneas:
'before_widget' => '<div class="col-lg-3"><aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside></div>',
Por:
'before_widget' => '<span id="%1$s">', 'after_widget' => '</span>',
Para concluir, dejo a disposición el tema hijo, con los archivos modificados tal como se explica en este tutorial: descargar. (Instalar desde Apariencia > Temas > Añadir nuevo > Subir tema).
Nota importante: este tutorial, así como el .zip del tema hijo funcionarán únicamente en una instalación “limpia” de Zerif Lite. Esto es, si se ha añadido desde el administrador de WordPress a partir de la versión 1.8.5.9 en adelante.
Si se está usando una versión actualizada desde 1.8.5.8 o inferiores, se deberá añadir además el archivo front-page.php a la carpeta del tema hijo con el siguiente contenido:
<?php get_header();
if( zerif_check_if_old_version_of_theme() ) {
get_template_part( 'content','frontpage' );
} else {
if( ! zerif_check_if_old_version_of_theme() ) {
$blog_header_title = get_theme_mod( 'zerif_blog_header_title', esc_html__( 'Blog', 'zerif-lite' ) );
$blog_header_subtitle = get_theme_mod( 'zerif_blog_header_subtitle', esc_html__( 'Zerif supports a custom frontpage', 'zerif-lite' ) );
if ( ! empty( $blog_header_title ) || ! empty( $blog_header_subtitle ) ) { ?>
<div class="blog-header-wrap">
<div class="blog-header-content-wrap">
<?php if ( ! empty( $blog_header_title ) ) { ?>
<h1 class="intro-text"><?php echo esc_html( $blog_header_title ); ?></h1>
<?php }
if ( ! empty( $blog_header_subtitle ) ) { ?>
<p class="blog-header-subtitle"><?php echo esc_html( $blog_header_subtitle ); ?></p>
<?php } ?>
</div>
</div>
<?php
}
}
?>
<div class="clear"></div>
</header> <!-- / END HOME SECTION -->
<?php zerif_after_header_trigger(); ?>
<div id="content" class="site-content blog-site-content">
<div class="container">
<div class="content-left-wrap col-md-9">
<div id="primary" class="content-area">
<main id="main" class="site-main" itemscope itemtype="http://schema.org/Blog">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;
echo get_the_posts_navigation( array( 'next_text' => sprintf( __( 'Newer posts %s','zerif-lite' ), '<span class="meta-nav">→</span>' ), 'prev_text' => sprintf( __( '%s Older posts', 'zerif-lite' ) , '<span class="meta-nav">←</span>' ) ) );
else :
get_template_part( 'content', 'none' );
endif;
?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .content-left-wrap -->
<?php zerif_sidebar_trigger(); ?>
</div><!-- .container -->
<?php
}
get_footer(); ?>El archivo está incluido en el .zip como _front-page.php; renombrarlo a front-page.php de ser necesario.
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
Hola te felicito por el gran trabajo que realizas tengo como 100 preguntas pero tratrate de resumir
consegui agregar la nueva seccion pero hay alguna forma de que quede con imagenes y texto encima como el rectangulo verde con el boton de contactanos de la demo?
para agregar mas secciones solo es copiar el codigo de functions y pegarlo tantas veces se requiera?
en estas nuevas secciones se pueden poner sliders codigos html videos de youtube lo que se ocupe?
lo que quiero hacer es que la web resultante no se parezca en nada a la demo excepto el header y el footer mil gracias desde ya
Hola, José.
Quizá quieras echarle un vistazo a la entrada que publiqué hoy. Usar Elementor te simplificará el proceso de editar y crear nuevas secciones.
Saludos.
Hola, me gustaría incluir en la nueva sección del zerif-child 2 fotos (una al lado de la otra) a modo de botones que redirijan a páginas dentro de la web.
Recomendás algún widget en especial o debería hacerlo de forma manual (y cómo?)
Gracias!!
Hola, Sol.
Podés usar el widget Imagen que incluye WordPress. 🙂
Saludos.
Gracias por la respuesta rápida! Quería agregarle además RollOver effects a las imágenes y que sean responsive.
¿Se puede hacer con el widget ‘Imagen’ y tocar algo de código o es preferible bajarme algún plug-in?
Hola, Sol.
Se puede hacer de las dos maneras. Con código CSS personalizado tendrías que usar la ID que hayas asignado a la nueva sección. Ejemplo:
#nuevaseccion img:hover { /* CÓDIGO */ }Con un plugin que genere shortcodes (este parece bastante completo), no olvides agregar el filtro para ejecutar códigos abreviados en widgets de Texto/HTML.
Saludos.
Genial Contenido y grandes tutoriales. Muchas gracias.
Tengo una duda, estoy intentando modificar la sección “our focus” y quiero que los links de las imágenes se abran en un target=”_blank”. Para ello estoy modificando la líneas en functions.php pero es como si no reconociese el cambio, directamente me sigue abriendo en el mismo tab.
Estas son las líneas que estoy tocando ¿qué hago mal? lo añado entre “<a" y "href"
echo '<a href=”‘ . esc_url( $instance[‘link’] ) . ‘” rel=”nofollow”>’;
Gracias de antemano por tu ayuda
Hola, Dycra.
Gracias por tu comentario.
Fijate en esta respuesta.
Saludos.
buen dia, quisiera saber como se hace para crear mas de una nueva seccion, ya cree una pero no puedo con la otra.
Hola, Luismiguelsec.
Los pasos son los mismos, pero hay que dar un nombre único a cada variable y crear otro archivo
phpen la carpeta/sections/para esa sección.Saludos.
Hola, Buenas, Cuando dices dar un nombre único a cada variable, a qué variables te refieres y de cuál archivo?
Hola, Giovanna.
Significa que todos los
newsectionque veas en el código deberán ser reemplazados pornewsection2(o el nombre que sea), en todos los archivos en donde aparezcan. Ejemplo:'panel_newsection'tendrá que ser'panel_newsection2','zerif_newsection_header_subtitle'tendrá que ser'zerif_newsection2_header_subtitle', etc.Saludos.
Hola,
Yo quiero añadir mas de una seccion, cuando cambio el nombre de las variables panel_newsection por panel_newsection2 del archivo functions.php luego no me carga la pagina. No se que estoy haciendo mal? estas variables tambien hay que renombrarlas “new_section”?
Gracias
Hola, Edu.
En functions.php tenés que duplicar el código usado para la primera sección y luego en ese código duplicado reemplazar todos los nombres.
Saludos.
Saludos.
¡Muy buena tu pagina y la info que compartes!
¿Puedo agregar esa nueva sección para un portafolio que se integre perfectamente al sitio? ¿Cómo lo haría?
Hola, Luis.
Gracias por tu comentario.
Podés usar como referencia las instrucciones que se detallan en Insertar un código abreviado en una nueva sección de este tutorial.
Básicamente cualquier plugin de portfolios que genere un código abreviado sirve.
Saludos.
hola
se puede mover un panel de una posicion a otra por ejemplo el de agregar la nueva seccion se queda en un lugar si quisiera moverla mas abajo se puede mover el panel
y otra se puede ocultar los paneles que no me sirvan o secciones o campos
saludos
Hola, Juan.
Para mover el panel de la nueva sección usá un número más alto en la línea
'priority' => 32,.Y en cuanto a la otra duda, fijate en esta respuesta.
Saludos.
Hola Ana. Está muy bien tus tutoriales, Mi duda es si se puede cambiar el orden de las secciones, ya que quiero alterar el orden que viene por defecto.
Además a esto, he visto lo de añadir los logos a la sección “Quienes somos”. Lo he intentado con el CSS Adicional y no me ha salido.
Por último, me pregunto si hay alguna forma de cambiar el color del footer.
Muchas gracias y siento haberte hecho tantas preguntas.
Hola, Sergio.
Gracias por tu comentario.
Es posible cambiar el orden con un tema hijo (Zerif Pro sí permite cambiar el orden de las secciones desde el Personalizador). Tendrías que copiar el archivo
content-front-page.phpy mover las porciones de código que correspondan a las secciones al lugar donde quieras que aparezcan. Todas están comentadas para identificarlas fácilmente. Por ejemplo, cortás el código correspondiente a/* LATEST NEWS */y lo pegás antes de/* OUR FOCUS SECTION */.Los logos de clientes se agregan como widgets, fijate que hay una sección específica para eso (Área de clientes).
Y para cambiar el color de fondo del pie de página, fijate en esta respuesta.
Saludos.
Hola, cómo podría hacer para agregar un vídeo en la sección about-us.
Me gustaría que justo después del texto de la parte izquierda se viera un vídeo, pero no consigo que aparezca ni embebiéndolo, ni por iframe, ni copiando el enlace… no sé como hacer, ¿podrías ayudarme?
Gracias!
Hola, Jesús.
Fijate en esta respuesta.
Saludos.
Saludos Ana,
He seguido el tutoríal y todo fue bien hasta el paso 4, sigo el paso 5 pero no logro ver el área de widgets para la nueva sección en el Personalizador, que puede estar pasando?
En última instancia descargue tu .zip, instale y tampoco veo cambios…
Gracias por la ayuda,
Hola, Marilian.
Fijate que hay una aclaración al final. Seguramente el tema fue actualizado de la versión suspendida. Para que puedas ver la nueva sección tenés que incluir también el archivo
front-page.phpen la carpeta del tema hijo.Saludos.
acabo de hacer eso y no me sale la opcion de los widgets.
he hecho lo siguiente:
he descomprimido el zip y he renombrado el archivo_front-page.php por el nombre front-page.php…… y asi lo he vuelto a zippear con el mismo nombre del zip y lo subi a wp y nada, no funka, sale las secciones desordenadas.
también adicione al archivo zip el documento frontn-page-php, osea que adicioné tal como dice el tutorial al archivo zip, de tal manera que volvi a comprimir con los dos archibos uno con _front-page.php y otro con front-page.php, lo volvi a zipear y lo subi al tema y volvia a salir lo mismo, sale todo sin forma. favor si me puedes ayudar con esto, también indicarme si se puede agregar mas de una sección.
Hola, Jimmy.
¿A qué te referís con “secciones desordenadas”? El ZIP tal como está funciona en una versión de Zerif que no fuera actualizada desde la versión suspendida.
¿No tenés una URL para verlo?
En cuanto a agregar más de una sección, los pasos serían los mismos, pero siempre dándoles un nombre único a cada una y creando el archivo
phpcorrespondiente en la carpeta/sections/.Saludos.
Necesito tu ayuda. Estoy tratando de crear una nueva sección, porque en la pagina “TESTIMONIOS” del tema, he agregado el widget correspondiente y no pasa nada. No hay cambio. No se ve ningún testimonio. Solo aparece la palabra TESTIMONIO y el subtitulo que puedo agregar. Pero ningún widget funciona en esta sección. Me gustaría saber si hay una forma en la que se pueda hacer que aparezcan. Para mi es muy importante esta sección.
Hola, Jairo.
¿Podrías detallar un poco más el inconveniente? Si agregás widgets desde personalizador, ¿no guarda los cambios? ¿No los guarda tampoco desde Apariencia > Widgets? Y en lo posible, pasame una URL para ver el sitio.
Saludos.
Hola,
tengo un par de dudas sobre las entradas en los post.
1) En el grid de resumen de entradas, cuando hay más del número permitido dice en inglés: “older posts” y “newer posts”… ¿Cómo lo puedo traducir?
2) Dentro de la página entradas individuales, la imagen destacada sale super grande… ¿Cómo se puede limitar para que ocupe todo el ancho pero la altura, sea por ejemplo de 600px? La idea es que se recorte “solo” en la pagina de content
Muchas gracias!!
Hola, Dani.
Gracias por tu comentario.
Zerif Lite incluye la traducción, así que si tenés configurado tu WordPress en Español deberías ver “Entradas antiguas” y “Entradas recientes”.
En cuanto al segundo punto, convendría establecer un nuevo tamaño de miniatura. Tomá como referencia las instrucciones de este tutorial (la última parte). En el archivo
functions.phpdel tema hijo pegá el siguiente código:Y en
content-single.php, de la líneathe_post_thumbnail('large');reemplazá'large'por'custom-post-thumb'.Tené en cuenta que tendrás que regenerar las miniaturas con algún plugin para que tomen efecto sobre las imágenes que ya subiste.
Saludos.
Buenas tardes!
Estoy configurando en mi sitio el tema gratuito y cuando me deslogueo de wordpress no se ven los iconos del pie de pagina, el texto de la sección titulo grande no esta.
Que puede pasar?
Estoy usando Zerif LiteVersión: 1.8.5.25 un tema hijo y también lo probé que el template original
WordPress 4.8.1
Gracias
Hola, Hugo.
¿Agregaste contenido en esas secciones y guardaste los cambios?
Saludos.
Hola Ana, gracias por tus tutoriales!!
te cuento que agregue una nueva sección, justamente la de focus y tengo la nueva sección sin problemas tal como mostras en el punto 4, pero al hacer el punto 5 no tengo ningún cambio en el personalizador de widget, cambie tal cual el contenido de la carpeta de new-section.php pero no me aparece ningún cambio en “widgets”… que podra ser?
mil gracias!
Hola, Alex.
Fijate que todos los nombres coincidan.
new-section.phpno es lo mismo quenew_section.php.Saludos.
Si, lo he revisado y todos los nombres son new_section, así es que aun no encuentro el error 🙁 incluso al ponerle título a la nueva sección para publicarla no se publica, debo haber errado desde un comienzo en algún punto, seguiré buscando el error, gracias!
Hola que tal, muchas gracias por su ayuda. Me he visto en un apuro, ya que quiero realizar un tema hijo pero no me da acceso al “/wp-content/themes/” y al ir a “wp-admin/themes.php” (que es donde sí me da acceso) sólo me permite subir un nuevo archivo de tema. ¿Me podrías ayudar? Muchas gracias!
Hola, Elizabeth.
Tenés que acceder a la carpeta de instalación de WordPress vía FTP para subir los archivos del tema hijo que hayas creado. O bien comprimirlos en un ZIP e instalarlo desde Apariencia > Temas > Subir tema.
Para más información, visitá esta entrada.
Saludos.
Hola Ana, primero que nada muchas gracias por toda tu ayuda.
Tengo una consulta, ¿cómo puedo hacer para agregar una nueva sección y en esta incorporar un Shortcode?
Muchas gracias por tu tiempo.
Saludos!
Hola, Pedro.
Gracias por tu comentario.
Podés usar este mismo tutorial como referencia, y en lugar de crear el área de widgets usar el código abreviado. Por ejemplo, donde está el siguiente código:
<?php if ( is_active_sidebar( 'new-section-sidebar' ) ) { dynamic_sidebar( 'new-section-sidebar' ); } else echo 'Añada algunos widgets aquí'; ?>pegarías:
<?php echo do_shortcode('[codigo-abreviado-del-plugin]'); ?>Y si no necesitás los campos de título y subtítulo en el personalizador, una simple función en un hook es suficiente. Por ejemplo, para insertarlo a continuación de la sección Nuestro equipo, sería algo así:
function zerif_child_shortcode() { echo do_shortcode('[codigo-abreviado-del-plugin]'); } add_action( 'zerif_after_our_team', 'zerif_child_shortcode' );Saludos.
Muchas gracias!
Lo implementaré en mi página.
Saludos!
Hola Ana,
instale el archivo del tema hijo correctamente, adicional utilice 3 widgets de Zerif – Nuestro enfoque y se ven bien. Sin embrago los bordes estan siempre en blanco y no cambian de color. Y la linea abajo de los circulos de los tres widgets es roja.
Como puedo hacer para que tanto el color del circulo y de la linea sean iguales y que cuando uno se pare sobre el circulo este cambie de color? Habia pensado que fuesen amarillo, verde y azul.
Mil gracias por tu ayuda.
Hola, Luis.
Fijate en esta respuesta.
Saludos.
Hola tengo un menú desplegable en mi sitio con Zerif Lite y necesitaría saber si se le puede poner un marco o una sombra o cambiar el color de fondo cuando se despliega.
Gracias
Hola, Luis.
Para cambiar los colores usá el siguiente código, con los valores que necesites:
.navbar-inverse .navbar-nav ul.sub-menu { background: #cccccc; /* Fondo */ border: 1px solid #333; /* Borde */ box-shadow: 3px 3px 2px rgba(50, 50, 50, 0.08); /* Sombra */ }Saludos.
Hola de nuevo Ana!
Creé el tema hijo y lo estoy editando en un servidor local en el que no tengo etradas ni nungún tipo de contenido, solo la plantilla, ¿Cómo hago para que después el tema hijo pueda ser usado en cualquier otra página? Es decir, que lo pueda pasar a una web real y me mantenga las modificaciones. Intenté hacerlo subiendo el .zip del tema hijo y no me aparecen todos los cambios, además se esconde la opción de agregar css adicional en el editor.
Hola, Lenis.
El tema hijo solo sirve para hacer cambios de estilo y/o estructura sobre el tema padre. Todo lo que son los contenidos (páginas, entradas, categorías, etiquetas, widgets y menús) es independiente y se guarda en la base de datos.
Si querés copiar tal cual un sitio local a un servidor en línea podés hacerlo manualmente con un backup de la carpeta de WP y de la base de datos, o usar un plugin como Duplicator.
Saludos.
Hola Ana, quiero poner una nuevo color de fondo a la nueva sección
pongo el siguiente codigo en el editor CSS pero no me funciona
}
/* SECCIÓN NUEVA */
.zerif_newsection_section {
background: #B23180;
}
Como puedo hacer para cambiar el color del fondo de la nueva sección??
Hola, Luis Carlos.
Fijate en esta respuesta.
Saludos.
Hola Ana mil gracias por tu ayuda, logre cambiar el color de fondo del tema hijo como lo quería.
Ahora tengo un último problema con esa sección y es que los textos debajo de las imagenes salen corridos al lado izquierdo.
Si entras a mi pagina http://socialmass.co/luisComunicaciones/TallerdeVida/ te daras cuenta que en la sección de PROYECTOS que fue la que cree con el tema hijo no estan alineados los textos con los circulos.
Como puedo hacer para arreglar esto???
Hola, Luis Carlos.
Para agregar widgets de Nuestro enfoque tenés que usar el código que se muestra al final en
before-widgetyafter-widget.Saludos.
Hola Ana buen dia muchas gracias por tu ayuda , tengo unas inquietudes como podria agregar mas secciones de este tipo sin que me genere error lo intente y me muestra faltal error y debo recuperar todo el funtions php. y tambien lograr que los widgest me queden mas centrados ya que agrego un carrucel con imagenes y se ve un poco hacia la derecha y no tener tanto espacio entre la seccion inferior y superior de la nueva seccion, te agradezco mucho tu asesoria, un excelente dia
Hola, Alexander.
Cada sección nueva tiene que tener un nombre único; si lo repetís en alguno de los códigos va a dar error.
El tema del carrusel es porque está adoptando un ancho fijo y aparentemente no es responsive. Además, si querés usar una sola columna, tenés que usar la clase
col-lg-12en lugar decol-lg-3al registrar el área de widgets.Y por último, el relleno lo manejás con CSS, en el caso de la sección nueva con el siguiente código:
#nuevaseccion.focus { padding: 10px 0 10px 0; }Modificá el valor en píxeles por el que necesites.
Saludos.
Buenas tardes en la sección de mi cuenta me aparece el formulario para acceder, pero no me aparece la opción de poder registrar a un nuevo usuario como podría activar esta opción?
Hola, Raúl.
Si te referís al enlace Registrarse que aparece debajo del formulario de inicio de sesión, solo aparece si seleccionaste Cualquiera puede registrarse en la página Ajustes > Generales > Miembros.
Saludos.
Hola soy nuevo suscriptor de tu pagina ya que me intereso mucho el trabajo que realizas, tengo una pregunta, quiero quitar la parte del contactenos de la pagina principal y ponerla en una pagina aparte que le llame contacto como puedo hacer esto, saludos…
Hola, Carlos.
Gracias por tu comentario y suscripción.
Podés desactivar la sección Contáctenos de la página de inicio desde el Personalizador (marcando la casilla ¿Ocultar sección “Contáctenos”?) y luego crear una página donde tendrás que pegar el código abreviado
[pirate_forms].Eso sería todo. Si necesitás un formulario más avanzado, podés buscarlo en el repositorio y en lugar de
[pirate_forms]pegar el código que corresponda.Saludos.
De nuevo yo… gracias como siempre por compartir tus conocimientos que son de gran ayuda… ahora quiero agregar “Footer areas” en la sección “widgets” porque necesito armarlo un poco más extenso de lo normal, ¡cómo puedo hacerlo?
Mil gracias =)
Hola, Antonio.
No hay límite para los widgets que agregues en el pie de página, en las tres columnas podés repartirlos como quieras. Ahora, si necesitás más columnas de widgets es más complicado, porque tendrías que registrar áreas nuevas.
Saludos.
Muchas gracias por responder, ya pude darle mejor formato, otra duda, en la seccion (perdona por los acentos, la computadora es extranjera) “our focus” siempre me aparecen los iconos 4 en linea yo los quiero 3 por linea, que debo hacer para modificar esto?
Mil gracias.
Hola, Antonio.
Fijate en esta respuesta.
Saludos.
Hola, tengo una duda. Creando una nueva sección de este modo, ¿puedo añadir un widget con las últimas entradas de Facebook en una de las columnas, y otro con las últimas de Twitter? ¿Recomiendas algún widget en especial? Gracias de antemano.
Hola, Elena.
Sí, podés agregar cualquier widget que tengas disponible. En esta entrada recomiendo uno de Twitter.
Saludos.
Buenas noches, con mis escasos conocimientos en desarrollo web, he utilizado este tema modificando agregando las páginas que requiere mi proyecto.
¿Sería posible agregar en una de las páginas “Únete” formulario de inscripción?
He habilitado plugins de RSS para facilitar al visitante la publicación de las “últimas entradas” en Facebook y twitter. El problema viene al publicar, todas las publicaciones en Facebook y twitter las hace con la imagen del logo y no con la imagen destacada de la entrada.
¿Podrías ayudarme?
Muchas gracias y un saludo.
Hola, Eli.
Podés agregar un formulario estándar en una página, usando el código abreviado de Pirate Forms
[pirate_forms]. Si necesitás algo más avanzado, podés usar Contact Form 7, o buscar algún otro que te permita agregar campos.El tema de las imágenes al compartir podés manejarlo instalando un plugin de SEO y activando los campos meta de redes sociales: te permite seleccionar la imagen y el extracto que quieras que aparezca. Yoast SEO, WP Meta SEO y All in One SEO (instalando el complemento) incluyen esta característica.
Saludos.
Primero que nada , gracias por compartir tu conocimiento, ahora tengo tres preguntas, no se si la primera sea obvia pero no vi respuesta…y ante todo mis disculpas si alguna pregunta es inadecuada.
1- si en lugar de ingresar una nueva sección de nuestro enfoque, quiero ingresar la seccion de ultimas noticias, ¿Que cambios debo realizar a el ejemplo que nos regalaste?
2- ¿De que forma agrego no una nueva seccion , sino 2 nuevas secciones ?
3- Las paginas que has hecho en tu portafolio , ¿Son todas plantillas gratis o algunas son de pago?
Hola Jhoan.
Gracias por tu comentario.
El proceso para agregar/duplicar una sección es siempre el mismo, solo que hay que darle un nombre único a cada archivo php y a cada variable.
Fijate en esta y esta respuestas para la sección Últimas noticias.
Algunas de las webs del portfolio son a medida, y otras hechas a partir de temas premium (Divi es el que más uso actualmente).
Saludos.
Uff pues me parece mucho más complicado que antes.
El usar más funciones para añadir los títulos y subtitulos de las secciones me trae de cabeza.
He visto que en las nuevas versiones usa unos hooks en los archivos de las secciones como por ejemplo
¿Sabes a qué se refieren estas líneas y en que parte del código puedo editarlas para mis propias secciones?
Muchas gracias una vez más usted es una gran ayuda
zerif top our_focus trigger( )
zerif_before_our_focus trigger( )
Perdón no se copiaron los hooks a los que me refería de ejemplo.
Gracias
Hola, Bernart.
De hecho, es prácticamente igual que antes, solo que el código que estaba en el archivo de la sección se pasó a una función.
Y los hooks son “llamadas” a funciones personalizadas que podés incluir en el archivo
functions.phpdel tema hijo. Un ejemplo:function hola() { echo '<h1>Hola arriba de Focus</h1>'; } add_action( 'zerif_top_our_focus', 'hola' );Saludos.
Muchas gracias, ya le estoy tomando el truquillo.
Disculpa que te moleste una vez más,
En la nueva versión de zerif-lite, las secciones de la página de inicio están en el panel (zerif_frontpage_sections_panel) para ello crea una clase Zerif_WP_Customize_Panel
Entonces para cada sección hace un condicional de si es la versión última pues crea el panel de la sección y lo añade a la sección de pagina de inicio, y si no es la versión última pues simplemente crear la nueva sección.
Yo sé, que puedo poner en la indicación del panel de la sección que creo, indicarle, el panel de la pagina de inicio.
Me gustaría poder utilizar la condición que aparece pero me da error por la la clase
¿Puedo llamar a esa clase desde mi thema hijo o hay otra manera?
Hola, Bernart.
No sé si termino de entender lo que estás queriendo hacer.
Si es mover la nueva sección dentro del panel Secciones de la página de inicio, agregala como sección y no como panel. El código sería algo así:
Saludos.
Como agregar un nuevo boton para registro de cliente en pagina Zerif Lite:
Hola, Wilbert.
¿Podrías ser un poco más específico? ¿Dónde querés agregar el botón?
Saludos.