- \n
- Marca:<\/strong> Puede incluir el nombre del sitio y, con frecuencia, un logotipo. El uso de color, im\u00e1genes o v\u00eddeo en la cabecera puede reforzar esa marca.<\/li>\n
- Navegaci\u00f3n principal:<\/strong> Si tu sitio web tiene m\u00e1s de una p\u00e1gina, los visitantes probablemente buscar\u00e1n un men\u00fa de navegaci\u00f3n cerca de la parte superior de cada p\u00e1gina.<\/li>\n
- Navegaci\u00f3n secundaria: <\/strong>La navegaci\u00f3n secundaria podr\u00eda ser cualquier enlace independiente de la ubicaci\u00f3n actual del usuario en la jerarqu\u00eda del men\u00fa primario. Piensa en un bot\u00f3n de \u00abinicio de sesi\u00f3n\u00bb e iconos que enlacen a cuentas de redes sociales o a un carrito de la compra.<\/li>\n
- B\u00fasqueda:<\/strong> Si tu sitio web admite b\u00fasquedas, el cuadro de entrada de b\u00fasqueda no tiene <\/em>por qu\u00e9 estar en la cabecera, pero desde luego los visitantes no lo buscar\u00e1n en el pie de p\u00e1gina.<\/li>\n<\/ul>\n
El CMS<\/a> WordPress puede generar din\u00e1micamente componentes como las cabeceras combinando el marcado de las plantillas tem\u00e1ticas con el contenido que se encuentra en una base de datos \u2014 como enlaces a un logotipo y entradas de men\u00fa \u2014 e inyectarlos en cada p\u00e1gina.<\/p>\n
El ecosistema de temas de WordPress ofrece una rica selecci\u00f3n de dise\u00f1os para casi cualquier sitio web. Con miles de temas para elegir en varios marketplaces, elegir el mejor para tu objetivo puede ser desalentador.<\/p>\n
Pero cuando finalmente selecciones e instales un tema<\/a>, se espera que personalices al menos algunos componentes \u2014 como la cabecera \u2014 para estampar tu marca en el sitio y hacerlo tuyo.<\/p>\n
Veamos c\u00f3mo hacerlo.
\n<\/div><\/kinsta-auto-toc><\/p>\n Bloques vs cl\u00e1sico: Historia de dos temas<\/h2>\n
La forma de personalizar la cabecera de tu sitio de WordPress viene determinada por c\u00f3mo se construy\u00f3 el tema (y, a veces, por cu\u00e1nta personalizaci\u00f3n quieras hacer). Hay tres formas de modificar la cabecera de un sitio nativo de WordPress:<\/p>\n
- \n
- Utilizando el Editor del sitio<\/strong>: WordPress 5.0<\/a> introdujo un editor de bloques para el contenido del sitio web conocido como Gutenberg<\/a>. Con el lanzamiento de WordPress 5.9<\/a>, el concepto de bloque se extendi\u00f3 a la personalizaci\u00f3n del tema y se convirti\u00f3 en una opci\u00f3n s\u00f3lida para la edici\u00f3n completa del sitio<\/a>. El Editor de Sitios y la posibilidad de construir las distintas partes del tema de un sitio web con componentes basados en HTML aportaron una flexibilidad sin precedentes a la personalizaci\u00f3n nativa de WordPress.<\/li>\n
- Usar el Personalizador de WordPress<\/strong>: No pretendemos hacerte sentir viejo, pero los temas que solo pueden modificarse utilizando el Personalizador, en su d\u00eda revolucionario, y los widgets asociados se denominan temas \u00abcl\u00e1sicos\u00bb. A pesar del nombre que suena retro, todav\u00eda se siguen lanzando nuevos temas de estilo cl\u00e1sico, sum\u00e1ndose a los miles que ya existen en el mercado. En comparaci\u00f3n con el Editor de Sitios y los temas de Bloques, el Personalizador y los temas Cl\u00e1sicos ofrecen menos opciones para la personalizaci\u00f3n del encabezado.<\/li>\n
- Editar directamente los archivos del tema<\/strong>: T\u00fa (o alguien a quien pidas ayuda) necesitar\u00e1s conocimientos b\u00e1sicos de PHP para editar el c\u00f3digo de los archivos de los temas cl\u00e1sicos de WordPress, pero es una soluci\u00f3n cuando el Personalizador no puede ofrecerte lo que necesitas para la cabecera de tu sitio.<\/li>\n<\/ul>\n
Lo que no vamos a tratar aqu\u00ed es la personalizaci\u00f3n de cabeceras en constructores\u00a0de p\u00e1ginas de WordPress<\/a> de terceros como Divi<\/a> o cualquier otro plugin dise\u00f1ado espec\u00edficamente para gestionar cabeceras (y pies de p\u00e1gina<\/a>) de sitios web. Podr\u00eda merecer la pena explorar estos plugins si tu \u00fanica opci\u00f3n requiere editar directamente los archivos del tema y quieres evitar la programaci\u00f3n PHP.<\/p>\n
C\u00f3mo editar la cabecera de un tema de bloques<\/h2>\n
Si has utilizado Gutenberg para crear contenido, sabr\u00e1s que WordPress incluye una gran colecci\u00f3n de bloques que puedes colocar en las p\u00e1ginas para componer cualquier cosa, desde encabezados, p\u00e1rrafos y listas hasta medios, navegaci\u00f3n y formularios. Hay una clase de bloques que realizan tareas similares a los widgets de los temas cl\u00e1sicos, como generar enlaces a las \u00faltimas publicaciones y comentarios, mostrar una nube de etiquetas o insertar un calendario.<\/p>\n
Se pueden combinar varios bloques, darles estilo y guardarlos como patrones. Tambi\u00e9n puedes a\u00f1adir estos componentes a las partes de un tema de WordPress que ayudan a definir el dise\u00f1o de una p\u00e1gina, incluidas las cabeceras.<\/p>\n
Al igual que los bloques individuales, las partes de las plantillas pueden definirse en archivos HTML<\/a>. Los temas de bloques son f\u00e1ciles de personalizar porque la informaci\u00f3n que describe esas modificaciones se guarda en la base de datos de WordPress y se aplica a los distintos componentes cuando se genera una p\u00e1gina.<\/p>\n
Por tanto, cuando hablamos de \u00abeditar\u00bb un encabezado en un tema de bloques, rara vez estamos hablando de editar un archivo almacenado en un directorio de temas de WordPress.<\/p>\n
Bajo el cap\u00f3: Un encabezado de tema de bloques<\/h3>\n
Inspeccionar el HTML que hay detr\u00e1s de una parte de la plantilla, como un encabezado, ayuda a explicar lo que ocurre cuando personalizas un tema.<\/p>\n
Vamos a utilizar el tema Seedlet para este tutorial porque est\u00e1 disponible como Seedlet (Bloques)<\/a> y el m\u00e1s antiguo Seedlet (Cl\u00e1sico)<\/a>. Seedlet (Bloques) utiliza el tema Blockbase<\/a> como padre, y \u00e9ste es todo el contenido del archivo
header.html<\/code> en los directorios del tema Seedlet:<\/p>\n<!-- wp:pattern {\"slug\":\"blockbase\/header-centered\"} \/-->\n<!-- wp:spacer {\"height\":60} -->\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<!-- \/wp:spacer --><\/code><\/pre>\nLa mayor parte de la magia que hay detr\u00e1s de los bloques de WordPress ocurre en los comentarios HTML. Los comentarios pueden pasar informaci\u00f3n de estilo y otras directivas durante la construcci\u00f3n de la p\u00e1gina. El HTML anterior a\u00f1ade algo de espaciado vertical a nuestro encabezado predeterminado, pero la acci\u00f3n principal es la petici\u00f3n de incluir un patr\u00f3n en el tema Blockbase que (una vez que se a\u00f1ade
.html<\/code> ) se encuentra en el archivoheader-centered.html<\/code>.<\/p>\nEl directorio para las partes de la plantilla dentro del tema Blockbase incluye estos archivos relacionados con una cabecera:<\/p>\n
header-centered.html\nheader-default.html\nheader-linear.html\nheader-minimal.html\nheader-rounded-logo.html\nheader-wide.html<\/code><\/pre>\nPor ejemplo, el archivo
header-rounded-logo.html<\/code> incluye un comentario HTML que a\u00f1ade una clase CSS para el recorte circular de la imagen del logotipo. Si nos interesara ese enfoque, podr\u00edamos<\/em> editar nuestro archivo Seedletheader.html<\/code> para incluirheader-rounded-logo.html<\/code> en lugar deheader-centered.html<\/code>. Pero no tenemos que hacerlo porque podemos aplicar esa parte de plantilla en el Editor de Sitios de WordPress y dejar intactos los archivos del tema en el disco duro.<\/p>\nUsar el Editor de Sitios para personalizar una cabecera<\/h3>\n
Con un tema en bloque activo en nuestro sitio web, podemos acceder al Editor de Sitios en el panel de administraci\u00f3n de WordPress<\/a> seleccionando Apariencia<\/strong> > Editor<\/strong>:<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-site-editor.png\")
Accediendo al Editor de Sitios desde el panel de administraci\u00f3n de WordPress.<\/figcaption><\/figure>\n La vista inicial en el Editor de Sitios es un dise\u00f1o de p\u00e1gina completa que incluir\u00e1 la cabecera, el pie de p\u00e1gina y cualquier otra parte de la plantilla ya a\u00f1adida por el desarrollador del tema. Podemos hacer clic en el \u00e1rea de la cabecera para empezar a editar inmediatamente.<\/p>\n
Abajo, nuestra cabecera incluye un marcador de posici\u00f3n para un logotipo y ya muestra el nombre del sitio y la navegaci\u00f3n principal (que ahora consiste s\u00f3lo en \u00abSobre nosotros\u00bb y \u00abP\u00e1gina de muestra\u00bb). Si a\u00f1adimos un eslogan a la informaci\u00f3n b\u00e1sica de nuestro sitio, tambi\u00e9n aparecer\u00e1 aqu\u00ed.<\/p>\n
Estos elementos de identidad del sitio ya aparecen en nuestra cabecera porque la parte de la plantilla
header-centered.html<\/code> mencionada anteriormente incluye estos comentarios:<\/p>\n<!-- wp:site-logo {\"align\":\"center\",\"width\":128} \/-->\n<!-- wp:site-title {\"textAlign\":\"center\",\"style\":{\"spacing\":{\"padding\":{\"top\":\"30px\",\"bottom\":\"20px\"}}}} \/-->\n<!-- wp:site-tagline {\"textAlign\":\"center\",\"fontSize\":\"small\"} \/--><\/code><\/pre>\nLa navegaci\u00f3n principal est\u00e1 generada por este comentario:<\/p>\n
<!-- wp:navigation {\"layout\":{\"type\":\"flex\",\"setCascadingProperties\":true,\"justifyContent\":\"center\",\"orientation\":\"horizontal\"}} \/--><\/code><\/pre>\nA\u00f1adamos nuestro logotipo:<\/p>\n
- \n
- Selecciona el marcador de posici\u00f3n del logotipo.<\/li>\n
- Haz clic en el bot\u00f3n A\u00f1adir medios<\/strong>.<\/li>\n
- Elige tu logotipo en la biblioteca multimedia de WordPress o s\u00fabelo desde el disco.<\/li>\n<\/ol>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-add-logo.png\")
A\u00f1adir un logotipo a una parte de la plantilla de cabecera.<\/figcaption><\/figure>\n Personalizar la cabecera de un sitio web a\u00f1adiendo un logotipo es una tarea tan com\u00fan que incluso la mayor\u00eda de los temas cl\u00e1sicos de WordPress simplifican el trabajo en el Personalizador. As\u00ed que vamos a a\u00f1adir un bloque que no est\u00e1 ya previsto en la plantilla: un men\u00fa secundario cerca de la parte superior de la p\u00e1gina con la entrada: Tienda<\/strong>.<\/p>\n
En primer lugar, activamos la visualizaci\u00f3n del Insertador de Bloques haciendo clic en el icono situado cerca de la esquina superior izquierda del Editor de Sitios:<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-toggle-inserter.png\")
Activando el Insertador de Bloques.<\/figcaption><\/figure>\n Con el Insertador de Bloques activo:<\/p>\n
- \n
- Busca el bloque de navegaci\u00f3n (puedes buscarlo).<\/li>\n
- Arrastra el bloque hasta el margen superior de la cabecera.<\/li>\n<\/ol>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-add-navigation.png\")
Arrastrando un bloque de navegaci\u00f3n al \u00e1rea de cabecera.<\/figcaption><\/figure>\n Ahora, editamos el bloque de navegaci\u00f3n creando un enlace personalizado (separado de la navegaci\u00f3n principal) que muestre el texto Tienda<\/strong> y tenga la URL de nuestro subdominio de comercio electr\u00f3nico:<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-toggle-edit-link.png\")
Creando un enlace de p\u00e1gina para nuestro nuevo bloque de navegaci\u00f3n.<\/figcaption><\/figure>\n Por defecto, todo en esta parte de la plantilla de cabecera est\u00e1 centrado en la p\u00e1gina. Queremos que el enlace Tienda<\/strong> flote a la derecha. Para ello:<\/p>\n
- \n
- Haz clic en el nuevo bloque de navegaci\u00f3n.<\/li>\n
- Haz clic en el icono Cambiar justificaci\u00f3n de elementos<\/strong> de la barra de herramientas.<\/li>\n
- Selecciona Justificar elementos a la derecha.<\/strong><\/li>\n<\/ol>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-navigation-justify.png\")
Cambiando la posici\u00f3n horizontal del bloque en la cabecera.<\/figcaption><\/figure>\n Aqu\u00ed tienes la cabecera terminada:<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-secondary-navigation-after.png\")
Cabecera del tema Bloque con un men\u00fa secundario que contiene el enlace Tienda<\/strong>.<\/figcaption><\/figure>\n C\u00f3mo modificar la cabecera de un tema cl\u00e1sico con el Personalizador<\/h2>\n
Cuando se lanz\u00f3 la primera versi\u00f3n del Personalizador de temas en 2012, junto con WordPress 3.4<\/a>, supuso un salto adelante para ayudar a los administradores a modificar el aspecto de sus sitios web sin programar.<\/p>\n
El Personalizador se ha mejorado significativamente desde entonces, pero una cosa sigue siendo cierta: el desarrollador de un tema determina lo que se puede y lo que no se puede personalizar con la herramienta. Eso contrasta con la libertad que tienen los propietarios de sitios con el Editor de Sitios basado en bloques.<\/p>\n
Usar el Personalizador de temas de WordPress<\/h3>\n
Cuando un tema cl\u00e1sico compatible con el Personalizador est\u00e1 activo en un sitio, accede a \u00e9l en el panel de administraci\u00f3n de WordPress seleccionando Apariencia<\/strong> > Personalizar<\/strong>.<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-customizer-menu.png\")
Accediendo al Personalizador de temas desde el panel de administraci\u00f3n de WordPress.<\/figcaption><\/figure>\n En el men\u00fa principal del Personalizador, seleccionamos Identidad del Sitio <\/strong>para acceder a los componentes personalizables de la cabecera:<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-customize-menu.png\")
Seleccionando la opci\u00f3n Identidad del Sitio en el Personalizador cl\u00e1sico del tema.<\/figcaption><\/figure>\n En la secci\u00f3n Identidad del Sitio<\/strong> de este tema, podemos a\u00f1adir o cambiar un logotipo y editar el t\u00edtulo del sitio y cualquier eslogan. (El t\u00edtulo del sitio y el eslogan se rellenan inicialmente mediante entradas en la p\u00e1gina Configuraci\u00f3n General<\/strong> del panel de administraci\u00f3n).<\/p>\n
Este tema tambi\u00e9n coloca la navegaci\u00f3n principal del sitio en la cabecera. Tambi\u00e9n hay un lugar para la navegaci\u00f3n en el pie de p\u00e1gina y para un men\u00fa de enlaces a redes sociales. El Personalizador te permite elegir qu\u00e9 men\u00fa quieres asignar a cada una de estas ubicaciones \u2014 si es que quieres asignar alguno \u2014 pero las ubicaciones en s\u00ed son esencialmente fijas.<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-select-logo.png\")
A\u00f1adir un logotipo en el Personalizador para temas cl\u00e1sicos de WordPress.<\/figcaption><\/figure>\n Tras hacer clic en el bot\u00f3n Seleccionar Logotipo<\/strong> resaltado arriba, podemos elegir un logotipo de la biblioteca multimedia de WordPress o subir uno nuevo desde el disco.<\/p>\n
Abajo, con un logotipo colocado, el Personalizador nos permite eliminar la imagen o sustituirla por otra:<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-add-logo.png\")
El logotipo a\u00f1adido a la cabecera mediante el Personalizador de WordPress.<\/figcaption><\/figure>\n Bajo el cap\u00f3: \u00bfQu\u00e9 puede personalizar el Personalizador?<\/h3>\n
Entonces, \u00bfc\u00f3mo determina el Personalizador si podemos subir un logotipo y d\u00f3nde debe colocarse una vez lo hayamos hecho?<\/p>\n
Comienza con esta entrada en el script
functions.php<\/code> del tema:<\/p>\n\/**\n* Add support for core custom logo.\n*\n* @link https:\/\/codex.wordpress.org\/Theme_Logo\n*\/\nadd_theme_support(\n 'custom-logo',\n array(\n 'height' => 240,\n 'width' => 240,\n 'flex-width' => false,\n 'flex-height' => false,\n )\n);<\/code><\/pre>\nEse bloque de c\u00f3digo activa el bot\u00f3n Seleccionar Logotipo<\/strong> en la pesta\u00f1a Identidad del Sitio<\/strong> del Personalizador, junto con su enlace a las funciones de la Biblioteca Multimedia.<\/p>\n
A continuaci\u00f3n, dentro del c\u00f3digo PHP utilizado para construir la cabecera del sitio, se a\u00f1ade este breve fragmento de c\u00f3digo en el lugar donde debe aparecer el logotipo:<\/p>\n
<div class=\"site-logo\"><?php the_custom_logo(); ?><\/div><\/code><\/pre>\nResultado:<\/p>\n
![\"Pantalla](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/secondary-menu-edit-header-before.png\")
La cabecera del sitio tras actualizar el logotipo en el Personalizador de temas.<\/figcaption><\/figure>\n Cambiar la cabecera de WordPress editando los archivos del tema<\/h2>\n
Arriba, cuando personalizamos la cabecera en un tema de bloques utilizando el Editor de Sitios, a\u00f1adimos un men\u00fa secundario con un enlace a la Tienda<\/strong>. Ten\u00edamos libertad para colocar ese bloque de navegaci\u00f3n donde quisi\u00e9ramos dentro de nuestra cabecera. Nuestra versi\u00f3n cl\u00e1sica del tema no tiene ninguna ubicaci\u00f3n reservada para dicho men\u00fa, as\u00ed que tendremos que editar el c\u00f3digo PHP relacionado con la cabecera para realizar el cambio.<\/p>\n
Podr\u00edamos simplemente abrir el archivo de tema apropiado y a\u00f1adir manualmente el HTML para nuestro men\u00fa secundario, pero eso ser\u00eda poco previsor. M\u00e1s adelante, puede que queramos actualizar el texto de nuestro enlace de compra (\u00bfComprar ahora?), cambiar su URL<\/a> o a\u00f1adir otro elemento a ese men\u00fa (\u00bfIniciar sesi\u00f3n?).<\/p>\n
Queremos a\u00f1adir una nueva navegaci\u00f3n a la cabecera que est\u00e9 registrada en el Personalizador, permitiendo cambiar el contenido del men\u00fa secundario en el editor de men\u00fas de WordPress sin tener que volver al c\u00f3digo del tema.<\/p>\n
Antes de empezar: Haz una copia de seguridad<\/h3>\n
Profundizar en el c\u00f3digo PHP de tu tema cl\u00e1sico de WordPress para personalizar la cabecera de tu sitio suele describirse como editar el archivo
header.php<\/code>. Este es el caso en muchos temas, pero otros pueden combinar varios archivos para construir una \u00fanica cabecera.<\/p>\nAntes de realizar cambios en los archivos del tema, haz copias de seguridad. Aqu\u00ed te explicamos c\u00f3mo hacer copias de seguridad<\/a> y c\u00f3mo restaurarlas<\/a>.<\/p>\n
Incluso con copias de seguridad, puedes tener problemas cuando una actualizaci\u00f3n de un tema de terceros sobrescriba tus cambios. Tus modificaciones podr\u00edan desaparecer del sitio hasta que puedas restaurar los archivos del tema modificado a partir de una copia de seguridad. Por eso te recomendamos encarecidamente que crees un tema hijo<\/a> s\u00f3lo para tus archivos modificados y que pruebes las actualizaciones en un sitio staging de WordPress<\/a>.<\/p>\n
Editar una cabecera de WordPress en un tema cl\u00e1sico<\/h3>\n
Nuestro tema cl\u00e1sico de muestra tiene un lugar reservado en la cabecera para la navegaci\u00f3n principal. En el Personalizador, podemos seleccionar el men\u00fa de WordPress que queremos asignar a esa ubicaci\u00f3n. En nuestro caso, ese men\u00fa se llama \u00abMen\u00fa principal\u00bb.<\/p>\n
Tambi\u00e9n hay ubicaciones en el tema para la navegaci\u00f3n por el pie de p\u00e1gina y los enlaces sociales, pero puedes ver a continuaci\u00f3n que no est\u00e1n habilitadas actualmente:<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-theme-primary-menu-create.png\")
Editar men\u00fas en el Personalizador de un tema cl\u00e1sico.<\/figcaption><\/figure>\n Si echamos un vistazo al script
functions.php<\/code> del tema, veremos d\u00f3nde se hace referencia por primera vez a esas ubicaciones de los men\u00fas:<\/p>\n\/\/ This theme uses wp_nav_menu() \nregister_nav_menus(\n array(\n 'primary' => __( 'Primary Navigation', 'seedlet' ),\n 'footer' => __( 'Footer Navigation', 'seedlet' ),\n 'social' => __( 'Social Links Navigation', 'seedlet' ),\n )\n);<\/code><\/pre>\nA continuaci\u00f3n, a\u00f1adimos a ese bloque una entrada para registrar nuestro nuevo men\u00fa \u00abNavegaci\u00f3n secundaria\u00bb:<\/p>\n
\/\/ This theme uses wp_nav_menu() \nregister_nav_menus(\n array(\n 'primary' => __( 'Primary Navigation', 'seedlet' ),\n 'secondary' => __( 'Secondary Navigation', 'seedlet' ),\n 'footer' => __( 'Footer Navigation', 'seedlet' ),\n 'social' => __( 'Social Links Navigation', 'seedlet' ),\n )\n);<\/code><\/pre>\nCuando volvamos al Personalizador, la nueva opci\u00f3n Navegaci\u00f3n Secundaria<\/strong> aparecer\u00e1 en el \u00e1rea Ubicaciones del Men\u00fa<\/strong>:<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-secondary-menu.png\")
Opci\u00f3n de navegaci\u00f3n secundaria registrada en el Personalizador del tema.<\/figcaption><\/figure>\n Podemos dar un nombre a nuestro men\u00fa (Men\u00fa Secundario<\/strong>) y empezar a a\u00f1adirle enlaces. Como hicimos con el Editor del Sitio en el tema basado en bloques, crearemos una entrada para Tienda<\/strong>.<\/p>\n
De vuelta en el archivo del tema para la cabecera, a\u00f1adimos algo de c\u00f3digo que confirme que el men\u00fa de navegaci\u00f3n secundario existe y que tiene al menos una entrada en la lista de enlaces. A continuaci\u00f3n, analizamos el contenido del men\u00fa y lo mostramos:<\/p>\n
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>\n<div id=\"secondary-navigation\" class=\"secondary-navigation\" role=\"navigation\">\n<?php\n\/\/ Get menu slug\n$location_name = 'secondary;\n$locations = get_nav_menu_locations();\n$menu_id = $locations[ $location_name ];\n$menu_obj = wp_get_nav_menu_object( $menu_id );\nwp_nav_menu(\n array(\n 'theme_location' => 'secondary',\n 'menu_class' => 'menu-wrapper',\n 'container_class' => 'secondary-menu-container',\n 'items_wrap' => '<ul id=\"%1$s\" class=\"%2$s\">%3$s<\/ul>',\n )\n);\n?>\n<\/div><!-- #secondary-navigation -->\n<?php endif; ?> \n<div class=\"menu-button-container\">\n<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>\n <button id=\"secondary-open-menu\" class=\"button open\">\n <span class=\"dropdown-icon open\"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?><\/span>\n <span class=\"hide-visually expanded-text\"><?php _e( 'expanded', 'seedlet' ); ?><\/span>\n <\/button>\n<?php endif; ?>\n<\/div><\/code><\/pre>\n - Selecciona Justificar elementos a la derecha.<\/strong><\/li>\n<\/ol>\n
- Elige tu logotipo en la biblioteca multimedia de WordPress o s\u00fabelo desde el disco.<\/li>\n<\/ol>\n
- Usar el Personalizador de WordPress<\/strong>: No pretendemos hacerte sentir viejo, pero los temas que solo pueden modificarse utilizando el Personalizador, en su d\u00eda revolucionario, y los widgets asociados se denominan temas \u00abcl\u00e1sicos\u00bb. A pesar del nombre que suena retro, todav\u00eda se siguen lanzando nuevos temas de estilo cl\u00e1sico, sum\u00e1ndose a los miles que ya existen en el mercado. En comparaci\u00f3n con el Editor de Sitios y los temas de Bloques, el Personalizador y los temas Cl\u00e1sicos ofrecen menos opciones para la personalizaci\u00f3n del encabezado.<\/li>\n
- Navegaci\u00f3n principal:<\/strong> Si tu sitio web tiene m\u00e1s de una p\u00e1gina, los visitantes probablemente buscar\u00e1n un men\u00fa de navegaci\u00f3n cerca de la parte superior de cada p\u00e1gina.<\/li>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/secondary-menu-edit-header-after.png\")