Как сделать HTML карту сайта на WordPress для посетителей: подробный разбор 4 способов
По другому это оглавление или список, есть разделы, они же рубрики вордпресс, в них находятся записи, и отдельным разделом идут страницы. Вещь удобная и полезная, разберем как реализовать.
Плагин WP Sitemap Page
Разработка таких инструментов как карта сайта для людей не слишком популярное дело, поэтому большинство WordPress дополнений давно перестали обновляться и поддерживаться. Нашел одно решение – это WP Sitemap Page.
Устанавливается стандартно из панели или прямой загрузкой, обходится без api ключа активации. В меню WordPress появится новый пункт идем Настройки > WP Sitemap, откроется окно, отмечу три раздела:
- Ставить ссылки в nofollow, ставим чекбокс. Если сайт большой, то такое обилие ссылок вызовет негативное влияние на поисковое продвижение
- Примеры использования значений. По умолчанию выводится название статьи, а в нем ссылка (можете посмотреть на пункт 3).
- Что будет содержаться в карте сайта: как будут выглядеть пункты, с какими значениями, по умолчанию как на скриншоте
- Есть настройка для исключения ненужных элементов, нужно узнать и ввести 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.
С помощью встроенного модуля темы
Разработчики тем WordPress, которые думают о своих пользователях, внедряют удобные способы для вывода HTML-карты. В зависимости от конкретной темы, способы добавления страницы со структурой сайта могут отличаться.
Рассмотрю, как добавить карту сайта формата HTML в темах от компании WPShop. На примере шаблона Reboot.
Создайте новую страницу на сайте и назовите ее «Карта сайта». Советую сменить URL на /sitemap. В тело страницы добавьте шорткод: [htmlsitemap]. И опубликуйте страницу.
На этом базовое добавление HTML-структуры на отдельной странице в теме Reboot окончено. Все реализовано крайне удобно. Ниже можно посмотреть, как выглядит страница с картой сайта, созданной на базе Reboot при помощи встроенных инструментов.
Рассматриваемый модуль предусмотрен во всех темах WPShop. Шорткод работает не только на страницах, но и в записях.
Если требуется внести изменения в карту сайта, то тема дает несколько удобных опций. Чтобы их найти, нажмите на кнопку «Настроить» прямо на фронтенде для перехода к кастомайзеру.
Далее зайдите в раздел «Модули» > «Карта сайта».
Вебмастер может настроить формирование карты сайта, используя следующие параметры:
- Исключить целые рубрики из структуры.
- Исключить отдельные записи или страницы.
- Убрать все страницы из карты сайта, оставив только записи.
Чтобы исключить контент, который не должен выводиться на странице HTML-структуры, указывайте ID через запятую и без пробелов.
Если используете тему Reboot от WPShop, то нет смысла устанавливать дополнительные плагины или создавать собственный шорткод для вывода карты сайта. Все реализовано уже изначально в темплейте — интуитивно понятно и удобно.
Забрать Reboot со скидкой
Советую к прочтению статью создание sitemap xml для поисковиков полезная для SEO продвижения. Для лучшего понимания материала выведу собственное видео.
Итог
Чтобы не мучиться с данной задачей, советую плагин для HTML карты сайта в WordPress. Если думаете, что блог начнет тормозить, то ошибаетесь, действие инструмента будет направлено только на один документ, на других он себя никак не проявит.
Пожалуйста, оцените материал:
Здравствуйте уважаемый автор!
Понравилось Ваше решение для вывода карты сайта шорткодом. Но мне не надо страницы выводить. После отсечения части, где выводятся страницы, показывается ошибка. Подскажите, плиз, как изменить код.
Нужно удалить вот эти строчки:
Очень хочется вывести Карту без плагина, но как туда добавить товары? У меня выводятся только страницы, рубрики и посты.
Ваш код очень хороший.
Спасибо! Мне понравился вариант с shortcode. Идеально работает.
Один вопрос: как можно исключить некоторые страницы из карты сайта?
Я всегда делаю с помощью плагина WP Sitemap Page (1 способ), быстрее чем как-то ещё и не надо в коде ковыряться. Кстати можно сделать повеселее и добавить пару картинок)
Что делать если тысячи статей, на одной странице они очень долго загружаются.
Благодарю. Карта сайта начала отображаться.