Динамическая html карта сайта wordpress без плагина - учимся на практике

27 августа, 2014 Максим Метелев 9033 просмотров 3 комментария

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

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

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

Содержание

1 Что такое HTML карта сайта?
2 Почему вам следует использовать карту сайта на WordPress?
3 Особенности кода моей Карты
4 Создаем страницу с динамической картой сайта по шагам
5 Еще один пример добавления карты сайта
- 5.1 Оригинальный код page.php темы ExplodeTheme
6 Придадим стиль нашей карте сайта
- 6.1 Рекомендую ознакомиться с этими статьями:

Что такое HTML карта сайта?

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

Так им (поисковым роботам) проще просканировать и проиндексировать все содержимое вашего ресурса. Некоторые темы WordPress уже имеют встроенную карту сайта, все что остается это нажать на кнопку «Опубликовать» и буквально одним нажатием ваша карта уже на блоге. Это самый простой вариант. Мы к нему вернемся несколько позже. Сейчас наша задача установить sitemapбез использования плагинов и прочих программ.

Почему вам следует использовать карту сайта на WordPress?

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

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

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

Особенности кода моей Карты

Отображает список авторов с количеством сообщений каждого автора. Авторы без сообщений не отображаются в листинге.
Отображает список страниц. У вас есть возможность исключить страницы по вашему желанию.
Отображает список записей вместе с датой и количеством комментариев к ней в соответствующих категориях.
Показывает сообщение, даже если оно принадлежит к нескольким категориям или подкатегориям.
У вас есть возможность исключить определенные категории или подкатегории.
Пустые рубрики не будут перечислены.
Отображение архивов за месяц.
Код проверяется и корректно работает во всех браузерах
Код протестирован в версии wordpress 3.2.1, но также работает и в более ранних версиях.
Валидный XHTMLкод (динамический html)
Карта сайта динамическая и значит при любом обновлении она меняется автоматом.

Создаем страницу с динамической картой сайта по шагам

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

Шаг 1

Найдите в папке с вашей темой WordPress файл page.php и сделайте его копию, переименуйте ее на page- sitemap.php

Шаг 2

Откройте страницу page-sitemap.php c помощью любого редактора (я предпочитаю Notepad++) или в панели администратора блога.

Шаг 3

Добавьте следующий код (я его пометил как CODE-1) в самое начало page-sitemap.php:

Code-1

<?php
/*
Template Name: HTML Sitemap Page
*/
?>

<?php

Template Name: HTML Sitemap Page

Шаг 4

То, что находится ниже кода, что мы написали в шаге 3, замените на следующий code-2:

<!-- 
/***************************************************************************
* @Author: Boutros AbiChedid 
* @Date:   October 30, 2011
* @Websites: http://bacsoftwareconsulting.com/ ; http://blueoliveonline.com/
* @Description: Code that dynamicaly generates an HTML sitemap for your Blog.
* @Tested on: WordPress version 3.2.1 (but it works on earlier versions.)
****************************************************************************/
-->
<div class="html-sitemap">
    <h2>Author(s):</h2>
    <ul class="sitemap-authors">
    <?php 
       //http://codex.wordpress.org/Function_Reference/wp_list_authors
       wp_list_authors('exclude_admin=1&optioncount=1');
    ?>
    </ul>
         
    <h2>Pages:</h2>
    <ul class="sitemap-pages">
    <?php
      //http://codex.wordpress.org/Function_Reference/wp_list_pages
      wp_list_pages('exclude=889&title_li='); //***Exclude page Id, separated by comma. I excluded the sitemap of this blog (page_ID=889).
    ?>
    </ul> 
      
    <h2>Posts:</h2>
    <ul>
    <?php
    //http://codex.wordpress.org/Function_Reference/get_categories
    $cats = get_categories('exclude='); //***Exclude categories by ID, separated by comma if you like.
     
    foreach ($cats as $cat) {
      echo '<li class="category">'."\n".'<h3><span class="grey">Category: </span>'.$cat->cat_name.'</h3>'."\n";
      echo '<ul class="cat-posts">'."\n";
       
      //http://codex.wordpress.org/Function_Reference/query_posts
      query_posts('posts_per_page=-1&cat='.$cat->cat_ID); //-1 shows all posts per category. 1 to show most recent post.
         
      //http://us3.php.net/while ; http://codex.wordpress.org/The_Loop ; http://codex.wordpress.org/The_Loop_in_Action
      //http://codex.wordpress.org/Function_Reference/the_time ;  http://codex.wordpress.org/Function_Reference/the_permalink 
      //http://codex.wordpress.org/Function_Reference/the_title ; http://codex.wordpress.org/Function_Reference/comments_number
      while(have_posts()): the_post(); 
         //http://codex.wordpress.org/Function_Reference/get_the_category
         $category = get_the_category();
         //Display a post once, even if it is in multiple categories/subcategories. Lists the post in the first Category displayed.
         if ($category[0]->cat_ID == $cat->cat_ID) {?>
            <li><?php the_time('M d, Y')?> &raquo; <a href="<?php the_permalink() ?>"  title="Permanent Link to: <?php the_title(); ?>">
            <?php the_title(); ?></a> (<?php comments_number('0', '1', '%'); ?>)</li>
       <?php } //endif
        endwhile; //endwhile
       ?>
      </ul> 
      </li>
    <?php } ?>
    </ul>
    <?php 
    //http://codex.wordpress.org/Function_Reference/wp_reset_query
    wp_reset_query(); 
    ?>   
    <h2>Archives:</h2>   
    <ul class="sitemap-archives">   
    <?php 
      //http://codex.wordpress.org/Function_Reference/wp_get_archives
      wp_get_archives('type=monthly&show_post_count=true'); 
    ?>   
    </ul>     
</div>

<!--

/***************************************************************************

* @Author: Boutros AbiChedid

* @Date: October 30, 2011

* @Websites: http://bacsoftwareconsulting.com/ ; http://blueoliveonline.com/

* @Description: Code that dynamicaly generates an HTML sitemap for your Blog.

* @Tested on: WordPress version 3.2.1 (but it works on earlier versions.)

****************************************************************************/

-->

<h2>Author(s):</h2>

<?php

//http://codex.wordpress.org/Function_Reference/wp_list_authors

wp_list_authors('exclude_admin=1&optioncount=1');

</ul>

<h2>Pages:</h2>

<?php

//http://codex.wordpress.org/Function_Reference/wp_list_pages

wp_list_pages('exclude=889&title_li='); //***Exclude page Id, separated by comma. I excluded the sitemap of this blog (page_ID=889).

</ul>

<h2>Posts:</h2>

<ul>

<?php

//http://codex.wordpress.org/Function_Reference/get_categories

$cats = get_categories('exclude='); //***Exclude categories by ID, separated by comma if you like.

foreach ($cats as $cat) {

echo '<li class="category">'."\n".'<h3><span class="grey">Category: </span>'.$cat->cat_name.'</h3>'."\n";

echo '<ul class="cat-posts">'."\n";

//http://codex.wordpress.org/Function_Reference/query_posts

query_posts('posts_per_page=-1&cat='.$cat->cat_ID); //-1 shows all posts per category. 1 to show most recent post.

//http://us3.php.net/while ; http://codex.wordpress.org/The_Loop ; http://codex.wordpress.org/The_Loop_in_Action

//http://codex.wordpress.org/Function_Reference/the_time ; http://codex.wordpress.org/Function_Reference/the_permalink

//http://codex.wordpress.org/Function_Reference/the_title ; http://codex.wordpress.org/Function_Reference/comments_number

while(have_posts()): the_post();

//http://codex.wordpress.org/Function_Reference/get_the_category

$category = get_the_category();

//Display a post once, even if it is in multiple categories/subcategories. Lists the post in the first Category displayed.

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

<li><?php the_time('M d, Y')?> » <a href="<?php the_permalink() ?>" title="Permanent Link to: <?php the_title(); ?>">

<?php the_title(); ?></a> (<?php comments_number('0', '1', '%'); ?>)</li>

<?php } //endif

endwhile; //endwhile

</ul>

</li>

<?php } ?>

</ul>

<?php

//http://codex.wordpress.org/Function_Reference/wp_reset_query

wp_reset_query();

<h2>Archives:</h2>

<?php

//http://codex.wordpress.org/Function_Reference/wp_get_archives

wp_get_archives('type=monthly&show_post_count=true');

</ul>

</div>

Примечания по Code-2

Идея выбора page.php возникла с целью сохранения макета страницы (заголовка, сайдбара, футера, всех необходимых элементов дизайна вашего блога) и стиля.
Маленькое примечания от меня, автора блога Smarticle.ru: автор использует в своей работе свою тему, так что внимательно читайте статью, например в теме, с которой он стартовал он использовал шаблон right_sidebar.php темы Clear Line Theme.
У вас у каждого разные темы. В этом коде на 23 строчке автор исключил из списка отображения «Страницы». Внимательно смотрите на ID ваших страниц.

Данный code-2 был протестирован в версиях 3.0 и выше. Итак вы переназвали ваш файл на page-sitemap.php добавили перечисленный код выше, изменили идентификатор ID своих страниц. Теперь переходим к следующему шагу.

Шаг 5

Войдите в админку wordpress. В левой панели выберите Страница -> Добавить новую. Это создаст вам новую страницу как указано ниже:

Динамическая карта сайта без плагина

В окне атрибуты страницы выберите следующий шаблон HTML SitemapPage и нажмите опубликовать. И все!

Еще один пример добавления карты сайта

Даю вам еще один, тоже реальный пример. Есть тема Explode Theme. Ниже вы видите содержимое файла page.php

Оригинальный код page.php темы ExplodeTheme

<?php get_header(); ?>
 
    <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
        <div class="post" id="post-<?php the_ID(); ?>">
            <div class="post_title"><h2><?php the_title(); ?></h2></div>
            <?php edit_post_link('Edit this page', '<div class="post_date">', '</div>'); ?>
             
            <div class="post_body">
                <?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
 
                <div class="clearer">&nbsp;</div>
            </div>
 
            <?php wp_link_pages(array('before' => '<div class="post_meta archive_pagination"><strong>Pages:</strong> ', 'after' => '</div>', 'next_or_number' => 'number')); ?>
 
        </div>        
        <?php endwhile; ?>
 
    <?php else : ?>
        <h2>Not Found</h2>
        <p>Sorry, but you are looking for something that isn't here.</p>
        <?php get_search_form(); ?>
 
    <?php endif; ?>   
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

<?php get_header(); ?>

<?php if (have_posts()) : ?>

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

<?php edit_post_link('Edit this page', '<div class="post_date">', '</div>'); ?>

<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>

</div>

<?php wp_link_pages(array('before' => '<div class="post_meta archive_pagination"><strong>Pages:</strong> ', 'after' => '</div>', 'next_or_number' => 'number')); ?>

</div>

<?php endwhile; ?>

<?php else : ?>

<h2>Not Found</h2>

<p>Sorry, but you are looking for something that isn't here.</p>

<?php get_search_form(); ?>

<?php endif; ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Теперь приступим к созданию карты сайта для этого блога. Перво наперво, как в прошлом варианте я сделал копию файла page.php и переименовал его на page-sitemap.php .

Второе действие я скопировал код (CODE-1 и CODE-2) и добавил в файл page-sitemap.php. Обратите внимание, что Code-1 я вставляю в самый верх, а макеты get_header() , get_sidebar() и get_footer() а также макет страницы сохраняются. Ниже приведен исходный код файла page-sitemap.php для темы Explode Theme, которую автор использовал для своего блога.

<?php
/*
 Template Name: HTML Sitemap Page
*/
?>
<?php get_header(); ?>
 
<div class="post_body"> 
<!-- 
/***************************************************************************
* @Author: Boutros AbiChedid 
* @Date:   October 30, 2011
* @Websites: http://bacsoftwareconsulting.com/ ; http://blueoliveonline.com/
* @Description: Code that dynamicaly generates an HTML sitemap for the Blog.
* @Tested on: WordPress version 3.2.1 (but it works on earlier versions.)
****************************************************************************/
-->
<div class="html-sitemap">
    <h2>Author(s):</h2>
    <ul class="sitemap-authors">
    <?php 
       //http://codex.wordpress.org/Function_Reference/wp_list_authors
       wp_list_authors('exclude_admin=1&optioncount=1');
    ?>
    </ul>
      
    <h2>Pages:</h2>
    <ul class="sitemap-pages">
    <?php
      //http://codex.wordpress.org/Function_Reference/wp_list_pages
      wp_list_pages('exclude=889&title_li='); //***Exclude page Id, separated by comma. I excluded the sitemap of this blog (page_ID=889).
    ?>
    </ul>  
    <h2>Posts:</h2>
    <ul>
    <?php
    //http://codex.wordpress.org/Function_Reference/get_categories
    $cats = get_categories('exclude='); //***Exclude categories by ID, separated by comma if you like.
     
    foreach ($cats as $cat) {
      echo '<li class="category">'."\n".'<h3><span class="grey">Category: </span>'.$cat->cat_name.'</h3>'."\n";
      echo '<ul class="cat-posts">'."\n";
       
      //http://codex.wordpress.org/Function_Reference/query_posts
      query_posts('posts_per_page=-1&cat='.$cat->cat_ID); //-1 shows all posts per category. 1 to show most recent post.
         
      //http://us3.php.net/while ; http://codex.wordpress.org/The_Loop ; http://codex.wordpress.org/The_Loop_in_Action
      //http://codex.wordpress.org/Function_Reference/the_time ;  http://codex.wordpress.org/Function_Reference/the_permalink 
      //http://codex.wordpress.org/Function_Reference/the_title ; http://codex.wordpress.org/Function_Reference/comments_number
      while(have_posts()): the_post(); 
         //http://codex.wordpress.org/Function_Reference/get_the_category
         $category = get_the_category();
         //Display a post once, even if it is in multiple categories/subcategories. Lists the post in the first Category displayed.
         if ($category[0]->cat_ID == $cat->cat_ID) {?>
            <li><?php the_time('M d, Y')?> &raquo; <a href="<?php the_permalink() ?>"  title="Permanent Link to: <?php the_title(); ?>">
            <?php the_title(); ?></a> (<?php comments_number('0', '1', '%'); ?>)</li>
       <?php } //endif
        endwhile; //endwhile
       ?>
      </ul> 
      </li>
    <?php } ?>
    </ul>
    <?php 
    //http://codex.wordpress.org/Function_Reference/wp_reset_query
    wp_reset_query(); 
    ?>
     
    <h2>Archives:</h2>   
    <ul class="sitemap-archives">   
    <?php 
      //http://codex.wordpress.org/Function_Reference/wp_get_archives
      wp_get_archives('type=monthly&show_post_count=true'); 
    ?>   
    </ul>     
</div>
</div>
   
<?php get_sidebar(); ?>
<?php get_footer(); ?>

<?php

Template Name: HTML Sitemap Page

<?php get_header(); ?>

<!--

/***************************************************************************

* @Author: Boutros AbiChedid

* @Date: October 30, 2011

* @Websites: http://bacsoftwareconsulting.com/ ; http://blueoliveonline.com/

* @Description: Code that dynamicaly generates an HTML sitemap for the Blog.

* @Tested on: WordPress version 3.2.1 (but it works on earlier versions.)

****************************************************************************/

-->

<h2>Author(s):</h2>

<?php

//http://codex.wordpress.org/Function_Reference/wp_list_authors

wp_list_authors('exclude_admin=1&optioncount=1');

</ul>

<h2>Pages:</h2>

<?php

//http://codex.wordpress.org/Function_Reference/wp_list_pages

wp_list_pages('exclude=889&title_li='); //***Exclude page Id, separated by comma. I excluded the sitemap of this blog (page_ID=889).

</ul>

<h2>Posts:</h2>

<ul>

<?php

//http://codex.wordpress.org/Function_Reference/get_categories

$cats = get_categories('exclude='); //***Exclude categories by ID, separated by comma if you like.

foreach ($cats as $cat) {

echo '<li class="category">'."\n".'<h3><span class="grey">Category: </span>'.$cat->cat_name.'</h3>'."\n";

echo '<ul class="cat-posts">'."\n";

//http://codex.wordpress.org/Function_Reference/query_posts

query_posts('posts_per_page=-1&cat='.$cat->cat_ID); //-1 shows all posts per category. 1 to show most recent post.

//http://us3.php.net/while ; http://codex.wordpress.org/The_Loop ; http://codex.wordpress.org/The_Loop_in_Action

//http://codex.wordpress.org/Function_Reference/the_time ; http://codex.wordpress.org/Function_Reference/the_permalink

//http://codex.wordpress.org/Function_Reference/the_title ; http://codex.wordpress.org/Function_Reference/comments_number

while(have_posts()): the_post();

//http://codex.wordpress.org/Function_Reference/get_the_category

$category = get_the_category();

//Display a post once, even if it is in multiple categories/subcategories. Lists the post in the first Category displayed.

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

<li><?php the_time('M d, Y')?> » <a href="<?php the_permalink() ?>" title="Permanent Link to: <?php the_title(); ?>">

<?php the_title(); ?></a> (<?php comments_number('0', '1', '%'); ?>)</li>

<?php } //endif

endwhile; //endwhile

</ul>

</li>

<?php } ?>

</ul>

<?php

//http://codex.wordpress.org/Function_Reference/wp_reset_query

wp_reset_query();

<h2>Archives:</h2>

<?php

//http://codex.wordpress.org/Function_Reference/wp_get_archives

wp_get_archives('type=monthly&show_post_count=true');

</ul>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

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

Придадим стиль нашей карте сайта

В конце нам необходимо подогнать нашу карту сайта в соответствие с нашими стилями CSS. Ниже приведен код, который я использовал для своего блога. Этот код вам следует добавить в файл style.css и сделать изменения согласно вашей темы.

/***********************************************************
* @Author: Boutros AbiChedid
* @Date:   October 30, 2011
* @Websites: blueoliveonline.com ; bacsoftwareconsulting.com
* @Desc: Styling the Dynamic HTML Sitemap for WordPress.
************************************************************/
.html-sitemap h2{
padding-top: 10px;
}
.category {
list-style:none;
padding-bottom: 5px;
}
.grey {
color: #777;
background-color: inherit;
}
.cat-posts {
padding-bottom: 10px;
padding-top: 10px;  
}
.cat-posts li{
padding-bottom: 5px;
list-style:square;  
}
.sitemap-authors li, .sitemap-pages li, .sitemap-archives li{
padding-bottom: 5px;
}

/***********************************************************

* @Author: Boutros AbiChedid

* @Date: October 30, 2011

* @Websites: blueoliveonline.com ; bacsoftwareconsulting.com

* @Desc: Styling the Dynamic HTML Sitemap for WordPress.

************************************************************/

.html-sitemap h2{

padding-top: 10px;

}

.category {

list-style:none;

padding-bottom: 5px;

}

.grey {

color: #777;

background-color: inherit;

}

.cat-posts {

padding-bottom: 10px;

padding-top: 10px;

}

.cat-posts li{

padding-bottom: 5px;

list-style:square;

}

.sitemap-authors li, .sitemap-pages li, .sitemap-archives li{

padding-bottom: 5px;

}

Вот и все что я хотел рассказать вам про установку карты сайта на wordpress без использования плагинов Оригинал статьи можете прочитать [urlspan]здесь[/urlspan]