Cómo agregar una barra lateral izquierda en WordPress - guía paso a paso

Agregar una barra lateral izquierda a un tema de WordPress no es fácil. Sin las instrucciones de este tutorial, sería más fácil crear una plantilla de página personalizada desde cero e insertar la barra lateral izquierda en este archivo de plantilla.

La barra lateral está firmemente codificada en el archivo de plantilla del tema.

Hay muchos ganchos de WordPress en cada archivo de plantilla.

La razón es que WordPress se ejecuta en el lenguaje de programación PHP. Casi todas las características de una plantilla de tema utilizan ganchos de WordPress.

El código para cargar la barra lateral izquierda es

La función "get_sidebar" se usa en muchas plantillas. Algunos muestran la barra lateral derecha, otros no.

Agregarlo no es una opción. Intentar cargar dos barras laterales generará un conflicto que hará que su sitio cometa un error grave.

Debe editar una barra lateral existente o cargar una barra lateral "dinámica".

Para realizar cambios en todo el sitio, cada instancia de la función get_sidebar debe reemplazarse con código que cargue la barra lateral izquierda.

Para aquellos que no tienen más remedio que buscar en la web cómo agregar una barra lateral izquierda a WordPress, esto se debe a que su tema no tiene esta característica.

Tienes que agregarlo manualmente.

La búsqueda de una solución termina aquí.

Se han probado muchos códigos, se han probado, se han añadido y eliminado plugins (porque no sirven para nada) y finalmente...

El código de función con script (que puede copiar y pegar) agregará una barra lateral personalizada a la izquierda del área de contenido.

Cómo agregar una barra lateral izquierda en WordPress

1) Registre una nueva barra lateral en su archivo functions.php.

2) Cree un archivo sidebar-left.php.

3) Súbelo a tu carpeta de temas.

4) Ajuste su plantilla page.php para cargar la barra lateral izquierda.

5) Edite su hoja de estilo para hacer flotar la barra lateral a la izquierda del contenido.

No pierda el tiempo agregando complementos a la barra lateral izquierda en WordPress

Hay muchos complementos disponibles para agregar barras laterales personalizadas. No registran nuevas barras laterales. Solo amplían la funcionalidad existente. Puede crear fácilmente barras laterales personalizadas con complementos, pero se apegarán a su tema.

Para temas sin una barra lateral izquierda, el complemento no tiene un área de widgets en la barra lateral izquierda para la personalización.

La única forma de agregar una barra lateral izquierda es editar el código fuente del tema.

Esto significa usar PHP. Si comete un error en el código, lo coloca en el área incorrecta u olvida cerrar la etiqueta div, puede arruinar su sitio web.

Por esta razón, la mayoría de las fuentes en línea le dirán que primero cree un subtema y lo edite allí para evitar distorsionar su tema.

Esta es una forma. largo camino.

Una forma más rápida es descargar la plantilla de su tema en su escritorio.

De esta forma, tendrás una copia del original por cada archivo que edites.

Cuando no sabes a dónde ir, espera que sucedan cosas

Cuando lo hagan, abra la carpeta de descarga de la plantilla, vaya al archivo que está editando y copie y pegue el código fuente original.

Esto es mucho más rápido que crear temas para niños. Qué hacer si planea realizar varias ediciones en el tema.

Sin embargo, para un cambio, es apropiada una copia del archivo fuente original sobre el tema.

Primero: registre una nueva barra lateral

Esto se hace en su archivo functions.php

Vaya a su sitio web de cPanel, abra el administrador de archivos, vaya a su carpeta de contenido de WP y abra la carpeta de temas. Abra la carpeta de temas donde desea agregar la barra lateral izquierda.

Habrá un archivo functions.php dentro.

agrega este código

function my_custom_sidebar() {
register_sidebar(
array (
'name' => __( 'Left', 'twentytwentyone' ),
'id' => 'left-sidebar',
'description' => __( 'Left Sidebar', 'twentytwentyone' ),
'before_widget' => '<div class="widget-content">',
'after_widget' => "</div>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
)
);
}
add_action( 'widgets_init', 'my_custom_sidebar' );

No tires el código, desplázate hacia abajo hasta llegar a la sección de comentarios.

/ **
* Registrar un área de widgets.

Aquí es donde se registra la barra lateral izquierda con el código de arriba.

Haga clic en Guardar y salir. Eso es todo lo que necesita agregar a este archivo.

La única parte del código anterior que debe cambiarse es el nombre del tema. Reemplaza "twentytwentyone" con el nombre de tu tema.

Si desea ver el progreso, puede volver a su sitio de WordPress, cargar el área de widgets y verá que la barra lateral izquierda se ha agregado como una nueva área de widgets.

Todavía no funciona.

Debes crear el archivo sidebar.php

Esta parte es más fácil de lo que parece.

Todo lo que necesitas es un editor de texto plano.

No utilice MS Word u otro procesador de texto. Estos agregan codificación, lo que confunde a WordPress.

Copie y pegue el código siguiente en un editor de texto sin formato

<div id="sidebar-left">
<?php if ( function_exists('dynamic_sidebar') ) dynamic_sidebar('sidebar-left');?>
</div>

Luego guárdelo como "sidebar-left.php". Asegúrese de que sea un archivo PHP, no un TXT.

Además, la palabra "barra lateral" debe ser la primera palabra en el nombre del archivo para que WordPress lo reconozca.

Left-Sidebar.php no funcionará. (Se aclarará más adelante por qué).

Sube tu archivo sidebar-left.php a cPanel

Regreso ingrese a la carpeta WP Themes en cPanel y cargue el nuevo archivo.

En este punto, su barra lateral estará registrada y el archivo estará activo en su tema.

Para confirmar, verá el archivo en la carpeta de plantillas.

Ahora necesita codificar esto en su plantilla de página

Todos los temas de WordPress tienen plantillas de página. Algunos son más que otros.

Si solo tiene una plantilla, los archivos de edición son page.php (para sus páginas) y post.php (para publicaciones de blog).

Muchos temas tienen varias plantillas de página, todas con diferentes diseños. Si tiene una plantilla con una barra lateral derecha, utilícela como acceso directo.

Duplique el contenido de la página usando la barra lateral derecha, luego intercambie cada instancia de la barra lateral derecha con la barra lateral izquierda, luego guarde el nuevo archivo.

Esto ahorrará tiempo para dar forma a la barra lateral en el siguiente paso.

El código para cargar la barra lateral izquierda es

<?php get_sidebar('left'); ?>

Todos los temas con cualquier barra lateral o área de widgets usan el gancho "get_sidebar".

Los paréntesis ("izquierda") le dicen a WordPress qué archivo cargar

<?php get_sidebar(); ?>

... WP cargará el archivo sidebar.php. Ponga "derecha" entre llaves y esto carga el archivo sidebar-right.php.

Por lo tanto, primero debe incluir la palabra "barra lateral" en el nombre del archivo al guardar el archivo sidebar-left.php.

Algunos temas, como el tema veintiuno veintiuno, tienen solo un pie de página.

Este es uno de los temas más difíciles de agregar en la barra lateral porque no hay registros.

En nuestra experiencia lo logramos. La etapa de tirar del cabello es la banda lateral para flotar a la derecha del contenido.

Si usa el tema veintiuno veintiuno, hágase un favor y consulte el complemento veintiuno veintiuno WebD LTD para ver las opciones.

La versión gratuita no agrega una función para la barra lateral izquierda. Versión premium disponible.

Este es el único complemento que hemos encontrado que inyecta barras laterales en los hilos. Los otros simplemente personalizan lo que ya está allí.

Sabiendo que esta es una tarea factible, la tarea es averiguar cómo hacerlo.

¿Cómo se hace?

El truco consiste en reemplazar las partes clave del archivo style.css.

Usar la sección de CSS Avanzado en el área de administración de WordPress es mucho más fácil.

Porque el archivo style.css tiene miles de líneas.

Use el Personalizador de WordPress> CSS avanzado para hacerlo más fácil.

La desventaja es que requiere el uso de un código importante para anular explícitamente el código existente.

Rara vez se recomienda usar esta cadena CSS, ya que se evitará la depuración si necesita editar el código en la hoja de estilo más adelante.

La etiqueta !Important solo debe usarse como último recurso para mantener limpio el código.

Esto tiene sentido, dado que algunos temas tienen mucho código.

notas: Este es el tema de veintiuno veintiuno. El elemento de contenido del widget será diferente para otros temas.

Use el inspector del navegador (haga clic con el botón derecho en el widget, seleccione inspeccionar, luego seleccione div de clase [name] será lo que insertes aquí.

Primero, agrega este CSS

.widget-content {
width:350px;
float:left;
padding-left: 150px;
}

Esto ajusta el contenido dentro del widget para que flote 350 px a la izquierda del contenido. Puede cambiar el ancho según sus preferencias.

La siguiente parte es donde se coloca la etiqueta ¡Importante!, que expande el ancho del área de contenido. De lo contrario, el contenido se mostrará en el centro de la página con mucho espacio en blanco a ambos lados.

Si tienes la suerte de tenerlo, quédatelo.

De lo contrario, agregue este código a su personalizador de CSS.

.post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), .default-max-width {
max-width: var(--responsive--alignwide-width) !important;
}

Dado que este es un menú con elementos de una lista, puede personalizar aún más el aspecto. Vea cómo cambiar el color de los puntos en WordPress. (Puede cambiar el color, la forma, usar caracteres especiales o intercambiar viñetas de imágenes).

Para cada otro tema, agregue el siguiente código

<?php get_sidebar('left'); ?>

... en cada una de tus páginas y publica la plantilla para cargar tu barra lateral izquierda.

Diseña la barra lateral izquierda de cada tema de WordPress

get_sidebar ('izquierda') sin estilizar el área del gadget en la barra lateral izquierda simplemente inyectará la barra lateral izquierda sin saber dónde aparecerá el contenido.

Por lo general, estará en la parte superior y su contenido se colocará debajo del área de widgets.

Su hoja de estilo es donde controla cómo aparece la barra lateral en su sitio web.

Para todos los demás temas excepto el tema de veintiuno veintiuno (probablemente otros temas que no tienen una barra lateral registrada), el código CSS para alinear la barra lateral a la izquierda del contenido es

.content {
width: 75%;
float: right;
}

.sidebar {
width: 25%;
float: left;
}

La parte posterior al punto (.) Varía según el tema.

Algunos pueden titularse "Artículo", otros pueden titularse "Contenido del cuerpo" o algo similar.

Use el inspector de su navegador para identificar el elemento al que apuntar, luego cambie el código de arriba en su Personalizador de WordPress> CSS avanzado para alinear la barra lateral a la izquierda de Tu contenido.

Puede cambiar el tamaño (75% y 25%) de cualquier tamaño que desee.