Sitemap: mapa strony internetowej WordPress krok po kroku

Sitemap, czyli mapa strony internetowej

Na samym początku zanim przejdziemy do tego jak krok po kroku dodać na stronie WordPress mapę strony zacznijmy od zastanowienia się czym tak na prawdę jest sitemap oraz jakie są korzyści z jej używania. Głównym założeniem stosowania sitemap, czyli tłumacząc dosłownie na j. polski właśnie mapy strony jest, a przynajmniej powinien być, komfort użytkownika. Mapa strony to nic innego jak swego rodzaju internetowy spis treści, który na danej witrynie internetowej pozwala zobaczyć wszystkie jej podstrony.

Oczywiście mapa strony może zawierać i prezentować tylko niektóre z podstron podczas, gdy inne będą z jakiegoś powodu pomijane. I tutaj dochodzimy do drugiego, bardzo istotnego przeznaczenia mapy strony jakim jest SEO, czyli pozycjonowanie strony w Google. Jak już wspomniałem na samym początku tego wpisu bardzo często mapa witryny internetowej wykorzystywana jest do „pomagania” robotom takim jak Googlebot zrozumienie struktury witryny internetowej. Oczywiście celem nadrzędnym tego jest po prostu wysokie pozycjonowanie strony internetowej w wyszukiwarce w czym bardzo pomaga korzystanie z sitemap.

Samą mapę witryny internetowej dzielimy natomiast na tę w formie XML jak i HTML. Pierwsza z nich generowana jest przez wtyczki takie jak Yoast SEO i dodawana w narzędziu Google Search Console:

Mapa strony XML to nic innego jak lista wszystkich indeksowalnych adresów URL w tym formacie. Taka mapa nie jest więc w pierwszym rzucie widoczna dla użytkownika strony, a w założeniu jest stworzona tylko i wyłącznie dla robotów wyszukiwarek internetowych. Nie ma więc większego sensu tworzyć ją ręcznie tak jak proponuje to większość poradników w internecie skoro robią to znakomite wtyczki, z których i tak praktycznie każdy z nas korzysta 🙃

My natomiast teraz skupimy się na mapie strony w formie HTML, czyli dostępnej dla zwykłego śmiertelnika na jednej z podstron. Zrobimy to na przykładzie platformy WordPress, gdzie zarejestrujemy prosty szablon, który pozwoli nam na wyświetlenie na wskazanej podstronie mapy witryny internetowej w języku HTML. Brzmi prosto? 🤓 no to się przekonajmy, czy tak właśnie jest.

Sitemap: mapa strony w WordPress

Platforma WordPress nie pozwala domyślnie na proste dodanie mapy strony. Oczywiście istnieje wiele sposobów na to jak stworzyć ręcznie taki spis wszystkich stron, ale wymagałoby to przy każdej zmianie struktury witryny internetowej jego aktualizacji. My natomiast chcemy taką mapę strony w HTML, która ręcznie będzie dodawać i/lub usuwać strony zgodnie z naszymi działaniami w panelu administratora. W repozytorium WordPress istnieje wiele wtyczek, które pozwalają osiągnąć podobny efekt, ale często są one zbędnym i przeładowanym dodatkiem dla Twojej strony internetowej. Zamiast tego korzystając z naszego poradnika możesz w bardzo prosty sposób i bez zbędnego kodu stworzyć taką mapę strony internetowej samodzielnie, no prawie.

Zacznijmy jednak od podstaw ☺️ a Ty postępuj zgodnie z naszym poradnikiem krok po kroku.

Krok 1. Dodaj podstronę

Wyświetlenie mapy witryny internetowej w HTML nie jest możliwe bez stworzenia dedykowanej jej zakładki. Nazwa takiej podstrony powinna być intuicyjna dla użytkownika, dlatego sugerujemy nazwać ją np. Mapa strony. Jeżeli nie wiesz jak to zrobić sprawdź ten poradnik: Dodawanie stron WordPress krok po kroku.

Gdy już ją dodasz to zapisz swoje zmiany, opublikuj ją i przejdź do kolejnego kroku.

Krok 2. Stwórz szablon WordPress

Szablon WordPress to plik z rozszerzeniem .php, który pozwala zdefiniować wspólny układ treści dla wielu stron. Dodatkowo korzystając z funkcjonalności szablonów strony internetowej możesz zawrzeć w nim określone treści uniezależniając się od edytorów blokowych takich jak Elementor, WPBaker Page Builder, czy też Gutenberg. Tworzenie szablonu WordPress, a w szczególności tworzenie motywu WordPress wymaga jednak wiedzy programistycznej w zakresie HTML, CSS i oczywiście PHP, ale w tym przypadku obejdziemy się i bez tego.

Aby dodać szablon WordPress pod mapę witryny internetowej stwórz czysty plik np. w notatniku o nazwie mapa-strony.php i umieść go w folderze głównym motywu WordPress, który aktualnie używasz. Następnie dodaj w tym pliku poniższy kod, a następnie go zapisz:

<?php
/*
* Template Name: Mapa strony
*/
get_header(); ?>
<?php get_footer(); ?>

W ten sposób na Twojej platformie WordPress przy dodawaniu lub edycji strony pojawi się szablon o nazwie Mapa strony, który na samym początku wyświetli nagłówek [header] strony, a na jej końcu stopkę [footer]. I to na razie tyle.

Krok 3. Wybierz szablon podstrony

Wróć teraz ponownie do dodanej podstrony o nazwie Mapa strony i wybierz dla niej szablon o takiej samej nazwie. Teraz zapisz zmiany na stronie.

Krok 4. Dodaj kod mapy strony

W kolejnym kroku pora na dodanie kodu mapy strony internetowej, który pozwoli Ci na automatyczne generowanie sitemap w momencie jej podglądania. Taki przykładowy kod znajduje się poniżej i zawiera on zarówno nagłówek oddzielający stronę od wpisów, a także uporządkowaną listę wszystkich adresów URL opublikowanych na stronie WordPress. Każdy z postów będzie natomiast poprzedzony nazwą nadrzędnej kategorii:

<h2 id="pages">Strony</h2>
<ul>
<?php
wp_list_pages(
  array(
    'exclude' => '',
    'title_li' => '',
  )
);
?>
</ul>
<h2 id="posts">Wpisy</h2>
<ul>
<?php
$categories = get_categories();
foreach ($categories as $cat) {
$category_link = get_category_link($cat->cat_ID);
echo '<li><h3> <a href="'.esc_url( $category_link ).'" title="'.esc_attr($cat->name).'">'.$cat->name.'</a></h3>';
echo "<ul>";
  query_posts('posts_per_page=-1&cat='.$cat->cat_ID);
  while(have_posts()) {
    the_post();
    $category = get_the_category();
    if ($category[0]->cat_ID == $cat->cat_ID) {
      echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
    }
  }
  echo "</ul>";
  echo "</li>";
}
?>
</ul>

Taki kod musi znaleźć się pomiędzy nagłówkiem a stopką, a cały plik ostatecznie powinien prezentować się w taki sposób:

<?php
/*
 * Template Name: Mapa strony
 */
get_header(); ?>
<h2 id="pages">Strony</h2>
<ul>
<?php
wp_list_pages(
  array(
    'exclude' => '',
    'title_li' => '',
  )
);
?>
</ul>
<h2 id="posts">Wpisy</h2>
<ul>
<?php
$categories = get_categories();
foreach ($categories as $cat) {
$category_link = get_category_link($cat->cat_ID);
echo '<li><h3> <a href="'.esc_url( $category_link ).'" title="'.esc_attr($cat->name).'">'.$cat->name.'</a></h3>';
echo "<ul>";
  query_posts('posts_per_page=-1&cat='.$cat->cat_ID);
  while(have_posts()) {
    the_post();
    $category = get_the_category();
    if ($category[0]->cat_ID == $cat->cat_ID) {
      echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
    }
  }
  echo "</ul>";
  echo "</li>";
}
?>
</ul>
<?php get_footer(); ?>

Gdy go zapiszesz na serwerze WordPress automatycznie zaktualizuje przypisaną do niego stronę i pojawi się na niej mapa witryny internetowej prezentująca listę wpisów oraz podstron w kolejności alfabetycznej. I to tyle ☺️ jeżeli ten proces okazał się dla Ciebie zbyt trudny to nie martw się: tutaj możesz pobrać gotowy plik, który należy tylko dodać do folderu motywu lub child theme.

Krok 5. Sprawdź swoją mapę witryny

Na sam koniec odwiedź adres URL strojej podstrony i zobacz jak prezentuje się sitemap, czyli mapa witryny internetowej w HTML. Efekt bez zastosowania styli CSS i kodu HTML może nie być piorunujący, ponieważ strony odziedziczy domyślny wygląd motywu, jednak wystarczający do tego, aby zaprezentować na stronie WordPress bez wtyczki mapę witryny w HTML.

Tak stworzona mapa witryny internetowej nie musi być w żaden sposób zgłaszana Google jeżeli korzystasz także z mapy strony w formacie XML. Chociaż nie ma oficjalnego potwierdzenia od Google, że mapa strony w HTML wpływa na pozycje witryny w wyszukiwarce [tak jak np. sitemap w XML] to w rzeczywistości ułatwiając użytkownikowi nawigację po niej podnosisz jej jakość. To z kolei przekłada się w pośredni sposób na pozycje strony w Google, ponieważ zyskuje ona w „oczach” robota Google.

I tak właśnie cegiełka po cegiełce buduje się przez lata SEO ☺️

Stwórz razem z nami sitemap w WordPress

Potrzebujesz pomocy przy tworzeniu mapy witryny WordPress? Skontaktuj się z nami już teraz i dowiedz się jak nasi eksperci mogą pomóc Ci stworzyć mapę witryny oraz inne funkcjonalności na stronie WordPress. Wystarczy, że opiszesz nam swoje potrzeby, a nasz zespół znajdzie dla Ciebie najprostszy i najlepszy sposób ich realizacji ☺️ no to do usłyszenia niebawem ✋