{"id":233814,"date":"2023-02-22T20:10:00","date_gmt":"2023-02-22T17:10:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233814"},"modified":"2022-11-11T12:35:26","modified_gmt":"2022-11-11T09:35:26","slug":"przewodnik-dla-programistow-korzystanie-z-wordpressa-gutenberga-dla-strony-glownej-i-stron-docelowych","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/przewodnik-dla-programistow-korzystanie-z-wordpressa-gutenberga-dla-strony-glownej-i-stron-docelowych\/","title":{"rendered":"Przewodnik dla programist\u00f3w: Korzystanie z WordPressa Gutenberga dla strony g\u0142\u00f3wnej i stron docelowych"},"content":{"rendered":"\n

W tym po\u015bcie przyjrzymy si\u0119, jak wykorzysta\u0107 edytor Gutenberg do tworzenia \u015bwietnie wygl\u0105daj\u0105cych i nowoczesnych stron g\u0142\u00f3wnych lub stron docelowych. W szczeg\u00f3lno\u015bci przyjrzymy si\u0119, jak Ty jako programista mo\u017cesz dostosowa\u0107 sw\u00f3j kod motywu, aby to obs\u0142ugiwa\u0107. Ten przewodnik jest idealny dla tych, kt\u00f3rzy chc\u0105 dostosowa\u0107 starszy motyw do obs\u0142ugi Gutenberga lub chc\u0105 dowiedzie\u0107 si\u0119, jak tworzy\u0107 nowe motywy zoptymalizowane dla Gutenberga.<\/p>\n

Kiedy WordPress wprowadzi\u0142 nowy edytor Gutenberg<\/a> w WordPress 5.0 (wydany oko\u0142o grudnia 2018 r.), w wi\u0119kszo\u015bci przypadk\u00f3w nie by\u0142o potrzeby korzystania z oddzielnej wtyczki do tworzenia stron. Edytor Gutenberga daje autorowi WordPressa du\u017c\u0105 elastyczno\u015b\u0107 i mo\u017cliwo\u015b\u0107 tworzenia bogatych tre\u015bci i projekt\u00f3w, co wcze\u015bniej nie by\u0142o \u0142atwe \u2013 chyba \u017ce motyw lub wtyczka zapewnia\u0142y im funkcjonalno\u015b\u0107 za pomoc\u0105 np. skr\u00f3t\u00f3w.<\/p>\n

Dostajesz wiele stylizacji blok\u00f3w Gutenberga w WordPressie, ale przy odrobinie pracy w swoim motywie i wiedzy o blokach mo\u017cesz doda\u0107 o wiele wi\u0119cej do do\u015bwiadczenia Gutenberga. Zobaczmy, jak!<\/p>\n

W\u0142\u0105czanie blok\u00f3w szerokich i pe\u0142nej szeroko\u015bci<\/h2>\n

\"Przewodnik<\/a><\/p>\n

Wi\u0119kszo\u015b\u0107 blok\u00f3w umo\u017cliwia wyb\u00f3r wyr\u00f3wnania blok\u00f3w. Kiedy pracujesz w Gutenbergu w temacie, kt\u00f3ry nie zosta\u0142 opracowany dla Gutenberga, masz wyb\u00f3r mi\u0119dzy \u201eWyr\u00f3wnaj do lewej", \u201eWyr\u00f3wnaj do \u015brodka” i \u201eWyr\u00f3wnaj do prawej”.<\/p>\n

Ale czy wiesz, \u017ce w rzeczywisto\u015bci s\u0105 jeszcze dwa? Pozosta\u0142e dwa, \u201eSzeroka szeroko\u015b\u0107” i \u201ePe\u0142na szeroko\u015b\u0107” s\u0105 idealne do tworzenia strony g\u0142\u00f3wnej lub strony docelowej. Przyjrzymy si\u0119 bli\u017cej, jak zoptymalizowa\u0107 uk\u0142ad i projekt motywu, aby p\u00f3\u017aniej w pe\u0142ni obs\u0142ugiwa\u0107 bloki szerokie i pe\u0142nej szeroko\u015bci. Najpierw musisz powiedzie\u0107 WordPressowi, aby doda\u0142 obs\u0142ug\u0119 tych dw\u00f3ch wyr\u00f3wna\u0144 blok\u00f3w w twoim motywie.<\/p>\n

W funkcji podpi\u0119tej do after_setup_theme<\/code>Ciebie po prostu wywo\u0142aj add_theme_support('align-wide')<\/code>. Prawdopodobnie masz ju\u017c funkcj\u0119 \u201ekonfiguracji” w swoim motywie, a je\u015bli nie – dodaj to w swoim motywie functions.php<\/code>:<\/p>\n

add_action('after_setup_theme', function() {\n    add_theme_support('align-wide');\n});<\/code><\/pre>\n
Gdy ten kod jest aktywny w twoim motywie, powiniene\u015b teraz otrzyma\u0107 \u0142\u0105cznie pi\u0119\u0107 opcji wyr\u00f3wnania blok\u00f3w. W przypadku niekt\u00f3rych blok\u00f3w, na przyk\u0142ad Kolumn, otrzymujesz tylko dwa nowe.<\/p>\n
\"Przewodnik<\/a><\/p>\n
Istniej\u0105 pewne typy blok\u00f3w, w kt\u00f3rych mo\u017cna ustawi\u0107 wyr\u00f3wnanie blok\u00f3w \u2013 najcz\u0119\u015bciej jest to rodzaj, kt\u00f3ry obs\u0142uguje zagnie\u017cd\u017cone bloki, tj. blok, kt\u00f3ry pozwala na dodawanie blok\u00f3w do \u015brodka. Takie popularne bloki to Cover, Columns, Image, embed blocks i tak dalej. Blok Cover to \u015bwietny blok do tworzenia stron g\u0142\u00f3wnych lub stron docelowych, jak zobaczymy w tym po\u015bcie.<\/p>\n
Korzystanie z bloku ok\u0142adki<\/h2>\n
Blok Cover to zdecydowanie najlepszy blok, gdy chcesz zbudowa\u0107 stron\u0119 g\u0142\u00f3wn\u0105 lub stron\u0119 docelow\u0105 podzielon\u0105 na sekcje. Mo\u017cesz doda\u0107 dowolny rodzaj bloku i tyle blok\u00f3w, ile chcesz w bloku Cover. Za pomoc\u0105 bloku Cover mo\u017cesz ustawi\u0107 kolor t\u0142a, obraz t\u0142a lub obraz t\u0142a z kolorow\u0105 nak\u0142adk\u0105.<\/p>\n
\"Przewodnik<\/a><\/p>\n
W po\u0142\u0105czeniu z opcj\u0105 ustawienia regulacji bloku na szerok\u0105 lub pe\u0142n\u0105 szeroko\u015b\u0107 (jak zrobili\u015bmy powy\u017cej), blok Cover jest pot\u0119\u017cnym narz\u0119dziem. Mo\u017cesz utworzy\u0107 stron\u0119, w kt\u00f3rej ca\u0142a zawarto\u015b\u0107 znajduje si\u0119 wewn\u0105trz sekcji ok\u0142adki o pe\u0142nej szeroko\u015bci, z kt\u00f3rych ka\u017cda ma w\u0142asny kolor t\u0142a lub obraz t\u0142a. Dzi\u0119ki odpowiedniej stylistyce i uk\u0142adowi w motywie masz pe\u0142nowarto\u015bciowego, nowoczesnego kreatora strony g\u0142\u00f3wnej.<\/p>\n
\"Przewodnik<\/a><\/p>\n
W WordPress 5.3 pojawi\u0142o si\u0119 wa\u017cne ulepszenie w bloku Cover: wewn\u0119trzna otoczka HTML. Oznacza to, \u017ce blok Cover ma jeden element HTML dla samej sekcji \u2014 z jego kolorem t\u0142a lub obrazem t\u0142a, a nast\u0119pnie inny element HTML, w kt\u00f3rym znajduje si\u0119 ca\u0142a zawarto\u015b\u0107. Po\u0142\u0105cz to z wyr\u00f3wnaniem bloku do pe\u0142nej szeroko\u015bci: nadaj styl zewn\u0119trznemu elementowi (z kolorem t\u0142a lub obrazem), aby uzyska\u0107 pe\u0142n\u0105 szeroko\u015b\u0107, a nast\u0119pnie dostosuj wewn\u0119trzny element HTML do zawarto\u015bci tak, aby zmie\u015bci\u0142 si\u0119 w kontenerze motywu.<\/p>\n
Za\u0142\u00f3\u017cmy na przyk\u0142ad, \u017ce Tw\u00f3j motyw ma kontener o maksymalnej szeroko\u015bci 1200 pikseli. Prawdopodobnie masz ju\u017c konkretn\u0105 klas\u0119 HTML, kt\u00f3ra jest stylizowana na max-width, zapewniaj\u0105c, \u017ce zawarto\u015b\u0107 nie b\u0119dzie po prostu przerzucana na ca\u0142\u0105 szeroko\u015b\u0107, niezale\u017cnie od rozmiaru ekranu. Dodaj styl maksymalnej szeroko\u015bci do wewn\u0119trznego kodu HTML ok\u0142adki; nazwa klasy wp-block-cover__inner-container<\/code>. Jako przyk\u0142ad:<\/p>\n
.wp-block-cover-image.alignfull .wp-block-cover__inner-container, \n.wp-block-cover.alignfull .wp-block-cover__inner-container {\n    position: relative;\n    width: 100%;\n    max-width: 1200px;\n    padding: 0 20px;\n}<\/code><\/pre>\n
W powy\u017cszym kodzie CSS celuj\u0119 w dwie klasy nadrz\u0119dne Cover. Klasa nadrz\u0119dnego bloku ok\u0142adki zmienia si\u0119 w zale\u017cno\u015bci od tego, czy wybierzesz obraz t\u0142a, czy nie. Bloki ok\u0142adki z obrazem t\u0142a otrzymuj\u0105 klas\u0119 \u201e wp-block-cover-image<\/code>„, a bloki ok\u0142adki z kolorem t\u0142a otrzymuj\u0105 klas\u0119 \u201e wp-block-cover<\/code>„. Ponadto obieram za cel wyr\u00f3wnanie blok\u00f3w \u201ePe\u0142na szeroko\u015b\u0107” z klas\u0105 \u201e alignfull<\/code>„. Wyr\u00f3wnanie bloku \u201eSzeroka szeroko\u015b\u0107” otrzymuje klas\u0119 \u201e alignwide<\/code>„. Dodaj CSS, aby ukierunkowa\u0107 r\u00f3wnie\u017c to wyr\u00f3wnanie blok\u00f3w \u2013 w zale\u017cno\u015bci od tego, co chcesz zrobi\u0107.<\/p>\n
Je\u015bli zacz\u0105\u0142e\u015b si\u0119 tym bawi\u0107, by\u0107 mo\u017ce napotka\u0142e\u015b problemy z og\u00f3lnym uk\u0142adem w motywie. Tw\u00f3j motyw prawdopodobnie wymusza, aby bloki ok\u0142adki o pe\u0142nej szeroko\u015bci w og\u00f3le nie przechodzi\u0142y na pe\u0142n\u0105 szeroko\u015b\u0107. Sp\u00f3jrzmy na to dalej.<\/p>\n
Uk\u0142ad motywu i stylizacja na ca\u0142ej szeroko\u015bci<\/h2>\n
Do tej pory dodali\u015bmy obs\u0142ug\u0119 blok\u00f3w szerokich i pe\u0142nej szeroko\u015bci oraz nauczyli\u015bmy si\u0119 u\u017cywa\u0107 i optymalizowa\u0107 blok Cover, aby dzia\u0142a\u0142 jak sekcje strony g\u0142\u00f3wnej lub strony docelowej. Jednak w wi\u0119kszo\u015bci motyw\u00f3w Tw\u00f3j kod HTML i uk\u0142ad mog\u0105 uniemo\u017cliwi\u0107 pe\u0142ne rozmieszczenie tre\u015bci posta.<\/p>\n
Tw\u00f3j motyw prawdopodobnie ma prawy pasek boczny w widoku pojedynczego posta lub strony. Prawdopodobnie istniej\u0105 dodatkowe wrappery HTML, w tym element kontenera max-width, kt\u00f3ry uniemo\u017cliwia blokom pe\u0142nej szeroko\u015bci faktyczne przej\u015bcie do pe\u0142nej szeroko\u015bci. Twoje opakowania prawdopodobnie maj\u0105 r\u00f3wnie\u017c sporo margines\u00f3w lub wy\u015bci\u00f3\u0142ki, co ponownie uniemo\u017cliwia blokom o pe\u0142nej szeroko\u015bci ca\u0142kowite dotkni\u0119cie kraw\u0119dzi ekranu. Musisz jednak zadba\u0107 o to, aby pojedynczy post lub strona wygl\u0105da\u0142a dobrze w przypadku post\u00f3w, w kt\u00f3rych u\u017cytkownik nie u\u017cywa r\u00f3wnie\u017c Coverblock\u00f3w. Podczas opracowywania dla Gutenberga z obs\u0142ug\u0105 blok\u00f3w szerokich i pe\u0142nej szeroko\u015bci nale\u017cy wzi\u0105\u0107 pod uwag\u0119 swoje opakowania. Wszystko zale\u017cy od projektu, kodu HTML i stylizacji Twojego motywu \u2013 ale sp\u00f3jrzmy na kilka pomys\u0142\u00f3w na rozwi\u0105zanie tego problemu.<\/p>\n
\"Przewodnik<\/a><\/p>\n
Dobrym rozwi\u0105zaniem by\u0142oby dodanie opcji post\u00f3w; niestandardowe ustawienia meta dla post\u00f3w i stron, kt\u00f3re wp\u0142ywaj\u0105 na uk\u0142ad tej strony. Mo\u017cesz wprowadzi\u0107 ustawienie, aby ukry\u0107 pasek boczny lub zmusi\u0107 zawarto\u015b\u0107 posta do pe\u0142nej szeroko\u015bci. Tw\u00f3rz ustawienia post\u00f3w r\u0119cznie, dodaj\u0105c metaboksy, lub u\u017cyj zaawansowanych p\u00f3l niestandardowych<\/a>, aby u\u0142atwi\u0107 ten proces. A nast\u0119pnie w swoim motywie pobierasz ustawienia postu i odpowiednio obs\u0142ugujesz wyj\u015bcie HTML.<\/p>\n
Inne dobre opcje post\u00f3w to ukrywanie tytu\u0142u strony i\/lub ukrywanie polecanego obrazu. Pozwala to na normalne tworzenie tre\u015bci, ale dla okre\u015blonych stron mo\u017cesz \u0142atwo skonfigurowa\u0107 stron\u0119 docelow\u0105 z pe\u0142nymi blokami Cover. Ukrywaj\u0105c standardowy tytu\u0142 strony, mo\u017cesz zbudowa\u0107 lepiej wygl\u0105daj\u0105cy nag\u0142\u00f3wek lub sekcj\u0119 wezwania do dzia\u0142ania, kt\u00f3ra b\u0119dzie dzia\u0142a\u0107 jako tytu\u0142 strony.<\/p>\n
Tw\u00f3rz style blokowe<\/h2>\n
W WordPress Gutenberg jest ma\u0142o znana funkcja; bloki mog\u0105 mie\u0107 r\u00f3\u017cne style. Mo\u017cesz zobaczy\u0107 style blokowe w dzia\u0142aniu za pomoc\u0105 bloku Cytuj. Dodaj blok w edytorze i sp\u00f3jrz na Inspektora (prawy pasek boczny). Znajdziesz temat \u201eStyle” i dwie opcje mi\u0119dzy r\u00f3\u017cnymi stylami.<\/p>\n
\"Przewodnik<\/a><\/p>\n
Tw\u00f3rz niestandardowe style, kt\u00f3re u\u0142atwiaj\u0105 tworzenie strony g\u0142\u00f3wnej i stron docelowych. Sugeruj\u0119 przynajmniej dodanie niestandardowych styl\u00f3w blok\u00f3w do bloku nag\u0142\u00f3wka, aby mo\u017cna by\u0142o tworzy\u0107 niestandardowe style bez przerywania nag\u0142\u00f3wk\u00f3w normalnych post\u00f3w. Stw\u00f3rz styl blokowy dla tytu\u0142\u00f3w sekcji z bardzo du\u017c\u0105 czcionk\u0105 i dodatkowym wype\u0142nieniem.<\/p>\n
Kiedy pr\u00f3bujesz tworzy\u0107 strony g\u0142\u00f3wne, zanotuj, co musisz wielokrotnie dostosowywa\u0107 \u2013 mo\u017ce to by\u0107 dobre dopasowanie do stylu blokowego.<\/p>\n
Dodawanie niestandardowych styl\u00f3w blok\u00f3w jest naprawd\u0119 \u0142atwe i nie wymaga znajomo\u015bci j\u0119zyka Javascript. Mam osobny samouczek, jak to zrobi\u0107, je\u015bli chcesz dowiedzie\u0107 si\u0119 wi\u0119cej na ten temat.<\/p>\n
PS: Je\u015bli nie widzisz styl\u00f3w blokowych, Tw\u00f3j motyw mo\u017ce nie obs\u0142ugiwa\u0107 tego. Proces jest taki sam, jak w przypadku wyr\u00f3wnania blok\u00f3w o szeroko\u015bci i pe\u0142nej szeroko\u015bci; w haczyku after_setup_theme<\/code>dodajesz add_theme_support('wp-block-styles')<\/code>:<\/p>\n
add_action('after_setup_theme', function() {\n    add_theme_support('wp-block-styles');\n});<\/code><\/pre>\n
U\u017cywanie kolor\u00f3w motywu jako palety kolor\u00f3w<\/h2>\n
Je\u015bli bawi\u0142e\u015b si\u0119 Gutenbergiem, prawdopodobnie zauwa\u017cy\u0142e\u015b, \u017ce Gutenberg oferuje pewien zestaw kolor\u00f3w tekstu lub koloru t\u0142a. Na przyk\u0142ad dodanie bloku Cover spowoduje wy\u015bwietlenie monitu o wybranie koloru z palety kolor\u00f3w.<\/p>\n
Masz mo\u017cliwo\u015b\u0107 u\u017cycia selektora kolor\u00f3w, aby wybra\u0107 lub wprowadzi\u0107 kolor szesnastkowy, aby uzyska\u0107 dok\u0142adnie taki kolor, jaki chcesz. Mo\u017cesz uzyska\u0107 do tego dost\u0119p, klikaj\u0105c link \u201eNiestandardowy kolor”. Ale je\u015bli u\u017cywasz tego samego zestawu kolor\u00f3w w swoim motywie i chcesz zachowa\u0107 sp\u00f3jno\u015b\u0107, ci\u0105g\u0142e zapami\u0119tywanie i wprowadzanie za ka\u017cdym razem tych samych kod\u00f3w szesnastkowych mo\u017ce by\u0107 k\u0142opotliwe.<\/p>\n
Na szcz\u0119\u015bcie WordPress Gutenberg pozwala zdefiniowa\u0107 palet\u0119 kolor\u00f3w! To kolejna add_theme_support()<\/code>, w kt\u00f3rej podajesz szereg kolor\u00f3w, kt\u00f3re chcesz w palecie. W funkcji podpi\u0119tej do after_setup_theme<\/code>, wykonaj nast\u0119puj\u0105ce czynno\u015bci:<\/p>\n
add_theme_support('editor-color-palette', [\n    [\n        'name' => __('Main blue profile color', 'txtdomain'),\n        'slug' => 'blue-profile',\n        'color' => '#59BACC'\n    ],\n    [\n        'name' => __('Secondary green profile color', 'txtdomain'),\n        'slug' => 'secondary-profile',\n        'color' => '#58AD69'\n    ],\n]);<\/code><\/pre>\n
W powy\u017cszym kodzie dodajemy obs\u0142ug\u0119 motywu dla \u201e editor-color-palette<\/code>„, a jako drugi parametr funkcji definiujemy tablic\u0119 wszystkich kolor\u00f3w, kt\u00f3re chcemy. Ka\u017cdy kolor wymaga atrybut\u00f3w name<\/code>, slug<\/code>i color<\/code>. name<\/code>pojawia si\u0119 po najechaniu mysz\u0105 na kolor w palecie. slug<\/code>to nazwa klasy, kt\u00f3ra zostanie dodana do elementu bloku. I color<\/code>definiuje kod szesnastkowy dla twojego koloru.<\/p>\n
\"Przewodnik<\/a><\/p>\n
Pami\u0119taj, \u017ce musisz doda\u0107 style w swoim CSS kieruj\u0105ce na ka\u017cd\u0105 z tych klas (zdefiniowanych przez slug<\/code>). WordPress nie stosuje automatycznie koloru szesnastkowego do twoich blok\u00f3w, mimo \u017ce m\u00f3wimy WordPressowi, jaki jest kod koloru.<\/p>\n
Na przyk\u0142ad obraz po prawej to moja paleta kolor\u00f3w, kt\u00f3r\u0105 zdefiniowa\u0142em dla motywu tej witryny \u2013 dla A White Pixel:<\/p>\n
To s\u0105 kolory mojego motywu i w 95% przypadk\u00f3w u\u017cyj\u0119 jednego z tych kolor\u00f3w \u2013 albo jako t\u0142a, albo jako koloru tekstu. W rzadkich przypadkach mog\u0119 wyci\u0105gn\u0105\u0107 colorpicker, ale posiadanie zwyk\u0142ych podejrzanych ju\u017c zdefiniowanych w palecie kolor\u00f3w znacznie u\u0142atwia \u017cycie.<\/p>\n
Wskaz\u00f3wka: zawsze dodawaj czyst\u0105 czer\u0144 (#000000<\/code>) i czyst\u0105 biel (#FFFFFF<\/code>) do swojej palety kolor\u00f3w. Prawdopodobnie dobrym pomys\u0142em jest r\u00f3wnie\u017c posiadanie jednego lub dw\u00f3ch jasnoszarych kolor\u00f3w.<\/p>\n
Korzystanie ze statycznej strony g\u0142\u00f3wnej i optymalizacja szablonu strony g\u0142\u00f3wnej<\/h2>\n
Pewnie ju\u017c o tym wiesz, ale mimo to wspomn\u0119. W WordPressie mo\u017cesz ustawi\u0107 stron\u0119 statyczn\u0105 jako stron\u0119 g\u0142\u00f3wn\u0105, przechodz\u0105c do Ustawienia > Czytanie.<\/p>\n
\"Przewodnik<\/a><\/p>\n
Domy\u015blnie strona g\u0142\u00f3wna WordPressa wy\u015bwietla list\u0119 najnowszych post\u00f3w. Ale je\u015bli wybierzesz \u201eStrona statyczna” i wybierzesz stron\u0119 z listy rozwijanej, WordPress wy\u015bwietli t\u0119 stron\u0119 jako stron\u0119 g\u0142\u00f3wn\u0105 Twojej witryny.<\/p>\n
To nie wymaga my\u015blenia przy tworzeniu strony g\u0142\u00f3wnej dla witryny WordPress. Na wybranej stronie mo\u017cesz zbudowa\u0107 stron\u0119 g\u0142\u00f3wn\u0105, korzystaj\u0105c ze wszystkich wymienionych wy\u017cej trik\u00f3w. Na przyk\u0142ad mo\u017cesz mie\u0107 niezaznaczone opcje publikowania dotycz\u0105ce wy\u015bwietlania tytu\u0142u strony, paska bocznego i polecanego obrazu. A strona jest w pe\u0142ni zbudowana z blok\u00f3w ok\u0142adki i tre\u015bci o pe\u0142nej szeroko\u015bci. Mo\u017cesz jednak zrezygnowa\u0107 z opcji postu (ukryj pasek boczny itp.) i po prostu utworzy\u0107 szablon strony g\u0142\u00f3wnej, aby je zast\u0105pi\u0107 lub wymusi\u0107.<\/p>\n
Gdy Tw\u00f3j WordPress jest ustawiony jako strona statyczna jako strona g\u0142\u00f3wna, WordPress b\u0119dzie szuka\u0142 szablonu front-page.php<\/code>w Twoim motywie. To b\u0119dzie u\u017cywane zamiast page.php<\/code>. Pozwala to na stworzenie i dostosowanie oddzielnego szablonu, kt\u00f3ry jest u\u017cywany tylko na stronie g\u0142\u00f3wnej.<\/p>\n
W tym front-page.php<\/code>szablonie mo\u017cesz ju\u017c zdefiniowa\u0107 HTML, aby zapewni\u0107, \u017ce wszystkie bloki b\u0119d\u0105 mia\u0142y pe\u0142n\u0105 szeroko\u015b\u0107, nie ma paska bocznego, tytu\u0142u strony ani polecanego obrazu. Mo\u017cesz po prostu zrobi\u0107, the_content()<\/code>aby wy\u015bwietli\u0107 pe\u0142n\u0105 zawarto\u015b\u0107 strony.<\/p>\n
Na przyk\u0142ad to, co mam w motywie tej witryny front-page.php<\/code>. Podczas gdy we wszystkich innych szablonach, takich jak page.php<\/code>, mam mn\u00f3stwo wynik\u00f3w dla paska bocznego, tytu\u0142u posta i tak dalej, jest to pe\u0142ny zakres mojej p\u0119tli w front-page.php<\/code>:<\/p>\n
while (have_posts()): the_post();\n    the_content('');\nendwhile;<\/code><\/pre>\n
Ot\u00f3\u017c \u200b\u200bto. M\u00f3j opakowuj\u0105cy kod HTML i klasy zapewniaj\u0105, \u017ce tre\u015b\u0107 posta jest w pe\u0142nej szeroko\u015bci.<\/p>\n
Pami\u0119taj, \u017ce jest to dobre rozwi\u0105zanie, je\u015bli jako u\u017cytkownik motywu rozumiesz, jak dzia\u0142aj\u0105 Twoje szablony. Wiem, \u017ce wszystkie moje tre\u015bci na mojej stronie tytu\u0142owej musz\u0105 by\u0107 w pe\u0142ni opakowane w bloki Cover. Polegam na kodzie HTML wewn\u0119trznego kontenera bloku ok\u0142adki, aby upewni\u0107 si\u0119, \u017ce moja zawarto\u015b\u0107 wygl\u0105da dobrze i mie\u015bci si\u0119 w kontenerze o maksymalnej szeroko\u015bci. Gdybym mia\u0142 doda\u0107 prosty blok akapitu bez zawijania bloku ok\u0142adki, nie wygl\u0105da\u0142by dobrze, poniewa\u017c nie mia\u0142by dope\u0142nienia po bokach.<\/p>\n
Uczynienie nag\u0142\u00f3wka witryny przezroczystym na pierwszym bloku Cover<\/h2>\n
Bardzo powszechn\u0105 cech\u0105 nowoczesnych stron internetowych jest przejrzysto\u015b\u0107 nag\u0142\u00f3wka na stronie g\u0142\u00f3wnej. Gdy u\u017cytkownik zaczyna przewija\u0107 stron\u0119, nag\u0142\u00f3wek zmienia si\u0119 w ustalon\u0105 stylizacj\u0119 i otrzymuje t\u0142o. Ale zachowanie przezroczystego nag\u0142\u00f3wka mo\u017ce wygl\u0105da\u0107 naprawd\u0119 \u0142adnie, gdy widzimy kolory lub obraz za pierwsz\u0105 sekcj\u0105.<\/p>\n
Robi\u0119 to na pierwszej stronie<\/a> tej witryny. Sp\u00f3jrz! Na samej g\u00f3rze strony m\u00f3j nag\u0142\u00f3wek nie ma t\u0142a i pokazuje t\u0142o fioletowej sekcji gradientu (bloku ok\u0142adki) z ty\u0142u. Gdy zaczniesz przewija\u0107, otrzymuje sta\u0142e, sta\u0142e t\u0142o.<\/p>\n
Pami\u0119taj, \u017ce musisz zdawa\u0107 sobie spraw\u0119 z kolor\u00f3w nag\u0142\u00f3wka i pierwszego t\u0142a ok\u0142adki. Je\u015bli tw\u00f3j nag\u0142\u00f3wek sk\u0142ada si\u0119 z bia\u0142ego logo i bia\u0142ych element\u00f3w menu (tak jak m\u00f3j), nie mo\u017cesz u\u017cy\u0107 tej sztuczki z blokiem Cover, kt\u00f3ry ma jasne t\u0142o. To sprawi\u0142oby, \u017ce tw\u00f3j nag\u0142\u00f3wek by\u0142by nieczytelny!<\/p>\n
Je\u015bli chcesz to zrobi\u0107, pami\u0119taj, \u017ce wymaga to troch\u0119 wiedzy na temat Javascript. Ale to naprawd\u0119 bardzo proste. Przejd\u0119 dla Ciebie przez same podstawy:<\/p>\n
M\u00f3j ca\u0142y nag\u0142\u00f3wek to zawsze position: fixed<\/code>. Poniewa\u017c zwykle nie chc\u0119, aby moja zawarto\u015b\u0107 znika\u0142a za nag\u0142\u00f3wkiem, doda\u0142em padding-top na elemencie body, przesuwaj\u0105c zawarto\u015b\u0107 w d\u00f3\u0142 poni\u017cej nag\u0142\u00f3wka. Doda\u0142em jednak regu\u0142\u0119, \u017ce je\u015bli jeste\u015bmy przy szablonie pierwszej strony, to dope\u0142nienie nie zostanie dodane. Dzi\u0119ki temu tylko na stronie tytu\u0142owej cz\u0119\u015b\u0107 body pojawi si\u0119 za nag\u0142\u00f3wkiem. Nast\u0119pnie celuj\u0119 w pierwszy blok Cover na pierwsz\u0105 stron\u0119 i dodaj\u0119 dodatkowe padding-top, aby upewni\u0107 si\u0119, \u017ce zawarto\u015b\u0107 tego pierwszego bloku nie zbiegnie si\u0119 za nag\u0142\u00f3wkiem \u2013 daj\u0105c mu \u0142adne, dobre wype\u0142nienie po nag\u0142\u00f3wku.<\/p>\n
A potem doda\u0142em bardzo prosty kod JavaScript za pomoc\u0105 jQuery:<\/p>\n
$(window).scroll(function() {\n    if ($(window).scrollTop() >= 60) {\n        $('#header').addClass('navbar-fixed')\n    } else {\n        $('#header').removeClass('navbar-fixed');\n    }\n});<\/code><\/pre>\n
Ten kod dodaje klas\u0119 \u201e navbar-fixed<\/code>„, gdy strona jest przewijana dalej ni\u017c 60 pikseli w d\u00f3\u0142 strony. A w moim CSS po prostu wybieram t\u0119 klas\u0119 i dodaj\u0119 sta\u0142y kolor t\u0142a. Bez tej klasy t\u0142o nag\u0142\u00f3wka jest przezroczyste na stronie g\u0142\u00f3wnej.<\/p>\n
To s\u0105 podstawy tego. Pobaw si\u0119 CSS \u2013 dostosuj \u201epunkt podpowiedzi” JavaScriptu i u\u017cyj na przyk\u0142ad transition<\/code>w\u0142a\u015bciwo\u015bci, aby uzyska\u0107 p\u0142ynniejsze przej\u015bcie po zastosowaniu koloru t\u0142a.<\/p>\n
\u015awietne bloki na frontpage i landing page<\/h2>\n
WordPress oferuje pe\u0142n\u0105 gam\u0119 gotowych do u\u017cycia blok\u00f3w. Niekt\u00f3re z nich s\u0105 szczeg\u00f3lnie przydatne przy budowaniu frontpage’a lub landing page\u2019a. Je\u015bli znasz ju\u017c wszystkie dost\u0119pne bloki, prawdopodobnie ju\u017c o nich wiesz.<\/p>\n