Перейти к содержимому

Html карта сайта для WordPress без плагина

html карта сайта

Понятно, что служит sitemap для навигации, для того чтобы посетитель не заблудился, чтобы можно было одним взглядом определить тематику сайта, и решить интересный он, или нет.

Как без использования плагинов создать и вставить на сайт WordPress так называемую html карту сайта - «карта для людей», карту для посетителей вашего блога.

В одном примере показаны два компактных и изящных типа создаваемой карты сайта, простая статическая и динамическая выводимая с помощью функции WP

Как создать карту сайта html для wordpress

Sitemap html можно создать:

  1. при помощи плагинов например, используя известного «мамонта» «Dagon Design Sitemap Generator»,
  2. можно также воспользоваться функциями CMS которых в вордпресс великое множество, и на все случаи жизни.

Первый вариант с использованием плагина сразу отвергаем (слишком просто), а мы не ищем легких путей, к тому-же плагины влияют на скорость загрузки сайта, лишний раз нагружая сервер.

А вот второй вариант подходит, здесь на одном простом примере можно увидеть и понять принцип работы страницы, шаблона страницы и функций вордпресс. При этом в виде бонуса получаем полезный функционал, статическую или динамическую карту для сайта wordpress.

Итак, поехали.

html код карты сайта

В начале нам потребуется шаблон отвечающий за вывод страницы, воспользуемся стандартным, обычно это page.php, его нужно переделать под свои нужды (Внешний вид – редактор – page.php). Открываем файл, и полностью его копируем, потом вставляем в Notepad++.

Далее в самый верх получившегося файла вставляем следующий код:

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

В том же файле найдите функцию php the_content() и оберните её в «div» вот так:


<div class="colLe">
 <?php the_content(); ?>
 </div>

Каркас готов. Теперь, в только что созданный нами div, вставляем код динамического вывода html карты сайта:


<h2>Все статьи:</h2>

<?php

$cats = get_categories('exclude=ID');

foreach ($cats as $cat) {

echo '<h3>р-ка: '.$cat->cat_name.'</h3>';

echo '<ul>';

query_posts('posts_per_page=-1&cat='.$cat->cat_ID);

while(have_posts()): the_post();

$category = get_the_category();

if ($category[0]->cat_ID == $cat->cat_ID) {?>

<li><a href="<?php the_permalink() ?>"  title="<?php the_title(); ?>"><?php the_title(); ?></a></li>

<?php } endwhile;?>

</ul>

<?php }?>

<?php wp_reset_query();?>

<h3>Страницы:</h3>

<ul>

<?php wp_list_pages('exclude=ID&title_li=');?>

</ul>

Общая картина, должно получиться примерно такая:


<?php

/*

Template Name: Карта

*/

?>

<?php get_header(); ?>

<div class="content">

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

<div class="post-main">

<h1><?php the_title(); ?> <span>(<?php the_time("Y-m-d"); ?>)</span></h1>

<div class="colLe">

<?php the_content(); ?>

<h2>Все статьи:</h2>

<?php

$cats = get_categories('exclude=ID');

foreach ($cats as $cat) {

echo '<h3>р-ка: '.$cat->cat_name.'</h3>';

echo '<ul>';

query_posts('posts_per_page=-1&cat='.$cat->cat_ID);

while(have_posts()): the_post();

$category = get_the_category();

if ($category[0]->cat_ID == $cat->cat_ID) {?>

<li><a href="<?php the_permalink() ?>"  title="<?php the_title(); ?>"><?php the_title(); ?></a></li>

<?php } endwhile;?>

</ul>

<?php }?>

<?php wp_reset_query();?>

<h3>Страницы:</h3>

<ul>

<?php wp_list_pages('exclude=ID&title_li=');?>

</ul>

</div>

</div>

<?php endwhile; ?>

<!-- post navigation -->

<?php else: ?>

<!-- no posts found -->

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

<div class="clear"></div>

<?php get_footer(); ?>

У вас код в шаблоне может быть другим, поэтому будьте внимательны. Здесь главная идея, сохранить дизайн оформления шаблона, например можно удалить сйтбар, но не шапку и футер.

Для динамического вывода обязательно должен присутствовать цикл ( функция the_content работает в цикле), как в нашем случае должна выглядеть примерная схема цикла, смотрите ниже:


if(have_posts):the_post();

the_content();

endif;

Если строчки цикла «не правильные» или их совсем нет, значит нужно менять шаблон страницы (Можно воспользоваться готовым тем, который указан выше, он рабочий) или использовать другие функции вывода.

Получившийся после редактирования файл нужно сохранить с расширением “php”, назвав его при этом, например “Smap.php”.

Кстати, названия «Карта», “Smap” и класс “colLe” можно вполне заменить на свое.

Теперь с помощью ftp клиента Filezila загружаем нашу карту сайта на сервер, в активную тему, туда, где по соседству будут находиться header.php, footer.php и другие файлы темы.

Для настройки дизайна можно воспользоваться (болванкой) заготовкой css. Следите чтобы класс соответствовал вашему классу в шаблоне страницы.


.colLe{}

.colLe h2{}

.colLe h3{}

.colLe ul{list-style-type: none; /* маркеры */}

.colLe li a{text-decoration: none; /* подчеркивание у ссылки */}

 

Как добавить html карту на сайт

Для этого в админ панели выбираем пункт Страницы - добавить новую, вводим заголовок, например Карта сайта, в правой колонке в атрибутах страницы выбираем шаблон, тот который был записан в коде, у меня «карта».

Если нужно, в текстовое поле можно ввести любое послание, или вставить картинку для прикола. Все это отобразится на странице выше или ниже карты сайта, зависит от места вставки основного кода относительно функции the_content.

Вот такими не сложными действиями на CMS вордпресс, не применяя плагины можно сделать очень полезную вещь, динамическую карту сайта.

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

Второй тип: статическая html карта сайта

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

Одним словом статическая html карта «для маленьких»!?. Естественно и трудозатраты на ее создание должны быть минимальны, по сути, добрую половину работ мы мимоходом уже сделали, создавая динамическую карту сайта.

Перечень работ будет следующим:

  1. Создаем страницу sitemap
  2. Заполняем ссылками на статьи сайта
  3. Добавляем стили

Все!! Карта сайта готова. Возможно вы возразите, сказав что забивать ссылки придется до “второго пришествия”, и … ошибетесь потому что есть во первых бесплатный онлайн сервис Sitemap generator html. Во вторых все ссылки можно скопировать из xml карты от плагина, например Yoast SEO, это нам поможет быстро выполнить нудную работу.

Создаем страницу sitemap

Итак, по порядку: Также как при создании динамической html карты сайта, в админке создаем новую страницу, но сейчас нам не нужен именной шаблон, и ничего не нужно забрасывать в файлы активной темы.

Просто жмем на кнопку «добавить новую страницу», пишем нужное название, и … переходим по ссылке http://sitemap.ru или http://itmoment.ru/sitemaphtml, это бесплатные олайн генераторы sitemap, сервисы создают любые карты для сайтов, html в том числе.

На сервисе создаем файл карты и вставляем ее на своем сайте

В форме указываем адрес сайта, нажимаем на «создать sitemap HTML»и вскоре нам предлагают скачать файл с полностью готовой структурой нашей sitemap.

После скачивания возвращаемся в админ панель, на созданную накануне страницу карты, и вставляем содержимое файла sitemap. После публикации, страницей можно полюбоваться.

Добавляем css sitemap

Скорее всего для вновь созданной sitemap page потребуются стили css. Для этого, на сайте в странице нужно щелкнуть правой кнопкой мыши, и в контекстном меню выбрать «исследовать элемент» или «исходный код страницы», после этого с помощью инспектора кода выяснить, какой класс задан для карты сайта, и для этого класса прописывать значения в стилях.

Решаем, какая карта лучше?

Вот теперь можно оценить и сравнить между собой html карты сайта, созданные на вордпресс без лишних плагинов, но симпатичных, удобных и легких.

Если страницы сайта обновляется не очень часто, то нужно использовать статическую sitemap html, так как добавить новую ссылку большого труда не составит. Подозреваю что опытные блогеры всегда используют эту «малышку».

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *