Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak dodać Google Web Stories do Twojej witryny WordPress

Zauważyłeś te wciągające wizualne relacje na Instagramie, Facebooku i Snapchacie, które przyciągają uwagę i sprawiają, że odwiedzający przewijają stronę. Możesz dodać ten sam rodzaj atrakcyjnej treści do swojej witryny internetowej WordPress za pomocą Google Web Stories.

Google Web Stories oferuje angażujący sposób na nawiązanie kontaktu z twoją publicznością. Umożliwia udostępnianie krótkich treści, najważniejszych informacji o produktach lub zakulisowych spojrzeń w formacie przyjaznym dla urządzeń mobilnych.

Ten artykuł poprowadzi cię przez proste kroki dodawania relacji Google Web Stories do twojej witryny WordPress, abyś mógł przyciągnąć uwagę odwiedzających i utrzymać ich zaangażowanie.

Adding Google Web Stories in WordPress

Oto tematy, które omówimy w tym artykule:

Czym są internetowe relacje Google?

Google Web Stories to popularny styl krótkich treści podobny do formatu relacji używanych przez platformy mediów społecznościowych, takie jak Instagram, Facebook, Snapchat i YouTube.

Może nie zawsze nazywają się tak samo, ale wszystkie robią to samo.

Są to dotykowe, interaktywne slajdy z bogatą treścią multimedialną, taką jak obrazki, muzyka i filmy. Wszystkie te elementy sprawiają, że są one bardzo angażujące.

Google Web Stories

Dlaczego warto korzystać z Google Web Stories?

Korzystanie z Google Web Stories pozwala przenieść interaktywny format relacji na twoją witrynę internetową. Daje to większą kontrolę i elastyczność oraz nie jest zależne od algorytmu platform zewnętrznych, aby pokazać je twoim odbiorcom.

Poniżej znajduje się kilka innych powodów, dla których warto korzystać z Google Web Stories:

  • Google Web Stories umożliwia przeniesienie formatu relacji na twoją witrynę internetową. Możesz tworzyć i publikować na swojej witrynie interaktywne relacje przystosowane do urządzeń mobilnych.
  • Jest bardzo angażujący, a zaangażowani użytkownicy są bardziej skłonni do konwersji i spędzania więcej czasu na Twojej witrynie internetowej WordPress, co oznacza większą sprzedaż, konwersje i rozwój Twojej firmy i marki.
  • Korzystają one z formatu AMP, obsługują dane strukturalne, a nawet mogą być monetyzowane za pomocą Google AdSense.
  • Relacje internetowe Google mogą być indeksowane i mogą pojawiać się w wynikach wyszukiwania Google i Odkryj.
Stories in Google Discover

W związku z tym przyjrzyjmy się, jak łatwo dodać Google Web Stories do twojej witryny WordPress.

Jak dodać Google Web Stories do WordPressa?

Możesz dodać Google Web Stories do WordPressa za pomocą darmowej wtyczki Web Stories. Stworzona przez Google wtyczka umożliwia projektowanie i tworzenie 111111 pięknych relacji internetowych oraz łatwe publikowanie ich na twojej witrynie.

Najpierw należy zainstalować i włączyć wtyczkę Web Stories. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Web Stories to darmowa wtyczka opracowana i utrzymywana przez Google. Jej celem jest spopularyzowanie formatu Web Stories i wprowadzenie go na niezależne witryny internetowe.

Po włączeniu wtyczki przejdź do strony Historie ” Kokpit, aby utworzyć twoją pierwszą relację.

Możesz zacząć od wybrania jednego z szablonów jako punktu wyjścia dla twojej relacji lub kliknąć przycisk „Utwórz nową relację”, aby zacząć od zera.

Create new story

Zalecamy rozpoczęcie od szablonu, ponieważ zapewnia on dobry start i jest znacznie łatwiejszy dla początkujących.

Po wybraniu szablonu, wtyczka uruchomi interfejs kreatora relacji. Działa on podobnie do popularnych wtyczek typu drag-and-drop page build er dla WordPressa.

story builder

Możesz po prostu wskazać i kliknąć dowolny element, aby go edytować lub utwórz nowe elementy z lewej kolumny.

Można dodawać dźwięk, filmy, obrazki, tekst, nagłówki, naklejki, emotikony i nie tylko.

Add elements to your web story

Jeśli korzystasz z szablonu, na dole zobaczysz dodatkowe strony wygenerowane przez szablon.

Między stronami można przechodzić, klikając je. W razie potrzeby można również usunąć stronę lub utworzyć nową.

Manage pages in your story

Można również kliknąć stronę, aby ustawić kolor tła lub multimedia.

Wybierając kolor tła dla twojej strony, znajdziesz również opcję dodania przycisku wezwania do działania.

Background color and call to action button

Wystarczy dodać adres URL i wybrać ciemny lub jasny motyw.

Opcjonalnie możesz również dodać ikonkę do przycisku wezwania do działania i uczynić twój odnośnik sponsorowanym / nofollow.

Podobnie, jeśli masz zainstalowany WooCommerce, możesz również wyświetlać produkty.

Adding products in web story

Najpierw jednak należy włączyć integrację z WooCommerce w ustawieniach wtyczki(pokażemy, jak to zrobić w dalszej części naszego artykułu).

Gdy jesteś zadowolony z relacji, możesz przejść do karty „Dokument” w lewej kolumnie, aby skonfigurować ustawienia publikacji.

W tym miejscu należy przesłać logo wydawcy (logo twojej witryny internetowej lub ikonka witryny będą odpowiednie) oraz obrazek plakatu dla twojej relacji.

Document settings

W idealnym przypadku obrazek plakatu powinien mieć proporcje 3:4 i minimalną rozdzielczość 640 x 853 pikseli.

Nie zapomnij podać tytułu twojej relacji i opisu. Pomoże to zoptymalizować twoją relację pod kątem SEO i poprawi jej wykrywalność.

Poniżej można wybrać sposób, w jaki strony mają być zaawansowane. Domyślnie strony będą zmieniane w ciągu 7 sekund. Możesz to zmienić lub pozwolić użytkownikom ręcznie dotknąć, aby zmienić stronę.

Additional story settings

Na koniec możesz wybrać kategorie i tagi dla twojej relacji.

Ten krok jest opcjonalny, ale przypisanie twojej relacji do kategorii i dodanie tagów pomoże w SEO.

W prawym dolnym rogu edytora relacji zostanie powiadomiony przycisk oznaczony literą „M”. Kliknięcie go spowoduje wyświetlenie meta boxów dodanych do WordPressa przez wtyczki zainstalowane na twojej witrynie internetowej.

Add custom meta data to your stories

Na przykład, jeśli korzystasz z wtyczki All in One SEO for WordPress, zobaczysz ustawienia SEO.

Z tego miejsca możesz wypełnić tytuł SEO, meta opis i ustawienia schematu dla twojej relacji internetowej.

Add SEO meta data to your web story

Podobnie, jeśli masz zainstalowaną wtyczkę WPCode, możesz dodać własne fragmenty kodu, które chcesz uruchomić, gdy ta relacja jest wyświetlana.

Jest to przydatne, jeśli chcesz używać własnych pikseli śledzących dla twoich relacji.

WPCode meta box

Teraz możesz opublikować swoją relację w sieci.

Wystarczy kliknąć przycisk „Publikuj” w prawym górnym rogu ekranu.

Publish story

Zostanie wyświetlona lista kontrolna przed publikacją. Jeśli wszystko wygląda dobrze, kliknij przycisk publikowania, aby opublikować twoją relację.

Wyświetlanie relacji w WordPressie

Wtyczka pozwoli ci dodać twoją relację do nowego wpisu na blogu, gdy go opublikujesz.

Add story to a post or page

Możesz jednak dodać twoją relację do dowolnego istniejącego wpisu, strony lub panelu bocznego.

Wystarczy edytować wpis lub stronę, na której chcesz wyświetlić relację i dodać blok Web Stories do edytora wpisów.

Web stories block

W ustawieniach bloku można wybrać wiele relacji, najnowsze lub pojedynczą.

Jeśli wybierzesz opcje najnowszych relacji lub wielu relacji, zobaczysz także dodatkowe opcje wyświetlania relacji w okręgu, karuzeli, na liście lub w siatce.

Stories block settings

Po zatwierdzeniu wpisu kliknij przycisk „Aktualizuj” lub „Opublikuj”, aby zapisać twoje zmiany.

Możesz teraz przejść na Twój blog WordPress, aby zobaczyć Twoje internetowe relacje w działaniu.

Oto jak to wyglądało na stronie głównej naszej testowej witryny w formacie wielopiętrowej karuzeli.

Web stories mobile preview

Relacje internetowe są własnym, dostosowanym typem treści w WordPress, co oznacza, że można je wyświetlać tak samo, jak każdą inną stronę lub wpis w WordPress.

Mają one na przykład swoją stronę archiwum, którą można wykorzystać jako stronę docelową dla odwiedzających, lub można je wyróżnić indywidualnie, tak jak w przypadku produktu WooCommerce (który jest również wyświetlany za pomocą własnego typu treści).

Dodawanie integracji do Google Web Stories

Wtyczka Web Stories ma kilka wbudowanych integracji, z których można korzystać.

Integracje te można znaleźć na stronie Relacje ” Ustawienia.

Dodawanie Google Analytics do relacji internetowych

Po pierwsze, możesz dodać tutaj swój identyfikator profilu Google Analytics. Pozwoli to śledzić twoje zobaczenie relacji w raportach Google Analytics.

Add Google Analytics measurement ID

Jeśli korzystasz z MonsterInsights, możesz znaleźć swój identyfikator śledzenia Google Analytics na stronie Insights ” Ustawienia.

Twój identyfikator pomiaru jest wyświetlany w sekcji Profil witryny internetowej.

Find Google Analytics measurement ID in MonsterInsights

Jeśli nie korzystasz z MonsterInsights, identyfikator śledzenia możesz znaleźć w Google Analytics.

Wystarczy przejść do karty „Administrator” i kliknąć „Strumienie danych”.

Google Analytics admin screen

Następnie zobaczysz swoją witrynę internetową i inne profile jako strumienie danych.

Kliknij swój profil witryny internetowej, aby go rozwinąć.

Select website profile

Na następnym ekranie zobaczysz swój profil witryny internetowej wraz z identyfikatorem pomiaru.

Wystarczy skopiować identyfikator pomiaru i wkleić go w ustawieniach wtyczki Web Stories.

Copy measurement ID

Dodawanie własnych krojów pisma do relacji internetowych

Jeśli chcesz użyć określonego kroju pisma w Web Stories, musisz ręcznie przesłać go na twoją witrynę internetową za pomocą FTP.

Wystarczy przesłać plik pisma do katalogu /wp-content/ na twojej witrynie internetowej. Po wgraniu, twój wgrany krój pisma będzie miał następującą lokalizację:

http://example.com/wp-content/font-file-name.ttf

Nie zapomnij zastąpić example. com twoją własną nazwą domeny i font-file-name.ttf rzeczywistą nazwą pliku pisma.

Następnie skopiuj i wklej ten adres URL do sekcji Stories ” Settings w sekcji „Custom Fonts”.

Add custom fonts

Dodawanie integracji monetyzacji w relacjach internetowych

Web Stories obsługuje Google AdSense i Google Ad Manager w zakresie opcji monetyzacji.

Wystarczy wybrać twoją opcję monetyzacji i wpisz wymagane informacje. Potrzebny będzie na przykład identyfikator wydawcy i identyfikator slotu reklamowego dla jednostki reklamowej.

Monetization options

Włącz integracje e-handlu dla relacji internetowych

Jeśli używasz WooCommerce lub Shopify do prowadzenia twojego sklepu internetowego, możesz włączyć obsługę e-handlu dla Web Stories.

Umożliwi to dodawanie produktów do twoich relacji internetowych.

Wystarczy przewinąć w dół do sekcji Zakupy na stronie Relacje ” Ustawienia i wybrać twoją platformę e-handlu z rozwijanego menu.

eCommerce integration for WooCommerce

W przypadku WooCommerce, wtyczka automatycznie zacznie wyświetlać twoje produkty.

W przypadku Shopify konieczne będzie podanie adresu Twojego sklepu i wygenerowanie tokenu dostępu API.

Shopify integration

Jeśli jeszcze go nie masz, kliknij odnośnik „dowiedz się, jak go zdobyć”, a zostaniesz przeniesiony do instrukcji, jak wygenerować Twój token API Shopify.

Mamy nadzieję, że ten artykuł pomógł Ci dodać Google Web Stories do Twojej witryny WordPress. Zachęcamy również do zapoznania się z naszym przewodnikiem na temat osadzania filmów TikTok w WordPressie lub wyborem najlepszych wtyczek WordPress do mediów społecznościowych.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

Jeden komentarzZostaw odpowiedź

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.