W artykule:
Utrzymanie uwagi czytelników jest wszystkim, a im dłuższa treść, tym trudniejsza.
Stały przewijanie tekstu i osadzonych obrazów będzie miało trudny czas na utrzymanie zainteresowania, dlatego tak wiele witryn idzie do Wielkiej długości dla formatów, które znacznie się różnią.
Wprowadzenie tych technik do własnej witryny WordPress nie jest trudne, gdy poznasz sekret tworzenia świetnie wyglądających treści.
Zainspirowany wielokrotnie nagradzanym artykułem New York Times „Snowfall”, opowiadanie dłuższej formy okazało się czymś więcej niż tylko modą.
Podczas gdy niektóre publikacje internetowe, takie jak The Great Discontent, publikują tylko dłuższe formy, Inne, takie jak The New York Times, PitchFork i australijski nadawca publiczny ABC, dodają długą formę do swojej istniejącej mieszanki.
Długa forma wymaga innego podejścia do tradycyjnego krótszego postu. Nie ma sensu podkuwać dłuższych treści do tradycyjnego 3-kolumnowego układu (tak jak wielokrotnie próbujemy na tej stronie!). Potrzebujesz bardziej elastycznego podejścia do układania treści, podejścia, które pozwala wyjść poza ograniczenia edytora wizualnego WordPress.
Potrzebujesz mocy i prostoty sieci.
Siła Sieci
Najlepsze podejście jest prawie zawsze najprostsze. Najprostszy do wdrożenia, najprostszy do zrozumienia, najprostszy w użyciu.
Siatki spełniają te kryteria i są używane do układania stron zarówno offline, jak i online od wielu, wielu lat.
Są one proste do zrozumienia: strona jest podzielona na kolumny o każdej szerokości; zawartość obejmuje określoną liczbę kolumn. Są one proste do wdrożenia, zwłaszcza w Internecie, gdzie jest to przypadek strukturalnego znacznika i odpowiedniego CSS. I są proste w użyciu: podstawowy mechanizm identyfikacji kolumn to wszystko, co jest wymagane.
Przede wszystkim jednak siatki mogą zapewnić niesamowitą elastyczność.
Istnieje wiele istniejących frameworków, od Bootstrap do Fundacji Zurb, które zawierają siatki i mogą układać zawartość. Często są one również dostarczane z łupieżem dzwonków i gwizdków, które mogą, lub, co jest najprawdopodobniej, jeśli chodzi o czystą treść, mogą nie być użyteczne.
W tym artykule chciałem po prostu siatkę i nic więcej, więc wybrałem Simple Grid by Dallas Bass.
Simple Grid to elastyczna siatka składająca się z 12 kolumn, z opcjonalną rynną 20px i maksymalną szerokością 1140px. Dwanaście jest wielką liczbą, podzielną przez 6, 4, 3 i 2 zapewnia szeroki zakres opcji układu.
Simple Grid jest również responsywny, zmieniając zachowanie kolumn wraz ze zmianą rozmiaru ekranu, co oznacza, że przez 90% czasu twoja zawartość będzie doskonale reagować na różnych platformach.
Dodawanie Simple Grid Do WordPress
Stworzyłem wtyczkę, aby dodać prostą siatkę do twojej witryny WordPress. Pobierz go i zainstaluj tak, jak każda wtyczka.
Wtyczka wykonuje 3 zadania:
- dodaje proste.css arkusz stylów do wyjścia dla postów, stron i niestandardowych typów postów
- dodaje 2 nowe skróty, sgrow oraz sgcol
- zmienia wyjście obrazów z napisami do użycia < rysunek> oraz < figcaption> (Zwiększa to elastyczność stylizacji)
Tworzenie Treści Za Pomocą Simple Grid
Zanim utworzysz jakąkolwiek zawartość z siatką, musisz ją najpierw zaplanować. Może to być tak proste, jak szkicowanie go na kartce papieru: nie musi być zbyt szczegółowy, wystarczy wiedzieć, gdzie chcesz umieścić różne elementy treści.
Następnie należy utworzyć wiersze i kolumny odpowiadające układowi za pomocą nowych skrótów, sgrow oraz sgcol.
Shortcode: [sgrow pad = „”background=””]
An sgrow zawiera jeden lub więcej sgcol. Posiada 2 atrybuty, pad oraz Informacje ogólne. Pad określa, czy będą stosowane rynny i jest prostym tak. lub nie. (domyślnie tak). Jedynym scenariuszem, w którym nie chcesz padać, jest wypełnienie całej szerokości zawartości, takiej jak obraz.
Tło pozwala określić adres url dla obrazu, który będzie używany jako tło dla wiersza. W poniższych przykładach dowiesz się, jak używać tego atrybutu do nakładania tekstu na obraz.
Shortcode: [sgcol span = „” margin=””]
Na sgcol definiuje kolumnę i może mieć 2 atrybuty: rozpiętość oraz margines.
Rozpiętość jest używana do opisania szerokości kolumny i jest wyrażona jako ułamek. Na przykład, / width = „1-2” / równa się połowie kolumn (6 kolumn), ! colspan = „3” / 4 jest trzy czwarte kolumn (9 kolumn).
Margin pozwala na rozpoczęcie zawartości od określonej kolumny. Na przykład, margin=”1-4″ rozpoczyna zawartość w sgcol w kolumnie 4.
Przejdźmy przez kilka przykładów, abyś mógł zobaczyć prostą siatkę w akcji.
Przykłady Zawartości Siatki
Tekst o pełnej szerokości
Najprostszym przykładem jest tekst, który zajmuje pełną szerokość.
Makieta
Marża
[sgrow pad = „Tak”] [sgcol span=”1-1″] tekst [/sgcol] [/sgrow]Wyniki
Paski boczne
Makieta
Marża
[sgrow pad = „Tak”] [sgcol span=”2-3″] tekst [/sgcol] [sgcol span = „1-3”]Wyniki
Paski boczne są bardzo przydatne do cytatów i notatek, zwłaszcza gdy łatwo je odróżnić
Zmiana zakresu, automatycznie zmienia rozmiar obrazu. Oto przykład, w którym tekst i obrazek obejmują połowę („1-2”) obszaru:
Siatki Obrazów
Użycie szerokości obrazu 100% zapewnia, że obrazy zawsze wypełniają dostępną dla nich przestrzeń (oczywiście jeśli obraz jest mniejszy niż szerokość, którą będzie pikselował).
Makieta
Marża
[sgrow pad = „Tak”] [sgcol span = „1-2”]Wyniki
Aby dodać więcej obrazów do siatki, wystarczy dodać więcej obrazów i zmienić rozpiętość-nie trzeba określać szerokości. Dla 4 zdjęć użyj „1-4″, dla 6 zdjęć użyj”1-6”.
Oto 4 Siatka obrazu:
Duży Obraz Z Bocznym Podpisem
Makieta
Marża
[sgrow pad = „Tak”] [sgcol span = „1-1”]< caption>czy bycie „miłym facetem” superbohaterów czyni Supermana najbardziej nudnym?< podpis>
Zauważ, że obraz ma dodaną klasę „large”. Jest to klasa niestandardowa, która ustawia szerokość obrazu na 75%, pozwalając na miejsce na podpis.
Wyniki
Treść Z Marginesem
Makieta
Marża
[sgrow pad = „Tak”] [sgcol span = ” 1-2 „margin = „1-4”] tekst [/sgcol] [/sgrow]Wyniki
Wiersz Z Obrazem Tła
Makieta
Marża
[sgrow pad= ” yes „background = ” full url”] [sgcol span = ” 1-2 „margin = „1-2”] tekst [/sgcol] [/sgrow]Wyniki
Jak Prosta Siatka Reaguje
Simple Grid dobrze reaguje na zmiany rozmiaru ekranu przy minimalnym wykorzystaniu zapytań o media.
Należy jednak zawsze testować motyw i preferencje, dostosowując odpowiednio zapytania o media.
Krótkie Słowo O…
Tematy
Podczas gdy ta technika będzie na ogół działać z dowolnym motywem, Motyw, który nie używa pasków bocznych-czyli daje treść o pełnej szerokości lub blisko niej, będzie działał najlepiej.
Do przykładów użyłem niedawno wydanego motywu lat osiemdziesiątych.
Inną opcją, szczególnie w przypadku znanych witryn, jest użycie określonego szablonu dla treści, które zamierzasz układać za pomocą siatek. Najprostszym sposobem na osiągnięcie tego byłoby utworzenie niestandardowego typu postu, na przykład historii, a następnie utworzenie pojedynczego – {nazwa}.php (tj. jednopiętrowy.php) możesz pozwolić hierarchii szablonów WordPress wykonać całą ciężką pracę.
Whitespace
Białe spacje w Twoich postach WordPress mogą być prawdziwym bólem. W tych przykładach rozłożyłem znaczniki dla jasności, ale często WordPress wstawia dodatkowe tagi
I
, które będą miały wpływ na twój układ.
Jeśli zauważysz, że masz problemy z białymi znakami, spróbuj usunąć liniowce wokół skrótów.
CSS
W wtyczce zobaczysz, że rozszerzyłem trochę CSS dla tego artykułu, w szczególności dodając stylizację dla dużej klasy stosowanej do obrazów i ich podpisów.
Nie wszystkie ułamki lub marginesy są obecne, więc być może będziesz musiał dodać więcej w miarę zagłębiania się w podejście siatkowe, a także możesz mieć własne specjalne potrzeby.
Workflow
Układanie treści powinno być traktowane jako dodatkowy krok do wykonania po napisaniu, zredagowaniu i zatwierdzeniu treści.
Narzut może utrudnić późniejszą edycję i znacznie zwiększy prawdopodobieństwo błędów.
Jeśli zmniejszysz niestandardowy typ postu, posiadanie oddzielnych pól dla zawartości surowej i zaznaczonej zawartości prawdopodobnie będzie nieocenione.
Zaostrzyć Apetyt?
To tylko kilka prostych przykładów na zaostrzenie apetytu i pokazanie mocy układania treści za pomocą siatek.
Sama wtyczka jest bardzo prosta, a składanie świetnie wyglądających treści jest stosunkowo proste, o ile planujesz wcześniej – czego nie mogę wystarczająco polecić.
Oczywiście zdrowa dawka wyobraźni i świetna treść też nie zaszkodzi.
Tagi:
