Jak używać AMP z WordPress

AMP to wspólne wysiłki, które obiecują lepsza wydajność ładowania stron dla witryn w środowisku mobilnym. Ale, jak możesz znaleźć w naszym poprzednim samouczku, będziesz musiał poświęcić fantazyjne rzeczy ze swojej strony i ściśle przestrzegać zasad, przestrzegać wytycznych i sprawdzać poprawność stron. To brzmi jak dużo do zrobienia, prawda??

Na szczęście, jeśli zbudowałeś swoją stronę za pomocą WordPress, możesz szybko zastosować AMP na swojej stronie za pomocą wtyczki o nazwie AMP-WP. Jest dostarczany z większą liczbą funkcji niż na pierwszy rzut oka. Zobaczmy, jak to działa.

Aktywacja

Na początek zaloguj się do swojej witryny, przejdź do Wtyczki> Dodaj nowy ekran. Szukać “AMP; zainstaluj i aktywuj ten z Automattic.

Po aktywacji możesz przejrzeć post konwertowany przez AMP, dodając / amp / ślad na końcu adresu URL postu (np. http://wp.com/post/amp/), lub z ?amp = 1 (na przykład. http://wp.com/post/?amp=1) jeśli nie używasz funkcji Pretty Permalinks w swojej witrynie.

Jak widać powyżej, postowi nadano podstawowe stylizacje, które można dodatkowo dostosować.

Zauważyć

Jest kilka rzeczy, które powinieneś wiedzieć o stanie wtyczki w tej chwili:

• Archiwa - Kategoria, Etykietka i Taksonomia niestandardowa - obecnie nie są obsługiwane. Nie zostaną przekonwertowane na format zgodny z AMP. Jednak niestandardowe typy postów mogą być inicjowane w AMP przez filtr.
• Nie dodaje się do nowego ekranu ustawień na pulpicie nawigacyjnym. Dostosowywanie odbywa się na poziomie kodu z akcjami, filtrami, klasą.
• Wtyczka nie obejmuje obecnie wszystkich niestandardowych elementów AMP, takich jak amp-analytics i amp-ad po wyjęciu z pudełka. Jeśli potrzebujesz tych elementów, musisz dołączyć je, włączając się do akcji lub filtrów wtyczki.

Dostosowywanie

Wtyczka zapewnia wiele akcji i filtrów, które zapewniają elastyczność w dostosowywaniu stylów, zawartości strony, a nawet znaczników HTML strony AMP jako całości.

Style

Jestem pewien, że jest to jedna rzecz, którą chcesz zmienić natychmiast po aktywacji wtyczki, np. Zmiana koloru tła nagłówka, rodziny czcionek i rozmiaru czcionki, aby lepiej dopasować markę i osobowość witryny.

Aby to zrobić, możemy użyć amp_post_template_css Akcja w functions.php plik naszego tematu.

function theme_amp_custom_styles () ?> nav.amp-wp-title-bar background-color: orange;   
Jeśli przejrzymy narzędzia DevTools Chrome, te style zostaną dodane do