To ciekawa rzecz, ale podczas gdy motywy WordPress w dużej mierze nadal obracają się wokół wypróbowanych i zaufanych metod dostarczania treści i czytania, to twórcy aplikacji przesuwają granice.

Przewijanie poziome jako podejście jest dość unikane przez twórców motywów WordPress, a jednak jest przyjmowane jako technika opowiadania historii, szczególnie na tabletach.

Wyciągnijmy więc liść z tabletu i przyjrzyjmy się, jak przenieść poziome przewijanie treści do treści WordPress.

Screenshots from a tablet with sample horizontal content
Poziomy jest rzadko używany, ale bardzo skuteczny format opowiadania historii

Australian Broadcasting Corporation, lokalny nadawca publiczny, zawsze był innowacyjną siłą w domenie cyfrowej. Jako pierwsza organizacja, która uruchomiła w Australii internetowy serwis telewizyjny, często eksperymentuje i ostatecznie napędza wdrażanie nowych technologii i podejść.

Screenshot of the front page of a story from The Brief about beards
Brief pokazuje, jak skuteczne może być przewijanie poziome

Niedawno wypuścili na rynek dwa nowe magazyny cyfrowe, oparty na aplikacji the Brief I oparty na Newstand The White Paper (Co ciekawe zbudowany przez ramię radiowe korporacji). Zarówno zmiana przeznaczenia istniejących treści, jak i połączenie słowa pisanego z dźwiękiem, wideo, zdjęciami i ilustracjami, aby dostarczyć te historie nowym odbiorcom.

Brief naprawdę wpadł mi w oko i jest powodem tego postu, ponieważ przyjął podejście do poziomego przewijania treści.

Przewijanie poziome z pewnością nie jest wyjątkowe, ale jest rzadkie, zwłaszcza w świecie WordPress. Z dziwnym wyjątkiem, takim jak półka, większość implementacji to po prostu poziome kopie pionowych motywów z dużym naciskiem na efekty paralaksy, które często skutkują prawdziwym sztucznym odczuciem.

Brief pokazuje jednak, że pozioma nie musi być sztuczna i chociaż wymaga więcej pracy niż jej pionowe odpowiedniki, efekt końcowy może być równie skuteczny, jeśli nie bardziej, szczególnie w przypadku urządzeń mobilnych.

W tym artykule omówimy, w jaki sposób możemy wdrożyć poziomo przewijane posty i mamy nadzieję, że zainspirujemy Cię do dalszego zbadania tego niewykorzystanego podejścia.

Tworzenie Treści W Poziomie

W tej implementacji poziomego przewijania nie będziemy po prostu przesuwać całej zawartości w lewo i zastępować pionowego paska przewijania poziomym paskiem przewijania. To nie zapewni wiele doświadczenia.

Raczej treść zostanie podzielona na sekcje, strony, które będą wyświetlane pojedynczo, z prostą nawigacją poprzedni i Następny, aby poruszać się po sekcjach.

Daje to znacznie bardziej satysfakcjonujące wrażenia, a także oznacza, że każda sekcja może być stylizowana całkiem osobno. Nie trzeba długo czytać briefu, aby zobaczyć, że podejście poziome naprawdę korzysta z różnych formatowania.

Tak więc w naszym poście użyjemy prostego [sekcja] shortcode do zawijania zawartości każdej sekcji. Użyjemy również [blok] krótki kod umożliwiający manipulację treścią sekcji. Zobaczysz, jak to działa trochę później.

Skróty są ustawiane we wtyczce, która również ustawia filtr, który nadpisze szablon, który ma być używany do wyświetlania postu, jeśli ma niestandardowe pole z kluczem poziomym.

Umieściłem szablon w folderze wtyczek i jest całkowicie samodzielny tylko dla łatwości użytkowania, ale możesz go bliżej zintegrować ze swoją witryną, a nawet użyć niestandardowego typu postu i po prostu skorzystać z hierarchii szablonów WordPress.

I na koniec stylizacja. Zamiast tworzyć hatful shortcodes, trzymałem go w zaledwie dwóch, a następnie użyłem CSS do ulepszenia artykułu o określone style, które są przechowywane w niestandardowym polu, post_style a następnie wyjście w szablonie. Jest to szybkie i brudne podejście, ale pozwala na elastyczność podczas gry z rozwiązaniem.

Uzyskanie poziomu z wyświetlaczem: table-cell

Jak prawie zawsze tak jest, rzadko zdarza się, że trzeba rozpocząć taki projekt zupełnie od zera, a poszukiwanie poziomego przewijania prowadzi mnie do artykułu Ezequiela Bruni na temat poziomego przewijania i to rozwiązanie jest w dużej mierze oparte na tym artykule.

Mark-up naśladuje tabelę: a zawierającą div jest ustawiony na wyświetlacz: tabela oraz układ tabeli: stały; jego dziecko sekcja elementy są ustawione na wyświetlacz: table-cell.

Nie ma potrzeby unosić sekcji, dzieje się to automatycznie i tak długo, jak overflow is Ukryte na głównym pojemniku div jest to po prostu kwestia przewijania sekcji w widoku i poza nim, aby uzyskać nawigację między sekcjami. Wtyczka SmoothScroll jQuery służy do przewijania.

Istnieje również javascript do obsługi zmiany rozmiaru zawartości do rozmiaru okna, obsługi przycisków nawigacyjnych i dodawania identyfikatorów do sekcji.

Spacer Po Treści Testu

Stworzyłem 5 stron do testowania wtyczki i zabawy z poziomą dostawą. Przejdę przez każdą z nich, żeby wyjaśnić, co się za nimi kryje.

Kilka rzeczy do zapamiętania:

  • Dodaj styl do post_style niestandardowe pole na słupku
  • Dodaj a pozioma niestandardowe pole z wartością true
  • sekcje są numerowane i przypisane ids automatycznie po stronie klienta, więc upewnij się, że wiesz, którą sekcję stylizujesz
  • zamień moje linki do obrazów testowych na linki do obrazów testowych!

Prosta Strona Tekstowa

Screenshot of a two columns of text on a tablet
Dwie kolumny zwykłego tekstu

Dwie kolumny tekstu, bez żadnych dodatków. Zauważ, że kolumny nie są generowane automatycznie, ale są tworzone za pomocą dwóch skrótów blokowych i ustawiania szerokości dla każdej z nich.

Zawartość

[sekcja]
< H2 > Sekcja 1 < /h2>
[blok] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut tincidunt lorem, quis vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque eu nulla ligula. Mauris elementum urna eu consequat porta. Proin lacinia odio sed adipiscing semper. Ut sem mi, egestas vel placerat at, pulvinar quis tortor. Fusce sagittis massa vel dui rhoncus adipiscing.[/block]
[blok] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut tincidunt lorem, quis vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque eu nulla ligula. Mauris elementum urna eu consequat porta. Proin lacinia odio sed adipiscing semper. Ut sem mi, egestas vel placerat at, pulvinar quis tortor. Fusce sagittis massa vel dui rhoncus adipiscing.[/block]
[/sekcja]

Style CSS

# sekcja1 .block {
Szerokość: 48%;
margin-right: 20px;
float: left;
}

 

Obraz pełnoekranowy z nakładką tekstową

Screenshot from a tablet with a full screen image of Captain America and sample text covering 30% of the page
Znacznie większy efekt wizualny z pełnoekranowym obrazem i nakładką tekstową

Obrazy pełnoekranowe są łatwe do osiągnięcia za pomocą stylizacji background-size: cover, chociaż w zależności od rozmiaru obrazu może być konieczne pobranie ustawień x i y, aby uzyskać pożądane pozycjonowanie. Tekst może być ustawiony w bloku lub, jak to ma miejsce tutaj, główny div treści może być stylizowany.

Zawartość

[sekcja]<H2>Sekcja 2< / H2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut tincidunt lorem, quis vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque eu nulla ligula. Mauris elementum urna eu consequat porta. Proin lacinia odio sed adipiscing semper. Ut sem mi, egestas vel placerat at, pulvinar quis tortor. Fusce sagittis massa vel dui rhoncus adipiscing.[/sekcja]

Style CSS

# sekcja2 {
background-color: #000000;
color: # ffffff;
background: url(https://www.test.dev / wp-content / uploads/2013/03/captian-america.jpg) 50% 40%;
tło-rozmiar: okładka;
}

# sekcja2 .section-content {
Szerokość: 30%;
color: # ffffff;
font-weight: bold;
}

 

Półstronicowy Obrazek Po Lewej Stronie

Screenshot with image of Spider-Man talking up the full left-hand half of the page
Obrazy tła są używane, aby nadać tej stronie pełny wygląd Pół strony

Ta technika wykorzystuje również obrazy tła, ale tym razem rozmiar jest ustawiony na 50%, tak że zajmuje połowę strony. Zawartość używa lewego marginesu w wysokości 50%, aby upewnić się, że znajduje się w białej spacji.

Zawartość

[sekcja]<H2>Sekcja 3< / H2>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut tincidunt lorem, quis vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque eu nulla ligula. Mauris elementum urna eu consequat porta. Proin lacinia odio sed adipiscing semper. Ut sem mi, egestas vel placerat at, pulvinar quis tortor. Fusce sagittis massa vel dui rhoncus adipiscing.[/sekcja]

Style CSS

# section3 {
background-color: #000000;
background: url(https://www.test.dev / wp-content / uploads/2013/03/spider-man.jpg) górny lewy nie-powtórz;
tło-rozmiar: 50%;
}

# sekcja3 .section-content {
Szerokość: 46%;
margin-left: 50%;
padding: 20px;
}

 

Półstronicowy Obrazek W Prawo

Screengrab of a page with an image of Iron Man taking up the right-hand half of the page
Ta sama technika Co lewa połowa strony, ale obraz jest naprawiony w prawo

W przeciwieństwie do lewego obrazka na pół strony, Rozmiar obrazu tła jest nadal ustawiony na 50% , ale tym razem jest umieszczony po prawej stronie, a nie po lewej stronie. Nie ma potrzeby ustawiania marginesu dla zawartości, wystarczy szerokość.

Zawartość

[sekcja]<H2>Sekcja 4 < /H2>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut tincidunt lorem, quis vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque eu nulla ligula. Mauris elementum urna eu consequat porta. Proin lacinia odio sed adipiscing semper. Ut sem mi, egestas vel placerat at, pulvinar quis tortor. Fusce sagittis massa vel dui rhoncus adipiscing.[/sekcja]

Style CSS

# section4 {
background-color: #000000;
background: url(https://www.test.dev / wp-content / uploads/2013/03/ironman-2jpg) u góry po prawej Nie-powtórz;
tło-rozmiar: 50%;
}

# sekcja4 .section-content {
Szerokość: 46%;
padding: 20px;
}

 

Obraz Na Całej Stronie, Nieprzezroczysta Nakładka Tekstowa

Screengrab showing full-screen background image with a 75% opaque text box floating left
Użycie nieprzezroczystego tła dla tekstu sprawia, że wyróżnia się on bardziej niż zwykły tekst

Zawartość

[sekcja]<H2>sekcja 5 < / H2>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut tincidunt lorem, quis vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque eu nulla ligula. Mauris elementum urna eu consequat porta. Proin lacinia odio sed adipiscing semper. Ut sem mi, egestas vel placerat at, pulvinar quis tortor. Fusce sagittis massa vel dui rhoncus adipiscing.[/sekcja]

Style CSS

# sekcja5 {
background-color: #000000;
background: url(https://www.test.dev / wp-content / uploads/2013/03/człowiek ze stali.jpg) 50% 50%;
tło-rozmiar: okładka;
}

# sekcja5 .section-content {
background-color: # ffffff;
krycie: 0.70;
Szerokość: 40%;
margin-left: 20px;
padding: 20px;
}

 

Pamiętaj! Podczas konfigurowania zawartości dodaj następujące pola niestandardowe:

  • pozioma (value: true)
  • post_style (value: CSS styling for the post)

Dodawanie Poziomego Do Miksu

Pozioma z pewnością wydaje się mieć wiele obietnic, zwłaszcza na tabletach. Treści z dużą ilością obrazów wydają się działać dobrze, podobnie jak treści, w których istnieje wiele potencjalnych odmian w sekcjach.

Oprócz zabawy z tą wtyczką i zawartością, a jeśli jesteś w Australii to gorąco zachęcam do ściągnięcia briefu z ABC i sprawdzenia jak działają poziomo: robi wrażenie.

I, oczywiście, jeśli przekształcisz te pomysły i fragmenty w coś bardziej produkcyjnego, poinformuj wszystkich w komentarzach poniżej.

Co sądzisz o poziomym przewijaniu treści? Czy masz lub widzisz potrzebę?

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…