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

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

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

Плагин WP Sitemap Page

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

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

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

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

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

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

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

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

Вставляем шорткод плагина WP Sitemap Page
Работа в редакторе

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

Как карта выглядит на сайте
Отображение

Все выводятся: название рубрик, посты и дата публикации. Внешний вид в любом плагине для создания 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 функцию в другую, чтобы избежать казусов и отказа ресурса в работе делаем все через FTP.

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

Закидываем сайтмап обратно на хостинг
Загрузка на сервер

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

Выставляем необходимый шаблон
Выбор шаблона

Перейдя на страницу с картой можно увидеть такую картину.

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

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

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

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

Чтобы сделать карту для людей можно воспользоваться шорткодами, то есть выводить ее не как в предыдущем варианте через шаблоны, а с помощью функции. Даю универсальную конфигурацию, копируем и вставляем в файл 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;
}

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

[wpcourses_sitemap]

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

Итог

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

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

Ntrcn