Odzyskaj swój nagłówek z ...

1. Rozwiązanie - Usuń h1 z tytułu bloga i umieść tytuł postu w h1 na pojedynczych postach i stronach:
2. Krok 2 - Usuń tag h1 z tytułu bloga na pojedynczych postach i stronach:
3. Krok 3 - Stylizuj nowy identyfikator #blogTitle i nowe tagi h1
4. Wyjaśnienie zmian
5. Nowy zarys dokumentu

Idealnie, twój najważniejszy nagłówek dla każdej strony powinien być zawinięty w znacznik h1, następne najważniejsze nagłówki w h2 i tak dalej. WordPress wykonuje świetną robotę z tego pola po stronie głównej, owijając nazwę twojego bloga tagiem h1 i wszystkimi indywidualnymi tytułami postów na stronie głównej w tagu h2. Niestety, nie działa to dobrze na stronach z pojedynczym postem.

Domyślnie pojedyncze posty mają taki sam format konspektu jak strona główna… tytuł bloga zawinięty w h1 i tytuł postu zawinięty w h2. Ale czy nie chcesz, aby tytuł Twojego posta, przynajmniej na poszczególnych stronach postów, był uważany za najważniejszy nagłówek na tej stronie? Oczywiście, że tak… oto jak…

Domyślna konfiguracja konturu strony głównej WordPress (dobra)…

Struktura nagłówka strony głównej WordPress jest dobra

A WordPress domyślnie konfiguruje kontur jednopostaciowy (zły)…

Domyślna struktura nagłówka na pojedynczych postach jest zła

Rozwiązanie - Usuń h1 z tytułu bloga i umieść tytuł postu w h1 na pojedynczych postach i stronach:

Znajdź następujący kod w pliku single.php:

<div class = "post" id = "post - <? php the_ID ();?&gt;"> <h2> <a href="<?php echo get_permalink() ?&gt; "rel =" bookmark "title =" Permanent Link: <? Php the_title_attribute ();?&gt; "> <? Php the_title (); ?> </a> </h2>

… I zmień tagi h2 na tagi h1 w ten sposób:

<div class = "post" id = "post - <? php the_ID ();?&gt;"> <h1> <a href="<?php echo get_permalink() ?&gt; "rel =" bookmark "title =" Permanent Link: <? Php the_title_attribute ();?&gt; "> <? Php the_title (); ?> </a> </h1>

Krok 2 - Usuń tag h1 z tytułu bloga na pojedynczych postach i stronach:

Dzięki czytelnikowi Brianowi Brandtowi z WordPress-Themes.dk za wskazanie, że ten post początkowo nie zalecał usuwania tagu h1 z tytułu bloga na pojedynczych postach i stronach, pozostawiając 2 tagi h1 na każdym pojedynczym poście / stronie. Oto kroki, aby usunąć ten tag h1 na dowolnej stronie oprócz strony głównej.

Otwórz header.php i znajdź następujący wiersz:

<h1> <a href="<?php echo get_option('home'); ?&gt; "> <? php bloginfo ('name'); ?> </a> </h1>

Następnie zmień to na:

<? php if (is_home ()):?> <h1> <a href="<?php echo get_option('home'); ?&gt; "> <? php bloginfo ('name'); ?> </a> </h1> <? php else:?> <span id = "blogTitle"> <a href="<?php echo get_option('home'); ?&gt; "> <? php bloginfo ( 'imię'); ?> </a> </span> endif <? php; ?>

Krok 3 - Stylizuj nowy identyfikator #blogTitle i nowe tagi h1

Teraz otwórz swój arkusz stylów i dodaj ten kod ... może być konieczne poprawienie go w zależności od używanego motywu i tego, czy go dostosowałeś (ten artykuł jest oparty na domyślnym motywie dostarczanym z WordPress).

span # blogTitle {display: block; rozmiar czcionki: 4em; wyrównanie tekstu: środek; padding-top: 70px; waga czcionki: pogrubiona; font-family: „Trebuchet MS”, „Lucida Grande”, Verdana, Arial, Sans-Serif; } span # blogTitle a {color: white; dekoracja tekstowa: brak; } span # blogTitle a: hover {text-decoration: none; } .post h1 {color: # 333333; dekoracja tekstowa: brak; rozmiar czcionki: 1.6em; wyrównanie tekstu: lewo; padding-top: 0; }

Wyjaśnienie zmian

Zasadniczo to, co zrobiliśmy w kroku 2 powyżej, to wzięcie oryginalnego kodu, który wyświetla tytuł bloga i zawinął go instrukcją if. Pierwsza część tego wyrażenia mówi: „jeśli aktualnie wyświetlana strona jest stroną główną, pokaż tytuł bloga zawinięty w znaczniki h1, w przeciwnym razie (jeśli bieżąca strona NIE jest stroną główną, wyświetl tytuł bloga, ale zawinąć w znaczniki.

Gdybyśmy tak zostawili, stracilibyśmy tytuł tytułu na blogu, ale strona główna i style naszych postów / stron na pojedynczych postach i stronach nie byłyby poprawne, ponieważ zmieniliśmy je z h2 do h1, skończyłybyśmy na tym, że post i tytuły stron wyglądałyby tak samo jak nasz tytuł na blogu na stronie głównej ... zamiast tego chcemy, aby te tytuły były stylizowane tak samo jak tytuły h2 post / strony na stronie głównej.

Najpierw musimy więc ustawić ten identyfikator bloga, który przypisaliśmy do elementu. Sposób, w jaki to stylizujesz, będzie się różnić w zależności od aktualnie używanego motywu i stylu jego motywu. Przykładowy kod w kroku 3 jest przeznaczony specjalnie dla domyślnego motywu WordPress, ale da ci punkt wyjścia, jeśli użyjesz innego motywu.

Po drugie, tworzymy nowy styl dla .post h1, jak widać w kroku 3 powyżej. Ponownie, style pokazane powyżej są nastawione na domyślny motyw WordPress… jeśli użyjesz innego motywu, będziesz musiał nieco poprawić te style.

Teraz twój kontur wygląda tak, jak powinien, a wyszukiwarki będą lepiej wyposażone, aby zrozumieć, o czym są wszystkie Twoje posty. I w końcu…

Nowy zarys dokumentu

Na poniższym obrazie zauważysz, że brakuje mi znacznika h2 na tej stronie. W przypadku większości witryn nagłówki moich artykułów to h2, ponieważ patrzymy na post z tylko jednym akapitem i bez nagłówków, brakuje nam h2 tagów.

Inną opcją, którą możesz rozważyć, jest usunięcie tagów h3, które widzisz poniżej, dołączonych do „One Response…” i „Leave a Reply”, ponieważ moim zdaniem tak naprawdę nic nie robią.

Niemniej jednak w większości sytuacji tak długo, jak tagi h1 są w porządku, inne nie są tak ważne.

Teraz struktura tagu nagłówka pojedynczego postu jest nieco lepsza