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

Каждый вебмастер старается сделать сайт удобным и понятным для посетителя. Одной из таких возможностей это 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.

С помощью встроенного модуля темы

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

Рассмотрю, как добавить карту сайта формата HTML в темах от компании WPShop. На примере шаблона Reboot.

Тема Reboot

Создайте новую страницу на сайте и назовите ее «Карта сайта». Советую сменить URL на /sitemap. В тело страницы добавьте шорткод: [htmlsitemap]. И опубликуйте страницу.

Пример карты на Reboot

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

Готовая страница

Рассматриваемый модуль предусмотрен во всех темах WPShop. Шорткод работает не только на страницах, но и в записях.

Если требуется внести изменения в карту сайта, то тема дает несколько удобных опций. Чтобы их найти, нажмите на кнопку «Настроить» прямо на фронтенде для перехода к кастомайзеру.

Переход к настройкам

Далее зайдите в раздел «Модули» > «Карта сайта».

Опции карты сайта Reboot

Вебмастер может настроить формирование карты сайта, используя следующие параметры:

  • Исключить целые рубрики из структуры.
  • Исключить отдельные записи или страницы.
  • Убрать все страницы из карты сайта, оставив только записи.

Чтобы исключить контент, который не должен выводиться на странице HTML-структуры, указывайте ID через запятую и без пробелов.

Если используете тему Reboot от WPShop, то нет смысла устанавливать дополнительные плагины или создавать собственный шорткод для вывода карты сайта. Все реализовано уже изначально в темплейте — интуитивно понятно и удобно.

Забрать Reboot со скидкой

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

Итог

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

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

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

    Понравилось Ваше решение для вывода карты сайта шорткодом. Но мне не надо страницы выводить. После отсечения части, где выводятся страницы, показывается ошибка. Подскажите, плиз, как изменить код.

    1. Нужно удалить вот эти строчки:

      $html .= '<h2>Страницы:</h2>';
      $html .= '<ul>';
      $html .= wp_list_pages( 'exclude=ID&title_li=&echo=0' );
      $html .= '</ul>';
  2. Очень хочется вывести Карту без плагина, но как туда добавить товары? У меня выводятся только страницы, рубрики и посты.
    Ваш код очень хороший.

  3. Спасибо! Мне понравился вариант с shortcode. Идеально работает.
    Один вопрос: как можно исключить некоторые страницы из карты сайта?

  4. Я всегда делаю с помощью плагина WP Sitemap Page (1 способ), быстрее чем как-то ещё и не надо в коде ковыряться. Кстати можно сделать повеселее и добавить пару картинок)

  5. Что делать если тысячи статей, на одной странице они очень долго загружаются.

Добавить комментарий

×
11.11 - выгоднее, чем когда-либо!

Скидка -20% на премиум темы и плагины

Воспользуйся скидкой сейчас