Integracja prostych układów siatki CSS z WordPress

Uzyskanie spójnego układu siatki w WordPressie może być bezbolesnym procesem, jeśli użyjesz odpowiednich narzędzi. W tym samouczku dowiesz się krok po kroku, jak szybko skonfigurować system siatki w programie WordPress, który jest bardzo lekki i łatwy do modyfikacji. Będziemy utrzymywać prosty projekt, abyśmy mogli skupić się na użyciu odpowiednich narzędzi do skonfigurowania siatki, ale pamiętaj, że możesz w razie potrzeby samodzielnie ustawić siatkę.

W tym samouczku będę używał domyślnego motywu Pool w WordPressie, aby pokazać podejście „zacznij od zera”, aby uzyskać odpowiednie siatki.

Krok 1: Określ szerokość siatki

Zanim zaczniesz, musisz określić, jak szeroka będzie Twoja siatka. W przypadku mojej witryny WordPress widzę, że szerokość mojej głównej kolumny to 450 pikseli przy użyciu funkcji „Sprawdź element” przeglądarki Google Chrome po kliknięciu obiektu prawym przyciskiem myszy. Jest to najszybszy sposób, jaki znalazłem, który może szybko określić szerokość i wysokość obiektu na stronie internetowej.

Krok 2: Projektant siatki

Zamiast ręcznie budować siatkę, którą możesz zrobić, jeśli chcesz, proponuję skorzystać z jednego z wielu dostępnych narzędzi generatora siatki. W tym samouczku użyję generatora siatki MindPlay. To bardzo prosty i lekki generator siatki.

Chcę trójkolumnowy wyświetlacz i muszę się upewnić, że moje piksele mają 450. Więc dostosuj odpowiednio i przejdź do zakładki „Eksportuj”. Nie będziemy się nad tym zastanawiać *typografia funkcje w tym samouczku, choć na pewno warto to zbadać samodzielnie.

W zakładce Eksportuj użyj najwyższej ramki „Arkusz stylów” i przewiń w dół, aż zobaczysz komentarz „Siatka”. Skopiujesz wszystko od komentarza do dołu tej ramki. Powinien być tylko około 30 linii

Krok 3: Aktualizacja arkusza stylów WordPress

Zaloguj się do swojej witryny WordPress i przejdź do Wygląd> Edytor.

W prawym dolnym rogu panelu Edytor zobaczysz Styles.css plik (lub coś podobnego, w zależności od tematu). Kliknij ten przycisk, aby go otworzyć.

Przewiń do dołu arkusza i wklej swój pre z MindPlay.dk:

Krok 4: Wdrażanie sieci

Aby użyć siatki, po prostu utwórz

z „siatką” klasy. Każdy obszar siatki jest zdefiniowany w CSS. Otwórz nową stronę lub post. Przejdź do zakładki HTML, aby rozpocząć budowanie siatki.

Oto kilka przykładowych pre, które możesz wkleić na miejsce, aby zacząć:

   Lewa kolumna
  Środkowa kolumna
  Prawa kolumna

Oto jak to wygląda w WordPressie:

Zapisz / zaktualizuj stronę i spójrz na wyniki. W moim przypadku jest to strona główna witryny:

Jak widać na powyższym zrzucie ekranu, mamy nasze trzy kolumny i wszystko jest dokładnie tam, gdzie się spodziewamy. Możesz dodać dowolną liczbę wierszy, rozpoczynając od następującego

    Lewa kolumna
  Środkowa kolumna
  Prawa kolumna
    Lewy rząd # 2
  Środkowy rząd # 2
  Prawy rząd # 2

Oto jak do tej pory wygląda:

Teraz możesz dodawać obrazy lub tekst i stylizować każdy wiersz dokładnie tak, jak chcesz.

Wskazówki dotyczące ulepszania

W niektórych przeglądarkach mogą wystąpić problemy, jeśli masz więcej niż jeden wiersz. Aby obejść ten problem, musisz ustawić margines po prawej stronie (.grid-m4, w naszym przypadku) do wysokości, którą chcesz mieć każdy rząd. Jeśli używasz obrazów o wymiarach 250 na 250 pikseli, ustaw wysokość wiersza w polu .grid-m4 być 250px:

.grid-m4 float: left; szerokość: 20px; wysokość: 250px;

To sprawi, że twój .grid-m1 po lewej stronie następnego rzędu nie unosi się do rzędu nad nim.

Jeśli chcesz stylizować tło całej siatki, musisz dostosować wysokość .krata klasa. Powiedzmy, że masz cztery rzędy na swojej siatce, każdy o 250px. Będziesz chciał dodać wysokość do klasy .grid na 1000px, więc wszystkie dodane elementy stylizacji pokryją cały projekt siatki.

.siatka szerokość: 450px; wysokość: 1000px; margin: auto;

W zależności od wersji używanego generatora sieci MindPlay.dk witryna może nie generować „.grid-m4” i zamiast tego będziesz musiał użyć .grid-m1 po .grid-c3 aby upewnić się, że siatka rozciąga się na właściwe miejsce:

  Lewa kolumna
  Środkowa kolumna
  Prawa kolumna

Ostateczne rezultaty

Oto jak wyglądają moje końcowe wyniki z dwoma wierszami i prostą grafiką:

Baw się dobrze projektując i pamiętaj, że możesz stylizować siatkę w dowolny sposób.

Nota redaktora: Ten wpis jest napisany przez Tara Hornor dla Hongkiat.com. Tara ma dyplom z języka angielskiego i pisze o marketingu, reklamie, brandingu, projektowaniu graficznym i publikowaniu na komputerach. Oprócz kariery pisarskiej, Tara lubi spędzać czas ze swoim mężem i dwójką dzieci.