HTML карта сайта

HTML карта сайта для WordPress — как ее сделать без помощи плагинов

HTML карта сайта

1
1

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Сегодня хочу предложить решение очередной задачи по оптимизации WordPress. Напомню, что с целью настройки и ускорения индексации сайта необходимо создать карту сайта в формате XML для поисковых ботов.

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

HTML карта для сайта или блога WordPress

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

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

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

Простой вариант sitemap в формате HTML

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

Любые изменения в файлах сайта лучше производить с помощью специализированного софта. Я советую применять для этих целей связку FTP-клиент FileZilla (для соединения с сервером вашего хостинга) + продвинутый блокнот Notepad plus plus (для непосредственного редактирования).

Возможно, конечно, использовать только Нотепад с двумя плюсами, если у вас в нем установлен специальный плагин с возможностью соединения по ФТП, просто комплексный вариант, на мой взгляд, гораздо безопаснее (впрочем, выбор за вами).

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

«public_html» - «имя домена» - «wp-content» - «themes» - «название темы» - «page.php»

На его основе мы и будем делать нашу карту сайта WordPress. Прежде всего, вам нужно создать новый файлик в корневой папке темы, воспользовавшись тем же Нотепадом, и придумать для него подходящее название, которое бы в дальнейшем подсказало вам цель его создания, если вы вдруг ее запамятуете. Назвать свежеиспеченный объект можно, скажем, map.php.

Итак, после описанных действий оба файла будут находится на соседних вкладках Notepad++. В теме моего блога содержание page.php выглядит так (к сожалению, невозможно предоставить универсальный вариант на все случаи жизни, поскольку темы у всех разные):

1 <?php
2 /**
3  * The template for displaying all pages
4  * This is the template that displays all pages by default.
5  * Please note that this is the WordPress construct of pages
6  * and that other 'pages' on your WordPress site will use a
7  * different template.
8  *
9  * @since Tiny Forge 1.0
10  */
11  
12 get_header(); ?>
13    <div id="primary" class="site-content">
14        <div id="content" role="main">
15           <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
16            <?php while ( have_posts() ) : the_post(); ?>
17               <?php get_template_part( 'content''page' ); ?>
18               <?php comments_template( '', true ); ?>
19            <?php endwhile// end of the loop. ?>
20           </article><!-- #post -->
21        </div><!-- #content -->
22    </div><!-- #primary -->
23 <?php get_sidebar(); ?>
24 <?php get_footer(); ?>

Далее нужно скопировать содержание page.php и вставить его в map.php, после чего изменить последний соответствующим образом. Каким образом это сделать, мы сейчас и разберем на примере создания sitemap по выше представленному образцу. Имейте ввиду, что содержание вашего файлика page.php может различаться с вариантом, предложенным мною.

Поэтому важно понять принцип редактирования. В шаблонах вашей темы могут быть свои классы и идентификаторы (class и id), отвечающие за оформление контента, отличные от тех, которые вы наблюдаете в составе выше расположенного кода. Их стилевые свойства могут влиять на внешний вид sitemap, а потому, скорее всего, придется произвести отладку дизайна с помощью CSS.

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

Рассматриваем далее наш пример. Оставляем те строчки, которые определяют основную HTML-разметку странички и будем менять только содержимое, находящееся между открывающим и закрывающим тегом article (16 — 19 строки). Первым делом обратите внимание на начало (16) и конец (19) цикла, которые определяют вид выводимого контента.

<?php while ( have_posts() ) : the_post(); ?>
<?php endwhile// end of the loop. ?>

Мы их удалять не будем, поскольку для отображения ссылок на материалы, нужных нам, также работает циклическая функция. В данном случае внутри цикла находятся две строки (17 и 18):

<?php get_template_part( 'content''page' ); ?>
<?php comments_template( '', true ); ?>

Функцию вывода комментариев («comments_template») удаляем сразу, ведь это лишний контент для карты. А вот в отношении строки 17 («get_template_part») необходимо сделать пояснение, чтобы все было понятно. Дело в том, что во многих современных темах WordPress различные веб-страницы, в том числе статические, могут формироваться с помощью нескольких шаблонов.

Этот случай не исключение. Строка 17 как раз и содержит код вызова добавочного шаблона content-page.php, отвечающего за отображение некоторых составляющих страницы, в число которых входит и функция вывода заголовка, который вы прописываете в редакторе админки. Обычно она заключена в соответствующий тег:

<h1 class="entry-title"><?php the_title(); ?></h1>

Но ведь такая конструкция предназначена для автоматического формирования заглавия любой странички, которую вы создаете на своем блоге. В нашем случае мы пытаемся создать особый шаблон, где заголовок будет постоянным. Посему можно просто прописать его в формате HTML над строкой начала цикла (одновременно удалив «get_template_part»):

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

Над ним я добавил функцию, определяющую число ссылок на статьи, которые будут выводиться. В качестве значения «showposts» можно поставить любое число:

<?php query_posts('showposts=1000'); ?>

Итак, мы удалили содержимое цикла, выводящее контент обычной статической вебстраницы, но его надо чем-то заменить, иначе HTML-карта будет пуста. Так как содержание sitemap отличается наличием множества ссылок, которые ведут на посты блога, то вместо строк 17 и 18 вставляем код, который будет выводить эти самые линки на статьи:

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

Но это еще не все. Чтобы обеспечить возможность отображения материалов в виде вертикального списка, задать стили CSS и красиво оформить все это дело через присвоение свойств классам и идентификаторам, заключим все пространство вывода ссылок в контейнер, определяемый тегом ul, а ссылки поместим в тег li:

<?php
/**
 * The template for displaying all pages
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @since Tiny Forge 1.0
 */
  
get_header(); ?>
<div id="primary" class="site-content">
       <div id="content" role="main">
          <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
             <?php query_posts('showposts=1000'); ?>
             <h1>Карта сайта</h1>
             <ul>
             <?php while ( have_posts() ) : the_post(); ?>
               <li>
                <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
               </li>
             <?php endwhile// end of the loop. ?>
             </ul>
          </article><!-- #post -->
       </div><!-- #content -->
   </div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Стиль оформления вывода ссылок будет применен по тем свойствам, которые прописаны для селекторов ul и li вашей текущей темы в файле style.css. Если по каким-то причинам вас не устроит такой вид, то существует возможность заключить весь контент в основополагающий контейнер div и определить для него какой нибудь класс, например class=»html_sitemap»:

<?php
/**
 * The template for displaying all pages
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @since Tiny Forge 1.0
 */
  
get_header(); ?>
   <div id="primary" class="site-content">
       <div id="content" role="main">
          <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
              <?php query_posts('showposts=1000'); ?>
              <div class="html_sitemap">
              <h1>Карта сайта</h1>
               <ul>
                 <?php while (have_posts()) : the_post(); ?>
                  <li>
                    <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
                  </li>
                 <?php endwhile;?>
               </ul>
              </div>
          </article><!-- #post -->
       </div><!-- #content -->
   </div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Теперь работа почти закончена. Но если вы читали статью о создании специальной страницы в WP, то знаете, что для того, чтобы связать созданный шаблон со страницей, необходимо сначала определить его название. Для этого некоторым образом изменим содержание шапки:

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

Вот теперь у нас готов простенький шаблон карты сайта для посетителей:

<?php
/*
Template Name: Карта
*/
?>
 
<?php get_header(); ?>
   <div id="primary" class="site-content">
       <div id="content" role="main">
          <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
              <?php query_posts('showposts=1000'); ?>
              <div class="html_sitemap">
              <h1>Карта сайта</h1>
               <ul>
                 <?php while (have_posts()) : the_post(); ?>
                  <li>
                    <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
                  </li>
                 <?php endwhile;?>
               </ul>
              </div>
          </article><!-- #post -->
       </div><!-- #content -->
   </div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

В принципе, такой шаблон можно использовать для любой темы. Однако, заключительным шагом нужно еще в админке WordPress зайти в раздел «Страницы» — «Добавить новую». Там в поле для заголовка название странички не прописываем, поскольку для нашего образца оно будет указано непосредственно в созданном шаблоне, а вот настроить постоянную ссылку необходимо.

Далее из выпадающего меню «Шаблон» выбираем нужный вариант (в нашем примере «Карта»). Теперь файл map.php связан со страницей и WordPress будет знать, к какому шаблону следует обращаться для ее отображения в браузере:

Вот теперь все. На всякий случай даю набор свойств CSS для sitemap, возможно, они и подойдут:

.html_sitemap H1 {font-size:20pxmargin-bottom:25px}
.html_sitemap ul {list-style-typecircleline-height1.5}
.html_sitemap li a:hover {color:#fea02d}
.html_sitemap li a {color#984802font-weightboldtext-decoration:none}

Если же пожелаете их немного изменить, то вы вволю можете поэкспериментировать используя инструмент разработчика, имеющийся в любом современном браузере и вызываемый нажатием клавиши F12, прообразом которого является одно из лучших расширений Mozilla Firefox, которое позволяет производить все редактирование без реальных изменений в файлах. После того, как добьетесь нужного результата онлайн, внесите полученные стили в файл style.css и дело в шляпе.

Как создать полную HTML карту сайта для Вордпресс

В предыдущей части мы с вами рассмотрели, как сделать простенькую карту для WP, содержащую исключительно ссылки на статьи сайта или блога. Но на практике такой вид применяется редко, разве что на совсем крохотных ресурсах. Я привел этот пример исключительно для демонстрации алгоритма действий в подобных ситуациях. То есть как, не владея языком PHP в совершенстве, научиться редактировать файлы темы, не загружая вас массивными кодами.

Я когда-то находился в подобной ситуации и смотрел на php-файлы как баран на новые ворота. Но постепенно научился различать те или иные функции, отвечающие за определенные области применения. В этом очень помог и до сих пор помогает Codex WordPress. Я даже склоняюсь к мысли выделить отдельную рубрику на блоге для изучения основ PHP, поскольку начинающие вебмастера часто встречаются с серьезными трудностями при редактировании файлов темы.

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

С тем, чтобы добиться возможности более тонкой настройки, используем для наших целей файл function.php (напомню, он находится в корневой директории вашей темы), который позволяет реализовывать самые нетривиальные задачи. Для этого подключитесь к серверу с помощью той же упомянутой мною ранее в этой с статье программы Файлзилла:

Для начала откроем его в том же редакторе Нотепад плюс плюс (с этой целью подведите курсор к function.php, нажатием правой кнопки мышки вызовите контекстное меню и выберите из него «Просмотр/Правка»). Далее вставьте в него вот такой фрагмент:

function sp_html_sitemap() {
    $category = true;        // true - отображать блок с постами, false - нет
    $categoryExclude ''// ID категорий через запятую, которые надо исключить
    $categoryEmpty = true; // true - не показывать пустые категории, false - показывать
    $page = false;           // true - отображать блок со страницами, false - нет
    $pageExclude '';  // ID страниц через запятую, которые надо исключить
    $author = false;         // true - показывать блок с авторами, false - нет
    $authorExcludeAdmin = false; // true - исключить пользователя с логином admin, false - нет
    $result '<div class="html_sitemap">';
    if ($page) {
        $result .= '<h2>Страницы</h2><ul>';
        $result .= wp_list_pages(
            array(
                'exclude' => $pageExclude,
                'title_li' => '',
                'echo' => false,
            )
        );
        $result .= '</ul>';
    }
    if ($category) {
        $cats = get_categories(array(
            'orderby' => 'name',
            'hierarchical' => false,
            'exclude' => $categoryExclude,
            'hide_empty' => $categoryEmpty,
        ));
        $result .= '';
        foreach ($cats as $category) {
            $result .= '<li> <a href="'.get_category_link($category->cat_ID).'">'.$category->name.'</a>';
            $result .= '<ul>';
            query_posts(array('cat' => $category->cat_ID,'showposts'=>1000));
            while (have_posts()) {
                the_post();
                $cat = get_the_category();
                if ($cat[0]->cat_ID == $category->cat_ID) {
                    $result .= '<li>';
                    $result .= '<a href="'.get_permalink().'" rel="bookmark" title="'.get_the_title().'">'.get_the_title().'</a>';
                    $result .= ($categoryDate)?' <span class="time">('.get_the_time('d.m.Y').')</span>':'';
                    $result .= '</li>';
                }
            }
            $result .= '</ul></li>';
        }
        $result .= '</ul>';
    }
    $result .= '</div>';
    wp_reset_query();
    echo $result;
}

Преимущество HTML sitemap, реализованного при содействии замечательного файла function.php состоит в том, что мы получаем гибкий вариант. Гибкость его заключается в том, что вы можете в будущем настроить все по своему желанию. Самые верхние строчки и позволяют внести нужные изменения даже без базовых знаний языка PHP (комментарии, выделенные зеленым, по-моему, достаточно информативны и подскажут вам, что и как надо указать в том или ином случае).

Например, вы в силах исключить отдельные категории и вебстраницы, перечислив их числовые идентификаторы (как определить ID рубрик и страниц в админ-панели WordPress) через запятую (если исключать ничего не надо, то просто не заполняете место между одинарными кавычками):

$categoryExclude '';
$pageExclude '2794, 4366, 12910';

Скажем, логично будет исключить саму страницу «Карта», вебстраницу поиска на сайте (от Google или Yandex), чтобы читатели не любовались на пустое место в недоумении. Если такие странички отсутствуют, то оставьте все как есть.

Дальше берем за основу файл map.php, созданный ранее для простейшего варианта, где вместо фрагмента, заключенного между тегами article, вставляем функцию вызова HTML карты:

<?php sp_html_sitemap(); ?>

Заключаем ее вместе с заголовком в контейнер div с классом для возможности настройки стилей, в итоге получаем следующий код:

<?php
/*
Template Name: Карта
*/
?>
<?php get_header(); ?>
<div id="primary" class="site-content">
        <div id="content" role="main">
          <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <div class="smap">
            <h1>Карта сайта</h1>
            <?php sp_html_sitemap(); ?>
            </div>
          </article>
        </div><!-- #content -->
    </div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Ну и пример стилей CSS для полной карты вы также можете использовать:

.smap h1 {font-size:20pxmargin-bottom:25px}
.html_sitemap ul li{list-style-type:circlemargin-left:25pxline-height:1.3margin-bottom:5px}
.html_sitemap li ul{margin:10px 0 20px 10px}
.html_sitemap li a{color:#984802font-weight:bold}
.html_sitemap li ul a{font-weight:normal}
.html_sitemap li a:hover{color:#fea02d}

Вполне вероятно, я предоставил не все функции, которые следовало бы еще прикрутить к карте. Скажем, можно указать количество статей в каждом архиве, время публикации постов и т.д, но это уже частности, главное, уверен, вы получили. В конце напоминаю о возможности подписки для получения новых материалов блога по e-mail. Это поможет вам быть в курсе событий.

Оставьте комментарий

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

Пролистать наверх