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

Каждый вебмастер старается сделать сайт удобным и понятным для посетителя. Одной из таких возможностей это HTML карта WordPress сайта, которая упрощает навигацию.

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

Плагин WP Sitemap Page

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

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

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

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

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

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

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

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

Вставляем шорткод плагина WP Sitemap Page
Вставляем шорткод плагина 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 код, а перед выводом контента второй.

Расположение кода в page
Куда помещать код

Не помещайте теги 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. Если думаете, что блог начнет тормозить, то ошибаетесь, действие инструмента будет направлено только на один документ, на других он себя никак не проявит.

Пожалуйста, оцените материал:

Давно занимаюсь и разрабатываю сайты на Wordpress. Считаю что лучшего решения для ведения бизнеса не найти, поэтому считаю долгом делиться информацией с остальными.
Получай полезные материалы удобным способом!
Добавить комментарий

Ntrcn