W artykule:
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.
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ść.
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
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ą
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
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
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
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.
Tagi:
