En este duodécimo tutorial dedicado al tema gratuito Zerif Lite, de ThemeIsle vamos a aprender a quitar la barra lateral de las entradas del blog y de las páginas. Además, incluiré otros “retoques” que no vienen mal para mejorar la presentación de las entradas.

Si no queremos que aparezcan las barras laterales en las páginas interiores y entradas individuales de nuestro sitio en Zerif Lite, estas instrucciones servirán para tal fin. Como siempre recomendamos, por favor asegúrese de que está usando un tema hijo antes de realizar cualquier cambio. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.

Zerif Lite - Barra lateral

En la carpeta raíz del tema hijo, pegue el archivo single.php previamente copiado del tema padre. Luego ábralo con un editor de texto y busque la siguiente línea:

<div class="content-left-wrap col-md-9">

Ahora reemplácela por este código:

<div class="content-left-wrap col-md-12">

Por último, busque en el mismo archivo el siguiente código y elimínelo:

<?php zerif_sidebar_trigger(); ?>

Guarde el archivo y listo.

Zerif Lite - Sin barra lateral

Las páginas también tienen barra lateral de manera predeterminada, pero Zerif Lite incluye una plantilla para mostrarlas en ancho completo. Simplemente tendremos que seleccionar la plantilla Full Width Page del panel Atributos de página, como se muestra en la siguiente imagen:

Zerif Lite - Página de ancho completo

La plantilla Full width with no title template suprime tanto la barra lateral como el título.

Zerif Lite - Página sin barra lateral

Ahora dos detallitos que podemos mejorar:

Corregir posición del botón Responder en comentarios

Zerif Lite - Botón "Responder"

El primero, en la sección de comentarios, el botón Responder se superpone a la información meta (fecha y hora). Para corregir esto, añadimos el siguiente código en el archivo custom.css:

.comment-metadata, .comment-metadata a {
    margin-right: 15px;
}

Zerif Lite - Botón "Responder" corregido

Agregar una imagen destacada en las entradas

Y el segundo, de manera predeterminada Zerif Lite no incluye la imagen destacada dentro de la entrada, sino que solo muestra el texto y las imágenes que se añadan dentro del editor. ¿Qué tal si queremos incluirla? Tendremos que copiar, en primer lugar, el archivo content-single.php de la carpeta del tema padre a la del tema hijo. Luego lo abrimos con un editor de texto y buscamos el siguiente código:

<div class="entry-content">
    <?php 
        the_content();            
        wp_link_pages( array(
           'before' => '<div class="page-links">' . __( 'Pages:', 'zerif-lite' ),
           'after'  => '</div>',
        ) );
    ?>
</div><!-- .entry-content -->

Justo a continuación de la etiqueta <?php y antes de la línea the_content(); añadimos el siguiente código:

        if ( has_post_thumbnail() ) {
        echo '<div class="post-thumb">';
        the_post_thumbnail('large');
        echo '</div>';
        }

Quedando el código completo de la siguiente manera:

<div class="entry-content">
     <?php 
        if ( has_post_thumbnail() ) {
        echo '<div class="post-thumb">';
        the_post_thumbnail('large');
        echo '</div>';
        } 
        the_content();
        wp_link_pages( array(
           'before' => '<div class="page-links">' . __( 'Pages:', 'zerif-lite' ),
           'after'  => '</div>',
        ) );
    ?>
</div><!-- .entry-content -->

Ahora nada más queda aplicarle estilos para que no desentone con el resto del diseño. Abrimos el archivo custom.css y pegamos el siguiente código:

.post-thumb {
    margin-bottom: 30px;
}
.post-thumb img {
    width: 100%;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

Zerif Lite - Entrada con imagen destacada

Tutorial original en inglés: How to remove sidebar from single page in Zerif

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)