Как сделать HTML карту сайта на WordPress для посетителей: подробный разбор 3 способов

По другому это оглавление или список, есть разделы, они же рубрики вордпресс, в них находятся записи, и отдельным разделом идут страницы. Вещь удобная и полезная, разберем как реализовать.

Плагин WP Sitemap Page

Разработка таких инструментов как карта сайта для людей не слишком популярное дело, поэтому большинство WordPress дополнений давно перестали обновляться и поддерживаться. Нашел одно решение – это WP Sitemap Page.

Устанавливается стандартно из панели или прямой загрузкой, обходится без api ключа активации. В меню WordPress появится новый пункт идем Настройки > WP Sitemap, откроется окно, отмечу три раздела:

1. Ставить ссылки в nofollow, ставим чекбокс. Если сайт большой, то такое обилие ссылок вызовет негативное влияние на поисковое продвижение
2. Примеры использования значений. По умолчанию выводится название статьи, а в нем ссылка (можете посмотреть на пункт 3).
3. Что будет содержаться в карте сайта: как будут выглядеть пункты, с какими значениями, по умолчанию как на скриншоте
4. Есть настройка для исключения ненужных элементов, нужно узнать и ввести ID

Для примера я захочу вывести когда была написана статья, с помощью параметров, добавлю такую комбинацию к стандартной записи, было так:

<a href="{permalink}">{title}</a>

Вставил значения, получилось:

<a href="{permalink}">{title}</a> {day}:{monthnum}:{year}

Принцип понятен, теперь создаем запись и прописываем шорткод [wp_sitemap_page].

Публикуем, либо через предварительный просмотр смотрим, что получилось.

Все выводятся: название рубрик WordPress, посты и дата публикации. Внешний вид в этом дополнении для создания HTML карты настраивается вручную через CSS, потому что подобрать стиль трудно изначально. Все элементы размечены классами, изменить оформление просто.

Как альтернативу могу предложить Simple Site Map Page, не имеет настроек, указываем где выводить HTML map и он автоматом делает. Не удобно, потому что теряете возможность оперировать и изменять текст.

Не рекомендую устанавливать устаревший dagon design sitemap generator, он не обновлялся 5 лет.

Без плагинов через HTML шаблоны

Метод направлен для людей с более продвинутыми знаниями, и позволяет обойтись без плагинов. Находим файл, который отвечает за вывод страниц на сайте, по умолчанию это page.php откроем его в активной теме. Дам сразу два кода:

<?php
/*
Template Name: Sitemap
*/
?>

И второй:

<?php	
$html = '';
	$cats = get_categories();
	foreach ( $cats as $cat ) {
		$html .= '<h2>Рубрика: ' . $cat->cat_name . '</h2>';
		$html .= '<ul>';
		$posts = get_posts( array(
			'posts_per_page' => - 1,
			'cat'            => $cat->cat_ID,
		) );
		foreach ( $posts as $post ) {
			setup_postdata( $post );
			$category = get_the_category($post->ID);
			if ( $category[0]->cat_ID == $cat->cat_ID ) {
				$html .= '<li><a href="'. get_the_permalink($post->ID) . '" title="' . get_the_title($post->ID) . '">' . get_the_title($post->ID) . '</a></li>';
			}
		}
		wp_reset_postdata();
		$html .= '</ul>';
	}

	$html .= '<h2>Страницы:</h2>';
	$html .= '<ul>';
	$html .= wp_list_pages( 'exclude=ID&title_li=&echo=0' );
	$html .= '</ul>';
	echo $html;
?>

Теперь открываем для редактирования файл page.php (в моем случае), и в верх заношу первый HTML код, а перед выводом контента второй.

Не помещайте теги php друг в друга. Чтобы избежать поломок WordPress и отказа ресурса в работе делаем работу через FTP.

Не обновляем, а сохраняем его как новый с названием sitemap. Закачиваем обратно на сервер, там же где лежит page.

Создаем новую страницу, в правой колонке находим раздел Шаблоны, из выпадающего списка выбираем Sitemap.

Перейдя на сайт с картой можно увидеть такую картину. Аналогичным методом можно сделать форму обратной связи.

Разделим процесс на этапы:

• Находим документ отвечающий за вывод
• Записываем один HTML код на самый верх, второй длинный в то место, где нужен вывод карты
• Сохраняем как новый с названием sitemap
• Загружаем на сервер в папку к родительскому файлу
• Создаем в WordPress новую страницу и задаем шаблон из списка

Карта сайта для людей с шорткодом

Чтобы сделать HTML карту для людей можно воспользоваться шорткодами, выведем не через шаблоны, а с помощью функции. Даю универсальную конфигурацию, копируем и прописываем в файл function.php активной темы.

add_shortcode( 'wpcourses_sitemap', 'wpcourses_sitemap' );
function wpcourses_sitemap() {
    $html = '';
	$cats = get_categories();
	foreach ( $cats as $cat ) {
		$html .= '<h2>Рубрика: ' . $cat->cat_name . '</h2>';
		$html .= '<ul>';
		$posts = get_posts( array(
			'posts_per_page' => - 1,
			'cat'            => $cat->cat_ID,
		) );
		foreach ( $posts as $post ) {
			setup_postdata( $post );
			$category = get_the_category($post->ID);
			if ( $category[0]->cat_ID == $cat->cat_ID ) {
				$html .= '<li><a href="'. get_the_permalink($post->ID) . '" title="' . get_the_title($post->ID) . '">' . get_the_title($post->ID) . '</a></li>';
			}
		}
		wp_reset_postdata();
		$html .= '</ul>';
	}

	$html .= '<h2>Страницы:</h2>';
	$html .= '<ul>';
	$html .= wp_list_pages( 'exclude=ID&title_li=&echo=0' );
	$html .= '</ul>';
	return $html;
}

Теперь в любой записи WordPress вставляем данный shortcode, по аналогии как делали в начале статьи.

[wpcourses_sitemap]

Смотрим что получилось, эффект аналогичный, так же требует редактирования файлов темы WordPress. Советую к прочтению статью создание sitemap xml для поисковиков полезная для SEO продвижения. Для лучшего понимания материала выведу собственное видео.

Итог

Чтобы не мучиться с данной задачей, советую плагин для HTML карты сайта в WordPress. Если думаете, что блог начнет тормозить, то ошибаетесь, действие инструмента будет направлено только на один документ, на других он себя никак не проявит.