Карта сайта – какая у вас?

Сен 23

Карты сайта обычно у всех одинаковы – это простыня со списком ссылок, которых чем больше – тем лучше. Считается, что так лучше в плане сео. И хотя для ботов уже давно делают свою карту, в xml, многие продолжают делат как раньше.Особенно часто для вп используют плагин dagon sitemap generator.

Но можно все сделать красиво. Нашел вот примерчик, как можно сделать красивую карту сайта.

slickmap-css-sitemap

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

Сначала CSS:

#maplists{float:left; margin:5; padding:5;}
#maplists a{}
html>body .obj {display: block;width: 35px;padding:0;margin:0;float:left;}
.obj {display: none;}
.sitemap {
	margin: 0 0 40px 0;
	float: left;
	width: 100%;
}
.sitemap h1 {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 20px;
	margin: 0 0 5px 0;
}
.sitemap h2 {
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-size: 10px;
	color: #777777;
	margin: 0 0 20px 0;
}
.sitemap a {
	text-decoration: none;
}
.sitemap ol, ul {
	list-style: none;
}
.sitemap a:link:before,
.sitemap a:visited:before {

	display: block;
	text-transform: uppercase;
	font-size: 10px;
	margin-bottom: 5px;
	word-wrap: break-word;
}

Долгий способ для любитилей поковыряться:

<?php
/*
Template Name: Страница карты
*/
function showAll(){
 echo "<script type=\"text/javascript\">
 <!--
// this tells jquery to run the function below once the DOM is read
$(document).ready(function() {

// choose text for the show/hide link
var showText=\"показать остальные\";
var hideText=\"скрыть\";

$(\".toggle\").prev().append(' <a href=\"#\" class=\"toggleLink\" style=\"color:#959595; font-size:0.8em; font-weight:bold; text-decoration:none;\">'+showText+'</a>');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// change the link depending on whether the element is shown or hidden
if ($(this).html()==showText) {
$(this).html(hideText);
}
else {
$(this).html(showText);
}

// toggle the display
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});

//-->

</script>
";
}
add_action("wp_head", 'showAll');
function inverseHex( $color )
{
 $color       = trim($color);
 $prependHash = FALSE;

 if(strpos($color,'#')!==FALSE) {
 $prependHash = TRUE;
 $color       = str_replace('#',NULL,$color);
 }

 switch($len=strlen($color)) {
 case 3:
 $color=preg_replace("/(.)(.)(.)/","\\1\\1\\2\\2\\3\\3",$color);
 break;
 case 6:
 break;
 default:
 trigger_error("Invalid hex length ($len). Must be a minimum length of (3) or maxium of (6) characters", E_USER_ERROR);
 }

 if(!preg_match('/^[a-f0-9]{6}$/i',$color)) {
 $color = htmlentities($color);
 trigger_error( "Invalid hex string #$color", E_USER_ERROR );
 }

 $r = dechex(255-hexdec(substr($color,0,2)));
 $r = (strlen($r)>1)?$r:'0'.$r;
 $g = dechex(255-hexdec(substr($color,2,2)));
 $g = (strlen($g)>1)?$g:'0'.$g;
 $b = dechex(255-hexdec(substr($color,4,2)));
 $b = (strlen($b)>1)?$b:'0'.$b;

 return ($prependHash?'#':NULL).$r.$g.$b;
}
get_header(); ?>
<div id="posts">
<div>

 <h1>Карта сайта</h1>
 <h2>балуемся потихоньку</h2>

<?php
$color = array("212629", "067778", "49B8A8", "85EDB6", "D9E5CD", "4C4B40", "ECEEBD", "D9D5A3", "6C9987", "96431F");
$tp = $wpdb->prefix;
$categories = $wpdb->get_results("SELECT {$tp}terms.term_id as category_ID, {$tp}terms.name as cat_name, {$tp}term_taxonomy.parent as category_parent FROM {$tp}terms, {$tp}term_taxonomy WHERE {$tp}term_taxonomy.taxonomy = 'category' AND {$tp}terms.term_id = {$tp}term_taxonomy.term_id    GROUP BY category_ID ORDER BY category_parent, cat_name");
$cc = 0;
 foreach($categories as $category){
 if($cc > count($color)){$cc = 0;}?>
 <div style="display:block; float:left; width:99%; border:1px solid #cecece; background: #<?php echo $color[$cc]?>;"><object style="float:left; height:200px" type="image/svg+xml" data="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'>
 <text x='-<?php $x = mb_strlen(trim($category->cat_name))*15; if($x < 60){ $x = 65;} echo $x;?>' y='25' fill='#<?php echo inverseHex($color[$cc]);?>' font-family='Arial' font-size='25' transform='rotate(-90)'><?php echo $category->cat_name;?></text></svg>">
 </object>
 <?php 

 $posts = $wpdb->get_results("SELECT ID, post_title FROM `wp_posts`, `wp_term_relationships`, `wp_term_taxonomy` WHERE `ID` = wp_term_relationships.object_id AND wp_term_relationships.term_taxonomy_id = wp_term_taxonomy.term_taxonomy_id AND wp_term_taxonomy.taxonomy = 'category' AND wp_term_taxonomy.term_id = $category->category_ID AND post_status = 'publish' AND post_type = 'post' ORDER BY post_date DESC;");
 echo "<div style=\"display:inline; width:80%; border-left:1px solid #cecece; float:left; margin:0px;\"><ul id=\"maplists\" style=\"float:left;\">";
 for($i = 0; $i < 10; $i++){
 echo "<li><a href='".get_permalink($posts[$i]->ID)."' style='color:#". inverseHex($color[$cc])."'>".$posts[$i]->post_title ."</a></li>";
 }
 echo "</ul>";
 $posts = array_slice($posts, 10, count($posts));
 if(count($posts) > 0){
 echo "<ul class=\"toggle\" style=\"float:left; margin:-10px 0 10px 0 ;\">";
 foreach($posts as $post){
 echo "<li><a href='".get_permalink($post->ID)."' style='color:#". inverseHex($color[$cc])."'>".$post->post_title ."</a></li>";
 }
 }
 echo "</ul></div>";
 $cc++;

?>

</div>

 <?php }?>

 <?php $wpdb->flush(); ?>  

 </div>
</div>
<?php
get_sidebar();
get_footer();
?>

И быстрыйля ленивых – можно скачать marchs.php.tar, распаковать в свою тему и создать страницу (не пост) с шаблоном Страница карты. Все.

Когда писал эту карту, использовал несколько интересных приемчиков.
Первый – это инвертирование цветов. Можно конечно сначала составить массив с цветами и при генерации для каждого поля выбирать оттуда, а можно рандомно выбирать цвет фона, и инвертировав его, получить цвет текста. Очень удобно.
Еще один прием – это вывести несколько элементов, с которыми потом работает jQuery. Я незнал как это делается, поэтому пришлось немного повозиться.
И еще один – это вывод вертикально написанного текста. Это, конечно, не текст а картинка, но все равно, при данном развитии HTML сойдет. Про него я напишу позже.

Возможно, это будет интересно…

18 Comments

Add your comment

  1. progg.ru
    Сен 23 at 13:51

    Своя карта сайта для вордпресса с использованием jQuery…

    Thank you for submitting this cool story – Trackback from progg.ru…

  2. Пузат
    Сен 26 at 02:10

    Выглядит красиво. Постраничная навигация есть в плагине?

  3. Alex Volkov
    Сен 26 at 11:38

    По умолчанию выводится 8 последних записей. При раскрытии – все.  Постраничная навигация поэтому не нужна

  4. Пузат
    Сен 26 at 20:21

    Что-то поставить не получается, скопировал файл marchs.php в папку с темой, создаю страницу, выбираю тему для неё вариантов кроме как моей темы там больше нет. Что нет так делаю?

  5. Alex Volkov
    Сен 26 at 21:37

    Эмм… Создать новую страницу –> Справа в колонке атрибуты Шаблон –>  Страница карты. Все так делаешь?

  6. Пузат
    Сен 27 at 12:55

    Ааа, получилось, но теперь в конце моей карты сайта выпадает ошибка «<object class=»obj» style=»float:left; height:200px» type=»image/svg+xml» data=»data:image/svg+xml, <text x=’-180′ y=’25′ fill=’#». Что делать?

  7. Alex Volkov
    Сен 27 at 13:06

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

  8. Пузат
    Сен 27 at 14:06

    Отключил, не помогло. Отписался в icq, пока ответа нет.

  9. Красивая карта сайта, ничего не скажешь.

  10. Ksana
    Ноя 13 at 08:38

    Красивая карта, но у меня не работает.
    Отображается одна черная полоса,  даже без текста. Жаль, очень понравилась карта.
    Что я не так сделала?
    Создала страницу sitemap, в качестве шаблона выбрала скачанный файл. Подключила .css.
    и ничего….
     
     

  11. Alex Volkov
    Ноя 13 at 11:24

    Ksana, ну наверно что-то не так делаете. Стукнитесь в асю, помогу с установкой

  12. Vanyusya
    Фев 05 at 11:55

    Великолепная карта сайта. Для моего СДЛ блога пойдет на ура. Посмотрим как установкой получится!

  13. dimas
    Фев 23 at 13:55

    Отличная изящная карта сайта, спасибо автор… и за код спасибо)
    буду пробовать ставить, если что будут вопросы то отпишусь тут…

  14. Рид
    Мар 18 at 11:18

    http://alexvolkov.ru/sitemap
    А пагинация то на карте не работает,
    лучше карту обычным кодом делать с помощью
    get_archives
    list_categories
    list_pages

  15. Alex Volkov
    Мар 18 at 22:48

    Рид, она там какбы и не задумывалась ибо красоту портит

  16. Рид
    Мар 19 at 16:57

    http://alexvolkov.ru/karta-saita-2
    так эта тоже не работает
    выдает 404 ошибку

  17. Alex Volkov
    Мар 19 at 18:53

    Рид, я ее убрал в черновики. Сейчас доступна

  18. dimas
    Июн 23 at 01:39

    Все равно не пашет, но уже другая ошибка =(

Post a comment