{"id":52883,"date":"2022-11-03T07:00:36","date_gmt":"2022-11-03T14:00:36","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=52883"},"modified":"2025-05-26T11:36:52","modified_gmt":"2025-05-26T18:36:52","slug":"tworzenie-motywu-potomnego-woocommerce","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/tworzenie-motywu-potomnego-woocommerce\/","title":{"rendered":"Jak Stworzy\u0107 Motyw Potomny WooCommerce"},"content":{"rendered":"\n

Za\u0142\u00f3\u017cmy, \u017ce masz sklep WooCommerce<\/a> dzia\u0142aj\u0105cy.<\/p>\n\n\n\n

Je\u015bli u\u017cywasz oficjalnego motywu Storefront<\/a>, mo\u017ce on wygl\u0105da\u0107 do\u015b\u0107 profesjonalnie. Jednak mo\u017cesz chcie\u0107 dostosowa\u0107 wygl\u0105d swojego sklepu WooCommerce, aby pasowa\u0142 do Twojej wizji.<\/p>\n\n\n\n

Najlepszym rozwi\u0105zaniem jest cz\u0119sto stworzenie motywu potomnego<\/a> WooCommerce. Dzieje si\u0119 tak, poniewa\u017c motyw potomny pozwala na wprowadzanie zmian w oryginalnym motywie bez bezpo\u015bredniej edycji. Upraszcza to proces dostosowywania wygl\u0105du Twojego sklepu i eliminuje potencjalne ryzyko dla twojego motywu i sklepu.<\/p>\n\n\n\n

W tym artykule przyjrzymy si\u0119, jak mo\u017cesz stylizowa\u0107 sw\u00f3j sklep WooCommerce za pomoc\u0105 motyw\u00f3w. Nast\u0119pnie poka\u017cemy, jak w pi\u0119ciu krokach stworzy\u0107 w\u0142asny motyw potomny. Zacznijmy!<\/p>\n\n\n\n

Szybkie spojrzenie na motywy WooCommerce<\/b><\/h2>\n\n\n\n

Od momentu wprowadzenia WooCommerce plugin<\/a> w 2011 roku, WordPress sta\u0142 si\u0119 najpopularniejsz\u0105 platform\u0105 e-commerce. WooCommerce jest obecnie u\u017cywany do obs\u0142ugi 25% wszystkich sklep\u00f3w internetowych<\/a>, co czyni go o 6% bardziej popularnym ni\u017c jego najbli\u017cszy konkurent.<\/p>\n\n\n\n

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<\/p>\n\n\n\n

<\/div>\n\n\n\n

Jednym z element\u00f3w, kt\u00f3re przyczyni\u0142y si\u0119 do sukcesu WooCommerce, jest \u0142atwo\u015b\u0107 tworzenia unikalnego sklepu przy minimalnym wysi\u0142ku. Jednak to samo w sobie nie t\u0142umaczy popularno\u015bci platformy.<\/p>\n\n\n\n

Kolejnym ogromnym czynnikiem sukcesu WooCommerce jest niemal niesko\u0144czona mo\u017cliwo\u015b\u0107 dostosowania, jak\u0105 oferuje. W po\u0142\u0105czeniu z odpowiednim motywem, masz dost\u0119p do du\u017cej elastyczno\u015bci projektowej.<\/p>\n\n\n\n

WooCommerce jest kompatybilny z prawie wszystkimi motywami WordPress<\/a>. Jednak wi\u0119kszo\u015b\u0107 z nich nie b\u0119dzie zoptymalizowana do obs\u0142ugi unikalnych funkcji pluginu.<\/p>\n\n\n\n

Na szcz\u0119\u015bcie, motyw Storefront<\/a> jest doskona\u0142\u0105 opcj\u0105. To oficjalny motyw WooCommerce, stworzony specjalnie do integracji z wtyczk\u0105. Wygl\u0105da przekonuj\u0105co ju\u017c od pierwszego uruchomienia, z prostym i czystym designem, kt\u00f3ry skupia uwag\u0119 na twoich produktach:<\/p>\n\n\n

\n
\"motyw<\/figure><\/div>\n\n\n

Ta minimalistyczna konstrukcja sprawia r\u00f3wnie\u017c, \u017ce Storefront jest idealn\u0105 baz\u0105 do personalizacji. Tutaj przydaj\u0105 si\u0119 motywy potomne, kt\u00f3re om\u00f3wimy w dalszej cz\u0119\u015bci.<\/p>\n\n\n\n

Dlaczego warto stworzy\u0107 Motyw Potomny WooCommerce<\/b><\/h2>\n\n\n\n

Je\u015bli sp\u0119dzi\u0142e\u015b du\u017co czasu na czytaniu o WordPressie, prawdopodobnie natkn\u0105\u0142e\u015b si\u0119 wcze\u015bniej na motywy potomne.<\/p>\n\n\n\n

W skr\u00f3cie, motyw potomny zaczyna \u017cycie jako kopia innego motywu, znanego jako ‘motyw nadrz\u0119dny’. Nast\u0119pnie mo\u017cna dokonywa\u0107 zmian w motywie potomnym i testowa\u0107 je bez bezpo\u015bredniej edycji motywu nadrz\u0119dnego. Jest to wa\u017cne, poniewa\u017c modyfikacja oryginalnego motywu mo\u017ce prowadzi\u0107 do nieodwracalnych b\u0142\u0119d\u00f3w, a nawet uszkodzenia Twojej strony internetowej.<\/p>\n\n\n\n

Mo\u017cesz stworzy\u0107 motyw potomny, poniewa\u017c chcesz u\u017cy\u0107 innego motywu jako podstawy, zamiast budowa\u0107 nowy motyw ca\u0142kowicie od zera. Alternatywnie, mo\u017cesz chcie\u0107 wprowadzi\u0107 tylko drobne zmiany w branding’u motywu lub og\u00f3lnym wygl\u0105dzie estetycznym. Mo\u017cliwo\u015bci s\u0105 naprawd\u0119 nieograniczone, w zale\u017cno\u015bci od tego, ile czasu jeste\u015b got\u00f3w po\u015bwi\u0119ci\u0107 na projekt.<\/p>\n\n\n\n

Je\u015bli chodzi o WooCommerce, wi\u0119kszo\u015b\u0107 motyw\u00f3w potomnych opiera si\u0119 na Storefront:<\/p>\n\n\n

\n
\"Opcje<\/figure><\/div>\n\n\n

Mo\u017cesz pobra\u0107 kilka opcji motyw\u00f3w potomnych ze oficjalnego sklepu WooCommerce<\/a> lub z innych stron takich jak ThemeForest<\/a>. Jednak\u017ce mo\u017cliwe, \u017ce \u017caden z dost\u0119pnych motyw\u00f3w potomnych nie spe\u0142ni Twoich oczekiwa\u0144, lub po prostu chcesz stworzy\u0107 unikalny wygl\u0105d. Co wi\u0119cej, mo\u017cesz nie chcie\u0107 wydawa\u0107 pieni\u0119dzy na p\u0142atny motyw, je\u015bli uwa\u017casz, \u017ce sam m\u00f3g\u0142by\u015b zrobi\u0107 lepiej.<\/p>\n\n\n\n

W po\u015bcie na oficjalnym blogu WooCommerce<\/a>, tw\u00f3rcy pluginu omawiaj\u0105 najcz\u0119stsze motywacje stoj\u0105ce za u\u017cyciem motywu potomnego dla Twojego sklepu internetowego:<\/p>\n\n\n\n

\u201eCelem naszych w\u0142asnych motyw\u00f3w potomnych Storefront jest dostarczenie do\u015bwiadczenia sklepowego idealnie dopasowanego do Twojej niszy. Po zainstalowaniu Galleria<\/a>, i nie zmieniaj\u0105c \u017cadnych ustawie\u0144, natychmiast uzyskujesz sklep odpowiedni do sprzeda\u017cy artyku\u0142\u00f3w modowych wysokiej klasy. Z ProShop<\/a>, mo\u017cesz szybko uruchomi\u0107 stylowy sklep sportowy.\u201d<\/p>\n\n\n\n

Rzeczywisty proces tworzenia motywu potomnego<\/a> jest taki sam, czy tworzysz go specjalnie dla WooCommerce, czy dla bardziej og\u00f3lnej strony WordPress. Jednak\u017ce, b\u0119dziesz musia\u0142 mie\u0107 na uwadze cel swojego sklepu, personalizuj\u0105c sw\u00f3j motyw potomny. Strona e-commerce wymaga bowiem innej filozofii projektowej ni\u017c blog. Zobaczmy, jak wygl\u0105da ten proces w praktyce!<\/p>\n\n\n\n

Jak stworzy\u0107 Motyw Potomny WooCommerce (W 5 Krokach)<\/b><\/h2>\n\n\n\n

Teraz przeprowadzimy Ci\u0119 przez proces tworzenia motywu potomnego WooCommerce. W tym przyk\u0142adzie stworzymy podstawowy motyw, kt\u00f3ry u\u017cywa Storefront jako motywu nadrz\u0119dnego, chocia\u017c mo\u017cesz u\u017cy\u0107 dowolnego motywu jako bazy.<\/p>\n\n\n\n

Poka\u017cemy Ci, jak przebiega proces, gdy zaczynasz od zera. Je\u015bli jednak chcesz pomin\u0105\u0107 niekt\u00f3re z tych krok\u00f3w i przej\u015b\u0107 od razu do dostosowywania swojej strony, mo\u017cesz r\u00f3wnie\u017c pobra\u0107 i zainstalowa\u0107 przyk\u0142adowy motyw potomny Storefront<\/a>.<\/p>\n\n\n\n

Ostatecznie, bardzo polecamy utworzenie kopii zapasowej Twojej strony<\/a> zanim przejdziesz dalej. Zapewni to bezpiecze\u0144stwo Twojego sklepu na wypadek wyst\u0105pienia problem\u00f3w podczas procesu rozwoju.<\/p>\n\n\n\n

Jest r\u00f3wnie\u017c m\u0105dre u\u017cywa\u0107 \u015brodowiska staging<\/a> do tworzenia i dostosowywania motywu potomnego. Po podj\u0119ciu tych \u015brodk\u00f3w ostro\u017cno\u015bci, mo\u017cesz przej\u015b\u0107 do pierwszego kroku!<\/p>\n\n\n\n

Krok 1: Utw\u00f3rz folder dla Twojego Motywu Potomnego WooCommerce<\/b><\/h3>\n\n\n\n

Pierwsz\u0105 rzecz\u0105, kt\u00f3r\u0105 musisz zrobi\u0107, jest stworzenie folderu, kt\u00f3ry b\u0119dzie zawiera\u0142 Tw\u00f3j motyw. Je\u015bli dodajesz motyw potomny bezpo\u015brednio do istniej\u0105cej strony, najlepszym sposobem na to jest poprzez SFTP<\/a>. Mo\u017cesz to zrobi\u0107 za pomoc\u0105 darmowej aplikacji takiej jak FileZilla<\/a>.<\/p>\n\n\n\n

Po uruchomieniu programu, zaloguj si\u0119 na swoj\u0105 stron\u0119 przy u\u017cyciu danych dost\u0119powych do hostingu. Nast\u0119pnie b\u0119dziesz musia\u0142 przej\u015b\u0107 do folderu wp-content\/themes\/<\/i>. To tam s\u0105 zainstalowane motywy Twojej strony.<\/p>\n\n\n\n

Wszystko, co musisz zrobi\u0107, to utworzy\u0107 nowy folder w tym miejscu:<\/p>\n\n\n

\n
\"folder<\/figure><\/div>\n\n\n

Podczas tworzenia motywu potomnego najlepiej jest nada\u0107 mu nazw\u0119, kt\u00f3ra odzwierciedla motyw nadrz\u0119dny. Na przyk\u0142ad, tworzymy motyw potomny dla Storefront, wi\u0119c nazwiemy nasz folder \u201estorefront-child\u201d.<\/p>\n\n\n\n

Pierwsz\u0105 rzecz\u0105, kt\u00f3r\u0105 musisz stworzy\u0107 i umie\u015bci\u0107 w tym folderze jest prosty plik tekstowy o nazwie functions.php<\/i><\/a>. To wa\u017cny plik g\u0142\u00f3wny, kt\u00f3ry pomaga okre\u015bli\u0107 wygl\u0105d i dzia\u0142anie Twojej strony. Jednak\u017ce, wi\u0119kszo\u015b\u0107 motyw\u00f3w potomnych mo\u017ce u\u017cywa\u0107 funkcji<\/a> zawartych w pliku motywu nadrz\u0119dnego i nie potrzebuje w\u0142asnych.<\/p>\n\n\n\n

Z tego powodu ten plik mo\u017ce na razie pozosta\u0107 pusty. Po prostu utw\u00f3rz plik tekstowy o nazwie functions.php<\/i> i zapisz go w folderze swojego motywu potomnego:<\/p>\n\n\n

\n
\"Lokalizacja<\/figure><\/div>\n\n\n

Tw\u00f3j motyw jest teraz prawie gotowy do aktywacji i u\u017cycia. Najpierw jednak b\u0119dzie potrzebowa\u0107 arkusza styl\u00f3w.<\/p>\n\n\n\n

Krok 2: Utw\u00f3rz Arkusz Styl\u00f3w Twojego Motywu Potomnego<\/b><\/h3>\n\n\n\n

Nast\u0119pny plik, kt\u00f3ry musisz utworzy\u0107, to Kaskadowy Arkusz Styl\u00f3w (CSS)<\/a> Twojego motywu. Ten plik definiuje style, kt\u00f3re zostan\u0105 zastosowane do stron i tre\u015bci Twojej witryny. Innymi s\u0142owy, umo\u017cliwia okre\u015blenie wygl\u0105du poszczeg\u00f3lnych element\u00f3w na Twojej stronie internetowej. Kiedy ludzie m\u00f3wi\u0105 o aktualizacji styl\u00f3w, zazwyczaj odnosz\u0105 si\u0119 do aktualizacji pliku CSS witryny.<\/p>\n\n\n\n

Tw\u00f3j motyw nadrz\u0119dny b\u0119dzie ju\u017c zawiera\u0142 arkusz styl\u00f3w, ale CSS motywu potomnego mo\u017ce by\u0107 u\u017cyty do nadpisania tych styl\u00f3w. Przyjrzymy si\u0119 p\u00f3\u017aniej, jak dok\u0142adnie to dzia\u0142a.<\/p>\n\n\n\n

Na razie potrzebujesz tylko utworzy\u0107 plik CSS. Aby to zrobi\u0107, ponownie dodaj plik tekstowy do swojego folderu wp-content\/themes\/storefront-child<\/i> (lub jakakolwiek nazwa, kt\u00f3r\u0105 u\u017cy\u0142e\u015b dla swojego motywu potomnego). Ten plik powinien nazywa\u0107 si\u0119 style.css<\/i>:<\/p>\n\n\n

\n
\"Lokalizacja<\/figure><\/div>\n\n\n

B\u0119dziesz tak\u017ce musia\u0142 doda\u0107 kilka podstawowych informacji. Skopiuj i wklej poni\u017cszy fragment do twojego nowego pliku style.css<\/i>:<\/p>\n\n\n\n

\/*\nTheme Name: Storefront Child\nTheme URI: http:\/\/example.com\/storefront-child\/\nDescription: Moje pierwsze dziecko WooCommerce\nAuthor: Twoje Imi\u0119\nAuthor URI: http:\/\/example.com\nVersion: 1.0.0\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/pre>\n\n\n\n
To s\u0105 szczeg\u00f3\u0142y dotycz\u0105ce twojego motywu, kt\u00f3re zobaczysz podczas przegl\u0105dania go w katalogu motyw\u00f3w lub na panelu WordPress. Mo\u017cesz zast\u0105pi\u0107 dane tymczasowe informacjami bardziej specyficznymi dla ciebie i twojego motywu.<\/p>\n\n\n\n
Krok 3: Skonfiguruj Motyw Potomny, aby Dziedziczy\u0142 Style Motywu Nadrz\u0119dnego<\/b><\/h3>\n\n\n\n
Jak ju\u017c wspomnieli\u015bmy, b\u0119dziesz chcia\u0142, aby Tw\u00f3j motyw potomny korzysta\u0142 z domy\u015blnych styl\u00f3w motywu nadrz\u0119dnego. Jednak\u017ce b\u0119dziesz tak\u017ce musia\u0142 nadpisa\u0107 style, kt\u00f3re chcesz zmieni\u0107. To mo\u017ce brzmie\u0107 skomplikowanie \u2014 i CSS rzeczywi\u015bcie mo\u017ce by\u0107 zawi\u0142y<\/a> \u2014 ale w swojej istocie motyw potomny zawsze b\u0119dzie korzysta\u0142 ze styl\u00f3w motywu nadrz\u0119dnego, chyba \u017ce zawiera specyficzne zast\u0105pienie.<\/p>\n\n\n\n
Na przyk\u0142ad, za\u0142\u00f3\u017cmy, \u017ce tw\u00f3j motyw nadrz\u0119dny definiuje styl dla element\u00f3w nag\u0142\u00f3wka h1 jako 20px i czerwony. Je\u015bli plik style.css<\/i> motywu potomnego nie zawiera wpisu dla nag\u0142\u00f3wk\u00f3w H1, w\u00f3wczas styl nadrz\u0119dny b\u0119dzie stosowany do ca\u0142ej zawarto\u015bci H1. Jednak\u017ce, je\u015bli dodaliby\u015bmy styl H1 do arkusza styl\u00f3w motywu potomnego, kt\u00f3ry definiuje te nag\u0142\u00f3wki jako 18px i niebieskie, to nadpisze on kierunki nadrz\u0119dne.<\/p>\n\n\n\n
Dodanie tej funkcjonalno\u015bci do Twojego motywu potomnego jest naprawd\u0119 bardzo proste. Wystarczy, \u017ce odwo\u0142asz si\u0119 do motywu nadrz\u0119dnego w arkuszu styl\u00f3w Twojego dziecka.<\/p>\n\n\n\n
Po prostu dodaj poni\u017cszy fragment po informacji, kt\u00f3r\u0105 wcze\u015bniej wklei\u0142e\u015b do pliku style.css<\/i>:<\/p>\n\n\n\n
Szablon: storefront<\/pre>\n\n\n\n
Ten kod definiuje motyw nadrz\u0119dny i zapewni, \u017ce Tw\u00f3j motyw potomny b\u0119dzie korzysta\u0142 ze styl\u00f3w Storefront wsz\u0119dzie tam, gdzie nie okre\u015bli\u0142e\u015b zamiennika. Je\u015bli tworzysz motyw potomny dla innego motywu, mo\u017cesz po prostu u\u017cy\u0107 nazwy jego folderu.<\/p>\n\n\n\n
\n\n\n
Get Content Delivered Straight to Your Inbox<\/h2>
Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p>
<\/div>