Mismo sidebar, distinto contenido

Mismo sidebar, distinto contenidoHoy vamos a ver cómo se puede variar el contenido de un mismo sidebar según una página u otra. Como veremos, cabe añadir tanto texto como imágenes.

El caso más frecuente es si utilizamos wordpress no como blog sino como CMS para crear un sitio. En este caso, lo normal es usar "páginas" y no entradas, y también es conveniente, en caso de usar imágenes, poder incluir éstas en el sidebar. Pongamos un ejemplo para entendernos:

En el capítulo VI de "Liberalismo y romanticismo en tiempos de Isabel II" observamos que en el sidebar hay unas cuantas imágenes que incluso pueden ampliarse. Si nos vamos al capítulo VIII, nos encontramos con el mismo sidebar pero distintas imágenes. Observemos también que la página está dividida en tres partes (mediante <!--nextpage-->) y que se muestran distintas imágenes en cada una de éstas.

Veamos como hacerlo:

1.- Crear un nuevo directorio dentro de wp-content al que, por ejemplo, llamaremos "imagensidebar". Luego veremos para que sirve.

2.- Creamos una nueva página y añadimos un nuevo campo personalizado. Clic en "nuevo", rellenamos el campo "Nombre" con "imagensidebar" (sin las comillas) y el campo "Valor" con el slug de la página. Una vez lo hayamos hecho esta primera vez, en el resto de entradas o páginas nuevas bastará con elegir el mencionado campo personalizado y darle el valor correspondiente. Ver imágenes siguientes:

Mismo sidebar, distinto contenido
Figura 1
Mismo sidebar, distinto contenido
Figura 2
Mismo sidebar, distinto contenido
Figura 3

3.- Editar el archivo page.php de nuestro tema activo y añadir el siguiente código:

<?php         
$titulopag = get_the_title();
$GLOBALS['$paged'] = get_query_var( 'page' ) ? get_query_var( 'page' ) : false;
if ( $GLOBALS['$paged'] > 1 ) :
    echo '<h1 class="pagetitle entry-title">' . $titulopag . ' (continuación)</h1>';
    else:
    echo '<h1 class="pagetitle entry-title">' . $titulopag . '</h1>';
endif;
?>

Este código nos va a servir para dos cosas: la primera para saber en qué parte de una página nos encontramos en caso de subdividirla con <!--nextpage-->; la otra para que en la parte segunda y sucesivas de la página se añada al título la palabra "continuación". Como es obvio, debéis adaptarlo al estilo de título de vuestro tema.

4.- Editar el archivo sidebar.php y añadir lo siguiente:

<?php if ( is_page() ) { ?>
    <?php $enlace = get_post_meta($post->ID, "imagensidebar", $single = true); ?>            
    <?php if($enlace !== '') { ?>
        <?php if ( $GLOBALS['$paged'] < 2 ) { ?>
            <?php $urlimagensidebar = '/wp-content/imagensidebar/' . $enlace . '.php' ?>
            <?php } else { ?> 
            <?php $numpag = $GLOBALS['$paged']; ?>
            <?php $urlimagensidebar = '/wp-content/imagensidebar/' . $enlace . '-' . $numpag . '.php'; ?>
        <?php } ?>
        <?php if(file_exists(ABSPATH . $urlimagensidebar)) { ?>
            <li>
            <?php include(ABSPATH . $urlimagensidebar); ?> 
            </li>
        <?php } ?>
    <?php } ?>
<?php }?>

Con este código conseguimos insertar un archivo concreto en el sidebar de una página específica. Luego veremos cuáles son sus tripas.

5.- Demos ahora estilo al sidebar. Editamos la hoja de estilo de nuestra tema activo y añadimos los siguientes estilos:

.imagensidebar {
    border: 1px solid #E7E8E6;
    background:#F7F7F7;
    width:210px;
    min-width:200px;
    margin-top:25px;
    border-radius:16px 16px 16px 16px;
    padding-left:10px;
    padding-right:10px;
    padding-top:10px;
    margin-left: auto;
    margin-right: auto;
}
.imagensidebar .imagensidebar-title {
    font-size: 110%;
    font-variant: small-caps;
    margin: 0;
    text-align: center;
}
.imagensidebar p {
    font-size: 90%;
}

Esto no deja de ser un mero ejemplo que, por supuesto, podéis cambiar a vuestro gusto.

6.- Crear el archivo que se insertará en el sidebar. Lo podéis hacer con el bloc de notas o con cualquier editor HTML.

¿Cuál debe ser su nombre y extensión? Pues bien, la forma de construirlo es así de sencillo: slug de la página o entrada + número de la página (en caso de que la hayamos subdividido; solo a partir de la segunda) + extensión php.

Un ejemplo:

  • Página con titulo "Página de prueba" y sin subdivisiones: "pagina-de-prueba.php"
  • Página con titulo "Página de prueba" y con tres subdivisiones: "pagina-de-prueba.php", "pagina-de-prueba-2.php" y "pagina-de-prueba-3.php"
  • Nota: en la página añadiremos un solo valor al campo personalizado "imagensidebar" y será el slug de la página o entrada. El código del punto 4 se encarga de comprobar si existen archivos para cada subdivisión. Tampoco importa si queremos contenido distinto solo en la segunda parte o en la primera y tercera. El procedimiento es el mismo. Si el campo personalizado tiene un valor, el código se encargará de comprobar si existe el archivo a insertar.

Y ahora viene la parte más delicada ya que debemos "llenar" ese archivo para que, por ejemplo, se muestren imágenes con su correspondiente pie y por supuesto que se puedan ampliar. Vamos, igual que si insertáramos la imagen de forma normal. Y por ahí van los tiros porque se trata precisamente de eso aunque con un pequeña diferencia.

Veamos: tenemos nuestra página o entrada e insertamos una imagen en miniatura con su pie de foto y el código necesario para que el visitante pueda ampliarla. Tomamos el código mirando el pestaña "Texto" y lo copiamos en ese archivo que hemos creado. Pues bien, no funcionará y eso siginifica que debermos crear nuestro propio "caption". No se asusten porque es fácil:

Conviene antes de nada comprobar cuál será la anchura adecuada para que la miniatura no rompa el sidebar. Vayan a "Ajustes" » "Medios" y pongan por ejemplo 175 en anchura y cero en altura. Después, inserten la imagen en la entrada como se hace normalmente. Eso sí, sin poner leyenda e incluyendo el código necesario para ampliarla. Algo así como

<a href="xxx.jpg"><img class="aligncenter size-thumbnail wp-image-x" title="xxx" src="xxx" alt="xxx" width="175" height="74" /></a>

NOTA: en el código de la imagen no aparece lo necesario para su ampliación. Eso dependerá del plugin que usen. Echen un vistazo a su documentación para saber como agregar de forma manual el código necesario. Yo uso el Thickbox que viene por defecto con wordpress.

Vayamos ahora al archivo y pongamos.

<div class="imagensidebar">
<p class="imgsidebar-title">Título</p>
<p style="text-align: center;">Aquí el código de la imagen</p>
<p style="text-align: left;">Leyenda</p>
</div>

Explicación del código

Línea 1 y 5: insertamos una división cuyo estilo ya añadimos al tema activo y que nos permite simular el caption de wordpress. Usaremos una división de esta clase para cada imagen.

Línea 2: título de la imagen (optativo).

Línea 3: el código de la imagen que copiamos después de insertarla de forma normal.

Línea 4: Leyenda de la imagen (optativo).

Y ya está. Solo queda subir el archivo al servidor dentro de la carpeta que hemos creado en el punto 1, y a funcionar !!!!!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *