Jednym z pewniejszych sposobów na to, aby Twoja witryna WordPress wyróżniała się na tle konkurencji, jest bycie innym. A jeśli możesz być inny, używając techniki, która jest już bardzo znana, może to być sytuacja korzystna dla obu stron.
Prezentowanie postów WordPress jako osi czasu w stylu Facebooka jest jedną z takich sytuacji.
W tym artykule omówimy, jak zaimplementować oś czasu w witrynie WordPress za pomocą niedawno wydanej wtyczki Timeline Pro.
Niezależnie od tego, co myślisz o Facebooku, jego interfejs i podejście do interakcji z użytkownikiem jest zarówno zrozumiałe, jak i natychmiast znane zdecydowanej większości potencjalnych odbiorców. Wykorzystanie tej znajomości natychmiast sprawia, że odwiedzający czują się jak w domu z oczywistymi potencjalnymi efektami głębszego i trwalszego zaangażowania.
Dobrą wiadomością jest to, że wdrożenie osi czasu w stylu Facebooka dla Twoich postów WordPress to prosty proces krok 3, głównie dzięki wtyczce Timeline Pro z motywów Kento.
Oto zrzut ekranu strony testowej z danymi testowymi z testu WP Michaela Novotnego:
Wartość Testów
Okazało się, że zainstalowanie danych testowych WP na stronie testowej w celu przetestowania wtyczki do tego artykułu było niezamierzonym udarem głównym, ponieważ wtyczka nie jest pozbawiona błędów i przejrzę, jak je naprawić.
Wystarczy powiedzieć, Programiści wtyczek i rzeczywiście każdy, kto buduje witrynę, byłby dobrze poinformowany, aby upewnić się, że testują swoje kreacje za pomocą danych, które są tak wszechstronne, jak testy WP.
Jeśli chcesz po prostu grać z Timeline Pro, w pełni polecam korzystanie z danych WP Test. Musisz również zainstalować wtyczkę Slim Jetpack i włączyć kafelkowe Galerie.
3 Kroki Do Utworzenia Osi Czasu
Krok 1-Pobierz Wtyczkę Timeline Pro
Jak wspomniałem powyżej, istnieje kilka błędów w wersji 1.0 tej wtyczki, więc możesz pobrać tę wersję i dokonać aktualizacji szczegółowych w dalszej części artykułu, lub możesz pobrać zaktualizowaną wersję. Przy odrobinie szczęścia motywy Kento będą mogły wkrótce zaktualizować swoją oficjalną wersję.
Krok 2-Zaktualizuj Ustawienia Domyślne
Wtyczka tworzy nowy element menu administratora, Ustawienia Timeline Pro. Kliknięcie tego elementu pozwala ustawić domyślne ustawienia wyświetlania osi czasu.
Kolory i post-type mogą być w rzeczywistości nadpisywane przez shortcode, ale wyświetlanie miniatur i to, czy pokazać tylko fragment, czy pełną treść, są globalne (co jest wstydem – lepsza byłaby możliwość kontrolowania wszystkich opcji na shortcode).
Polecam do wyświetlenia pełnej treści. Z wyświetlania komentarzy i odpowiedzi są obsługiwane inline za pomocą AJAX, wyświetlanie pełnej treści oznaczałoby nigdy nie musiałby opuścić tę jedną stronę i że czuje się znacznie bardziej satysfakcjonujące doświadczenie użytkownika.
Wybierz swoje preferencje i kliknij na Zapisz Zmiany.
Krok 3-Utwórz Stronę Dla Osi Czasu, Osadzić Krótki Kod
Utwórz stronę WordPress tak, jak zwykle (strony > Dodaj Nowy), a w treści Dodaj następujący shortcode w treści strony:
[timeline_pro]
Spowoduje to wygenerowanie osi czasu. Nawiasem mówiąc, sticky posty są honorowane i są w rzeczywistości wyświetlane na całej szerokości u góry osi czasu.
Krok 4 (Opcjonalnie) – Przypisanie Strony Osi Czasu Jako Strony Głównej
Jeśli chcesz użyć osi czasu jako strony głównej (i skutecznie mieć witrynę na 1 stronie), przejdź do Ustawienia > czytanie i Ustaw wyświetlanie strony głównej na stronę statyczną, a następnie wybierz stronę osi czasu.
Kilka Poprawek
Głównie wtyczka działa zgodnie z oczekiwaniami i ma doskonałe wsparcie dla komentarzy (wyświetlanie i odpowiadanie) oraz ładowanie wcześniejszych postów.
Istnieje jednak tylko kilka błędów, które wymagają adresowania, aby były całkowicie użyteczne. Jak już wspomniano, Mam już te zmiany do tej wersji wtyczki, ale mam udokumentowane zmiany tutaj ze względu na kompletność.
Poprawka 1: CSS Tweak dla zapewnienia, że liczba komentarzy Nie zawija się na Chrome (Mac)
Drobne poprawki, aby zapobiec zawijaniu liczby komentarzy. Działo się to tylko w Chrome na OS X.
Dodaj następującą instrukcję do stylu.css:
.comments-count { white-space: nowrap;}
Poprawka 2: CSS Tweak do prawidłowego wyświetlania list w postach
Sposób, w jaki CSS jest obecnie napisany, oznacza, że wszelkie listy w rzeczywistych postach przyjmują stylizację samej listy osi czasu – nie tego chcemy.
Aby temu zapobiec, znajdź następujące informacje w pobliżu szczytu stylu.css:
.timeline li {
wyświetlacz: inline-block;
margin: 20px 0 !ważne;
padding: 0;
pozycja: względna;
/ style = „text-align:center” / ważne;
vertical-align: top;
Szerokość: 50%;
}
I zmień górną linię na
.timeline li. stic,timeline li .odd,.timeline li. even {
Poprawka 3: Dostosowanie Kodu Do Przetwarzania Skrótów Podczas Wysyłania Treści Postu
Treść postu jest wyprowadzana za pomocą funkcji WordPress get_the_content (). Niestety oznacza to, że skróty nie będą przetwarzane i będą wyświetlane w postaci surowej.
Aby upewnić się, że skrócone kody są przetwarzane, otwórz indeks.php i zastąpić 2 instancje:
$timeline_pro .= „<div class = 'body’>”. get_the_content() .”</div>”;
Z
if ($post – >post_type = = 'page’) {
$content = get_the_content();
} else {
$content = apply_filters(’the_content’, get_the_content());
}
Z jakiegoś powodu, którego nie jestem do końca pewien (jeśli ktoś wie dlaczego, proszę dać mi znać w komentarzach), użycie funkcji apply_filters dla stron powoduje nieskończoną pętlę, stąd sprawdzenie, aby stosować filtry tylko jeśli nie Strona. Przetestowałem przy użyciu niestandardowego typu postu i wydaje się, że działa zgodnie z oczekiwaniami.
Jednostronicowa strona internetowa z dostępem do wszystkich Twoich postów za pośrednictwem mechanizmu znanego zdecydowanej większości użytkowników. Czy Twoja strona internetowa może skorzystać z takiego podejścia?
Tagi:
