Szeroka i pe┼éna szeroko┼Ť─ç projektu bloku Gutenberga w WordPress

Edytor blok├│w Gutenberga dla WordPress zmieni┼é spos├│b, w jaki tworzymy tre┼Ťci w CMS. Ale otworzy┼éo to r├│wnie┼╝ nowe mo┼╝liwo┼Ťci w zakresie interfejsu.

Jednym z najciekawszych osi─ůgni─Ö─ç w tym obszarze jest mo┼╝liwo┼Ť─ç dodawania ÔÇ×pe┼énychÔÇŁ lub ÔÇ×szerokichÔÇŁ blok├│w do strony lub postu. Ta funkcja dodaje mo┼╝liwo┼Ť─ç odchylenia bloku Gutenberga od domy┼Ťlnej szeroko┼Ťci zawarto┼Ťci motywu, co by┼éo prawie niemo┼╝liwe w starym edytorze klasycznym.

Istnieje kilka mo┼╝liwych zastosowa┼ä bloku z wyr├│wnaniem pe┼énej lub szeroko┼Ťci. Mo┼╝na na przyk┼éad wprowadzi─ç nowe sekcje strony z blokiem ok┼éadki o pe┼énej szeroko┼Ťci, kt├│ry nak┼éada tekst na t┼éo obrazu. Mo┼╝esz te┼╝ skorzysta─ç z tej funkcji, aby stworzy─ç obszar wezwania do dzia┼éania, kt├│rego nie mo┼╝na przegapi─ç. Mo┼╝na tu doda─ç prawie ka┼╝dy rodzaj tre┼Ťci, co stanowi cz─Ö┼Ť─ç odwo┼éania.

Jest jednak jedno ma┼ée zastrze┼╝enie: Tw├│j motyw musi obs┼éugiwa─ç pe┼éne, wyr├│wnane bloki. Na szcz─Ö┼Ťcie jest to do┼Ť─ç ┼éatwe. Poni┼╝ej znajduje si─Ö kr├│tki samouczek dotycz─ůcy dodawania obs┼éugi szerokiego wyr├│wnania do motywu WordPress i projektowania blok├│w za pomoc─ů CSS.

Dodaj obsługę motywów

Pierwszym krokiem jest dodanie jednego wiersza kodu do pliku functions.php aktywnego motywu. Pobierz ten plik ze swojej witryny, je┼Ťli jeszcze go nie masz (mo┼╝na go znale┼║─ç w folderze / wp-content / themes / yourtheme /, zast─Öpuj─ůc ÔÇ×yourthemeÔÇŁ rzeczywist─ů nazw─ů folderu). Nast─Öpnie skopiuj i wklej nast─Öpuj─ůcy fragment kodu PHP:

add_theme_support ('align-wide');

Po dodaniu kodu załaduj zmodyfikowany plik Functions.php z powrotem do folderu motywu.

Ten kod oznacza, ┼╝e ÔÇőÔÇőchcesz aktywowa─ç bloki o pe┼énej i szeroko┼Ťci. Teraz, gdy zalogujesz si─Ö do WordPress i przejdziesz do edytora stron / post├│w, powiniene┼Ť zauwa┼╝y─ç, ┼╝e niekt├│re bloki (nie wszystkie) maj─ů nowe opcje wyr├│wnania ÔÇ×Pe┼ényÔÇŁ i ÔÇ×SzerokiÔÇŁ.

Blokuj wyr├│wnywania w WordPress.

Czy u┼╝ywasz motywu komercyjnego lub domy┼Ťlnego?

Je┼Ťli u┼╝ywasz domy┼Ťlnego lub biznesowego motywu WordPress, upewnij si─Ö, ┼╝e u┼╝ywasz motywu potomnego. Umo┼╝liwi to wprowadzanie zmian w kompozycji bez potencjalnej utraty ich po aktualizacji.

Podstawowy styl bloku

Projektowanie szerokiego lub w pełni wyrównanego bloku może być nieco trudne. Istnieje wiele różnych technik. Ten, którego użyjemy tutaj, pochodzi z tego przykładu w CodePen.

@media screen i (min-width: 960px) {
      .alignwide, .alignfull {
┬ászeroko┼Ť─ç: 100vw;
┬ámaksymalna szeroko┼Ť─ç: 100vw;
┬ámargines lewy: oblicz (50% – 50 vw);
      }
 }

Pami─Ötaj, ┼╝e u┼╝ywamy zapytania CSS o media, aby osadzi─ç tylko ten styl, gdy rozmiar ekranu wynosi 960 pikseli lub wi─Öcej. Jest tak, poniewa┼╝ niekoniecznie chcemy tego efektu na mniejszych ekranach.

W tym przypadku zastosowali┼Ťmy te same style dla obu wyr├│wna┼ä blok├│w. Oczywi┼Ťcie jest ca┼ékowicie mo┼╝liwe zaprojektowanie ich osobno, aby ka┼╝dy z nich mia┼é niepowtarzalny wygl─ůd z przodu.

Warto r├│wnie┼╝ zauwa┼╝y─ç mo┼╝liw─ů wad─Ö: podczas korzystania z tej techniki w niekt├│rych projektach mo┼╝e pojawi─ç si─Ö poziomy pasek przewijania. Mo┼╝na to naprawi─ç za pomoc─ů CSS, dodaj─ůc nast─Öpuj─ůce elementy do elementu body:

ciało {
      overflow-x: ukryty;
 }

Wyniki

Teraz, gdy w┼é─ůczyli┼Ťmy pe┼én─ů i wyr├│wnan─ů funkcj─Ö blokowania, nadszed┼é czas, aby to sprawdzi─ç. Tutaj stworzyli┼Ťmy stron─Ö z blokiem ok┼éadki, z szerokim wyr├│wnaniem.

Utw├│rz szeroki wyr├│wnany blok w WordPress.

Patrz─ůc na prz├│d witryny, blok ok┼éadki dzia┼éa zgodnie z przeznaczeniem. Element obejmuje ca┼é─ů szeroko┼Ť─ç strony, podczas gdy tre┼Ť─ç poni┼╝ej mie┼Ťci si─Ö w domy┼Ťlnej szeroko┼Ťci motywu wynosz─ůcej 960 pikseli.

Szeroki, wyr├│wnany blok pokrywy pokazany jest z przodu.

U┼╝ywaj─ůc tylko domy┼Ťlnych styl├│w, ten element naprawd─Ö si─Ö wyr├│┼╝nia. Nadal istnieje wiele mo┼╝liwo┼Ťci zrobienia wi─Öcej dzi─Öki projektowaniu.

Dodaj─ůc dodatkowe klasy CSS lub celuj─ůc w konkretne bloki, mamy do dyspozycji pe┼ény arsena┼é mo┼╝liwo┼Ťci projektowych. Elementy takie jak t┼éa, ramki lub ┼Ťcie┼╝ki przycinaj─ůce mog─ů nada─ç niepowtarzalny charakter.

Rozszerzanie za pomoc─ů motyw├│w WordPress

W domy┼Ťlnej instalacji Gutenberg nie zapewnia wszystkich funkcji wtyczki programu buduj─ůcego strony. Ale wyr├│wnanie blok├│w pozwala nam zapu┼Ťci─ç si─Ö na to terytorium.

To dobrze, poniewa┼╝ projektowanie stron internetowych ewoluowa┼éo od czas├│w, kiedy pojawi┼é si─Ö Classic Editor. W tamtych czasach strony internetowe zawsze u┼╝ywa┼éy jednolitej szeroko┼Ťci tre┼Ťci.

Obecnie sekcje o pe┼énej szeroko┼Ťci nale┼╝─ů do najpopularniejszych i najbardziej przydatnych opcji projektowania. Mo┼╝liwo┼Ť─ç skorzystania z tego bez potrzeby u┼╝ywania wtyczek lub hack├│w motyw├│w sprawia, ┼╝e ÔÇőÔÇőWordPress jest jeszcze lepszy dla projektant├│w.