Карты сайта обычно у всех одинаковы — это простыня со списком ссылок, которых чем больше — тем лучше. Считается, что так лучше в плане сео. И хотя для ботов уже давно делают свою карту, в 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 сойдет. Про него я напишу позже.
19 комментариев
Своя карта сайта для вордпресса с использованием jQuery…
Thank you for submitting this cool story — Trackback from progg.ru…
Выглядит красиво. Постраничная навигация есть в плагине?
По умолчанию выводится 8 последних записей. При раскрытии — все. Постраничная навигация поэтому не нужна
Что-то поставить не получается, скопировал файл marchs.php в папку с темой, создаю страницу, выбираю тему для неё вариантов кроме как моей темы там больше нет. Что нет так делаю?
Эмм… Создать новую страницу —> Справа в колонке атрибуты Шаблон —> Страница карты. Все так делаешь?
Ааа, получилось, но теперь в конце моей карты сайта выпадает ошибка «<object class=»obj» style=»float:left; height:200px» type=»image/svg+xml» data=»data:image/svg+xml, <text x=’-180′ y=’25’ fill=’#». Что делать?
Попробуй супер кеш отключить. Я не вижу ошибки, я вижу что код грузится не до конца.
Стукнись в аську, помогу настроить
Отключил, не помогло. Отписался в icq, пока ответа нет.
Красивая карта сайта, ничего не скажешь.
Красивая карта, но у меня не работает.
Отображается одна черная полоса, даже без текста. Жаль, очень понравилась карта.
Что я не так сделала?
Создала страницу sitemap, в качестве шаблона выбрала скачанный файл. Подключила .css.
и ничего….
Ksana, ну наверно что-то не так делаете. Стукнитесь в асю, помогу с установкой
Великолепная карта сайта. Для моего СДЛ блога пойдет на ура. Посмотрим как установкой получится!
Отличная изящная карта сайта, спасибо автор… и за код спасибо)
буду пробовать ставить, если что будут вопросы то отпишусь тут…
http://alexvolkov.ru/sitemap
А пагинация то на карте не работает,
лучше карту обычным кодом делать с помощью
get_archives
list_categories
list_pages
…
Рид, она там какбы и не задумывалась ибо красоту портит
http://alexvolkov.ru/karta-saita-2
так эта тоже не работает
выдает 404 ошибку
Рид, я ее убрал в черновики. Сейчас доступна
Все равно не пашет, но уже другая ошибка =(
У меня вообще сайт поехал,лучше вообще не ставить :(, а так понравилось