Dodaj układy muru i siatki do swojej witryny WordPress za pomocą samego CSS

Czy kiedykolwiek chciałeś urozmaicić sposób wyświetlania Twoich postów na stronie głównej WordPress i w archiwach?

Co by było, gdybyś mógł wyświetlać swoje posty za pomocą podejścia murarskiego (Pinterest) lub może układu siatki, a wszystko to po prostu dodając fragment kodu CSS?

Bez wtyczek, skrótów, zmian szablonów, przypisywania stron jako strony głównej. Po prostu czysty CSS.

Kontynuuj czytanie lub przejdź dalej, korzystając z tych linków:

• Przygotowania do dodania murów i układów siatki do Twojej witryny
• Nadawanie swoim postom wyglądu murarskiego na Pinterest
• Układanie postów w siatce
• Dodawanie niestandardowego CSS do Twojej witryny

Przygotowania do dodawania murów i układów siatki do witryny WordPress

Rozwiązania te są oparte wyłącznie na CSS, więc nic dziwnego, że w dużej mierze opierają się na znacznikach HTML w Twojej witrynie, aby działały bez modyfikacji.

Użyty CSS został zaprojektowany (i przetestowany) z domyślnymi motywami. Oznacza to, że CSS ma kilka oczekiwań:

1. W elemencie body istnieją klasy opisujące typ strony (np. strona główna, blog, archiwum, wyszukiwanie)
2. Listy postów to kolekcje elementów artykułów, wraz z nagłówkiem opakowanym w div z identyfikatorem treści

Jeśli użyjesz domyślnego motywu, będziesz mógł używać CSS bez modyfikacji. Nawet jeśli tego nie zrobisz, może się okazać, że Twój motyw używa wystarczająco podobnych znaczników, że nadal możesz używać CSS bez zmian. Na przykład motyw lat osiemdziesiątych używa praktycznie tych samych znaczników, co motywy domyślne.

Jeśli Twój motyw nie używa tych samych znaczników – najłatwiejszym sposobem, aby to stwierdzić, jest sprawdzenie źródła strony pod kątem klas i identyfikatorów, do których odwołuje się CSS – wtedy nadal możesz używać CSS, wystarczy zmienić klasy i identyfikatory pasujące do Twojego znacznika.

Wybór miejsca zastosowania stylizacji

Możesz zdecydować, że chcesz zastosować wybraną stylizację tylko do określonych stron.

WordPress sprawia, że ​​jest to naprawdę łatwe, ponieważ stosuje klasy specyficzne dla strony do elementu treści, takiego jak blog, strona główna, archiwum i wyszukiwanie, więc wystarczy zakodować kod CSS dla każdej z odpowiednich klas.

Na przykład, jeśli chcesz zastosować stylizację tylko do strony głównej, Twój CSS będzie wyglądał mniej więcej tak:

body.blog article { styles go here... }

Aby zastosować stylizację do strony głównej i stron archiwum (kategorii):

body.blog article, body.archive article { styles go here... }

Aby zastosować stylizację tylko do wyników wyszukiwania:

body.blog search { styles go here... }

Ponownie, zależy to od twojego motywu zgodnie z zaleceniami dotyczącymi motywów WordPress.

Kompatybilność z przeglądarką

Ponieważ jest to CSS3, te techniki nie będą działać na wszystkich platformach i przeglądarkach.

Przetestowałem i potwierdzam, że działają na najnowszych wersjach Chrome i Safari (zarówno na OS X) jak i na iOS (5+). Różne strony CSS również sugerują, że IE10 również nie będzie miał problemów.

Poza tymi przeglądarkami (w tym IE9) Twój przebieg będzie się różnić, ale warto pamiętać, że rezerwą jest Twoja obecna stylizacja, więc odwiedzający korzystający ze starszych przeglądarek po prostu nie zauważą żadnej różnicy.

Jeśli stwierdzisz, że style działają z powodzeniem na platformie, której nie wymieniono (szczególnie Windows), daj nam znać w komentarzach.

Dość tych zastrzeżeń, spójrzmy więc, jak urozmaicić swoje listy postów.

Nadawanie swoim postom wyglądu murarskiego na Pinterest

Istnieje wiele motywów WordPress i garść wtyczek, które wyświetlają posty w formacie murarskim w stylu Pinterest. Ale dzięki CSS3 możesz po prostu dodać kilka dodatkowych stylów do swojej witryny WordPress i uzyskać ten sam efekt.

To rozwiązanie, zainspirowane postem Rahula Arory na W3Bits, opiera się na wsparciu CSS3 dla właściwości kolumny . Ta właściwość podzieli zawartość na określoną liczbę kolumn i chociaż jej tworzenie było prawdopodobnie bardziej zainspirowane ideą przepływu tekstu w kolumnach w stylu gazety, jest ona równie przydatna w przypadku układu murowanego.

/* Masonry Custom CSS  */

/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}

/* Masonry bricks or child elements */

body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}

body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}

W domyślnych układach posty są wyprowadzane jako elementy artykułu opakowane w div z identyfikatorem zawartości.

CSS:

1. Ustawia liczbę kolumn w opakowaniu #content za pomocą właściwości column-count – w tym przypadku 4. Ustawia również kolumnę-gap . Zauważysz użycie -moz- i -webkit- dla Firefoksa i Safari.

2. Zamienia elementy artykułu w cegły, używając inline-block i ustawiając szerokość na 100%.

3. Zapewnia, że ​​nagłówek strony i nawigacja znajdują się we własnym „wierszu”, określając, że te elementy obejmują wszystkie kolumny

Aby zachować porządek, możesz również rozważyć dodanie następujących elementów:

/* Some ad hoc CSS useful for many themes */
body.archive .site-content,
body.blog .site-content {
margin: 1em;
}

h1, h2, h3, h4, h5, h6, a {
-ms-word-wrap: break-word;
word-wrap: break-word;
}

To po prostu umieszcza margines wokół treści i zapewnia, że ​​długie słowa w tytułach nie wyrzucą formatowania (przydatne w przypadku każdego motywu, nie tylko tutaj).

Sprawianie, że jest responsywny

Jedną z wad podejścia kolumnowego jest to, że szybko ulega degradacji wraz ze zmniejszaniem się rozmiaru ekranu.

To, co chcemy zrobić, to manipulować liczbą kolumn, tak aby elementy artykułu uzyskały rozsądną ilość powierzchni ekranu, aby zachować integralność i atrakcyjność wizualną klocków. Dodajmy więc kilka zapytań o media, aby zmienić liczbę kolumn na podstawie rozmiaru ekranu:

@media only screen and (max-width : 1024px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (max-width : 768px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (max-width : 480px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}

Jak widać, wystarczy zmienić właściwość column-count (i jej pochodne) dla każdego zapytania.

Te 4 punkty przerwania, z których 3 będą działać na wszystkich platformach (po prostu zmień rozmiar okna przeglądarki, aby zobaczyć, jak działają) i 1, który jest przeznaczony specjalnie dla tabletu w trybie pionowym.

Oto stylistyka murów na iPadzie i iPhonie:

Możesz (i powinieneś) oczywiście pójść dalej i dodać więcej stylu do cegieł, aby poprawić atrakcyjność wizualną, ale tylko 3 instrukcje CSS, które zamienią Twoje posty w murowaną ścianę, są imponujące!

Układanie postów w siatce

Jeśli lubisz więcej jednolitości i porządku niż zapewnia murarstwo, możesz być zainteresowany ułożeniem swoich postów w siatce.

Siatki są bardzo, bardzo łatwe do wdrożenia, ale zdecydowanie działają najlepiej, gdy wszystkie polecane obrazy mają ten sam rozmiar, w przeciwnym razie możesz skończyć z dużą ilością białych znaków wypełniających krótsze „komórki”.

Tym razem CSS jest jeszcze krótszy, opierając się po prostu na stylizacji elementów artykułu :

/* Grid Layout Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}

To wszystko, co jest absolutnie konieczne. Ponownie korzystamy z inline-block i upewniamy się, że treść artykułu (tytuł, wyróżniony obraz, fragment) jest wyrównana w pionie.

Ważną właściwością jest szerokość , ponieważ określa ona liczbę „kolumn”. Użyłem 32,5% jako wartości początkowej (użycie 33% może prowadzić do przedwczesnego zawijania), co zapewni 3 kolumny. Oczywiście, jeśli chcesz 4 kolumny, użyjesz 24,5%, 5 kolumn 19,5% itd.

Dodawanie responsywności

Podobnie jak nasza stylistyka murarska, siatki będą musiały być responsywne, jeśli mają zachować swoją skuteczność.

Ponieważ to właśnie właściwość width określa liczbę kolumn, to jest ona zmieniana w różnych zapytaniach o media.

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

body.blog article, body.archive article {
width: 49%;
}
}

@media only screen and (max-width : 768px) {

body.blog article, body.archive article {
width: 49%;
}
}

@media only screen and (max-width : 480px) {

body.blog article, body.archive article {
width: 100%;
}
}

Tym razem tylko 3 zapytania, ponieważ zacząłem tylko od 3 kolumn. Jeśli zdecydujesz się zacząć od większej liczby kolumn, możesz dodać punkt przerwania o maksymalnej szerokości: 1024px, aby ustawić szerokość na 32,5% (3 kolumny).

Spowoduje to:

1. 2 kolumny na tablecie w trybie pionowym
2. 2 kolumny, gdy rozmiar ekranu to maksymalna szerokość 768px
3. 1 kolumna, gdy rozmiar ekranu to maksymalna szerokość 480px

Te punkty przerwania obejmą zarówno tablety, jak i smartfony oraz zmianę rozmiaru okna przeglądarki.

Oto układ siatki na iPadzie i iPhonie:

Siatki, nieco bardziej uporządkowane niż murowane, ale naprawdę wymagają spójności i rygoru, jeśli chodzi o rozmiar prezentowanego obrazu, aby były najbardziej efektywne.

Dodawanie niestandardowego CSS do Twojej witryny

Istnieje wiele opcji wstrzykiwania wybranego niestandardowego kodu CSS do witryny WordPress. Jeśli Twój motyw nie umożliwia dodawania niestandardowego kodu CSS, dostępne są następujące opcje:

• Motyw podrzędny – utwórz motyw podrzędny i dodaj CSS do arkusza stylów
• Wtyczka – dodaj wybraną stylizację do nowego pliku CSS i utwórz wtyczkę, która używa funkcji wp-enqueue-style, być może warunkowo opartej na generowanej stronie, aby umieścić w kolejce nowy plik
• Edytuj arkusz stylów bieżącego motywu — naprawdę nie, po prostu nie
• Użyj niestandardowej wtyczki CSS – istnieje wiele wtyczek, które pozwolą Ci dodać niestandardowy CSS do Twojej witryny za pośrednictwem interfejsu administratora WordPress (wtyczka o wdzięcznej nazwie Simple Custom CSS jest jedną z takich wtyczek)

Lubię używać wtyczki Custom CSS. Jest szybki i łatwy w konfiguracji, sprawia, że ​​testowanie jest proste i równie szybkie i łatwe do usunięcia CSS z witryny WordPress (wyczyść edytor lub odinstaluj wtyczkę).

CSS, ścieżka do WordPressa Zen

Wspaniały CSS Zen Garden od wielu lat udowadnia, że ​​wygląd i styl witryny można znacząco zmienić bez jednej zmiany znaczników, ale poprzez zmianę CSS.

Chociaż te dwie techniki nie są na tym samym poziomie, udowadniają, że zmiana wyglądu i stylu witryny WordPress jest również całkowicie możliwa bez konieczności zmiany szablonów, używania skrótów lub tworzenia motywów potomnych.

Tylko trochę CSS.

Uwaga redaktora: Ten post został zaktualizowany pod kątem dokładności i trafności. [Pierwotnie opublikowano: lipiec 2014 / Poprawiono: luty 2022]

• CSS
• siatki