Alex Volkov

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

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

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

Как поставить себе такую же, по порядочку.

Сначала 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 сойдет. Про него я напишу позже.

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

• Скрыть/показать несколько элементов – примеры jQuery
• Календарь в стиле iCal для архивов в wordpress
• Шпаргалки для разработки
• Постраничная навигация при помощи jQuery
• Создание форм с закругленными уголками
• Как использовать нестандартные шрифты на сайте
• Dagon sitemap generator и проблемы с ЧПУ
• Полезные регулярки.
• Вертикальный текст в html
• Несколько блогов на одном движке вордпресса.