Создаем карту сайта без плагина

И снова здравстуйте!

С вами опять на связи ваш покорный слуга, коллега и наконец друг — Юрич! Сегодня мы рассмотри такую тему как создание карты без плагина. Вообще я такого мнения — если что-то можно сделать без плагина — сделай! Чем меньше плагинов — тем лучше.

В интернете уже много очень таких статей как сделать карту сайта без плагина и скорее мой способ — не исключение. Мне он просто понравился своей легкостью и тем что можно задать этой карте любые свои стили оформления. Присутствует даже немного JQuery — ну прям совсем чуть-чуть, но смотрится классно! Итак — вперед!

Карта сайта являются неотъемлемой частью СEO, она позволяет поисковым роботам получать доступ ко всем вашим записям, страницам и другим типам сообщений из одного места. Я использую такую карту на своем сайте, где все перечислено на одной странице. Я сделал переключатели, чтобы скрыть ссылки по умолчанию, так что вы нажимайте на них и увидите как откроется поле со ссылками на записи и рядом будет дата создания этой страницы или записи. С помощью этого метода вы можете включить любые пользовательские типы сообщений, которые ваш сайт использует или может использовать довольно легко.

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

Сделайте копию шаблона страницы page.php и сохраните его как sitemap.php (там все соответствует вашей теме и имеет правильные элементы макета, боковую панель (sidebar) и т.д.), а затем в самом вверху вставьте:

<?php
/*
* Template Name: Карта моего блога
*/
?>

Далее нам понадобится некоторый код JavaScript, который будет обрабатывать переключатели (его можно поместить где-то внизу файла footer.php):

<script type="text/javascript">
$(document).ready(function () {
	
	$('#sitemap li').click(function () {

		var text = $(this).children('div.toggle');

		if (text.is(':hidden')) {
			text.slideDown('300');
			$(this).children('span').html('-');		
		} else {
			text.slideUp('300');
			$(this).children('span').html('+');		
		}
		
	});

});
</script>

А это код для отображения ваших записей и страниц в карте сайта:

<ul id="sitemap">

<li>
<h2>Записи</h2>
<span>+</span>
<div class="toggle">
<ul>
<?php $arg = array(
'numberposts' => -1,
'post_type' => 'post'
) ?>
<?php $vikz = get_posts( $arg );
foreach($vikz as $zacompom) : ?>
<li><?php the_time('d.m.y') ?>: <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
</li>

<li>
<h2>Страницы</h2>
<span>+</span>
<div class="toggle">
<ul>
<?php $arg = array(
'numberposts' => -1,
'post_type' => 'page'
) ?>
<?php $vikz = get_posts( $arg );
foreach($vikz as $zacompom) : ?>
<li><?php the_time('d.m.y') ?>: <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
</li>

</ul>

Если вам нужно добавить пользовательские типы сообщений, то вы можете их добавить столько, сколько хотите, но нужно изменить POST-TYPE-NAME на имя требуемого типа данных:

<li>
<h2>POST-TYPE-NAME</h2>
<span>+</span>
<div class="toggle">
<ul>
<?php $arg = array(
'numberposts' => -1,
'post_type' => 'POST-TYPE-NAME'
) ?>
<?php $vikz = get_posts( $arg );
foreach($vikz as $zacompom) : ?>
<li><?php the_time('d.m.y') ?>: <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
</li>

И наконец добавьте этот кусок кода в свой style.css, чтобы добавить стили для переключателей:

#sitemap {
	list-style: none;
	margin: 0;
	padding: 0;
}
#sitemap h2 {
	margin: 15px 0 30px;
}
#sitemap h2:hover {
	color: blue;
}
#sitemap li {
	margin: 0 0 15px;
	border-bottom: 1px solid #ddd;
	position: relative;
	cursor: pointer;
	list-style: none;
	padding: 0 0 0 15px;
}
#sitemap span {
	position: absolute;
	left: 0;
	top: 0;
	color: #bbb;
	font-size: 26px;
	font-weight: 700;
}
#sitemap span:hover {
	color: red;
}
#sitemap .toggle {
	margin: 5px 0;
	display: none;
}

Все стили не привожу — у всех они будут свои, написал только нужные.

Последнее что нужно сделать — это опубликовать страницу, на которой будет размещена карта сайта: перейдите в админке на вкладку «Страницы» — «Добавить новую», после названия страницы и добавления любого контента в тело страницы выберите «Карта сайта» в раскрывающемся списке справа в разделе «Атрибуты страницы».

Можете сразу и просмотреть страницу. У меня вышло вот так:

На этом буду заканчивать — надеюсь вам понравилось!

До скорой встречи!

P.S. В голове целая куча идей и мыслей про которые хотелось бы написать, но сразу не получается! Так что подписывайтесь на обновления моего блога и всегда будьте в курсе событий!!!

Юрич:

Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.

Похожие записи

Быстрая загрузка сайта на WordPress

Как импортировать/экспортировать блоки Gutenberg в WordPress

15 основных вещей, которые нужно сделать после установки WordPress

Как очистить кеш WordPress: пошаговое руководство

10 распространенных ошибок тем WordPress и как их исправить

21 совет о том, как ускорить блог WordPress. Часть вторая