Создаем карту сайта без плагина
И снова здравстуйте!
С вами опять на связи ваш покорный слуга, коллега и наконец друг — Юрич! Сегодня мы рассмотри такую тему как создание карты без плагина. Вообще я такого мнения — если что-то можно сделать без плагина — сделай! Чем меньше плагинов — тем лучше.
В интернете уже много очень таких статей как сделать карту сайта без плагина и скорее мой способ — не исключение. Мне он просто понравился своей легкостью и тем что можно задать этой карте любые свои стили оформления. Присутствует даже немного JQuery — ну прям совсем чуть-чуть, но смотрится классно! Итак — вперед!
Карта сайта являются неотъемлемой частью СEO, она позволяет поисковым роботам получать доступ ко всем вашим записям, страницам и другим типам сообщений из одного места. Я использую такую карту на своем сайте, где все перечислено на одной странице. Я сделал переключатели, чтобы скрыть ссылки по умолчанию, так что вы нажимайте на них и увидите как откроется поле со ссылками на записи и рядом будет дата создания этой страницы или записи. С помощью этого метода вы можете включить любые пользовательские типы сообщений, которые ваш сайт использует или может использовать довольно легко.
Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится — тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.
Чтобы сделать карту сайта для 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. В голове целая куча идей и мыслей про которые хотелось бы написать, но сразу не получается! Так что подписывайтесь на обновления моего блога и всегда будьте в курсе событий!!!
А у вас есть карта сайта? Она сделана с помощью плагина или нет?