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

Czy chcesz stworzyć niestandardowy motyw WordPress od podstaw?

W przeszłości musiałeś przestrzegać kodeksu WordPress i mieć przyzwoitą wiedzę na temat kodowania, aby zbudować niestandardowy motyw WordPress. Ale dzięki nowym generatorom motywów WordPress, teraz każdy może stworzyć całkowicie niestandardowy motyw WordPress w ciągu godziny (bez wiedzy o kodowaniu).

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

Tworzenie niestandardowego motywu 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. Zazwyczaj musisz mieć przyzwoite zrozumienie wszystkich tych języków projektowania stron internetowych lub zatrudnić programistę internetowego, aby stworzyć niestandardowy motyw WordPress.

Jeśli zatrudniłeś programistę lub agencję, koszt niestandardowego motywu WordPress może osiągnąć tysiące dolarów.

Ponieważ wielu właścicieli małych firm nie mogło sobie pozwolić na wysokie koszty niestandardowego motywu WordPress, wielu z nich po prostu zdecydowało się na domyślne motywy dołączone do WordPress.

Ci, którzy nie chcieli się rozstrzygnąć i chcieli dostosować, albo użyli kreatora stron WordPress typu przeciągnij i upuść, albo użyli ramy motywu do zbudowania niestandardowego motywu.

Podczas gdy ramy motywów WordPress ułatwiły budowanie motywu WordPress, są rozwiązaniem dla programistów, a nie przeciętnego właściciela witryny.

Z drugiej strony wtyczki do tworzenia stron WordPress 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 było z nim tworzyć niestandardowych motywów.

Dopóki Beaver Builder, jedna z najlepszych wtyczek do tworzenia stron WordPress postanowiła rozwiązać ten problem za pomocą dodatku o nazwie Beaver Themer.

Beaver Themer to dodatek do tworzenia witryn, który pozwala tworzyć niestandardowe układy motywów za pomocą interfejsu przeciągnij i upuść i bez nauki kodowania.

Rzućmy okiem na to, jak używać Beaver Themer do łatwego tworzenia motywu WordPress.

Video Tutorial

Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, Kontynuuj czytanie.

Konfigurowanie Beaver Themer do tworzenia niestandardowego motywu

Beaver Themer to dodatek do Beaver Builder, więc będziesz potrzebował obu wtyczek do tego artykułu.

Najpierw musisz zainstalować i aktywować wtyczki Beaver Builder i Beaver Themer. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Beaver Themer pozwala utworzyć niestandardowy motyw, ale nadal będziesz potrzebował motywu na początek. Zalecamy użycie lekkiego motywu, który zawiera szablon strony o pełnej szerokości, aby działać jako motyw początkowy.

Można znaleźć wiele takich tematów w WordPress.org Katalog tematyczny. Większość nowoczesnych motywów WordPress zawiera szablon o pełnej szerokości. Nasze najlepsze typy to:

• Astra-darmowy lekki, uniwersalny motyw WordPress, który ma wbudowaną obsługę Beaver Builder.
• OeanWP-kolejny popularny darmowy wielozadaniowy motyw WordPress, który zapewnia pełną obsługę kreatora stron.
• Motywy StudioPress-wszystkie ich motywy są kompatybilne z Beaver Builder i świetnie współpracują z Beaver Themer.

Ze względu na ten samouczek będziemy używać Astry, która jest lekka i łatwa do dostosowania motywu WordPress.

Konfigurowanie motywu dla Beaver Themer

Podczas budowania niestandardowego motywu WordPress z motywem Beaver Themer ważne jest, aby upewnić się, że motyw Beaver ma dostęp do pełnej treści strony (od krawędzi do krawędzi).

Jest to domyślny układ Astry. Jak widać, ten układ zawiera pasek boczny, który może być trudny do pracy przy użyciu Beaver Themer.

Możesz to zmienić, odwiedzając panel administracyjny swojej witryny, a następnie przejdź do Wygląd ” Dostosuj strona. Stąd musisz przełączyć się na Layout ” Paski Boczne tab.

Następnie wybierz opcję „bez paska bocznego” w domyślnym układzie i kliknij przycisk Publikuj, aby zapisać zmiany.

Twój motyw zacznie teraz używać układu bez pasków bocznych. Jest to najlepszy układ do użycia z Beaver Themer.

Ten całostronicowy układ pozwala Beaver Themer korzystać z każdego cala ekranu, dzięki czemu można stworzyć piękne, kompleksowe 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 pasków bocznych w Ustawieniach motywu.

Jeśli nie możesz go znaleźć, skontaktuj się z twórcą motywu i może on ci w tym pomóc.

Po skonfigurowaniu motywu do Układu o pełnej szerokości jesteś gotowy do stworzenia niestandardowego motywu WordPress za pomocą motywu Beaver.

Quick Beaver Themer Podstawy

Beaver Themer działa na szczycie Beaver Builder. Jako wtyczka do tworzenia stron, Beaver Builder umożliwia przeciąganie i upuszczanie elementów na stronę w celu tworzenia niestandardowych układów.

Ma następujące elementy, które można wykorzystać w układach:

• Szablon: zbiór wierszy kolumn i modułów tworzących cały układ strony.
• Kolumny: pionowe Moduły układu, które pomagają wyrównać zawartość w poziomie.
• Wiersze: poziomy zbiór wielu modułów
• Moduł: element, który wyświetla określone informacje, takie jak tytuł, blok tekstu, 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 zacząć je edytować.

Jeśli nie chcesz zaczynać od zera, wybierz najpierw z listy gotowych szablonów.

Beaver Builder pozwala również zapisywać układy, a następnie używać ich później jako szablonów.

Aby dowiedzieć się więcej, zapoznaj się z naszym artykułem na temat tworzenia niestandardowego układu strony za pomocą programu Beaver Builder.

Nie chcemy jednak tylko tworzyć Układów Stron. Chcemy stworzyć kompletny, niestandardowy motyw.

Wtedy pojawia się Beaver Themer.

Dodaje on kolejny element do Beaver Buildera o nazwie 'Themer Layout’.

Układy tematyczne umożliwiają tworzenie niestandardowych układów nagłówka, stopki, obszarów zawartoś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 pasuje do Twoich potrzeb.

Korzystanie z szablonów Beaver Themer do tworzenia niestandardowego motywu WordPress

W poniższych instrukcjach przeprowadzimy Cię przez kroki potrzebne do zbudowania najpopularniejszych niestandardowych elementów motywu. Zanim skończysz, całkowicie przekształcisz swój motyw podstawowy w w pełni niestandardowy motyw potomny WordPress.

Tworzenie niestandardowego nagłówka dla Twojego motywu

Zacznijmy od obszaru nagłówka witryny. Niestandardowy nagłówek jest istotnym elementem 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 użyć modułów menu i obrazów z układem dwukolumnowym.

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

Następnie wybierz „Układ motywu” jako typ i „nagłówek” jako opcję układu. Po zakończeniu kliknij przycisk „Dodaj układ motywu”, aby kontynuować.

Spowoduje to przejście do strony ustawień układu. Stąd musisz wybrać „całą witrynę” jako lokalizację, w której będzie wyświetlany szablon nagłówka.

Następnie kliknij przycisk’ Launch Beaver Builder’, aby otworzyć interfejs konstruktora.

Beaver Builder uruchomi się z podstawowym pojedynczą kolumną i dwurzędowym układem nagłówka jako punktem wyjścia.

Możesz użyć tego samego narzędzia do przeciągania i upuszczania Beaver Builder, aby zmienić tło, kolory, tekst itp. Możesz również dodać inne moduły, załadować gotowe szablony i dodać wiersze / kolumny, klikając przycisk Dodaj w prawym górnym rogu.

Gdy będziesz zadowolony z projektu, kliknij przycisk Gotowe, aby zapisać lub opublikować swój układ.

Możesz teraz odwiedzić swoją witrynę, aby zobaczyć niestandardowy nagłówek motywu w akcji. Jak widać, zastosowaliśmy układ nagłówka do naszego niestandardowego motywu.

Oprócz nagłówka nie wyświetli on jeszcze żadnej treści, a prawdopodobnie zobaczysz obszar stopki motywu podstawowego.

Zmieńmy to.

Tworzenie niestandardowej stopki dla Twojego motywu

Możesz utworzyć niestandardową stopkę dla swojego motywu za pomocą motywu Beaver, tak jak stworzyłeś niestandardowy nagłówek.

Przejdź do Beaver Builder ” Dodaj Nowy strony i podaj tytuł układu stopki. Następnie wybierz „Układ motywu” jako typ i „stopka” jako opcję układu.

Kliknij przycisk „Dodaj układ motywu”, aby kontynuować.

Spowoduje to przejście do strony ustawień układu. Stąd musisz wybrać „Cała strona” jako lokalizację, w której będzie wyświetlany szablon.

Następnie kliknij przycisk 'Launch Beaver Builder’, aby otworzyć interfejs konstruktora.

Beaver Builder uruchomi się z układem stopki przy użyciu trzech kolumn. Możesz użyć tego układu jako punktu wyjścia i rozpocząć edycję.

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

Gdy będziesz zadowolony z projektu, kliknij przycisk Gotowe, aby zapisać lub opublikować swój układ.

Budowanie obszaru 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 zbudować Post lub treść strony (obszar zawartości).

Zaczniemy w taki sam sposób, jak zbudowaliśmy nagłówek i stopkę, dodając układ „pojedynczej” w Dodaj nową stronę.

Następnie wybierz miejsce wyświetlania tego układu. Możesz wybrać liczbę pojedynczą, aby użyć jej dla wszystkich pojedynczych postów i stron, lub możesz wybrać posty lub tylko strony.

Następnie kliknij przycisk 'Launch Beaver Builder’, aby otworzyć interfejs konstruktora.

Beaver Builder załaduje przykładowy układ jednostkowy z tytułem postu/strony na górze, a następnie treścią, bio autora i obszarem komentarzy.

Możesz wskazywać i klikać, aby edytować dowolny z tych elementów lub dodawać nowe moduły, kolumny i wiersze w razie potrzeby.

Gdy jesteś zadowolony z układu, kliknij przycisk Gotowe, aby zapisać i opublikować zmiany.

Możesz teraz odwiedzić swoją stronę internetową, aby zobaczyć ją w akcji.

Tworzenie układów archiwów dla własnego motywu

Teraz, gdy Twój niestandardowy motyw zaczął się kształtować, możesz przejść do tworzenia układów dla innych części witryny. Strony archiwalne to miejsca, w których WordPress wyświetla Twoje kategorie, tagi, autora i miesięczne archiwa.

Stwórzmy układ dla stron archiwalnych w Twoim niestandardowym motywie.

Zaczniesz od wizyty Beaver Builder ” Dodaj Nowy strony i podając tytuł dla układu archiwum.

Następnie wybierz „Układ tematyczny” jako typ i „Archiwum” jako opcję układu. Kliknij przycisk „Dodaj układ motywu”, aby kontynuować.

Spowoduje to przejście do strony ustawień układu. Stąd musisz wybrać „wszystkie archiwum” jako lokalizację, w której będzie wyświetlany szablon. Możesz także tworzyć osobne układy dla każdego typu archiwum, takie jak data, wyniki wyszukiwania, Kategoria, tagi itp.

Następnie kliknij przycisk 'Launch Beaver Builder’, aby otworzyć interfejs konstruktora.

Beaver Builder uruchomi się z podstawowym układem jednokolumnowego archiwum. Wyświetli tytuł archiwum na górze, po którym znajdują się posty.

Możesz wskazać i kliknąć dowolny element, aby edytować jego właściwości. W razie potrzeby można również dodawać nowe moduły, wiersze i kolumny.

Następnie kliknij przycisk „Gotowe”, aby zapisać i opublikować zmiany.

Tworzenie innych układów dla niestandardowego motywu WordPress

Beaver Themer umożliwia również 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ć własny niestandardowy motyw WordPress od podstaw bez pisania kodu. Jest to naprawdę najbardziej przyjazna dla początkujących metoda tworzenia motywów WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak stworzyć niestandardowy motyw WordPress bez nauki kodowania. Możesz również zobaczyć nasz przewodnik, jak przyspieszyć swoją witrynę WordPress, aby uzyskać lepsze SEO i wrażenia użytkownika.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.