Usa un Tipo de Contenido Personalizado para el Contenido de Tu Barra Lateral

Siempre uso widgets de texto para añadir contenido a las barras laterales en las webs que desarrollo. Estos widgets son útiles ya que aceptan tanto texto como HTML pero, si puedes escribir HTML, puedes usarlos para añadir todos los tipos de contenido.

Sin embargo si mis clientes editan la barra lateral y no están familiarizados con HTML, es muy fácil que rompan algo, especialmente si he incluido imágenes o enlaces.

Una forma fácil de hacerlo es reemplazar las áreas de widgets en tu tema con un tipo de contenido personalizado, usando WP_Query para mostrar las entradas de este tipo de contenido personalizado en la barra lateral.

Hacemos esto en dos pasos:

1. Registrar un tipo de contenido personalizado para tus barras laterales.
2. Crear una función que muestre el contenido de tus barras laterales y lo añadirla al fichero sidebar.php de tu tema.

También crearemos algunas barras laterales en la administración de WordPress, comprobaremos cómo aparecen y les añadiremos un poco de estilo.

Qué Vas a Necesitar

Para seguir este tutorial, necesitarás:

• una instalación en desarrollo de WordPress
• un editor de código

Para hacer esto, voy a crear un tema hijo de Twenty Fifteen, pero tu puedes añadir el código a tu propio tema o tal vez prefieras usar un plugin para registrar el tipo de contenido personalizado y crear la función, después añadir la función al fichero sidebar.php de tu tema.

Crear un Tema Hijo

Si estás trabajando con tu propio tema puedes saltarte esta parte pero si estás comenzando desde cero, la manera más fácil para probar esta técnica es usando un tema hijo. Voy a crear un tema hijo del tema Twenty Fifteen.

En tu directorio de temas dentro de wp-content, crea un directorio y dale un nombre relevante para tu tema. Yo llamo al mino tutsplus-sidebar-custom-post-type.

En este directorio, crea dos ficheros vacíos: style.css y functions.php. Haz una copia del fichero sidebar.php del tema Twenty Fifteen en tu tema hijo. Lo editarás más tarde y WordPress usará el fichero de plantilla de tu tema hijo para mostrar la barra lateral, en lugar de usar la del tema Twenty Fifteen.

En tu nueva hoja de estilos, añade lo siguiente:

1

/*

2

Theme Name:     Tuts+ Use a Cusotm Post Type for Sidebar Content

3

Theme URI:      https://rachelmccollin.co.uk/tutsplus-use-custom-post-type-for-sidebars/

4

Description:    Theme to support tuts+ tutorial on using a CPT for sidebars. Child theme for the Twenty Fifteen theme.

5

Author:         Rachel McCollin

6

Author URI:     http://rachelmccollin.co.uk/

7

Template:       twentyfifteen

8

Version:        1.0

9

*/

10

11

@import url("../twentyfifteen/style.css");

Necesitarás editar los detalles del tema y el autor ya que es tu tema, no el mío, pero es sólo una idea.

Ahora, activa tu nuevo tema desde tu sitio web desde la pantalla de Temas de tu panel de administración de WordPress.

Registrar el Tipo de Contenido Personalizado

El siguiente paso es registrar el tipo de contenido personalizado para la barras laterales. Harás esto en el fichero functions de tu tema (o si estás creando un plugin para esto, crea un nuevo fichero en tu directorio de plugin dentro de wp-content).

Abre el fichero functions.php de tu tema y añade este código:

1

function tutsplus_create_sidebar_post_type() {

2

    $labels = array( 

3

  	'name' => __( 'Sidebars' ),

4

		'singular_name' => __( 'Sidebar' ),

5

		'add_new' => __( 'New Sidebar' ),

6

		'add_new_item' => __( 'Add New Sidebar' ),

7

		'edit_item' => __( 'Edit Sidebar' ),

8

		'new_item' => __( 'New Sidebar' ),

9

		'view_item' => __( 'View Sidebar' ),

10

		'search_items' => __( 'Search Sidebars' ),

11

		'not_found' =>  __( 'No Sidebars Found' ),

12

		'not_found_in_trash' => __( 'No Sidebars found in Trash' ),

13

	);

14

	$args = array(

15

		'labels' => $labels,

16

		'has_archive' => false,

17

		'public' => true,

18

		'hierarchical' => false,

19

		'supports' => array(

20

			'title', 

21

			'editor', 

22

			'excerpt', 

23

			'custom-fields', 

24

			'thumbnail',

25

			'page-attributes'

26

		),

27

	);

28

	register_post_type( 'sidebar_post', $args );

29

} 

30

add_action( 'init', 'tutsplus_create_sidebar_post_type' );

Esto registrará el tipo de contenido sidebar_post. Nota que le he llamado deliberadamente sidebar_post y no sidebar. Esto es porque muchos temas usan la clase .sidebar para su barra lateral, lo que puede originar un conflicto con las clases CSS por la etiquete de plantilla post_class() cuando luego creamos un bucle.

Ahora si refrescas tu pantalla de administración verás que se muestra el tipo de contenido personalizado:

Ahora añade algunas barras laterales de la misma forma a como lo harías normalmente. Aquí está la mia:

Una de mis barras laterales consiste en nada pero tiene una imagen destacada. Esto es deliberado, ya que el bucle que crearé en seguida mostrará imágenes destacadas.

Crear una Función para Mostrar las Barras Laterales

Por el momento tus barras laterales on se muestran en tu web porque no las has añadido a tu tema. Por lo tanto el siguiente paso es escribir una función que use WP_Query para mostrar las entradas en la barra lateral.

Crear la Función

De nuevo en tu fichero functions, añade lo siguiente:

1

function tutsplus_sidebars() {

2

3

	$args = array(

4

		'post_type' => 'sidebar_post'

5

	);

6

7

	$query = new WP_query ( $args );

8

	if ( $query->have_posts() ) { ?>

9

10

		<?php while ( $query->have_posts() ) : $query->the_post(); /* start the loop */ ?>

11

12

		<aside id="post-<?php the_ID(); ?>" <?php post_class( 'sidebar-post' ); ?>>

13

			<h3 class="sidebar-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'compass' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h3>

14

15

			<?php if ( has_post_thumbnail() ) { ?>

16

				<a href="<?php the_permalink(); ?>">

17

					<?php the_post_thumbnail( 'medium', array(

18

						'class' => 'aligncenter',

19

						'alt'	=> trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))

20

					) ); ?>

21

				</a>

22

			<?php } ?>

23

24

			<section class="sidebar-content">

25

				<?php the_content(); ?>

26

			</section><!-- .entry-content -->

27

28

		</aside>

29

30

		<?php endwhile; /* end the loop*/ ?>

31

32

		<?php rewind_posts();

33

	}

34

}

Vamos a echar un vistazo a este código para identificar lo que hace:

1. Primero, crea una función llamada tutsplus_sidebars(), que más tarde añadiremos al fichero sidebar.php.
2. Dentro de esta función, se definen los argumentos para WP_Query, es decir que el tipo de contenido es sidebar_post.
3. Esto comprueba que la consulta devuelve entradas y si las hay, comienza un bucle.
4. Abre un elemento aside usando the_ID() y post_class() para generar un ID y clases en CSS.
5. Añade un elemento h3 con el título del post dentro de el.
6. Comprueba si la entrada tiene una imagen destacada y si es así, la muestra.
7. Muestra el contenido de la entrada dentro de un elemento section.
8. Cierra el elemento aside, finaliza el bucle y utiliza rewind_posts() para resetear la consulta.

Ahora guarda tu fichero functions.

Añadir la Función al Fichero de Plantilla de Barra Lateral

La función que acabas de escribir no está añadida a ningún hook por lo que WordPress no tiene forma de ejecutarla. En su lugar, necesitas llamarla en tu fichero sidebar.php.

Abre el fichero sidebar.php de tu tema. Si estás trabajando con un tema hijo del tema Twenty Fifteen, esto será una copia de lo que has hecho antes.

Si quires que tu barra lateral consista sólo en estas entradas de barra lateral y no widgets, elimina cualquier código para mostrar widgets. Si quieres mantener lo widgets, déjalo así.

En mi caso, voy a eliminar los widget del fichero sidebar de Twenty Fifteen, por lo que borraré estas líneas:

1

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>

2

    <div id="widget-area" class="widget-area" role="complementary">

3

		<?php dynamic_sidebar( 'sidebar-1' ); ?>

4

	</div><!-- .widget-area -->

5

<?php endif; ?>

Ahora añade tu función para mostrar las barras laterales. En Twenty Fifteen estoy añadiéndolo al final del fichero sidebar.php, después de la línea endif;. En tu tema puedes añadir la salida de las barras laterales donde quieras.

1

<?php tutsplus_sidebars(); ?>

Ahora echemos un vistazo a tu sitio web. Se mostrarán las barras laterales:

Necesitarán algo de estilo, que lo haremos en breve. Pero primero vamos a poner en orden las áreas de widget.

Entender el Área de Widgets

Si estás trabajando con un tema hijo y no quieres usar widgets en tu barra lateral, te evitará confusiones si eliminas las áreas de widgets en tu tema hijo. Esto significa que no se mostrarán el la pantalla de Widgets del panel de administración. Si dejas un área de widget registrada, los usuarios podrán añadir widgets.

Si estás trabajando con tu propio tema, todo lo que necesitas hacer es eliminar el código que registra esos widgets en primer lugar (o no añadir ningún área de widget para empezar). Pero si estás usando un tema hijo no puedes editar el tema padre, por lo que necesitarás usar la función unregister_sidebar() para eliminar las áreas de widgets de tu barra lateral.

El en fichero functions.php de tu tema hijo, añade esto:

1

function tutsplus_unregister_sidebar_widget_area() {

2

    unregister_sidebar( 'sidebar-1' );

3

}

4

add_action( 'widgets_init', 'tutsplus_unregister_sidebar_widget_area', 15 );

Esto desregistra el área de widget sidebar-1, que es el ID del área de widget eliminada desde el fichero sidebar.php. Date cuenta que cuando añado la función al hook de acción widgets_init, he añadido una prioridad de 15 para asegurarme de que esta función se ejecuta después de registrar la barra lateral en el primer sitio, la cual tiene una prioridad de 10.

Ahora mi pantalla de administración de Widgets no muestra áreas de widget:

Dar Estilo a las Barras Laterales

Por el momento mis barras laterales no se alinean muy bien con el otro contenido de la barra lateral ya que le da estilo la hoja de estilo de Twenty Fifteen. Si estás usando tu propio tema no tendrás este problema, o puedes tener otros problemas que necesitas arreglar con estilo.

Para arreglar el problema con Twenty Fifteen sólo necesitas añadir una línea de CSS. Abre la hoja de estilo de tu tema hijo y añade esto:

1

.sidebar-post {

2

    margin: 0 20%;

3

}

Ahora guarda tu hoja de estilos y mira la web de nuevo:

¡Esto está mejor! Ahora las barras laterales se muestran correctamente.

Resumen

Usar un tipo de contenido personalizado para el contenido de tu barra lateral puede hacer tu vida mucho más fácil si las personas que editan tu web no tienen experiencia con código. Usar entradas de esta forma significa que ellos pueden usar las pantallas de administración normales de WordPress para crear barras laterales y después mostrarlas en la web.

Si te gusta, puedes usar esta técnica añadiendo argumentos extra en WP_Query. Tal vez quieras crear una taxonomía para tus entradas de barra lateral y mostrar entradas por taxonomía, o mostrar diferente contenido (e.j. incluir u omitir el título de la entrada o la imagen destacada) dependiendo de la taxonomía (o casi mejor, metadatos de entrada). O tal vez quieras añadir un argumento a las entradas para ordenarlas por menu_order y añadirle esto cuando registre tu tipo de contenido.