Jak stworzyć niestandardowy motyw WordPress w 5 krokach bez kodu?

Czy chcesz stworzyć niestandardowy motyw WordPress dla swojej witryny?

Tworzenie własnego motywu WordPress od podstaw zwykle wiązało się z pisaniem złożonego kodu lub zatrudnianiem programistów motywów, aby stworzyli dla Ciebie motyw. Ale dzięki nowym i łatwym w użyciu generatorom motywów WordPress każdy może stworzyć niestandardowy motyw WordPress bez pisania kodu.

W tym artykule dowiesz się, jak krok po kroku utworzyć niestandardowy motyw w WordPress.

Co to jest motyw WordPress?

Motywy WordPress to pliki szablonów napisane w PHP, HTML, CSS i JavaScript. Każdy plik współpracuje ze sobą, tworząc projekt i funkcjonalność witryny WordPress.

Typowy motyw WordPress będzie zawierał niektóre, jeśli nie wszystkie, z następujących plików motywów:

• stopka.php
• header.php
• index.php
• strona.php
• sidebar.php
• archiwum.php

Motywy WordPress zawierają również pliki functions.php i style.css.

Zazwyczaj potrzebujesz solidnej wiedzy na temat kilku języków projektowania stron internetowych lub programisty, aby stworzyć niestandardowy motyw WordPress.

Tworzenie niestandardowych motywów WordPress dla początkujących

Jeśli zatrudnisz programistę lub agencję zajmującą się tworzeniem stron internetowych, koszt stworzenia niestandardowego motywu od podstaw może wynieść tysiące dolarów. Ponieważ wiele małych firm nie może sobie pozwolić na te koszty, zadowalają się domyślnymi motywami WordPress, które są dostarczane z platformą.

Jeśli jednak jesteś właścicielem witryny, który nie chce zadowolić się domyślnymi ustawieniami, możesz użyć struktury motywów, takiej jak Genesis by StudioPress, lub wtyczki do tworzenia stron WordPress, aby utworzyć niestandardowy motyw dla swojej witryny WordPress.

Struktury motywów WordPress ułatwiają tworzenie motywów WordPress, automatycznie obsługując wiele projektów i funkcji. Jednak nadal są dość skomplikowanym rozwiązaniem, wymagającym na przykład motywów potomnych, więc są lepsze dla programistów niż dla przeciętnego właściciela witryny.

Z drugiej strony, kreatory stron WordPress bardzo ułatwiają tworzenie niestandardowych układów stron za pomocą interfejsu przeciągania i upuszczania, ale mają też swoje ograniczenia. Kreatory stron umożliwiają tylko tworzenie układów i zazwyczaj nie można ich używać do tworzenia niestandardowych motywów.

Dopóki SeedProd, najlepszy kreator witryn WordPress dla niestandardowych motywów, postanowił rozwiązać ten problem za pomocą swojego kreatora motywów WordPress.

Co to jest kreator motywów SeedProd?

SeedProd jest już potężnym narzędziem do tworzenia stron typu „przeciągnij i upuść”, używanym przez ponad milion właścicieli witryn. Ale dzięki kreatorowi motywów każdy niezaawansowany technologicznie użytkownik może zbudować całkowicie niestandardowy motyw WordPress bez kodu.

Zamiast żonglować plikami wp-content, możesz tworzyć motywy od podstaw za pomocą zaledwie kilku kliknięć. SeedProd automatycznie utworzy Twój arkusz stylów.

SeedProd zawiera:

• Wizualny interfejs typu „przeciągnij i upuść”
• Ponad 150+ szablonów Pro
• 2 miliony zdjęć stockowych
• Wsparcie WooCommerce
• Pulpit zarządzania subskrybentami
• Integracje z e-mail marketingiem

I tak wiele dodatkowych funkcji i widżetów, których potrzebujesz, aby szybko zbudować niestandardową stronę internetową za pomocą WordPress.

Mając to na uwadze, spójrzmy, jak stworzyć niestandardowy motyw WordPress bez pisania ani jednej linii kodu za pomocą SeedProd.

Jak stworzyć niestandardowy motyw WordPress bez kodu?

Aby utworzyć niestandardowy motyw WordPress za pomocą SeedProd, najpierw potrzebujesz witryny WordPress, aby zainstalować wtyczkę SeedProd. Jeśli nie masz jeszcze instalacji WordPress, możesz wykonać następujące kroki, aby dowiedzieć się, jak utworzyć witrynę WordPress.

Twoja witryna powinna również mieć zainstalowany prosty motyw WordPress. Wiele darmowych rozwiązań można znaleźć w katalogu motywów WordPress. Nie musisz się martwić o wygląd motywu, ponieważ SeedProd zastąpi go, gdy opublikujesz swoje dostosowania.

Dobrym pomysłem jest również skorzystanie ze środowiska programistycznego podczas zmiany motywu WordPress, aby uniknąć przypadkowego uszkodzenia witryny. Popularne firmy hostingowe WordPress, takie jak BlueHost, domyślnie oferują środowiska testowe.

Powinieneś także wykonać kopię zapasową swojej witryny przed wprowadzeniem ważnych zmian. Oto lista najlepszych wtyczek do tworzenia kopii zapasowych WordPress, których możesz użyć.

Gdy Twoja witryna WordPress będzie gotowa, wykonaj poniższe czynności, aby utworzyć niestandardowy motyw WordPress bez kodu.

Krok 1. Zainstaluj i aktywuj SeedProd

Pierwszym krokiem jest zainstalowanie i aktywacja wtyczki do tworzenia stron internetowych SeedProd. Aby uzyskać dostęp do funkcji kreatora motywów, potrzebujesz licencji SeedProd Pro lub Elite.

Po pobraniu pliku zip wtyczki SeedProd na komputer, prześlij, zainstaluj i aktywuj go na pulpicie WordPress. Jeśli potrzebujesz pomocy w tym kroku, postępuj zgodnie z tym przewodnikiem dotyczącym instalowania wtyczki WordPress.

Po zainstalowaniu SeedProd przejdź do SeedProd ≫ Ustawienia w obszarze administracyjnym WordPress i wprowadź klucz licencyjny SeedProd.

Możesz znaleźć swój klucz licencyjny, odwiedzając obszar konta SeedProd i kopiując go z zakładki Pobieranie.

Teraz możesz przejść do SeedProd ≫ Theme Builder i zobaczyć przegląd Theme Buildera. Tutaj możesz utworzyć hierarchię szablonów dla swojego motywu WordPress.

Innymi słowy, tutaj możesz tworzyć wszystkie poszczególne części, które składają się na Twój motyw, takie jak:

• nagłówek
• Stopka
• Pojedynczy post
• Pojedyncza strona
• Archiwum (strona bloga)
• Strona główna
• Pasek boczny

Możesz utworzyć każdą z tych części motywu indywidualnie, klikając przycisk Dodaj nowy szablon motywu .

Ale jeśli brzmi to zbyt przytłaczająco przy pierwszej próbie, istnieje inny sposób na stworzenie własnego motywu.

Możesz użyć gotowych szablonów motywów SeedProd, aby szybko utworzyć podstawową strukturę motywu i dostosować je do własnych potrzeb projektowych, bez kodu. Ponieważ to rozwiązanie jest bardzo łatwe dla początkujących, na tym skupimy się w tym samouczku.

Uwaga: SeedProd oferuje również setki responsywnych szablonów stron docelowych, które pomogą Ci zbudować niestandardowe strony docelowe.

Krok 2. Wybierz szablon motywu

Kreator motywów SeedProd ma już kilka motywów stworzonych dla Ciebie. Aby je znaleźć, kliknij przycisk Motywy .

W chwili pisania tego przewodnika istnieje 9 szablonów tematycznych, w tym:

1. Motyw startowy
2. Nowoczesny biznes
3. Agencja marketingowa
4. Motyw projektowania produktu
5. Firma zajmująca się opieką nad zwierzętami
6. Motyw strategii cyfrowej
7. Motyw muzyki na żywo
8. Motyw brokera kredytów hipotecznych
9. Motyw restauracji

Aby wybrać szablon motywu dla swojej witryny, najedź myszą na miniaturę i kliknij ikonę znacznika wyboru. W tym przewodniku użyjemy motywu startowego SeedProd.

Po wybraniu szablonu SeedProd automatycznie tworzy wszystkie części, które tworzą Twój motyw.

Jeśli istnieje konkretna funkcja, której nie chcesz wyświetlać w swojej witrynie, możesz kliknąć przełącznik pod nagłówkiem Opublikuj i wyłączyć tę część motywu.

Jeśli klikniesz łącze warunków dla każdej części szablonu, możesz zmienić jej nazwę, typ, priorytet i wybrać, kiedy i gdzie pojawia się w Twojej witrynie.

Krok 3. Dostosuj swoje części motywu WordPress

Mając podstawowe elementy składowe Twojego motywu, nadszedł czas, aby rozpocząć edycję każdej sekcji motywu, aby utworzyć naprawdę niestandardowy motyw WordPress dla Twojej witryny.

Aby edytować dowolną sekcję motywu, najedź na nią i kliknij łącze Edytuj projekt .

Zaczniemy od edycji nagłówka.

Nagłówek i stopka

Kiedy edytujesz sekcję motywu w SeedProd, przejdziesz do wizualnego kreatora przeciągania i upuszczania. Możesz dostosować nagłówek swojego motywu na tym ekranie, po prostu wskazując i klikając.

Jak widać, motyw startowy zawiera dwukolumnowy nagłówek z logo i menu nawigacyjnym. Możesz go dostosować, aby wyświetlać niestandardowe logo, klikając logo w podglądzie na żywo.

Stamtąd możesz usunąć logo zastępcze w panelu po lewej stronie i przesłać nowe z komputera lub biblioteki multimediów WordPress.

Możesz dostosować rozmiar i wyrównanie logo w tym samym panelu i dodać niestandardowy link, taki jak adres URL głównej witryny.

Jeśli chcesz zmienić kolor tła nagłówka, najedź kursorem na sekcję nagłówka, aż pojawi się fioletowy kontur, a następnie kliknij, aby wyświetlić ustawienia sekcji w panelu po lewej stronie. Stamtąd możesz nadać swojemu nagłówkowi niestandardowy kolor tła, obraz i wybrać szerokość nagłówka.

Na karcie Zaawansowane możesz dostosować cień, odstępy, obramowanie i inne elementy nagłówka.

Gdy jesteś zadowolony z niestandardowego nagłówka WordPress, kliknij przycisk Zapisz w prawym górnym rogu i wróć do kreatora motywów.

Teraz powtórz te kroki, aby edytować stopkę WordPress. Kliknij opcję Edytuj projekt , aby otworzyć go w edytorze wizualnym, a następnie kliknij dowolny element, aby dostosować zawartość, kolory, łącza i nie tylko.

Strona główna

Następnie dostosujemy stronę główną witryny WordPress, która często jest pierwszą stroną, którą widzą użytkownicy odwiedzający Twoją witrynę. Otwórz więc sekcję Strona główna w edytorze wizualnym.

Ponieważ dostosowaliśmy już projekt nagłówka i stopki, nowe projekty będą wyświetlane u góry iu dołu strony głównej. Ale nie martw się, zmiany wprowadzone na tym ekranie nie wpłyną na nagłówek ani stopkę; są po prostu wizualnym przewodnikiem.

Szablon motywu początkowego SeedProd zawiera wszystkie funkcje, których potrzebuje większość witryn biznesowych, w tym:

• Obszar bohatera
• Logo klienta
• Cechy
• Referencje
• Sekcja FAQ

Podobnie jak nagłówek, możesz dostosować każdy cal, aby był wyjątkowy. Zacznijmy od zmiany obszaru bohatera.

Obszar bohatera ma następujące cechy:

• Sekcja
• Układ 2-kolumnowy
• Obraz
• Nagłówek
• Tekst
• Przycisk

Aby zmienić domyślny obraz, po prostu go kliknij i prześlij nowy obraz, tak jak zrobiłeś to ze swoim logo.

Możesz także edytować nagłówek i opis, klikając każdy blok i zastępując zawartość własnym tekstem.

Jeśli klikniesz blok przycisku, możesz zmienić tekst przycisku, łącze, wyrównanie i nie tylko.

Wszystkie te elementy znajdziesz w lewym panelu bloków. W ten sposób możesz przeciągnąć blok z lewej strony i upuścić go na swój projekt, aby dodać więcej treści do swojego motywu.

Postępuj zgodnie z tym procesem, aby dostosować resztę strony głównej, aż będzie odzwierciedlać Twoją firmę. Na przykład możesz dodać informacje o usługach swojej firmy lub wyróżnić cechy swojego produktu w sekcji funkcji.

Następnie możesz użyć wbudowanego bloku Referencje SeedProd, aby dodać pozytywne dowody społeczne od swoich obecnych klientów i klientów.

Zmieniliśmy również kolor tła tej sekcji, aby pasował do naszego nagłówka motywu, otwierając ustawienia sekcji i wybierając inny kolor.

Po dostosowaniu strony głównej możesz kliknąć ikonę podglądu urządzenia mobilnego, aby zobaczyć, jak projekt wygląda na urządzeniach mobilnych.

Jeśli coś nie wygląda dobrze, możesz przesuwać elementy, aż ekran telefonu komórkowego zapewni dobre wrażenia użytkownika.

Gdy jesteś zadowolony z wyglądu swojej strony głównej, kliknij przycisk Zapisz i wróć do kreatora motywów.

Strona bloga, pojedyncze posty i strony

Prawdopodobnie zechcesz dołączyć niestandardową stronę dla postów na blogu w swoim nowym motywie WordPress. Dobrą wiadomością jest to, że SeedProd ma część tematyczną, którą możesz dostosować specjalnie do tego celu.

Ta sekcja nosi nazwę Blog Index, Archives, Search w kreatorze motywów. Umożliwia dostosowanie strony postów na blogu, archiwów postów i strony wyników wyszukiwania tak, aby pasowały do ​​reszty marki Twojej witryny.

Kliknij łącze Edytuj projekt , aby otworzyć tę część motywu w kreatorze przeciągania i upuszczania.

Na tej stronie motyw startowy używa znaczników szablonów do pobierania dynamicznych informacji z WordPressa, w tym tytułu archiwum i postów. Po kliknięciu jednego z tych bloków zobaczysz ich ustawienia w panelu po lewej stronie.

Na przykład po kliknięciu tagu szablonu Posty można wyświetlać posty domyślnie, niestandardowe (posty, media lub posty niestandardowe) lub ręcznie, wpisując określone parametry zapytania.

Możesz także wybrać liczbę kolumn, postów na stronie, pokazać lub ukryć wyróżniony obraz, pokazać fragment i wiele więcej.

Po dostosowaniu archiwum lub strony bloga wróć do kreatora motywów i edytuj sekcję Pojedyncze posty .

Ta część tematyczna wykorzystuje następujące znaczniki szablonów do pobierania informacji o poszczególnych postach WordPress:

• Tytuł posta
• Informacje o wpisie
• Treść postu
• Pole autora
• Wstawiać komentarze
• Nawigacja po wpisach

Możesz edytować każdy z tych bloków tak jak każdy inny blok SeedProd. Po prostu kliknij dowolny element i dostosuj go w panelu ustawień.

Na przykład, jeśli klikniesz blok Informacje o wpisie, możesz dodać więcej metainformacji, zmienić wyrównanie i dostosować kolory ikon.

Pasek boczny

Wiele witryn WordPress nadal używa pasków bocznych do wyświetlania ważnych informacji odwiedzającym, takich jak ich profile w mediach społecznościowych, najnowsze posty i pole zapisu do newslettera. Ale w przeciwieństwie do wielu gotowych motywów WordPress, możesz użyć SeedProd do stworzenia niestandardowego paska bocznego WordPress z jego wizualnymi blokami konstrukcyjnymi.

Aby to zrobić, kliknij Edytuj projekt w części Szablon paska bocznego. Stamtąd możesz przeciągać i upuszczać dowolną zawartość na projekt paska bocznego.

Motyw startowy domyślnie zawiera pole wyszukiwania, ikony mediów społecznościowych i kategorie postów. Ale możesz tutaj dodać wszystko, co chcesz. Na przykład możesz chcieć wyświetlić listę ostatnich postów na blogu lub obraz z linkiem do partnera stowarzyszonego.

Możesz także użyć bloku formularza zgody SeedProd i zbierać adresy e-mail, aby powiększać swoją listę bezpośrednio na pasku bocznym. Najlepsze jest to, że nie potrzebujesz żadnej wiedzy technicznej, aby tak się stało.

Globalny CSS

Do tej pory większość niestandardowego motywu WordPress zbudowałeś bez kodu. Ale jest jeszcze jedna część, na którą powinieneś zwrócić uwagę, aby upewnić się, że wszystko jest spójne w całym motywie.

To jest Twój Globalny CSS , który kontroluje globalny styl, typografię, kolory i układ Twojego motywu. Kliknij Edytuj projekt w tej części motywu, aby otworzyć ją w edytorze stron.

Jak widać, ta strona zapewnia kontrolę nad wieloma stylami motywu. W lewym panelu znajdują się sekcje dla:

• Zabarwienie
• Czcionki
• Tło
• guziki
• Formularze
• Układ
• niestandardowe CSS

Na przykład możesz otworzyć sekcję Przyciski i wybrać niestandardowy kolor. Wtedy ten kolor pojawi się na każdym przycisku w twoim motywie.

Możesz zrobić to samo w nagłówku Czcionki i przypisać niestandardowy kolor do każdego łącza w motywie.

Więc śmiało dostosowuj te ustawienia, aż motyw będzie wyglądał dokładnie tak, jak chcesz, a następnie kliknij przycisk Zapisz , aby zapisać zmiany.

Krok 4. Połącz swoją usługę e-mail marketingu

Jeśli jednym z Twoich celów biznesowych jest rozbudowa listy e-mailowej, prawdopodobnie dodałeś formularz rejestracji gdzieś w projekcie motywu WordPress. Aby jednak automatycznie dodawać nowe kontakty do listy, musisz połączyć swój formularz z usługą marketingu e-mailowego.

SeedProd integruje się bezpośrednio z wieloma popularnymi usługami marketingu e-mailowego, takimi jak Constant Contact, Mailchimp, Drip itp. A połączenie z kontem jest bardzo proste.

Po prostu edytuj dowolną część motywu i kliknij kartę Połącz u góry ekranu.

Następnie kliknij dowolną integrację z listy i postępuj zgodnie z instrukcjami wyświetlanymi na ekranie. W rezultacie każdy, kto wypełni Twój formularz zgody, zostanie automatycznie dodany do Twojej listy e-mailowej.

Krok 5. Włącz swój niestandardowy motyw WordPress

Ostatnim krokiem w tworzeniu niestandardowego motywu WordPress za pomocą SeedProd jest udostępnienie motywu w Twojej witrynie. Aby to zrobić, znajdź nagłówek Włącz motyw SeedProd w prawym górnym rogu i przełącz przełącznik w pozycję „włączone”.

Twój nowy motyw zastąpi motyw domyślny, dzięki czemu możesz zobaczyć swoje dostosowania w interfejsie witryny.

Otóż ​​to! Twój nowy niestandardowy motyw WordPress jest dostępny w Twojej witrynie. Zobaczmy, jak to wygląda.

Oto strona główna z nowym nagłówkiem i stopką:

Oto strona bloga z niestandardowym paskiem bocznym WordPress:

Gratulacje!

Wiesz już, jak stworzyć niestandardowy motyw WordPress bez kodu.

Dzięki łatwemu i wydajnemu kreatorowi motywów WordPress SeedProd nie potrzebujesz żadnego doświadczenia technicznego, programistów WordPress ani ogromnego budżetu, aby stworzyć niestandardowy motyw WordPress.

Moc i funkcjonalność są w Twoich rękach od momentu instalacji wtyczki.

Więc na co czekasz?

Dziękuje za przeczytanie. Śledź nas na YouTube, Twitterze i Facebooku, aby uzyskać więcej przydatnych treści, które pomogą rozwinąć Twój biznes.