Añadir logotipo personalizable a un tema de WordPress

por
Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos añadir un logo personalizable a nuestro tema de WordPress. Continuando con nuestros tutoriales anteriores.

Vamos a modificar nuestro header para que pueda mostrar un logo que subamos o un texto (el nombre del sitio)

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<header class="bg-dark text-white py-4">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <?php
                // Obtén el logo personalizable
                $custom_logo_id = get_theme_mod('custom_logo');
                $logo = wp_get_attachment_image_src($custom_logo_id, 'full');
                
                // Si hay un logo personalizado, muestra la imagen. Si no, muestra el título del sitio.
                if ($custom_logo_id) {
                    echo '<img src="' . esc_url($logo[0]) . '" alt="' . get_bloginfo('name') . '" class="img-fluid">';
                } else {
                    echo '<h1 class="mb-0">' .
                        '<a href="' . home_url() . '" class="text-white">' . get_bloginfo('name') . '</a>' .
                        '</h1>';
                    echo '<p class="mb-0">' . get_bloginfo('description') . '</p>';
                }
                ?>
            </div>
            <div class="col-md-6 d-flex justify-content-end align-items-center">
                <?php
                wp_nav_menu(array(
                    'theme_location' => 'main-menu',
                    'menu_class' => 'nav justify-content-end',
                    'container' => false,
                ));
                ?>
            </div>
        </div>
    </div>
</header>

Este código nos permite diversificar entre logo o texto según el usuario:

// Si hay un logo personalizado, muestra la imagen. Si no, muestra el título del sitio.
                if ($custom_logo_id) {
                    echo '<img src="' . esc_url($logo[0]) . '" alt="' . get_bloginfo('name') . '" class="img-fluid">';
                } else {
                    echo '<h1 class="mb-0">' .
                        '<a href="' . home_url() . '" class="text-white">' . get_bloginfo('name') . '</a>' .
                        '</h1>';
                    echo '<p class="mb-0">' . get_bloginfo('description') . '</p>';
                }

Añadimos el css:

style.css

/* Estilos del Header */
header {
    position: relative;
}

header h1 a {
    text-decoration: none;
    color: #ffffff;
}

header p {
    color: #e0e0e0;
}

/* Estilos de Navegación */
.navbar-dark .navbar-nav .nav-link {
    color: #ffffff;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #f8f9fa;
}

/* Estilos del Contenido Principal */
.container {
    margin-top: 50px;
}

/* Estilos del Footer */
footer {
    background-color: #343a40;
    color: #ffffff;
    padding: 30px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

Y ahora vamos a crear la acción que nos permitirá subir el logo:

functions.php

function theme_setup() {
    add_theme_support('custom-logo');
}
add_action('after_setup_theme', 'theme_setup');

Y bien, este es el resultado:

Post Views: 6

Deja un comentario