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

Статья читается: 2 мин.

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

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

В интернете уже много очень таких статей как сделать карту сайта без плагина и скорее мой способ — не исключение. Мне он просто понравился своей легкостью и тем что можно задать этой карте любые свои стили оформления. Присутствует даже немного 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. В голове целая куча идей и мыслей про которые хотелось бы написать, но сразу не получается! Так что подписывайтесь на обновления моего блога и всегда будьте в курсе событий!!!

А у вас есть карта сайта? Она сделана с помощью плагина или нет?
Вам понравилась статья?
плохохорошо (Пока оценок нет)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на ВордПресс более 5 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на вордресс, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!