Jak łatwo stworzyć niestandardowy motyw WordPress (bez kodu)

Czy chcesz utworzy─ç niestandardowy motyw WordPress od podstaw?

W przesz┼éo┼Ťci trzeba by┼éo post─Öpowa─ç zgodnie z kodeksem WordPress i mie─ç przyzwoit─ů wiedz─Ö na temat kodowania, aby utworzy─ç niestandardowy motyw WordPress. Ale dzi─Öki nowym generatorom motyw├│w WordPress ka┼╝dy mo┼╝e teraz stworzy─ç ca┼ékowicie niestandardowy motyw WordPress w ci─ůgu godziny (nie wymaga znajomo┼Ťci kodowania).

W tym artykule pokażemy, jak łatwo utworzyć niestandardowy motyw WordPress bez pisania kodu.

Utw├│rz niestandardowy motyw WordPress bez pisania kodu

Utw├│rz niestandardowy motyw WordPress dla pocz─ůtkuj─ůcych

W przeciwie┼ästwie do statycznych stron HTML, motywy WordPress to zestaw plik├│w szablon├│w napisanych w PHP, HTML, CSS i JavaScript. Zwykle trzeba mie─ç dobr─ů znajomo┼Ť─ç wszystkich tych j─Özyk├│w projektowania stron internetowych lub zatrudni─ç programist─Ö WWW, aby utworzy─ç niestandardowy motyw WordPress.

Je┼Ťli zatrudniono programist─Ö lub agencj─Ö, koszt niestandardowego motywu WordPress mo┼╝e wynie┼Ť─ç tysi─ůce dolar├│w.

Poniewa┼╝ wielu w┼éa┼Ťcicieli ma┼éych firm nie by┼éo sta─ç na wysokie koszty niestandardowego motywu WordPress, wielu z nich po prostu zdecydowa┼éo si─Ö na domy┼Ťlne motywy dostarczane z WordPress.

Ci, kt├│rzy nie chcieli ustawia─ç i chcieli dostosowa┼ä, korzystali z narz─Ödzia do tworzenia stron metod─ů przeci─ůgnij i upu┼Ť─ç WordPress lub u┼╝ywali frameworka motywu do stworzenia niestandardowego motywu.

Chocia┼╝ ramy motyw├│w WordPress u┼éatwiaj─ů tworzenie motyw├│w WordPress, s─ů one rozwi─ůzaniem dla programist├│w, a nie przeci─Ötnego w┼éa┼Ťciciela witryny.

Z drugiej strony wtyczki konstruktora stron WordPress bardzo u┼éatwi┼éy tworzenie niestandardowych uk┼éad├│w stron za pomoc─ů interfejsu przeci─ůgnij i upu┼Ť─ç, ale by┼éy one ograniczone tylko do uk┼éad├│w. Nie mo┼╝na za jego pomoc─ů tworzy─ç niestandardowych motyw├│w.

Nawet Beaver Builder, jedna z najlepszych wtyczek kreatora stron WordPress, zdecydowa┼éa si─Ö rozwi─ůza─ç ten problem dzi─Öki swojej wtyczce o nazwie Beaver Themer.

Beaver Builder, najlepsza wtyczka generatora stron WordPress

Beaver Themer to wtyczka do tworzenia witryn, kt├│ra pozwala tworzy─ç niestandardowe projekty motyw├│w za pomoc─ů interfejsu ÔÇ×przeci─ůgnij i upu┼Ť─çÔÇŁ bez nauki programowania.

Przyjrzyjmy się, jak używać Beaver Themer do łatwego tworzenia motywu WordPress.

Samouczek wideo

Subskrybuj WPBeginner

Je┼Ťli nie podoba ci si─Ö film lub potrzebujesz wi─Öcej instrukcji, czytaj dalej.

Skonfiguruj Beaver Themer, aby utworzy─ç niestandardowy motyw

Beaver Themer to dodatkowa wtyczka do Beaver Builder, wi─Öc w tym artykule b─Ödziesz potrzebowa─ç obu wtyczek.

Najpierw musisz zainstalowa─ç i aktywowa─ç wtyczki Beaver Builder i Beaver Themer. Aby uzyska─ç wi─Öcej informacji, zapoznaj si─Ö z naszym przewodnikiem krok po kroku, w jaki spos├│b zainstalowa─ç wtyczk─Ö WordPress.

Beaver Themer umo┼╝liwia utworzenie niestandardowego motywu, ale nadal potrzebujesz motywu, aby rozpocz─ů─ç. Zalecamy stosowanie lekkiego motywu zawieraj─ůcego szablon strony o pe┼énej szeroko┼Ťci, kt├│ry b─Ödzie dzia┼éa┼é jako motyw pocz─ůtkowy.

Wiele z tych motyw├│w mo┼╝na znale┼║─ç w katalogu motyw├│w WordPress.org. Wi─Ökszo┼Ť─ç nowoczesnych motyw├│w WordPress zawiera szablon o pe┼énej szeroko┼Ťci. Nasze najlepsze opcje to:

  • Astra – darmowy i lekki uniwersalny motyw WordPress z wbudowan─ů obs┼éug─ů Beaver Builder.

  • OeanWP – Kolejny popularny darmowy uniwersalny motyw WordPress, kt├│ry oferuje pe┼én─ů obs┼éug─Ö tworzenia stron.

  • Motywy StudioPress: Wszystkie Twoje motywy s─ů kompatybilne z Beaver Builder i ┼Ťwietnie wsp├│┼épracowa┼éyby z Beaver Themer.

  • Na potrzeby tego samouczka u┼╝yjemy Astry, kt├│ra jest lekkim i ┼éatwym do dostosowania motywem WordPress.

    Skonfiguruj motyw Beaver Themer

    Podczas tworzenia niestandardowego motywu WordPress za pomoc─ů Beaver Themer, wa┼╝ne jest, aby Beaver Themer mia┼é dost─Öp do ca┼éego cia┼éa strony (od kraw─Ödzi do kraw─Ödzi).

    To jest domy┼Ťlny uk┼éad Astry. Jak wida─ç, ta konstrukcja zawiera pasek boczny, kt├│ry mo┼╝e by─ç trudny w obs┼éudze podczas korzystania z Beaver Themer.

    Domy┼Ťlny uk┼éad motywu z paskiem bocznym

    Mo┼╝esz to zmieni─ç, odwiedzaj─ůc panel administracyjny swojej witryny, a nast─Öpnie nawiguj─ůc do Wygl─ůd ┬╗Dostosuj strona. St─ůd nale┼╝y prze┼é─ůczy─ç na Design ┬╗Belki boczne j─Özyk.

    Dezaktywuj barras boczne w twoim motywie

    Tam po prostu wybierz ÔÇ×Brak paska bocznegoÔÇŁ w domy┼Ťlnej opcji uk┼éadu i kliknij przycisk Publikuj, aby zapisa─ç zmiany.

    Twój motyw zacznie teraz używać układu bez barras boczne To najlepszy projekt do użycia z Beaver Themer.

    Projekt motywu bez barras boczne

    Ten układ całostronicowy pozwala Beaver Themer wykorzystywać każdy cal ekranu, dzięki czemu możesz stworzyć piękne wrażenia wizualne.

    Wi─Ökszo┼Ť─ç motyw├│w WordPress zawiera plik szablonu dla stron o pe┼énej szeroko┼Ťci. Je┼Ťli u┼╝ywasz innego motywu, mo┼╝esz znale┼║─ç opcj─Ö usuni─Öcia barras boki w ustawieniach motywu.

    Je┼Ťli nie mo┼╝esz go znale┼║─ç, skontaktuj si─Ö z tw├│rc─ů motywu, kt├│ry mo┼╝e Ci w tym pom├│c.

    Po skonfigurowaniu motywu w uk┼éadzie o pe┼énej szeroko┼Ťci mo┼╝esz utworzy─ç niestandardowy motyw WordPress za pomoc─ů Beaver Themer.

    Podstawy Quick Beaver Themer

    Beaver Themer dzia┼éa na Beaver Builder. Jako dodatek do programu buduj─ůcego strony Beaver Builder umo┼╝liwia przeci─ůganie i upuszczanie element├│w na stron─Ö w celu tworzenia niestandardowych uk┼éad├│w.

    Zawiera nast─Öpuj─ůce elementy, kt├│re mo┼╝na wykorzysta─ç w swoich projektach:

  • Szablon – zbi├│r kolumn, wierszy i modu┼é├│w tworz─ůcych pe┼ény uk┼éad strony.
  • Kolumny – modu┼éy uk┼éadu pionowego, kt├│re pomagaj─ů wyr├│wnywa─ç zawarto┼Ť─ç w poziomie.
  • Rz─Ödy: poziomy zbi├│r wielu modu┼é├│w
  • Modu┼é: element, kt├│ry generuje okre┼Ťlone informacje, takie jak tytu┼é, blok tekstowy, tabela, galeria itp.
  • Po prostu edytuj stron─Ö w Beaver Builder, a nast─Öpnie kliknij przycisk Dodaj w prawym g├│rnym rogu. Nast─Öpnie mo┼╝esz przeci─ůga─ç i upuszcza─ç kolumny, wiersze, modu┼éy na swoj─ů stron─Ö i od razu je edytowa─ç.

    Korzystanie z Beaver Buildera

    Je┼Ťli nie chcesz zaczyna─ç od zera, wybierz list─Ö gotowych szablon├│w na pocz─ůtek.

    Szablony Beaver Builder

    Beaver Builder pozwala tak┼╝e zapisywa─ç projekty, a nast─Öpnie wykorzystywa─ç je p├│┼║niej jako szablony.

    Aby uzyska─ç wi─Öcej informacji, zobacz nasz artyku┼é na temat tworzenia niestandardowego uk┼éadu strony za pomoc─ů Beaver Builder.

    Nie chcemy jednak tworzyć układów stron. Chcemy stworzyć kompletny niestandardowy motyw.

    Wtedy pojawia si─Ö Beaver Themer.

    Dodaj kolejny element do Beaver Buildera o nazwie ÔÇ×Themer LayoutÔÇŁ.

    Themer design

    Uk┼éady te pozwalaj─ů tworzy─ç niestandardowe uk┼éady dla nag┼é├│wka, stopki, obszar├│w tre┼Ťci, strony 404 i innych cz─Ö┼Ťci szablonu.

    S─ů to elementy sk┼éadowe wszystkich motyw├│w WordPress, a korzystaj─ůc z nich b─Ödziesz m├│g┼é stworzy─ç niestandardowy motyw, kt├│ry spe┼éni twoje potrzeby.

    Korzystanie z szablon├│w Beaver Themer do tworzenia niestandardowego motywu WordPress

    W poniższych instrukcjach przeprowadzimy Cię przez kroki niezbędne do stworzenia najpopularniejszych niestandardowych elementów motywu. Zanim skończysz, całkowicie przekształcisz motyw podstawowy w całkowicie dostosowany motyw podrzędny WordPress.

    Utwórz niestandardowy nagłówek dla swojego motywu

    Zacznijmy od obszaru nagłówka Twojej witryny. Niestandardowy nagłówek jest niezbędnym składnikiem motywu, a budowanie go może być trudne przy użyciu tradycyjnych metod.

    Na szcz─Ö┼Ťcie Beaver Themer ma wbudowane funkcje nag┼é├│wka. Mo┼╝esz u┼╝y─ç wst─Öpnie utworzonego szablonu lub modu┼é├│w menu i obrazu z uk┼éadem dw├│ch kolumn.

    Aby dostać się do tego obszaru nagłówka, najpierw musimy skonfigurować układ nagłówka w Beaver Themer. Odwiedź Beaver Builder »Dodaj nowy i podaj tytuł nagłówka.

    Utwórz niestandardowy układ nagłówka

    Nast─Öpnie wybierz ÔÇ×Themer LayoutÔÇŁ jako typ i ÔÇ×HeaderÔÇŁ jako opcj─Ö uk┼éadu. Po zako┼äczeniu kliknij przycisk ÔÇ×Dodaj projekt Themer DesignÔÇŁ, aby kontynuowa─ç.

    Spowoduje to przej┼Ťcie do strony konfiguracji uk┼éadu. W tym miejscu musisz wybra─ç ÔÇ×Ca┼éa stronaÔÇŁ jako lokalizacj─Ö, w kt├│rej b─Ödzie wy┼Ťwietlany szablon nag┼é├│wka.

    Opcje układu

    Nast─Öpnie kliknij przycisk ÔÇ×Uruchom Beaver BuilderÔÇŁ, aby otworzy─ç interfejs generatora.

    Beaver Builder uruchomi si─Ö z prost─ů podstawow─ů kolumn─ů i dwurz─Ödowym uk┼éadem nag┼é├│wk├│w jako punktem pocz─ůtkowym.

    Projekt nagłówka

    Mo┼╝esz u┼╝y─ç tych samych narz─Ödzi przeci─ůgania i upuszczania Beaver Builder, aby zmieni─ç t┼éo, kolory, tekst itp. Mo┼╝esz tak┼╝e dodawa─ç inne modu┼éy, ┼éadowa─ç gotowe szablony i dodawa─ç wiersze / kolumny, klikaj─ůc przycisk Dodaj w prawym g├│rnym rogu.

    Gdy jeste┼Ť zadowolony z projektu, kliknij przycisk Gotowe, aby zapisa─ç lub opublikowa─ç sw├│j projekt.

    Mo┼╝esz teraz odwiedzi─ç ich stron─Ö internetow─ů, aby zobaczy─ç w akcji nag┼é├│wek niestandardowego motywu. Jak wida─ç, zastosowali┼Ťmy uk┼éad nag┼é├│wka do naszego niestandardowego motywu.

    Niestandardowy nagłówek niestandardowego motywu

    Poza nag┼é├│wkiem nadal nie wy┼Ťwietla ┼╝adnej tre┼Ťci i prawdopodobnie zobaczysz obszar stopki motywu podstawowego.

    Zmieńmy to.

    Utw├│rz niestandardow─ů stopk─Ö dla swojego motywu

    Mo┼╝esz utworzy─ç niestandardow─ů stopk─Ö dla swojego motywu za pomoc─ů Beaver Themer, tak jak utworzy┼ée┼Ť niestandardowy nag┼é├│wek.

    Id┼║ do Beaver Builder ┬╗Dodaj nowy i podaj tytu┼é uk┼éadu stopki. Nast─Öpnie wybierz ÔÇ×Themer LayoutÔÇŁ jako typ i ÔÇ×FooterÔÇŁ jako opcj─Ö uk┼éadu.

    Układ stopki

    Kliknij przycisk ÔÇ×Dodaj projektÔÇŁ, aby kontynuowa─ç.

    Spowoduje to przej┼Ťcie do strony konfiguracji uk┼éadu. W tym miejscu musisz wybra─ç ÔÇ×Pe┼éna witrynaÔÇŁ jako lokalizacj─Ö, w kt├│rej b─Ödzie wy┼Ťwietlany szablon.

    Ustawienia układu stopki

    Nast─Öpnie kliknij przycisk ÔÇ×Uruchom Beaver BuilderÔÇŁ, aby otworzy─ç interfejs generatora.

    Beaver Builder zostanie uruchomiony z trzykolumnowym uk┼éadem stopki. Mo┼╝esz u┼╝y─ç tego projektu jako punktu pocz─ůtkowego i rozpocz─ů─ç edycj─Ö.

    Edycja układu stopki

    Możesz dodawać moduły, bloki tekstowe lub cokolwiek innego. Zawsze możesz zmienić kolory, czcionki, dodać obraz tła i wiele więcej.

    Gdy jeste┼Ť zadowolony z projektu, kliknij przycisk Gotowe, aby zapisa─ç lub opublikowa─ç sw├│j projekt.

    Utw├│rz obszar tre┼Ťci dla post├│w i stron

    Teraz, gdy stworzyli┼Ťmy nag┼é├│wki i stopki dla ka┼╝dej strony i postu w witrynie, nadszed┼é czas, aby utworzy─ç post lub tre┼Ť─ç strony (obszar tre┼Ťci).

    Rozpoczniemy w ten sam spos├│b, w jaki budujemy nag┼é├│wek i stopk─Ö, dodaj─ůc uk┼éad ÔÇ×SingularÔÇŁ na stronie Add New.

    Twórz posty i układy stron

    Nast─Öpnie wybierzesz, gdzie chcesz wy┼Ťwietli─ç ten projekt. Mo┼╝esz wybra─ç liczb─Ö pojedyncz─ů dla wszystkich post├│w i poszczeg├│lnych stron albo mo┼╝esz wybra─ç posty lub tylko strony.

    Unikalna konfiguracja projektu

    Nast─Öpnie kliknij przycisk ÔÇ×Uruchom Beaver BuilderÔÇŁ, aby otworzy─ç interfejs generatora.

    Unikalna edycja projektu

    Beaver Builder za┼éaduje unikalny przyk┼éadowy uk┼éad z tytu┼éem postu / strony u g├│ry, a nast─Öpnie tre┼Ťci─ů, polem autora i obszarem komentarza.

    Mo┼╝esz wskaza─ç i klikn─ů─ç, aby edytowa─ç dowolny z tych element├│w lub doda─ç nowe modu┼éy, kolumny i wiersze wed┼éug potrzeb.

    Gdy jeste┼Ť zadowolony z projektu, kliknij przycisk Gotowe, aby zapisa─ç i opublikowa─ç zmiany.

    Mo┼╝esz teraz odwiedzi─ç ich stron─Ö internetow─ů, aby zobaczy─ç, jak dzia┼éa.

    Projekt motywu z tre┼Ťci─ů.

    Utwórz układy plików dla niestandardowego motywu

    Po utworzeniu niestandardowego motywu mo┼╝esz kontynuowa─ç tworzenie uk┼éad├│w dla innych cz─Ö┼Ťci witryny. Strony archiwalne to miejsca, w kt├│rych WordPress wy┼Ťwietla kategorie, tagi, autora i pliki miesi─Öczne.

    Utwórzmy układ strony pliku na niestandardowy motyw.

    Zaczniesz od wizyty Beaver Builder »Dodaj nowy i podaj tytuł swojego układu plików.

    Utwórz układ pliku dla niestandardowego motywu

    Nast─Öpnie wybierz ÔÇ×Themer LayoutÔÇŁ jako typ i ÔÇ×FileÔÇŁ jako opcj─Ö uk┼éadu. Kliknij przycisk ÔÇ×Dodaj projektÔÇŁ, aby kontynuowa─ç.

    Spowoduje to przej┼Ťcie do strony konfiguracji uk┼éadu. W tym miejscu musisz wybra─ç ÔÇ×Wszystkie plikiÔÇŁ jako lokalizacj─Ö, w kt├│rej szablon b─Ödzie wy┼Ťwietlany. Mo┼╝esz tak┼╝e utworzy─ç osobne uk┼éady dla ka┼╝dego typu pliku, takie jak data, wyniki wyszukiwania, kategoria, tagi itp.

    Ustawienia układu plików

    Nast─Öpnie kliknij przycisk ÔÇ×Uruchom Beaver BuilderÔÇŁ, aby otworzy─ç interfejs generatora.

    Beaver Builder uruchomi si─Ö z podstawowym uk┼éadem plik├│w jednokolumnowych. Wy┼Ťwietli tytu┼é pliku u g├│ry, a nast─Öpnie posty.

    Edycja układu pliku dla motywu

    Mo┼╝esz wskaza─ç i klikn─ů─ç dowolny element, aby edytowa─ç jego w┼éa┼Ťciwo┼Ťci. W razie potrzeby mo┼╝esz tak┼╝e dodawa─ç nowe modu┼éy, wiersze i kolumny.

    Nast─Öpnie kliknij przycisk ÔÇ×GotoweÔÇŁ, aby zapisa─ç i opublikowa─ç zmiany.

    Utw├│rz inne projekty dla niestandardowego motywu WordPress

    Beaver Themer umo┼╝liwia tak┼╝e tworzenie uk┼éad├│w dla innych stron w hierarchii szablon├│w, na przyk┼éad strony 404, cz─Ö┼Ťci szablonu, strony wynik├│w wyszukiwania i innych.

    Korzystaj─ůc z wbudowanej funkcji przeci─ůgania i upuszczania Beaver Builder, mo┼╝esz ┼éatwo stworzy─ç sw├│j w┼éasny niestandardowy motyw WordPress od zera bez konieczno┼Ťci pisania kodu. To naprawd─Ö najbardziej przyjazna dla pocz─ůtkuj─ůcych metoda tworzenia motyw├│w WordPress.

    Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się tworzyć niestandardowy motyw WordPress bez nauki programowania. Możesz także zapoznać się z naszym przewodnikiem, w jaki sposób przyspieszyć witrynę WordPress, aby zwiększyć wygodę użytkowników i SEO.

    Je┼Ťli podoba Ci si─Ö ten artyku┼é, subskrybuj nasz kana┼é YouTube ogl─ůda─ç filmy instrukta┼╝owe WordPress. Mo┼╝esz nas r├│wnie┼╝ znale┼║─ç na stronie Twitter y Facebook.