Agregar una barra lateral personalizada a un tema de WordPress - Calendae | Informática, Electrónica, CMS, Ciberseguridad

Agregar una barra lateral personalizada a un tema de WordPress

Hola, ¿qué tal colega?. Soy Samuel López y en esta ocasión vamos a hablar sobre Agregar una barra lateral personalizada a un tema de WordPress

Las barras laterales le permiten ver widgets dentro de su tema.

Y sí, a pesar del nombre, puede usar «barras laterales» para mostrar widgets donde quiera.

De forma predeterminada, los temas vienen con al menos una barra lateral.

En esta publicación, compartiré contigo una forma rápida de agregar una barra lateral personalizada a tu tema de WordPress.

Paso 1. Crea un tema hijo

Si está utilizando un tema personalizado, omita este paso. Sin embargo, si está utilizando un tema administrado por otra persona que puede actualizarse en el futuro, le recomiendo que cree un tema hijo para dejar el original intacto.

Instale el plugin Configurador de temas secundarios y copie los archivos de plantilla necesarios, como single.php y page.php, en el tema secundario. El paso 4 explica esta parte.

Paso 2. Edita el archivo functions.php

  • Vaya a Apariencia> Editor> functions.php.
  • Elegir functions.php del tema hijo.

barra lateral personalizada de wordpress

Agregue este código en functions.php para registrar su barra lateral personalizada:

function my_custom_sidebar() 
    register_sidebar(
        array (
            'name' => __( 'Custom', 'your-theme-domain' ),
            'id' => 'custom-side-bar',
            'description' => __( 'Custom Sidebar', 'your-theme-domain' ),
            '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' );
  • Cuando termine, haga clic en el botón «Actualizar archivo».

Paso 3. Edite los archivos de plantilla

Quiero representar la barra lateral personalizada solo en publicaciones individuales, por lo que edito el archivo «Publicación única».

<?php if ( is_active_sidebar( 'custom-side-bar' ) ) : ?>
    <?php dynamic_sidebar( 'custom-side-bar' ); ?>
<?php endif; ?>

Coloqué el código anterior en la posición donde quiero que la barra lateral sea visible, así que guardo los cambios.

barra lateral personalizada de wordpress

Paso 4. Comprueba el resultado final

  • Vaya a Apariencia> Widgets para ver si la nueva barra lateral está disponible.
  • Agregue los widgets que necesita.

barra lateral personalizada de wordpress

  • Obtenga una vista previa de una sola publicación para ver la barra lateral en acción. Los widgets se cargan como se esperaba en nuestra barra lateral personalizada. Tenga en cuenta que probablemente se necesitarán algunos cambios en el diseño de CSS.

barra lateral personalizada de wordpress



No te olvides compartir en en tu Twitter y Facebook para que tus colegas lo sepan

👇👇👇 😘 💪 👇👇👇

Comparte