

Доброго времени суток, уважаемый читатель!
Как сделать карту сайта для WordPress без сторонних плагинов? Организовать вывод списка всех страниц для поисковиков. Читайте до конца чтобы понять как сделать карту сайта.
И именно без плагинов! Я уже писал почему стараюсь использовать как можно меньше плагинов в статье о том, как ускорить загрузку сайта , поэтому повторяться не буду.
Содержание:
- Делаем шаблон для вывода карты сайта
- Скрипт для эффекта раскрывающегося списка
- Функция вывода карты сайта wordpress
- Делаем красивое оформление
В прошлый раз я рассказывал о том, что такое карта сайта и зачем она нужна. Если вы еще не знаете ответ на этот вопрос, то обязательно прочитайте прошлую статью.
Я реализовал карту сайта на этом блоге именно таким образом. Можете посмотреть здесь
Делаем шаблон страницы для вывода карты сайта
Для того чтобы сделать карту найдите в папке со своей темой
или в панели управления в разделе Внешний вид->Редактор файл page.php
Полностью скопируйте ее содержимое и вставьте код в новый файл с именем sitemap.php
После этого в самом начале этого нового файла sitemap.php Вставьте
<?php
/*
Template Name: sitemap
*/
?>
Скрипт для эффекта раскрывающегося списка
<script type=
"text/javascript"
>
$(document).ready(
function
() {
$(
'#toggle-view li'
).click(
function
() {
var
text = $(this).children(
'div.panel'
);
if
(text.is(
':hidden'
)) {
text.slideDown(
'200'
);
$(this).children(
'span'
).html(
'-'
);
}
else
{
text.slideUp(
'200'
);
$(this).children(
'span'
).html(
'+'
);
}
});
});
</script>
Функция вывода карты сайты WordPress
это место где написано:
<?php the_content(); ?>
<ul id=
"toggle-view"
>
<li>
<h2>Posts</h2>
<span>+</span>
<div
class
=
"panel"
>
<ul>
<?php
$myposts
= get_posts(
'numberposts=-1&offset='
.
$debut
);
foreach
(
$myposts
as
$post
) :
?>
<li
class
=
"sitemap"
><?php the_time(
'd/m/y'
) ?>: <a href=
"<?php the_permalink(); ?>"
><?php the_title(); ?></a></li>
<?php
endforeach
; ?>
</ul>
</div>
<?php
//endwhile; ?>
</li>
<li>
<h2>Pages</h2>
<span>+</span>
<div
class
=
"panel"
>
<ul>
<?php
$myposts
= get_posts(
'numberposts=-1&post_type=page&offset='
.
$debut
);
foreach
(
$myposts
as
$post
) :
?>
<li
class
=
"sitemap"
><?php the_time(
'd/m/y'
) ?>: <a href=
"<?php the_permalink(); ?>"
><?php the_title(); ?></a></li>
<?php
endforeach
; ?>
</ul>
</div>
</li>
</ul>
Делаем красивое оформление карты сайта
Последние штрихи. Давайте обозначим красивые стили в файле style.css вставьте код, находящийся ниже
#toggle-view {
list-style
:
none
;
font-family
:
arial
;
margin
:
0
;
padding
:
0
;
}
#toggle-view h
2
{
border-bottom
:
0px
;
margin-top
:
15px
;
margin-top
:
30px
;
}
#toggle-view h
2:
hover {
color
:
#ff0000
}
#toggle-view li {
margin
:
0px
;
border-bottom
:
1px
solid
#ccc
;
position
:
relative
;
cursor
:
pointer
;
list-style-type
:
none
;
padding-left
:
15px
;
}
#toggle-view span {
position
:
absolute
;
left
:
0px
;
top
:
0
;
color
:
#bdbdbd
;
font-size
:
28px
;
font-weight
:
bold
;
}
#toggle-view span:hover {
color
:
#ff0000
;
}
#toggle-view .panel {
margin
:
5px
0
;
display
:
none
;
}
Артем Губтор
Читайте также:
1 комментарий. Оставить новый
Благодарю за приведённое решение по реализации карты сайта без использования плагина. Код без лишних примочек, нежели это бывает в плагинах.