Jak stworzyć niestandardowy motyw WordPress od podstaw (2022)

Czy chcesz stworzyć niestandardowy motyw WordPress, aby nadać swojej witrynie niepowtarzalny wygląd?

Budowanie motywu WordPress było niemożliwe bez drogich programistów lub samodzielnej wiedzy o kodowaniu. Ale dzisiaj niektóre wtyczki WordPress dają możliwość tworzenia własnego niestandardowego motywu za pomocą prostej funkcji przeciągania i upuszczania.

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

Aby przejść do określonej sekcji samouczka, możesz skorzystać z szybkich łączy przed:

1. Zainstaluj wtyczkę SeedProd
2. Wybierz szablon motywu
3. Dostosuj swoje części motywu WordPress
4. Połącz się z usługą pocztową
5. Opublikuj swój niestandardowy motyw WordPress

Jak stworzyć motyw WordPress od podstaw?

Motywy WordPress są budowane przy użyciu kombinacji PHP, CSS, JavaScript i HTML. Są to języki programowania, których nauka wymaga wielu szkoleń. Więc jeśli sam nie byłeś programistą, jedyną opcją było zatrudnianie agencji programistycznych do tworzenia motywów dla Ciebie, co może być bardzo kosztowne.

Ale dzięki SeedProd możesz teraz stworzyć własny niestandardowy motyw WordPress bez kodowania. Jest wyposażony w prosty interfejs typu „przeciągnij i upuść”, z którego może korzystać każdy, i pozwala łatwo dostosować każdy aspekt projektu motywu.

Dlaczego SeedProd?

SeedProd to najbardziej przyjazna dla użytkownika wtyczka do tworzenia stron docelowych dla WordPress.

Zapewnia wysoki poziom personalizacji i zawiera szeroką gamę dodatkowych funkcji, w tym:

• Kreator motywów
• Ponad 150 szablonów landing page
• Konstruktor przeciągnij i upuść
• Integracje z e-mail marketingiem
• 2 miliony zdjęć stockowych
• i więcej.

Dzięki tym funkcjom możesz szybko tworzyć strony docelowe w swojej witrynie w ramach istniejącego motywu WordPress. Ale teraz SeedProd dodał nową funkcję, która umożliwia tworzenie własnego niestandardowego motywu WordPress przy użyciu tego samego projektu przeciągnij i upuść, aby zapewnić maksymalną łatwość użytkowania.

Zobaczmy, jak możesz zbudować motyw WordPress za pomocą SeedProd.

Jak stworzyć niestandardowy motyw WordPress za pomocą SeedProd

Zakładamy, że masz już witrynę WordPress hostowaną w domenie na potrzeby tego samouczka. Jeśli nie, możesz zapoznać się z tym przewodnikiem dotyczącym tworzenia witryny WordPress.

Jeśli chcesz zastąpić istniejący motyw WordPress tym, który zamierzasz utworzyć, zalecamy skorzystanie z testowej witryny programistycznej. W ten sposób nie ryzykujesz przypadkowego spowodowania błędów w swojej głównej witrynie. Najlepsze usługi hostingowe WordPress, takie jak Bluehost, oferują środowiska programistyczne dla WordPress.

Na koniec upewnij się, że wykonałeś kopię zapasową swojej witryny przed utworzeniem motywu. Dzięki temu zawsze możesz przywrócić witrynę do stabilnego stanu, jeśli coś pójdzie nie tak. Możesz znaleźć różne opcje na tej liście wtyczek do tworzenia kopii zapasowych WordPress.

Po tych przygotowaniach czas zacząć tworzyć niestandardowy motyw WordPress bez kodu!

Krok 1. Zainstaluj wtyczkę SeedProd

Przede wszystkim zainstaluj wtyczkę SeedProd na swojej stronie WordPress. Możesz zobaczyć instrukcje dotyczące instalowania wtyczek WordPress, jeśli nigdy wcześniej nie instalowałeś wtyczki.

Będziesz potrzebować co najmniej licencji SeedProd Pro, aby odblokować funkcję kreatora motywów. Aby aktywować licencję Pro, otwórz obszar konta SeedProd i kliknij kartę Pobieranie . Przewiń w dół, aby znaleźć klucz licencyjny i skopiuj go.

Następnie otwórz obszar administracyjny WordPress i przejdź do SeedProd »Ustawienia. Następnie wprowadź skopiowany klucz w polu Klucz licencyjny i naciśnij Weryfikuj .

Teraz przejdź do SeedProd »Konstruktor motywów. To jest pulpit nawigacyjny, w którym będą znajdować się wszystkie Twoje różne elementy motywu.

Teraz są dwa sposoby tworzenia motywu za pomocą SeedProd: stwórz każdą indywidualną część swojego motywu samodzielnie lub użyj gotowego szablonu i edytuj części, które Ci się nie podobają.

Każdy motyw WordPress składa się z różnych części, w tym:

• nagłówek
• Stopka
• Strona główna
• Pojedynczy post
• Pojedyncza strona
• Strona archiwum lub blogu
• Pasek boczny

Tworzenie każdej z tych części od podstaw może być trochę onieśmielające, jeśli tworzysz motyw po raz pierwszy. W takim przypadku istnieje prostszy sposób na zrobienie tego.

SeedProd jest dostarczany z różnymi gotowymi szablonami motywów, które konfigurują ogólną strukturę Twojego kompletnego motywu. W ten sposób wszystkie różne części są automatycznie dodawane do struktury, ale nadal możesz dostosować każdą część zgodnie z własnymi preferencjami.

W pozostałej części samouczka użyjemy jednego z motywów SeedProd, aby pokazać Ci kroki, ponieważ jest to najbardziej przyjazna dla początkujących metoda tworzenia niestandardowego motywu WordPress.

Krok 2. Wybierz szablon motywu

Funkcja kreatora motywów ma wiele gotowych motywów wzorowanych na witrynach biznesowych różnych typów. Aby wyświetlić dostępne motywy, kliknij przycisk Motywy .

SeedProd zawiera szablony dla różnych firm i branż, w tym agencji marketingowych, restauracji, firm zajmujących się pielęgnacją zwierząt i nie tylko.

W tym przykładzie użyjemy motywu Starter. Jak tylko wybierzesz motyw, SeedProd automatycznie utworzy wszystkie poszczególne części motywu.

Możesz także wyłączyć różne części motywu, jeśli nie potrzebujesz ich w swojej witrynie. Aby wyłączyć dowolną sekcję, możesz użyć przycisków przełączania pod nagłówkiem Opublikowane.

Możesz zmienić ustawienia dla każdej części motywu, klikając przycisk Edytuj warunki .

Spowoduje to otwarcie modu, w którym możesz zmienić nazwę, typ, priorytet i skonfigurować warunki, kiedy i gdzie ta część powinna pojawić się w Twojej witrynie.

W większości przypadków możesz pozostawić te ustawienia domyślne i przejść do dostosowywania każdej części motywu.

Krok 3. Dostosuj swoje części motywu WordPress

Teraz, gdy wszystkie istotne elementy Twojego motywu są określone, możemy dostosować projekt każdego, aby wyglądał dokładnie tak, jak chcemy.

Aby rozpocząć edycję, przesuń kursor na część motywu i kliknij Edytuj projekt .

W tym samouczku dostosujemy nagłówek, stopkę, stronę główną i stronę bloga. Te same zasady dostosowywania dotyczą wszystkich innych stron.

Nagłówek i stopka

Aby rozpocząć edycję nagłówka, kliknij przycisk Edytuj projekt , który pojawia się po najechaniu kursorem na Nagłówek. Spowoduje to przejście do interfejsu kreatora motywów przeciągnij i upuść SeedProd. Wskaż i kliknij obszar nagłówka, aby otworzyć opcje dostosowywania, które pojawią się w lewym panelu.

Domyślnie nagłówek zawiera logo SeedProd. W bardzo prosty sposób możesz go zastąpić logo swojej firmy. Kliknij obraz, aby go usunąć lub zastąpić, przesyłając własne logo.

SeedProd umożliwia zmianę rozmiaru i wyrównania logo. Możesz również dodać niestandardowy link do logo. Na przykład możesz chcieć przekierować użytkowników do strony głównej po kliknięciu logo.

Możesz także zmienić kolor tła nagłówka. Po prostu przesuń mysz nad obszar nagłówka, aż zobaczysz niebieski kontur. Kliknij go, aby znaleźć nowe menu opcji na panelu po lewej stronie. Teraz możesz zmienić kolor nagłówka i wybrać jednolity kolor lub nawet gradient.

Teraz kliknij kartę Zaawansowane , aby uzyskać dostęp do większej liczby ustawień, takich jak cień, odstępy, obramowanie, położenie i inne.

Po zakończeniu wprowadzania wszystkich zmian kliknij przycisk Zapisz w prawym górnym rogu kreatora i kliknij przycisk krzyżyka, aby wyjść do głównego pulpitu kreatora motywów.

Jeśli chcesz umieścić nagłówek w swojej witrynie, możesz powtórzyć te same kroki, aby edytować projekt stopki.

Następnie będziemy edytować stronę główną.

Strona główna

Strona główna to przód Twojej witryny. Zwykle zawiera ważne elementy, które definiują, kim jesteś, co robisz, i dostarczają dowodów społecznych poprzez recenzje i referencje.

Szablon motywu startowego, którego używamy, zawiera wszystkie kluczowe sekcje, które zwykle można znaleźć na stronie głównej witryny biznesowej, w tym:

• Obszar bohatera
• Sekcja funkcji
• Referencje
• Sekcja FAQ

Możesz zmienić każdy blok tej strony, w tym obrazy, tekst, przyciski, kolory i układ.

W poniższym gifie pokażemy Ci, jak łatwo edytować różne części strony za pomocą prostych czynności przeciągania i upuszczania.

Użyj ustawień i bloków w menu po lewej stronie, aby edytować projekt, aż będziesz w pełni zadowolony. Po wprowadzeniu wszystkich zmian sprawdź podgląd mobilny.

Jeśli jakiekolwiek elementy witryny wydają się zepsuć w widoku mobilnym, możesz wrócić do edycji i wprowadzać poprawki, aż będzie wyglądać idealnie.

Gdy jesteś zadowolony ze swojej strony głównej, naciśnij przycisk Zapisz i wróć do pulpitu nawigacyjnego konstruktora motywów SeedProd.

Strona bloga

Utwórzmy teraz niestandardową stronę bloga dla Twojej witryny. Na pulpicie narzędzia do tworzenia motywów kliknij link Edytuj projekt w sekcji Indeks blogów, Archiwa, Wyszukaj, aby rozpocząć edycję.

Tutaj możesz dodawać lub usuwać różne elementy, takie jak treść posta, fragment, biografię autora i wiele innych, korzystając z interfejsu przeciągania i upuszczania. Kliknij jeden z postów wyświetlanych na tej stronie, aby uzyskać dostęp do większej liczby ustawień.

Te ustawienia umożliwiają zmianę typu zapytania o posty, układu i paginacji. Możesz także zmienić kontrolę dodatkowych szczegółów, które powinny pojawiać się przy każdym poście, takich jak data publikacji, autor, wyróżniony obraz, fragment i inne.

Po dostosowaniu strony bloga kliknij Zapisz i jeszcze raz wróć do pulpitu nawigacyjnego.

Globalny CSS

Sekcja Global CSS konfiguruje globalne ustawienia kolorów, typografii, układu i stylu motywu.

W panelu Theme Builder kliknij Edytuj projekt w sekcji Global CSS swojego motywu.

Możesz na przykład wybrać kolor i czcionkę przycisku , które mają być wyświetlane w całej witrynie.

Podobnie możesz zmienić czcionki tekstu, tła, układ, a nawet dodać niestandardowy kod CSS do swojego motywu. Zmiany te zostaną zastosowane w całej witrynie i zapewnią spójność stylistyczną.

Kiedy skończysz dostosowywać ustawienia do swoich upodobań, kliknij przycisk Zapisz .

Krok 4. Połącz się z usługą pocztową

SeedProd umożliwia połączenie z usługą e-mail marketingu, co jest ważnym krokiem, jeśli chcesz dołączyć formularz subskrypcji lub rejestracji w swoim motywie.

W rzeczywistości, jeśli masz zainstalowane WPForms w swojej witrynie, automatycznie integruje się z SeedProd. Dzięki temu możesz osadzić dowolne formularze utworzone za pomocą WPForms w dowolnej części motywu za pomocą SeedProd.

Po utworzeniu formularza musisz upewnić się, że Twoja usługa e-mail marketingu jest połączona z SeedProd, abyś mógł wysyłać i odbierać wiadomości e-mail związane z formularzem.

Aby połączyć usługę e-mail marketingu z motywem SeedProd, kliknij kartę Połącz na górnym pasku ekranu kreatora motywów podczas edytowania dowolnej części motywu.

Kliknij dowolną przesyłkę pocztową z listy i postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby zakończyć integrację z motywem SeedProd. Gdy skończysz, wpisy formularza zgody zostaną automatycznie dodane do Twojej listy mailingowej.

Krok 5. Opublikuj swój niestandardowy motyw WordPress

Twój motyw jest teraz gotowy do wdrożenia! Aby przenieść swój motyw na żywo, przejdź do pulpitu nawigacyjnego kreatora motywów i kliknij przycisk przełączania Włącz motyw SeedProd w prawym górnym rogu ekranu.

Przyjrzyjmy się teraz naszemu nowo utworzonemu niestandardowemu motywowi WordPress!

To jest strona główna motywu z nagłówkiem:

A oto strona bloga.

I to wszystko! Właśnie stworzyłeś swój pierwszy niestandardowy motyw WordPress bez kodu!

Następnie utwórz formularze kontaktowe dla swojej witryny WordPress

Teraz, gdy masz zupełnie nową witrynę WordPress, powinieneś rozważyć dodanie formularzy kontaktowych, aby umożliwić odwiedzającym łatwy kontakt z Tobą. WPForms to najbardziej przyjazny dla użytkownika kreator formularzy WordPress z ponad 5 milionami aktywnych instalacji.

Dzięki WPForms możesz nie tylko powiększać swoją listę mailingową, ale także wykonywać wiele innych czynności, takich jak zbieranie darowizn dla swojej organizacji non-profit.

Utwórz teraz swój formularz WordPress

Gotowy do zbudowania swojej formy? Zacznij już dziś od najłatwiejszej wtyczki do tworzenia formularzy WordPress. WPForms Pro zawiera wiele darmowych szablonów i oferuje 14-dniową gwarancję zwrotu pieniędzy.

Jeśli ten artykuł Ci pomógł, śledź nas na Facebooku i Twitterze, aby uzyskać więcej bezpłatnych samouczków i przewodników WordPress.