() translation by (you can also view the original English article)
Si estás creando un sitio con algunas páginas de nivel superior que quieras destacar a los visitantes y animarles a visitarlas, resultará útil mostrarlas de forma prominentemente en la cabecera de tu sitio.
Por supuesto, puedes añadir páginas de nivel superior al menú de navegación, pero en este tutorial te mostraré cómo añadir algunos enlaces adicionales a estas páginas mediante la función get_pages().
Nota: No debes usar este código en la cabecera del sitio. Si funciona mejor para ti, siempre podrías añadirlo a tu columna lateral o al pie de página editando los archivos sidebar.php o footer.php en lugar de header.php.
En este tutorial voy a crear un tema hijo del tema Twenty Sixteen y luego crearé un duplicado del archivo header.php en el primero, el cual editaré. Nunca deberías editar los archivos de un tema que hayas descargado, ya que cuando lo actualices perderás tu trabajo. Alternativamente, si estás trabajando con tu propio tema, no dudes en añadir este código en él en lugar de hacer lo anterior.
Lo que necesitarás
Para seguir este tutorial necesitarás lo siguiente:
- Una instalación de desarrollo de WordPress.
- Un editor de código.
- Si vas a hacer lo mismo que yo creando un tema hijo del tema Twenty Sixteen, necesitarás tener instalado este último.
Así que, empecemos.
Creación del tema hijo
Comienza creando un tema hijo del tema Twenty Sixteen (a menos que estés trabajando con tu propio tema).
Crea una nueva carpeta en tu carpeta wp-content/themes/ y dale un nombre lógico: yo denomino a la mía tutsplus-page-link-buttons.
Dentro de esa carpeta, crea un nuevo archivo y asígnale el nombre style.css. Ahora abre ese archivo y añádele esto:
1 |
/*
|
2 |
Theme Name: Tuts+ Page Link Buttons
|
3 |
Theme URI: https://.tutsplus.com/tutorials/using-get_pages-to-create-link-buttons-to-your-sites-top-level-pages-creating-the-code--cms-24967
|
4 |
Description: Theme to support tuts+ tutorial on adding buttons to top level pages in your site's header (part 1). Child theme for the Twenty Sixteen theme.
|
5 |
Author: Rachel McCollin
|
6 |
Author URI: http://rachelmccollin.co.uk/
|
7 |
Template: twentysixteen
|
8 |
Version: 1.0
|
9 |
*/
|
10 |
|
11 |
@import url("../twentysixteen/style.css"); |
Edita el código anterior para indicar que este es tu tema, no el mío.
Ahora guarda ese archivo y activa tu nuevo tema en tu sitio.
Duplicado del archivo de cabecera
Como vamos a editar el archivo header.php, necesitamos crear un duplicado de ese archivo a partir del tema Twenty Sixteen en el tema hijo. Encuentra el archivo header.php dentro del tema Twenty Sixteen y cópialo (¡no lo muevas!) en la carpeta de tu nuevo tema.
Ahora tu tema tendrá dos archivos: style.css y header.php. WordPress usará automáticamente el archivo header.php de tu tema hijo en lugar del de Twenty Sixteen, ya que así es como funcionan los temas hijos.
Abre el nuevo archivo header.php para que puedas empezar a editarlo.
Añade los argumentos para get_pages
Voy a añadir mis enlaces a páginas de nivel superior dentro del elemento header, inmediatamente antes de la etiqueta de </header>. Así que encuentra esa línea en tu tema y comienza a añadir nuevo código por encima de la etiqueta de cierre </header>.
En primer lugar, crea los argumentos para get_pages() escribiendo lo siguiente:
1 |
$args = array ( |
2 |
'parent' => 0, |
3 |
'sort_order' => ASC, |
4 |
'sort_column' => 'menu_order' |
5 |
);
|
Esto garantiza que get_pages() solo recupera esas páginas sin padre ('parent' => 0) y las ordena mediante el orden que especifiques en las pantallas de edición de páginas. Si deseas cambiar el criterio de ordenación, utiliza uno o varios de los argumentos que puede encontrar en la página del códice de get_pages().
Añadir la función get_pages()
Ahora, debajo de tus argumentos, añade esto:
1 |
$pages = get_pages( $args ); |
Esto ejecutará la función get_pages() utilizando los argumentos especificados.
Comprueba que existen páginas
Antes de generar más código, desearás comprobar que existen algunas páginas en el nivel superior, así que comprueba que get_pages() haya devuelto algo.
Debajo de la función get_pages(), añade esto:
1 |
if ( $pages ) { |
2 |
|
3 |
}
|
A continuación, añadirás la salida del código dentro de las llaves.
Crear una lista de páginas enlazadas
Ahora la parte divertida. Dentro de las llaves que acabas de añadir, escribe lo siguiente:
1 |
<ul class="top-level-page-links"> |
2 |
|
3 |
<?php foreach ( $pages as $page ) { ?> |
4 |
|
5 |
<li class="page-link"> |
6 |
|
7 |
<a href="<?php echo get_page_link( $page->ID ); ?>"> |
8 |
<?php echo $page->post_title; ?> |
9 |
</a>
|
10 |
|
11 |
</li>
|
12 |
|
13 |
<? } ?> |
14 |
|
15 |
</ul>
|
Esto abre un elemento ul, luego dentro de eso recorre en bucle a través de cada página recuperada por get_pages() y genera su título dentro de un enlace que dirige a él.
Ahora guarda tu archivo.
Visualizar la lista en tu sitio
He añadido algunas páginas ficticias a mi sitio. Como se puede ver en la captura de pantalla, existen tres páginas de nivel superior y una página de segundo nivel, la cual no debería aparecer en mi cabecera:
Y así es como se ven los enlaces en mi sitio:
Como puedes ver, solo aparecen las páginas de nivel superior. Ahora mismo no tiene muy buen aspecto: están apareciendo en una lista simple con viñetas. Así que en el siguiente tutorial, te mostraré cómo aplicarles estilo para que se asemejen a botones.
Resumen
Añadir enlaces a páginas de nivel superior en la cabecera de tu sitio puede ser una forma útil de conducir el tráfico a esas páginas. En lugar de codificar esos enlaces de forma rígida, debes usar la función get_pages() de WordPress para automatizar el proceso. Aquí has aprendido a hacer precisamente esto, y en la siguiente parte te mostraré cómo añadir algo de estilo.
