Sitemap HTML en WordPress

Publicado Por Fernando Tellado el 2 Abr, 2014

mapa del sitio html

Yo creo que a estas alturas es de todos conocida la necesidad de disponer de un mapa del sitio (sitemap) en XML para que los principales buscadores sepan organizar sus «visitas» por tu web, pero también es interesante disponer de un mapa en HTML.

Un mapa del sitio en HTML no solo sirve para ofrecer una vista jerárquica de tu web a los visitantes, lo que de por sí ya formaría parte de tu estructura de enlaces internos, sino que también es un estándar veterano que los buscadores saben reconocer.

Es verdad que hay algunos temas WordPress que ya disponen de una plantilla de página que muestra un mapa del sitio en HTML pero si tu tema no dispone de esta plantilla de página puedes disponer también de tu sitemap HTML con facilidad.

Índice de contenidos

0.1 :: Crear mapa del sitio HTML con código ::
0.2 :: Crear mapa del sitio HTML con plugins ::

1 Páginas
2 Posts por categoría

:: Crear mapa del sitio HTML con código ::

Si no quieres usar plugins no hay problema, puedes crear tu propia plantilla de página y que muestre un mapa del sitio en HTML, los pasos son los siguientes:

Crea un fichero vacío denominado sitemap.php en la carpeta del tema activo.
Abre el archivo recién creado y añade la cabecera que lo identifica como plantilla de página de WordPress y muestra la cabecera de tu tema a continuación, algo así:

PHP
<?php /* Template Name: Mapa del sitio HTML */ ?> <?php get_header(); ?>
1
2
3
4
5
6
<?php
/*
Template Name: Mapa del sitio HTML
*/
?>
<?php get_header(); ?>

A continuación de estas líneas copia el siguiente código, que es el que genera el mapa del sitio en HTML:

<div id="content" >
  <div class="post">
    <div class="title">
      <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Enlace permanente <?php the_title(); ?>">
        <?php the_title(); ?>
<!-- ----------------- Mostramos las entradas y su categoría ----------------- -->
        </a></h2>
    </div>
    <div class="entry siteMap">
      <h2 id="posts">Entradas</h2>
      <ul>
        <?php
// Añadimos categorías separadas por comas, que queramos no mostrar en el mapa,en el exclude
$cats = get_categories('exclude=');
foreach ($cats as $cat) {
  echo "<li><h3>".$cat->cat_name."</h3>";
  echo "<ul>";
  query_posts('posts_per_page=-1&cat='.$cat->cat_ID);
  while(have_posts()) {
    the_post();
    $category = get_the_category();
    // Solo se muestra un enlace de entrada cada vez, aunque esté en varias categorías
    if ($category[0]->cat_ID == $cat->cat_ID) {
      echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
    }
  }
  echo "</ul>";
  echo "</li>";
}
?>
      </ul>
<!-- ----------------- Mostramos las categorías ----------------- -->
      <h2>Categorías</h2>
      <ul>
        <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0&feed=RSS'); ?>
      </ul>  
<!-- ----------------- Mostramos las páginas ----------------- -->
      <h2 id="pages">Páginas</h2>
      <ul>
        <?php
// Añadimos las páginas separadas por comas, que queramos excluir del mapa en el exclude
wp_list_pages(
  array(
    'exclude' => '',
    'title_li' => '',
  )
);
?>
      </ul>
    </div>
  </div>
</div>

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Enlace permanente <?php the_title(); ?>">

<?php the_title(); ?>

</a></h2>

</div>

<h2 id="posts">Entradas</h2>

<ul>

<?php

// Añadimos categorías separadas por comas, que queramos no mostrar en el mapa,en el exclude

$cats = get_categories('exclude=');

foreach ($cats as $cat) {

echo "<li><h3>".$cat->cat_name."</h3>";

echo "<ul>";

query_posts('posts_per_page=-1&cat='.$cat->cat_ID);

while(have_posts()) {

the_post();

$category = get_the_category();

// Solo se muestra un enlace de entrada cada vez, aunque esté en varias categorías

if ($category[0]->cat_ID == $cat->cat_ID) {

echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';

}

echo "</ul>";

echo "</li>";

}

</ul>

<h2>Categorías</h2>

<ul>

<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0&feed=RSS'); ?>

</ul>

<h2 id="pages">Páginas</h2>

<ul>

<?php

// Añadimos las páginas separadas por comas, que queramos excluir del mapa en el exclude

wp_list_pages(

array(

'exclude' => '',

'title_li' => '',

)

);

</ul>

</div>

Al final del código del mapa del sitio añade estos otros códigos para mostrar la barra lateral y el pié de página de tu tema (puede variar, usa la base del fichero page.php de tu tema:

PHP
<?php get_sidebar(); ?> <?php get_footer(); ?>
1
2
<?php get_sidebar(); ?>
<?php get_footer(); ?>

El código final de nuestro archivo sitemap.php quedaría así:

<?php
/*
Template Name: Mapa del sitio HTML
*/
?>
<?php get_header(); ?>
<div id="content" >
  <div class="post">
    <div class="title">
      <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Enlace permanente <?php the_title(); ?>">
        <?php the_title(); ?>
<!-- ----------------- Mostramos las entradas y su categoría ----------------- -->
        </a></h2>
    </div>
    <div class="entry siteMap">
      <h2 id="posts">Entradas</h2>
      <ul>
        <?php
// Añadimos categorías separadas por comas, que queramos no mostrar en el mapa,en el exclude
$cats = get_categories('exclude=');
foreach ($cats as $cat) {
  echo "<li><h3>".$cat->cat_name."</h3>";
  echo "<ul>";
  query_posts('posts_per_page=-1&cat='.$cat->cat_ID);
  while(have_posts()) {
    the_post();
    $category = get_the_category();
    // Solo se muestra un enlace de entrada cada vez, aunque esté en varias categorías
    if ($category[0]->cat_ID == $cat->cat_ID) {
      echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
    }
  }
  echo "</ul>";
  echo "</li>";
}
?>
      </ul>
<!-- ----------------- Mostramos las categorías ----------------- -->
      <h2>Categorías</h2>
      <ul>
        <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0&feed=RSS'); ?>
      </ul>  
<!-- ----------------- Mostramos las páginas ----------------- -->
      <h2 id="pages">Páginas</h2>
      <ul>
        <?php
// Añadimos las páginas separadas por comas, que queramos excluir del mapa en el exclude
wp_list_pages(
  array(
    'exclude' => '',
    'title_li' => '',
  )
);
?>
      </ul>
    </div>
  </div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

<?php

Template Name: Mapa del sitio HTML

<?php get_header(); ?>

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Enlace permanente <?php the_title(); ?>">

<?php the_title(); ?>

</a></h2>

</div>

<h2 id="posts">Entradas</h2>

<ul>

<?php

// Añadimos categorías separadas por comas, que queramos no mostrar en el mapa,en el exclude

$cats = get_categories('exclude=');

foreach ($cats as $cat) {

echo "<li><h3>".$cat->cat_name."</h3>";

echo "<ul>";

query_posts('posts_per_page=-1&cat='.$cat->cat_ID);

while(have_posts()) {

the_post();

$category = get_the_category();

// Solo se muestra un enlace de entrada cada vez, aunque esté en varias categorías

if ($category[0]->cat_ID == $cat->cat_ID) {

echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';

}

echo "</ul>";

echo "</li>";

}

</ul>

<h2>Categorías</h2>

<ul>

<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0&feed=RSS'); ?>

</ul>

<h2 id="pages">Páginas</h2>

<ul>

<?php

// Añadimos las páginas separadas por comas, que queramos excluir del mapa en el exclude

wp_list_pages(

array(

'exclude' => '',

'title_li' => '',

)

);

</ul>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Creamos una nueva página en el editor de WordPress a la que solo tenemos que poner título.
Elegimos la plantilla de página recién creada y publicamos

Lo que obtenemos es un completo mapa del sitio en HTML.

Si quieres puedes descargarte el código completo de la plantilla a continuación:
[download id=»151″]

:: Crear mapa del sitio HTML con plugins ::

Si no nos animamos a crear nuestra propia plantilla de página siempre podemos recurrir a plugins que lo harán por nosotros, estos son algunos:

Solo tienes que elegir el que más te guste.

Si te gusta este contenido prueba tambien a suscribirte al canal en YouTube.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.