Jak łatwo zbudować niestandardowy motyw WordPress w 5 krokach?

Czy chcesz zbudować niestandardowy motyw WordPress dla swojej witryny małej firmy?

Tworzenie motywów WordPress było kiedyś wyzwaniem bez kodowania projektu motywu od zera lub zatrudniania drogich programistów. Jednak obecnie dostępne są potężne wtyczki WordPress, które umożliwiają wizualne tworzenie motywów za pomocą łatwej funkcji przeciągania i upuszczania.

W tym artykule dowiesz się, jak stworzyć motyw WordPress od podstaw bez dotykania ani jednej linii kodu.

Po co dostosowywać swój motyw WordPress?

Internet jest zajęty milionami stron internetowych, które rywalizują o uwagę odbiorców docelowych. Jednym ze sposobów na wyróżnienie się i pokazanie, że jesteś inny, jest dostosowanie domu w sieci: witryny.

Ponieważ wielu właścicieli witryn WordPress trzyma się motywów startowych od razu po wyjęciu z pudełka, dostosowanie Twojej witryny może pomóc Twojej witrynie wyróżnić się na tle konkurencji. Co więcej, dzięki niestandardowemu motywowi WordPress łatwiej jest zaprezentować osobowość swojej marki, dodać funkcje generowania potencjalnych klientów oraz poprawić szybkość i wydajność witryny.

Jak zbudować motyw WordPress od podstaw?

Większość motywów WordPress jest tworzona za pomocą języków kodowania HTML, CSS, PHP i JavaScript. Nauka tych języków wymaga czasu i szkolenia, co nie jest realistyczne dla wielu właścicieli witryn.

Oznacza to, że jedną z Twoich jedynych opcji jest zatrudnienie programisty lub agencji programistycznej, która zbuduje dla Ciebie niestandardowy motyw. W związku z tym koszt niestandardowej witryny WordPress może sięgać tysięcy dolarów.

Inną opcją jest użycie SeedProd do stworzenia własnego niestandardowego motywu WordPress. Ta potężna wtyczka WordPress jest wyposażona w łatwy interfejs typu „przeciągnij i upuść”, którego każdy, nawet początkujący, może użyć do dostosowania każdego aspektu motywu WordPress.

Dlaczego warto używać SeedProd?

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

Zawiera rozbudowane opcje dostosowywania i oferuje szeroką gamę funkcji, w tym:

• Kreator motywów WordPress
• 170+ szablonów landing page
• Pełne zestawy motywów WordPress
• Konstruktor przeciągnij i upuść
• Integracje z e-mail marketingiem
• Funkcja importu/eksportu
• Zarządzanie subskrybentami
• Już wkrótce i tryb konserwacji
• i wiele więcej.

Wcześniej SeedProd można było używać tylko do tworzenia stron docelowych w ramach istniejącego motywu. Ale po kilku aktualizacjach zmieniających grę możesz tworzyć całe motywy WordPress za pomocą tego samego kreatora typu „przeciągnij i upuść”.

Oznacza to, że możesz dostosować swoją witrynę od góry do dołu bez kodowania, więc dowiedzmy się, jak to zrobić.

Tworzenie niestandardowego motywu WordPress za pomocą SeedProd

W tym samouczku założymy, że masz już witrynę WordPress hostowaną w domenie. Jeśli nie, możesz postępować zgodnie z tym przewodnikiem krok po kroku dotyczącym tworzenia witryny WordPress.

Ponieważ SeedProd zastępuje Twój obecny motyw WordPress tym, który utworzysz od podstaw, sugerujemy korzystanie ze środowiska programistycznego. W ten sposób Twoje zmiany nie wpłyną na działającą witrynę, dopóki nie będziesz gotowy do ich opublikowania.

Popularne usługi hostingowe WordPress, takie jak Bluehost, oferują środowiska pomostowe i programistyczne wraz z pakietami hostingowymi.

Oprócz stworzenia środowiska tymczasowego, przed rozpoczęciem upewnij się, że wykonałeś kopię zapasową swojej witryny. Zapewni to możliwość przywrócenia witryny, jeśli coś pójdzie nie tak. Zobacz ten post, aby zapoznać się z najlepszymi wtyczkami do tworzenia kopii zapasowych dla WordPress.

Po przygotowaniu powyższego możesz rozpocząć tworzenie niestandardowego motywu WordPress, wykonując poniższe czynności.

Krok 1. Zainstaluj i aktywuj wtyczkę SeedProd

W pierwszym kroku musisz zainstalować i aktywować wtyczkę SeedProd w swojej witrynie WordPress. Postępuj zgodnie z tym szczegółowym przewodnikiem dotyczącym instalowania wtyczki WordPress, jeśli potrzebujesz pomocy w tym kroku.

Musisz wybrać licencję SeedProd Pro, aby odblokować funkcję Theme Builder. To da ci klucz licencyjny, który możesz wprowadzić na stronie ustawień wtyczki.

Aby znaleźć klucz licencyjny, zaloguj się na swoje konto SeedProd, kliknij kartę Pobieranie , a następnie kliknij ikonę kopiowania, aby zapisać klucz w schowku.

Następnie przejdź do administratora WordPress, przejdź do SeedProd » Ustawienia i wklej klucz w polu „Klucz licencyjny”. Następnie kliknij przycisk Zweryfikuj klucz , aby zapisać zmiany.

Teraz przejdź do strony SeedProd » Theme Builder , gdzie SeedProd wyświetli różne elementy Twojego motywu.

Istnieją 2 różne sposoby tworzenia niestandardowego motywu WordPress za pomocą SeedProd. Możesz stworzyć każdą część swojego motywu od podstaw lub użyć gotowego szablonu i dostosować każdą część do potrzeb swojej witryny.

Każdy motyw WordPress składa się z wielu części zwanych plikami szablonów, w tym:

• nagłówek
• Stopka
• Pojedynczy post
• Pojedyncza strona
• Strona archiwum lub bloga
• Wyniki wyszukiwania
• Część globalna

Może to być dość przytłaczające, jeśli po raz pierwszy tworzysz motyw od zera. Z tego powodu zalecamy zacząć od gotowego szablonu motywu.

SeedProd ma różne responsywne szablony motywów, które konfigurują strukturę motywu za pomocą jednego kliknięcia. Automatycznie generuje każdy plik szablonu, ale umożliwia także edycję każdego pliku z własnymi dostosowaniami.

W pozostałej części tego przewodnika użyjemy szablonu motywu, aby pokazać każdy etap procesu dostosowywania, ponieważ jest to najbardziej przyjazne dla początkujących podejście do tworzenia niestandardowego motywu.

Krok 2. Wybierz szablon motywu WordPress

Aby wyświetlić wszystkie szablony motywów SeedProd, kliknij przycisk Motywy .

Otworzy się okno z motywami dla różnych typów stron internetowych, w tym portfolio, podróży, sklepów WooCommerce, nieruchomości, wydarzeń i innych.

W tym samouczku użyjemy motywu startowego , więc umieść kursor myszy nad obrazem motywu i kliknij pomarańczową ikonę znacznika wyboru.

Jak tylko klikniesz, aby zaimportować szablon motywu, SeedProd automatycznie wygeneruje części motywu.

Jeśli nie potrzebujesz określonej części motywu, wyłącz ją, klikając przełącznik pod nagłówkiem Opublikowane w pozycji „Nie”.

Możesz również zmienić warunki każdej części, klikając łącze „Edytuj warunki”.

Spowoduje to otwarcie okna, w którym możesz wybrać nazwę części, jej typ, priorytet oraz miejsce, w którym część powinna pojawić się na Twojej stronie internetowej.

W wielu przypadkach nie trzeba zmieniać tych ustawień i można od razu przejść do dostosowywania wyglądu każdej części.

Krok 3. Dostosuj swoje części motywu

Teraz, gdy najważniejsze części Twojego motywu są skonfigurowane, możesz dostosować ich projekty, aby wyglądały tak, jak chcesz. Aby edytować plik szablonu, najedź na niego kursorem i kliknij link „Edytuj projekt”.

W tym przewodniku dostosujemy części nagłówka, stopki, strony głównej i bloga. Dostosowywanie innych części motywu odbywa się według tych samych zasad.

Dostosowywanie nagłówka i stopki WordPress

Aby dostosować nagłówek, przesuń kursor na szablon nagłówka i kliknij Edytuj projekt .

Na następnym ekranie zobaczysz interfejs konstruktora motywów SeedProd. Możesz wskazać i kliknąć w dowolnym miejscu podglądu na żywo, aby zobaczyć ustawienia każdego elementu w panelu po lewej stronie.

Zacznijmy od kliknięcia domyślnego logo SeedProd, aby otworzyć ustawienia bloku obrazu. W panelu ustawień treści możesz kliknąć ikonę kosza na śmieci, aby usunąć domyślny obraz i przesłać nowe logo z komputera lub biblioteki multimediów WordPress.

W tym samym panelu możesz zmienić rozmiar obrazu, wyrównanie i nadać swojemu logo niestandardowy link. Na przykład możesz przekierować odwiedzających, którzy klikną Twoje logo, na Twoją stronę główną.

Możesz także zmienić kolor tła nagłówka, klikając ikonę ustawień wiersza. Stamtąd możesz dodać obraz tła, kolor lub niestandardowy gradient tła.

Następnie kliknij blok menu w podglądzie na żywo, aby dostosować menu nawigacyjne. SeedProd domyślnie używa bloku menu nawigacyjnego dla tej sekcji, który ma 2 różne opcje menu:

• Proste: dodawaj linki do menu indywidualnie w interfejsie konstruktora
• Menu WordPress : użyj natywnego menu WordPress, aby pokazać swoją nawigację

Po wybraniu typu menu możesz kliknąć kartę Zaawansowane i zmienić kolory, typografię, style i inne elementy menu.

Gdy jesteś zadowolony z projektu nagłówka, kliknij przycisk Zapisz w prawym górnym rogu i kliknij ikonę „X”, aby wyjść do kreatora motywów.

Teraz możesz wykonać te same kroki, aby dostosować stopkę WordPress, a kiedy skończysz, możesz przejść do edycji swojej strony głównej.

Dostosowywanie strony głównej WordPress

Strona główna Twojej witryny to jej strona główna i zazwyczaj zawiera istotne elementy, które definiują Twoją firmę. Na przykład szczegółowe informacje o tym, kim jesteś, co robisz, recenzje i referencje oraz informacje kontaktowe.

Szablon, którego używamy, zawiera następujące sekcje strony głównej:

• Bohater
• Cechy
• Referencje
• Często zadawane pytania

Możesz zmienić każdy aspekt tej strony, w tym układ, obrazy, zawartość, przyciski i nie tylko. Spójrz na ten krótki przykład, aby zobaczyć, jak łatwo edytować różne części strony głównej:

Możesz użyć bloków i sekcji po lewej stronie, aby edytować swoją stronę główną, dopóki nie będziesz zadowolony z tego, jak wszystko wygląda. Na przykład możesz dodać oceny w postaci gwiazdek, mapy Google, formularze wyszukiwania i wiele innych elementów witryny.

Ważne jest również sprawdzenie mobilnej wersji swojej strony głównej.

Jeśli mobilna wersja Twojej witryny nie wygląda prawidłowo, możesz ją edytować, aż będzie wyglądać idealnie.

Gdy jesteś zadowolony z projektu strony głównej, zapisz zmiany i wróć do pulpitu nawigacyjnego konstruktora motywów SeedProd.

Stylizacja własnej strony bloga

Następną częścią motywu, którą dostosujemy, jest strona bloga. W panelu konstruktora motywów poszukaj nagłówka Blog, Indeks, Archiwa, Wyszukaj i kliknij link Edytuj projekt .

Na tej stronie możesz dodawać, usuwać i przenosić różne elementy, takie jak treść posta na blogu, polecany obraz, fragment i biografię autora.

Domyślnie ten szablon używa bloku Posty do wyświetlania listy ostatnich postów na blogu, więc kliknij go, aby wyświetlić różne ustawienia, które możesz skonfigurować.

W panelu ustawień postów możesz wybrać typ posta na blogu, aby wyświetlić i pokazać lub ukryć informacje, takie jak paginacja, meta, dane autora, liczba komentarzy i inne.

Po dostosowaniu strony bloga kliknij przycisk Zapisz i wróć do pulpitu nawigacyjnego kreatora motywów.

Definiowanie ustawień globalnych

Ostatnia część szablonu, którą omówimy, kontroluje globalne ustawienia stylów dla przycisków motywu, kolorów, typografii i układu. Poszukaj części Global CSS i kliknij link Edytuj projekt , aby otworzyć ustawienia.

Możesz rozwinąć każdą kartę na tym ekranie i dostosować różne ustawienia.

Na przykład możesz otworzyć kartę Przycisk i dostosować domyślny styl każdego przycisku w swojej witrynie.

Dodatkowo możesz zmienić czcionki, układ, tło i dodać niestandardowy CSS do swojego motywu WordPress. Każda wprowadzona zmiana jest automatycznie stosowana w całej witrynie.

Pamiętaj, aby kliknąć przycisk Zapisz , aby zapisać zmiany przed przejściem dalej.

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

Jeśli korzystasz z formularza zgody lub bloku formularza kontaktowego w swoim projekcie motywu, będziesz potrzebować sposobu na dodanie nowych kontaktów do swojej listy e-mailowej. Na szczęście SeedProd integruje się bezpośrednio z popularnymi usługami e-mail marketingu, aby to ułatwić.

Integracje poczty e-mail SeedProd można znaleźć, klikając kartę Połącz podczas edycji dowolnego projektu. Stamtąd możesz znaleźć swoją usługę marketingu e-mailowego i postępować zgodnie z instrukcjami wyświetlanymi na ekranie, aby się połączyć.

Oprócz bezpośredniej integracji z usługami e-mail, SeedProd może przechowywać kontakty we wbudowanym pulpicie subskrybenta. Jest to przydatne, jeśli zaczynasz budować swoją listę e-mailową i nie wybrałeś jeszcze dostawcy.

Krok 5. Opublikuj swój niestandardowy motyw WordPress

Teraz, gdy dostosowałeś swój niestandardowy motyw WordPress, nadszedł czas, aby umieścić go w swojej witrynie. Aby to zrobić, przejdź do pulpitu nawigacyjnego konstruktora motywów i ustaw przełącznik obok nagłówka Włącz motyw SeedProd w pozycję „Wł.”.

Następnie możesz przejść do interfejsu witryny i zobaczyć nowy niestandardowy motyw WordPress.

Masz to!

Mamy nadzieję, że ten post pomógł Ci nauczyć się tworzyć motyw WordPress od podstaw bez kodowania.

Czy wiesz, że SeedProd zawiera również blok RafflePress? Dodanie prezentów RafflePress w dowolnym miejscu w niestandardowym projekcie motywu bardzo ułatwia zwiększenie ruchu, potencjalnych klientów i obserwujących w mediach społecznościowych.

Gotowy do nurkowania?

Zacznij korzystać z SeedProd tutaj i pobierz swoją kopię RafflePress tutaj.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube z samouczkami wideo RafflePress. Możesz nas również znaleźć na Twitterze i Facebooku.