все о заработке в интернете
инфо-бизнесе с нуля, электронной коммерции
Мой профиль Вконтакте

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

Приветствую вас, дорогие читатели. Как и обещал, начинаю публиковать серию полезных постов более стабильно и часто. Сегодня я хотел бы рассказать вам, как создать карту сайта без плагина.

Вы спросите, для чего? Карту сайта можно создать и с плагином, о чем я писал в одной из своих статей. Но если вы используете слишком много плагинов на вашем блоге, то это значительно замедляет его работу, что негативно сказывается на продвижении сайта, и поисковые системы понижают его в выдаче.

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

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

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

карта сайта

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

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

Делать карту мы будет на основе уже имеющегося у нас файла page.php, который есть у всех. Чтобы его получить, нужно зайти через ftp-клиент FileZilla к себе на блог и скачать от туда файл page.php. Располагается он по адресу: корневая папка блога (может быть public, httpdocs) – wp-content– themes– название вашей темы. Данный файл может отличаться по своему содержанию, но это ни как не повлияет на создание. Главное, принцип. У меня вот такой код. У вас может быть другой.

<?php get_header(); ?>

<!-- Begin #content -->
<div id="content" itemscope itemtype="http://schema.org/Article">

<?php if (have_posts()) : while (have_posts()) : the_post(); setPostViews(get_the_ID()); ?>

<div class="post">
<h1 class="title" itemprop="name"><?php the_title(); ?></h1>
<span itemprop="articleBody"><?php the_content(); ?></span>
</div>

<?php endwhile; ?>
<?php else : ?>

<h2>Ничего не найдено</h2>
<p>Простите, но по данному адресу ничего нет. Воспользуйтесь навигацией сайта.</p>

<?php endif; ?>
</div>
<!-- end #content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Открываем скопированный файлик при помощи программы notepad++. Ее можно бесплатно скачать в интернете. Вверху перед строкой

<?php get_header(); ?>

Прописываем код

<?php
/*
Template Name: Карта
*/
?>

Затем нам необходимо удалить код, который выводит статью, но оставить стили, отвечающие за правильное отображение, чтобы наша карта сайта была красивой.

У меня он называется: <div id="content">. А может быть, например, <div id="primary">.

После этого я удалил код, который выводит статью до закрывающего тега </div>. Т.е. я удалил то, что показано на рисунке (картинка кликабельна):

2014.08.04-11.09.26

 

И вставил следующий код:

<?php
$cats = get_categories('exclude='); //***Сюда вставьте через запятую ID категорий, которые желаете исключить. Если таких категорий нет, то оставьте поле пустым.

foreach ($cats as $category) {
print '<li><strong>Категория:</strong>&nbsp;<a href="'.get_category_link($category->cat_ID).'">'.$category->name.'</a></li>';
print '<ul>';
query_posts(array('cat' => $category->cat_ID,'showposts'=>1000));
while (have_posts()) {  the_post();
$showed_ids[] = get_the_ID();
?>
<li><a href="<?php the_permalink() ?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>"><?php the_title() ?></a></li>
<?php }
print '</ul>';
}
?>

Также внизу у вас должно быть прописано следующее:

</div>

<!-- end #content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

И так, вот мой финальный код:

<?php
/*
Template Name: Карта
*/
?>
<?php get_header(); ?>

<!-- Begin #content -->
<div id="content">

<h2>Карта сайта</h2>

<?php
$cats = get_categories('exclude='); //***Сюда вставьте через запятую ID категорий, которые желаете исключить. Если таких категорий нет, то оставьте поле пустым.

foreach ($cats as $category) {
print '<li><strong>Категория:</strong>&nbsp;<a href="'.get_category_link($category->cat_ID).'">'.$category->name.'</a></li>';
print '<ul>';
query_posts(array('cat' => $category->cat_ID,'showposts'=>1000));
while (have_posts()) {  the_post();
$showed_ids[] = get_the_ID();
?>
<li><a href="<?php the_permalink() ?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>"><?php the_title() ?></a></li>

<?php }
print '</ul>';
}
?>
</div>

<!-- end #content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Сохраняем наш файл в расширении с названием sitemap.php. И затем загружаем его на хостинг в корневую папку блога.

2014.08.04-11.29.18

Далее нам нужно создать страницу, на которой будет отображаться наша карта. Идем: Страницы – добавить новую. Называем ее «Карта сайта». Справы вы увидите виджет «Атрибуты страницы». Там в выпадающем меню выбираем шаблон нашей страницы:

2014.08.04-11.50.23

Получилась у меня вот такая карта. Не очень красивая.

2014.08.04-11.20.59

Явно отличается от того, что я вам показывал в самом начале. Давайте теперь ее подредактируем. Все дело в стилях. Нам нужно добавить в файл style.css несколько стилей. Каких? Сейчас расскажу.

Нам нужно найти строчку, которая отвечает за вывод названия категории. Заходим в файл style.css и смотрим, где прописан стиль категории (либо вы можете взять мой готовый файл стиля и просто добавить его к себе). Вот код:

.cat_view1 {
margin: 10px 0px 0px -5px!important;
padding-left: 50px;
font: normal 14px Verdana, sans-serif;
color: #6d1011;
}

Добавьте его в файл style.css в конце.

Как правило он будет содержать такой фрагмент в названии, как «cat» или «category».  У меня он называется «cat_view», т.к. как выглядит категория. И так, копируем, что там есть, и называем это «cat_view1». Затем возвращаемся к файлу sitemap.php открываем его в notepad++ и добавляем следующий код, как на рисунке (картинка кликабельна).

2014.08.04-11.46.10

То есть, мы добавили стиль. Сохраняем файл, закидываем его снова на хостинг. Обновляем страницу с картой и смотрим, что еще нужно поправить.

2014.08.04-11.54.36

Как видим, стало уже лучше. Но названия статей все равно стоят очень близко. Чтобы это изменить, можно создать еще один стиль с теми же параметрами и назвать его «cat_view2». Вы можете назвать его по-другому. Добавляем этот стиль туда, где у нас выводятся названия статей. Смотрите на рисунок.

2014.08.04-11.59.24

Здесь я еще в самом начале добавил тег <ul> и с конце </ul>. Он отвечает за вывод маркированного списка.

Далее вы можете поработать с файлом стиля.

2014.08.04-12.01.55

Здесь можно изменить отступы, размер шрифта и так далее.

Вот таким образом можно создать карту сайта. У себя на блоге я не стал выводить названия страниц. Но вы, если хотите, может это сделать. Нужно будет просто добавить код перед закрывающим тегом </div>

<h2>Страницы:</h2>
<ul>
<?php wp_list_pages('exclude=ID&title_li=');?>
</ul>

Здесь также можно будет вставить необходимые стили.

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

На этом все.                 С уважением, Александр Пузатых

Понравилась статья? Поделитесь с друзьями!