Chcesz Stworzyć Własny Własny Motyw WordPress?

Jeśli chcesz, aby coś było zrobione na określony sposób — cóż, być może będziesz musiał to zrobić sam. Mimo że dostępnych jest wiele świetnych motywów WordPress, znalezienie tego, który spełni twoje szczególne wymagania, może okazać się trudne. W poszukiwaniu idealnego rozwiązania, możesz być kuszony, aby stworzyć własny niestandardowy motyw WordPress.

Na szczęście, stworzenie własnego motywu dla WordPressa jest stosunkowo prostym procesem. Co zaskakujące, nie wymaga dużo technicznej wiedzy ani doświadczenia w tworzeniu stron internetowych. Ponadto, budowanie własnego motywu może być warte wysiłku, ponieważ możesz dostosować wygląd swojej strony dokładnie tak, jak chcesz.

Projektowanie spersonalizowanej strony WordPress

Chcesz, aby Twoja strona wyglądała świetnie i miała wszystkie potrzebne funkcje, więc sprawdź Katalog Motywów WordPress:

Niestety, nic z tego, co widzisz, nie spełnia twoich wymagań i nie chcesz iść na kompromis ze swoją wizją. Może chcesz czegoś unikalnego, aby wyróżnić swoją stronę, ale nie chcesz wydawać pieniędzy na premium motyw.

Kreator Stron

Jedną z opcji jest użycie pluginu kreatora stron. Te narzędzia pozwalają na przejęcie istniejącego motywu i dostosowanie układu do własnych potrzeb. Większość popularnych kreatorów stron oferuje proste kontrolki przeciągnij i upuść, bez wymagań programistycznych. Niektóre wielofunkcyjne motywy mają tę funkcję wbudowaną.

Motywy Blokowe

Jeśli zdecydujesz się wypróbować natywny Edytor WordPress, pełna edycja strony to zestaw funkcji w WordPress, który zawiera kilka narzędzi, aby proces projektowania był bardziej dostępny dla właścicieli stron.

Korzystając z tego nowego Edytora Strony, możesz używać bloków przeciągnij i upuść, aby dostosować większość swojej strony z jednego interfejsu, w tym szablony stron, bez użycia kodu. Oto nasz kompletny przewodnik po Pełnej Edycji Strony.

Dostosowywanie motywu

Jeśli wybierzesz motyw możliwy do dostosowania, będziesz mógł również dostosować wygląd swojej strony bez zagłębiania się w aspekty techniczne. Korzystając z WordPress Customizer i panelu opcji motywu, powinieneś być w stanie dostosować różne elementy projektu:

• Schemat kolorów: Od koloru tła Twojej strony do konkretnego odcienia tekstu głównego.
• Typografia: Dotyczy to czcionek używanych na Twojej stronie oraz sposobu wyświetlania tekstu w różnych rodzajach treści.
• Układ: Niektóre motywy pozwalają na przełączanie się między różnymi układami i wybór sposobu dostosowania Twojej strony do różnych rozmiarów ekranów.

Dokładny wybór opcji tutaj zależy od wybranego motywu i tego, jak koordynuje się on z resztą twoich aktywów markowych oraz kampanii marketingowych. Motywy premium zwykle oferują więcej funkcji dostosowywania.

Tworzenie motywu potomnego

Jeśli chcesz mieć więcej kontroli, możesz rozważyć stworzenie motywu potomnego.

Biorąc pod uwagę ilość wyborów w Katalogu Motywów WordPress, prawdopodobnie znajdziesz motyw, który spełni niektóre (jeśli nie wszystkie) Twoje potrzeby. Zamiast zaczynać od bardzo podstawowego szablonu, możesz dostosować istniejący motyw do swojej wizji.

Na pierwszy rzut oka, motyw potomny WordPress działa jak każdy inny motyw. Kluczowa różnica polega na tym, że motyw potomny dziedziczy atrybuty po motywie nadrzędnym (oryginalnym motywie, który zdecydowałeś się użyć).

Ta relacja pozwala motywowi potomnemu na zastąpienie określonych części motywu nadrzędnego, jednocześnie zachowując większość wyglądu i funkcjonalności rodzica.

Motywy potomne zapewniają skuteczną metodę dostosowywania istniejącego motywu bez modyfikowania plików motywu nadrzędnego. Aktualizacja motywów nadrzędnych i potomnych pod kątem zabezpieczeń i napraw błędów jest niezbędna. Najczęściej aktualizacji wymagać będzie tylko motyw nadrzędny.

Używanie motywu potomnego jest skutecznym sposobem na stworzenie unikalnej obecności online bez zbytniego zagłębiania się w świat programowania.

Pełna Kontrola

Czasami nawet to nie wystarcza. Kiedy chcesz stworzyć coś naprawdę wyjątkowego, czas rozważyć stworzenie własnego motywu.

Na szczęście, tworzenie motywu dla WordPress jest łatwiejsze, niż mogłoby się wydawać. Dzięki przyjaznemu interfejsowi użytkownika platformy oraz licznych dostępnych narzędziom, prawie każdy może stworzyć własny motyw.

Przeprowadzimy Cię przez proces tworzenia twojego pierwszego motywu. Aby zacząć, potrzebne będą Ci dwie rzeczy:

• Twoja własna strona WordPress
• Jakościowy plan hostingowy

Skorzystasz również z doświadczenia w pracy z lokalnymi środowiskami stagingowymi, ponieważ będziesz używać jednego z nich do tworzenia swojego motywu. Przydatna będzie również pewna znajomość CSS i PHP (choć nie jest to absolutnie konieczne).

Na koniec, jest jedno ważne narzędzie, które będziesz chcieć mieć, co znacznie ułatwi proces: motyw startowy.

Co to jest motyw startowy? (I dlaczego powinieneś go użyć)

Motyw startowy to podstawowy motyw WordPress, który możesz użyć jako fundament do stworzenia własnego. Pozwala to budować na solidnym fundamencie bez martwienia się o zawiłości kodowania motywu od zera. Pomoże Ci to również zrozumieć, jak działa WordPress, pokazując podstawową strukturę motywu i jak wszystkie jego części współpracują ze sobą.

Istnieje wiele doskonałych motywów początkowych, w tym Underscores, UnderStrap i Bones (żeby wymienić tylko kilka).

Będziemy korzystać z Underscores w naszym samouczku. To solidny wybór dla początkujących, ponieważ zawiera tylko podstawy. Dodatkowo, ten motyw startowy został opracowany przez Automattic (zespół odpowiedzialny za WordPress.com), co oznacza, że jest bardziej prawdopodobne, że będzie bezpieczny, kompatybilny i dobrze wspierany w dłuższej perspektywie.

Jak Rozwinąć Swój Pierwszy Motyw WordPress (W 5 Krokach)

Przygotowania za nami, jesteś wreszcie gotowy, aby zacząć tworzyć swój pierwszy motyw. Jak wspomnieliśmy wcześniej, będziemy używać motywu startowego do tego przewodnika.

Jednakże, jeśli chcesz spróbować stworzyć wszystko samodzielnie bez szablonu, możesz to zrobić, ale podejście to będzie wymagało znacznie większej znajomości kodowania.

Krok 1: Skonfiguruj środowisko lokalne

Pierwszą rzeczą, którą musisz zrobić, to stworzyć lokalne środowisko programistyczne. Jest to efektywnie serwer, który instalujesz na swoim komputerze, którego możesz używać do rozwijania i zarządzania lokalnymi stronami WordPress. Lokalna strona to bezpieczny sposób na rozwijanie motywu bez wpływu na twoją działającą stronę.

Istnieje wiele sposobów na stworzenie lokalnego środowiska, ale będziemy korzystać z Local. Jest to szybki i łatwy sposób na zainstalowanie lokalnej wersji WordPressa za darmo, kompatybilny zarówno z Mac, jak i Windows:

Aby zacząć, wybierz darmową wersję Local, wybierz swoją platformę, dodaj swoje dane i pobierz instalator. Gdy instalacja zostanie zakończona, możesz otworzyć program na swoim komputerze.

Tutaj zostaniesz poproszony o skonfigurowanie nowego lokalnego środowiska:

To jest prosty proces, i będziesz miał swoją lokalną stronę WordPress gotową w kilka minut. Po ustawieniu, twoja nowa strona będzie wyglądać i działać dokładnie jak na żywo strona WordPress.

Krok 2: Pobierz i zainstaluj swój motyw startowy

Jak większość motywów początkowych, Underscores jest bardzo łatwy w rozpoczęciu pracy. Wystarczy, że odwiedzisz stronę internetową i nazwiesz swój motyw:

Jeśli chcesz, możesz kliknąć na Zaawansowane Opcje, aby dalej dostosować podstawowy motyw:

Tutaj możesz podać więcej informacji, takich jak imię autora, oraz dodać opis motywu:

Jest również opcja _sassify!, która doda pliki Syntactically Awesome StyleSheets (SASS) do twojego motywu. SASS to język preprocesorowy dla CSS, który umożliwia korzystanie ze zmiennych, zagnieżdżenia, operatorów matematycznych i więcej.

Kiedy dokonasz swoich wyborów, możesz kliknąć na Generuj, co spowoduje pobranie pliku .zip zawierającego twój początkowy motyw. Jest to plik główny, wokół którego będziesz rozwijać własny motyw, więc musisz zainstalować go na swojej lokalnej stronie.

Po zainstalowaniu motywu możesz podejrzeć swoją stronę, aby zobaczyć, jak wygląda. Na razie jest bardzo podstawowa, ale to się wkrótce zmieni!

Krok 3: Poznaj różne składniki motywu WordPress

Zanim będziesz mógł dostosować swój motyw, musisz zrozumieć przeznaczenie jego komponentów i to, jak są ze sobą powiązane.

Pierwsze, omówmy pliki szablonów, które są głównymi elementami budulcowymi motywu WordPress. Te pliki określają układ i wygląd treści na Twojej stronie.

Na przykład, header.php jest używany do tworzenia nagłówka, podczas gdy comments.php umożliwia wyświetlanie komentarzy.

WordPress określa, które pliki szablonów użyć na każdej stronie, przechodząc przez hierarchię szablonów. Jest to kolejność, w której WordPress będzie szukać pasujących plików szablonów za każdym razem, gdy strona na Twojej witrynie zostanie załadowana.

Na przykład, jeśli odwiedzisz adres URL http://example.com/post/this-post, WordPress będzie szukał następujących plików szablonów w tej kolejności:

1. Pliki pasujące do sluga, takie jak this-post
2. Pliki pasujące do identyfikatora posta
3. Generyczny plik pojedynczego posta, taki jak single.php
4. Plik archiwum, taki jak archive.php
5. Plik index.php

Ponieważ plik index.php jest wymagany przez wszystkie motywy, jest domyślną opcją, jeśli nie można znaleźć żadnego innego pliku. Underscores zawiera najczęstsze pliki motywów, które będą działać od razu po wyjęciu z pudełka. Jednakże, możesz eksperymentować z ich edycją, jeśli chcesz zrozumieć, jak działają razem.

Główne Pliki Motywu

Oprócz pliku index.php, znajdziesz następujące pliki w większości motywów WordPress:

• header.php: Plik ten zawiera HTML dla Twojego niestandardowego szablonu nagłówka, w tym metadane i linki do arkuszy stylów. Należy pamiętać, że menu są zazwyczaj obsługiwane przez funkcję niestandardowego menu WordPress.
• footer.php: Ten plik zawiera HTML dla szablonu stopki Twojej strony internetowej.
• sidebar.php: Jeśli chcesz, aby Twoja strona internetowa miała pasek boczny, kod pochodzi stąd. Należy pamiętać, że jest to tylko struktura; widgety są kontrolowane z obszaru administracyjnego.
• single.php: To jest plik szablonu dla pojedynczych wpisów na blogu. Jeśli chcesz obsługiwać różne typy postów, możesz stworzyć więcej niż jeden plik.
• page.php: Domyślny układ pojedynczych stron pochodzi z tego pliku. Ponownie, możesz stworzyć więcej niż jeden szablon — na przykład możesz stworzyć projekt strony produktu dla sklepu internetowego.
• comments.php: Ten plik kontroluje wyświetlanie komentarzy pod Twoimi wpisami na blogu oraz na stronach.
• search.php: Gdy ktoś używa funkcji wyszukiwania na Twojej stronie internetowej, ten szablon określa, jak będą wyglądać wyniki wyszukiwania.

Na ogół będziesz musiał edytować te pliki tylko wtedy, gdy chcesz dodać treść lub drastycznie zmienić układ swojej strony. Większość innych modyfikacji można wykonać za pomocą niestandardowego CSS w pliku arkusza stylów.

Pętla

Kolejnym ważnym elementem, który musisz zrozumieć, jest Pętla. WordPress używa tego kodu do wyświetlania treści, więc w wielu przypadkach jest on sercem Twojej strony. Pojawia się we wszystkich plikach szablonów, które wyświetlają treść posta, takich jak index.php lub sidebar.php.

The Loop to skomplikowany temat, który polecamy zgłębić, jeśli chcesz zrozumieć, jak WordPress wyświetla treść postów. Na szczęście, Loop będzie już zintegrowany z twoim motywem dzięki Underscores, więc na razie nie musisz się tym martwić.

Krok 4: Skonfiguruj swój motyw

Łatwo jest myśleć, że motywy służą wyłącznie do celów estetycznych, ale mają one ogromny wpływ na funkcjonalność twojej strony. Przyjrzyjmy się, jak możesz dokonać kilku podstawowych zmian.

Dodaj Funkcjonalność za Pomocą Haków

Hooks to fragmenty kodu umieszczane w plikach szablonów, które pozwalają na wykonywanie akcji PHP w różnych obszarach strony, dodawanie stylów i wyświetlanie innych informacji. Większość hooków jest bezpośrednio zaimplementowana w głównym oprogramowaniu WordPress, ale niektóre są również przydatne dla deweloperów motywów.

Przyjrzyjmy się niektórym z najczęściej używanych haków i do czego mogą być wykorzystane:

• wp_head(): Dodany do elementu <head> w header.php. Umożliwia dodawanie stylów, skryptów i innych informacji, które działają, gdy strona się ładuje. Często używany do wstawiania kodu Google Analytics.
• wp_footer(): Dodany do footer.php tuż przed tagiem </body>.
• wp_meta(): Zwykle pojawia się w sidebar.php w celu dołączenia dodatkowych skryptów (takich jak chmura tagów).
• comment_form(): Dodany do comments.php bezpośrednio przed zamknięciem tagu </div> w celu wyświetlenia danych komentarza.

Te haki będą już zawarte w twoim motywie Underscores. Mimo to, nadal zalecamy odwiedzenie Bazy Haków, aby zobaczyć wszystkie dostępne haki i dowiedzieć się więcej na ich temat.

Dodaj style przy użyciu CSS

Kaskadowe Arkusze Stylów (CSS) definiują wygląd wszystkich treści na Twojej stronie. W WordPressie jest to realizowane za pomocą pliku style.css. Plik ten jest już dołączony do Twojego motywu, ale na razie zawiera tylko podstawowe, domyślne style:

Jeśli chcesz szybki przykład działania CSS, możesz edytować dowolny z tych stylów i zapisać plik, aby zobaczyć efekty. Na przykład, możesz znaleźć poniższy kod (zazwyczaj w linii 485):

a {
color: royalblue;
}

Ten kod kontroluje kolor nieodwiedzonych hiperłączy, które domyślnie są koloru królewskiego błękitu:

Zobaczmy, co się stanie, jeśli spróbujemy to zmienić, zastępując to następującym kodem:

a {
color: red;
}

Zapisz plik i sprawdź swoją lokalną stronę. Jak można się spodziewać, wszystkie nieodwiedzone linki będą teraz wyświetlane na jaskrawoczerwono:

Możesz zauważyć, że odwiedzony link na górze nie zmienił koloru. Jest to spowodowane tym, że jest on rzeczywiście zarządzany przez następną sekcję w arkuszu stylów:

a:visited {
color: purple;
}

To jest bardzo podstawowy przykład tego, jak edycja style.css wpłynie na wygląd Twojej strony. CSS to obszerny temat, który polecamy zgłębić, jeśli chcesz dowiedzieć się więcej o tworzeniu projektów stron internetowych. Istnieje mnóstwo zasobów na ten temat dla początkujących.

Krok 5: Eksportuj Motyw i Prześlij go na Swoją Stronę

Kiedy skończysz modyfikować swój motyw, nadszedł czas, aby upewnić się, że działa prawidłowo. Aby to zrobić, możesz użyć danych Testu Jednostkowego Motywu.

To jest zestaw przykładowych danych, które możesz załadować na swoją stronę. Zawiera wiele różnych wariantów stylów i treści, które pozwolą ci zobaczyć, jak twój motyw radzi sobie z nieprzewidywalnymi danymi.

Gdy dokładnie przetestujesz swój motyw i będziesz przekonany, że spełnia wymagane standardy, wszystko, co pozostaje, to go wyeksportować.

Najpierw musisz znaleźć lokalizację swojej strony na swoim lokalnym komputerze. Prawdopodobnie znajdziesz ją w folderze o nazwie Websites, w domyślnym katalogu Documents.

Otwórz folder strony i uzyskaj dostęp do /wp-content/themes/, gdzie znajdziesz swój motyw:

Możesz teraz użyć narzędzia do kompresji, takiego jak WinRAR, aby utworzyć plik .zip na podstawie folderu. Wystarczy kliknąć prawym przyciskiem myszy na folderze i wybrać opcję, która umożliwia jego zzipowanie, taką jak Kompresuj “folder”.

Kiedy folder zostanie spakowany, będzie gotowy do przesłania i zainstalowania na dowolnej stronie WordPress, tak jak zainstalowałeś swoją skórkę Underscores na początku.

Porady dotyczące tworzenia pierwszego własnego motywu

Kiedy zaczynasz bawić się kodem po raz pierwszy, zawsze istnieje możliwość popełnienia kilku błędów. Z tego powodu dobrze jest poświęcić trochę czasu na opracowanie swojego pierwszego motywu i eksperymentować w swoim lokalnym środowisku.

Oto kilka dodatkowych środków, które możesz podjąć, aby zapewnić, że Twój motyw będzie dobrze funkcjonować w praktyce:

• Używaj kontroli wersji: Systemy takie jak Git pomagają śledzić zmiany w kodzie na przestrzeni czasu i cofać błędy.
• Waliduj swój kod: Używaj narzędzi takich jak Theme Check i W3C Validator, aby znajdować błędy w swoim kodzie. Częste sprawdzanie może pomóc w szybkim wykrywaniu problemów.
• Testuj swój motyw: Spróbuj załadować swój motyw na różnych przeglądarkach i urządzeniach, aby zidentyfikować problemy z układem lub renderowaniem. Projekt, który doskonale działa na Twoim komputerze, może się rozpaść na innej platformie.
• Używaj komentarzy w kodzie: Pozostawianie sobie notatek wyjaśniających, co robi każdy element, może pomóc w rozwiązaniu problemów w późniejszym czasie.

Stwórz Własny Motyw WordPress

Tworzenie niestandardowego motywu WordPress od podstaw to nie lada wyczyn. Jednak proces ten może nie być tak trudny, jak Ci się wydaje.

Podsumowując, oto jak stworzyć motyw WordPress w pięciu prostych krokach:

1. Skonfiguruj lokalne środowisko, używając Local.
2. Pobierz i zainstaluj motyw startowy, taki jak Underscores.
3. Dowiedz się więcej o różnych komponentach motywu WordPress.
4. Konfiguruj swój motyw.
5. Eksportuj motyw i załaduj go na swoją stronę.

Zgodnie z wytycznymi na stronie dokumentacji Codex, możesz opracować motyw, który spełnia standardy jakości. Możesz nawet rozważyć zgłoszenie go do Katalogu Motywów WordPress!

Uruchom swoją unikatową stronę WordPress z DreamPress

Budowanie świetnego motywu to pierwszy krok w kierunku stworzenia udanej strony internetowej. Posiadamy narzędzia, które pomogą Ci w dokończeniu reszty.

Z DreamPress Zarządzany Hosting WordPress, możesz testować dowolny motyw lub plugin online za pomocą jednego kliknięcia na stronie staging. Zapewniamy również niezawodne kopie zapasowe, dzięki którym możesz cofnąć zmiany w dowolnym momencie, oraz wbudowaną pamięć podręczną dla optymalnej wydajności.

Zapisz się dzisiaj, aby uruchomić swoją stronę WordPress!