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

Czy chcesz utworzyć niestandardowy motyw WordPress od podstaw?

Wcześniej trzeba było przestrzegać Kodeksu WordPress i mieć wystarczające umiejętności kodowania, aby utworzyć niestandardowy motyw WordPress. Dzięki nowym generatorom motywów WordPress każdy może stworzyć w pełni dostosowany motyw WordPress w ciągu godziny (nie wymaga umiejętności programowania).

W tym artykule pokażemy, jak łatwo utworzyć niestandardowy układ 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. Zazwyczaj musisz albo zrozumieć wszystkie te języki projektowania stron internetowych, albo zatrudnić programistę do stworzenia niestandardowego motywu WordPress.

Jeśli zatrudniłeś programistę lub agencję, cena niestandardowego motywu WordPress może wynosić 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 wybrało domyślne motywy dostarczane z WordPress.

Ci, którzy nie chcieli zatwierdzać i chcieli dostosowań, użyli narzędzia do tworzenia stron typu „przeciągnij i upuść” lub ramki motywu WordPress, aby utworzyć niestandardowy motyw.

Chociaż ramy motywów WordPress ułatwiają tworzenie motywów WordPress, są one rozwiązaniem dla programistów, a nie przeciętnym właścicielem witryny.

Z drugiej strony, wtyczki WordPress bardzo ułatwiły twórcy stron tworzenie niestandardowych układów stron za pomocą interfejsu przeciągnij i upuść, ale były one ograniczone tylko do układu. Nie można za jego pomocą tworzyć niestandardowych motywów.

Nawet Beaver Builder, jedna z najlepszych wtyczek do konstruktora stron WordPress, zdecydowała się rozwiązać ten problem dzięki swojej wtyczce o nazwie Beaver Themer.

Beaver Builder, najlepsza wtyczka do generatora stron WordPress

Beaver Themer to wtyczka do tworzenia witryn, która pozwala tworzyć niestandardowe układy za pomocą interfejsu przeciągnij i upuść bez konieczności nauki programowania.

Zobaczmy, jak łatwo utworzyć motyw WordPress za pomocą Beaver Themer.

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, dlatego w tym artykule potrzebujesz obu wtyczek.

Najpierw zainstaluj i włącz wtyczki Beaver Builder i Beaver Themer. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku dotyczący instalowania wtyczki WordPress.

Z Beaver Themer możesz stworzyć niestandardowy motyw, ale nadal potrzebujesz motywu, aby rozpocząć. Zalecamy stosowanie lekkiego motywu zawierającego szablon strony o pełnej szerokości, który służy 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 łatwy w użyciu motyw WordPress do dowolnego celu z wbudowaną obsługą Beaver Builder.

  • OeanWP – Kolejny popularny darmowy uniwersalny motyw WordPress, który zapewnia pełne wsparcie tworzenia stron.

  • Układ StudioPress – wszystkie układy są kompatybilne z Beaver Builder i działają dobrze z Beaver Themer.

  • W tym samouczku użyliśmy Astra, lekkiego i łatwo dostosowalnego motywu WordPress.

    Skonfiguruj motyw Beaver Themer

    Tworząc niestandardowy motyw WordPress za pomocą Beaver Themer, ważne jest, aby Beaver Themer miał dostęp do całej treści strony (od krawędzi do krawędzi).

    To standardowa konstrukcja Astry. Jak widać, ta konstrukcja zawiera pasek boczny, który może być trudny w obsłudze podczas korzystania z Beaver Themer.

    Standardowy układ z paskiem bocznym

    Możesz to zmienić, odwiedzając panel administracyjny swojej witryny, a następnie przeglądając Wygląd »Dostosuj Side. Odtąd musisz się zmienić Design »barras boczne Ciężki

    Wyłącz barras boki dla twojego motywu

    Wystarczy wybrać opcję „Brak okienka strony” w domyślnej opcji układu i kliknąć przycisk „Opublikuj”, aby zapisać zmiany.

    Twój motyw używa teraz projektu bez barras boczne To najlepszy projekt dla Beaver Themer.

    Tematyczny projekt bez barras boczne

    Ten pełny układ strony pozwala Beaverowi Themerowi korzystać z każdego cala ekranu, dzięki czemu możesz stworzyć piękne wrażenia wizualne.

    Większość motywów WordPress zawiera szablon strony o pełnej szerokości. Jeśli używasz innego motywu, znajdziesz opcję usunięcia barras boki w ustawieniach motywu.

    Jeśli nie możesz go znaleźć, skontaktuj się z programistą motywów, aby uzyskać pomoc.

    Po skonfigurowaniu motywu w układzie o pełnej szerokości możesz użyć Beaver Themer, aby utworzyć niestandardowy motyw WordPress.

    Podstawy Quick Beaver Themer

    Beaver Themer współpracuje z Beaver Builder. W Beaver Builder jako dodatku do programu budującego strony możesz przeciągać i upuszczać elementy na stronie, aby tworzyć niestandardowe układy.

    Zawiera następujące elementy, których możesz użyć 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 umożliwiają dopasowanie zawartości w poziomie.
  • Linie: poziomy montaż kilku modułów.
  • Moduł: Element, który generuje pewne 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 i moduły na swojej stronie i od razu rozpocząć edycję.

    Użyj Beaver Buildera

    Jeśli nie chcesz zaczynać od zera, najpierw wybierz listę przygotowanych szablonów.

    Szablony konstruktora bobrów

    Beaver Builder pozwala także zapisywać projekty i 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ć całkowicie spersonalizowany 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, treści, strony 404 i innych sekcji szablonów.

    Są to elementy składowe wszystkich motywów WordPress. Możesz użyć tych elementów do stworzenia niestandardowego motywu, który spełnia Twoje potrzeby.

    Użyj szablonów Beaver Themer, aby utworzyć niestandardowy motyw WordPress

    W poniższych instrukcjach przeprowadzimy Cię przez kroki niezbędne do stworzenia najpopularniejszych niestandardowych elementów motywu. Po wykonaniu tej czynności całkowicie przekształciłeś podstawowy motyw w całkowicie dostosowany motyw podrzędny WordPress.

    Utwórz niestandardowy nagłówek dla swojego motywu

    Zacznijmy od tytułu twojej witryny. Niestandardowy nagłówek jest integralną częścią motywu i utworzenie nagłówka przy użyciu tradycyjnych metod może być trudne.

    Na szczęście Beaver Themer ma wbudowane funkcje nagłówka. Możesz użyć wcześniej wyszkolonego szablonu lub modułów menu i obrazu z układem dwóch kolumn.

    Aby dostać się do tego obszaru nagłówka, musisz najpierw ustawić układ nagłówka w Beaver Themer. wizyta Beaver Builder »Dodaj nowy Strona i wprowadź tytuł nagłówka.

    Utwórz niestandardowy układ nagłówka

    Następnie wybierz „Design Themer” jako typ i „Header” jako opcję projektu. Po zakończeniu kliknij przycisk „Dodaj motyw motywu”, aby kontynuować.

    Spowoduje to przejście do strony konfiguracji układu. Stąd wybierz „Pełna witryna” jako lokalizację szablonu tytułu.

    Ustawienia układu

    Następnie kliknij przycisk „Uruchom Beaver Builder”, aby otworzyć interfejs generatora.

    Beaver Builder zaczyna się od prostej kolumny bazowej i dwuliniowego układu nagłówka jako punktu początkowego.

    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.

    Jeśli jesteś zadowolony z projektu, kliknij przycisk Gotowe, aby zapisać lub opublikować swój projekt.

    Teraz możesz odwiedzić ich witrynę, aby zobaczyć tytuł niestandardowego motywu w akcji. Jak widać, stosujemy układ nagłówka do naszego niestandardowego motywu.

    Niestandardowy nagłówek niestandardowego motywu

    Nie ma jeszcze treści oprócz tytułu i prawdopodobnie zobaczysz obszar stopki w temacie podstawowym.

    Zmieńmy to.

    Utwórz niestandardową stopkę dla swojego motywu

    Możesz użyć Beaver Themer, aby utworzyć niestandardową stopkę dla swojego motywu, tak jak utworzyłeś niestandardowy nagłówek.

    Idź do Beaver Builder »Dodaj nowy Strona i wprowadź tytuł układu stopki. Następnie wybierz „Layout Themer” 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. Stąd wybierz „Pełna strona” jako lokalizację szablonu.

    Ustawienia układu stopki

    Następnie kliknij przycisk „Uruchom Beaver Builder”, aby otworzyć interfejs generatora.

    Beaver Builder zaczyna się od trójkolumnowego układu stopki. Możesz użyć tego projektu jako punktu początkowego i rozpocząć edycję.

    Edytuj układ stopki

    Możesz dodawać moduły, bloki tekstowe lub cokolwiek innego. W dowolnym momencie możesz zmieniać kolory, czcionki, dodawać obraz tła i więcej.

    Jeśli jesteś zadowolony z projektu, kliknij przycisk Gotowe, aby zapisać lub opublikować swój projekt.

    Utwórz obszar zawartości dla postów i stron

    Po utworzeniu nagłówków i stopek dla każdej strony i treści w witrynie nadszedł czas, aby utworzyć post lub treść na stronie (obszarze treści).

    Zaczynamy w taki sam sposób, jak tworzymy nagłówek i stopkę i dodajemy układ liczby pojedynczej do Dodaj nową stronę.

    Twórz posty i układy stron

    Następnie wybierz, gdzie powinien pojawić się ten projekt. Możesz wybrać liczbę pojedynczą dla wszystkich postów i poszczególnych stron, lub wybrać posty lub tylko strony.

    Unikalna konfiguracja projektu

    Następnie kliknij przycisk „Uruchom Beaver Builder”, aby otworzyć interfejs generatora.

    Unikalna edycja projektu

    Beaver Builder ładuje unikalny przykładowy układ z tytułem poprzedniego artykułu / strony, po którym następuje treść, biobox autora i obszar komentarzy.

    Możesz wskazać i kliknąć, aby edytować jeden 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 witrynę, aby zobaczyć je w akcji.

    Tematyczny projekt z zawartością.

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

    Po utworzeniu niestandardowego motywu możesz nadal tworzyć układy dla innych części witryny. WordPress wyświetla swoje kategorie, tagi, autorów i pliki miesięczne na stronach archiwów.

    Utwórzmy układ strony archiwum dla niestandardowego motywu.

    Zaczynasz od wizyty Beaver Builder »Dodaj nowy Strona i wprowadź tytuł projektu pliku.

    Utwórz układ pliku dla niestandardowego motywu

    Następnie wybierz „Layout Themer” jako typ i „File” jako opcję układu. Kliknij przycisk „Dodaj projekt”, aby kontynuować.

    Spowoduje to przejście do strony konfiguracji układu. Stąd wybierz „Wszystkie pliki” jako lokalizację szablonu. Możesz także utworzyć osobne układy dla każdego typu pliku, np. Data, wyniki wyszukiwania, kategoria, tagi itp.

    Ustawienia układu plików

    Następnie kliknij przycisk „Uruchom Beaver Builder”, aby otworzyć interfejs generatora.

    Beaver Builder zaczyna się od prostego układu kolumn. Tytuł pliku pojawia się u góry, a następnie przesłane.

    Edytuj układ pliku dla swojego motywu

    Możesz wskazać i kliknąć dowolny element, aby edytować jego właściwości. W razie potrzeby możesz także dodać nowe moduły, wiersze i kolumny.

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

    Utwórz inne projekty dla niestandardowego motywu WordPress

    Dzięki Beaver Themer możesz także tworzyć układy dla innych stron w hierarchii szablonów, np. B. Strona 404, części szablonu, strona wyników wyszukiwania i inne.

    Dzięki wbudowanej funkcji przeciągania i upuszczania Beaver Builder możesz łatwo stworzyć własny układ WordPress od zera bez pisania kodu. To naprawdę najbardziej przyjazny dla początkujących sposób 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 przeczytać nasz przewodnik na temat przyspieszenia witryny WordPress, aby zwiększyć komfort użytkowania 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.