Jak utworzyć motyw podrzędny Divi

Opublikowany: 2024-06-28

Istnieją tysiące (zgadza się, tysiące!) motywów WordPress dostępnych do wyboru podczas tworzenia witryny. Jednak większość projektantów stron internetowych stwierdza, że ​​chociaż motywy WordPress są dobrym punktem wyjścia, wymagają większej personalizacji, a utworzenie motywu podrzędnego to świetny sposób, aby to zrobić.

Motywy potomne opierają się na motywach nadrzędnych i umożliwiają dodawanie lub usuwanie własnego kodu. Jeśli chcesz naprawdę dostosować swoją witrynę WordPress, najlepszym sposobem jest użycie motywów podrzędnych, a Divi jest jednym z najlepszych wyborów.

Najważniejszym powodem, dla którego twórcy tworzą motyw podrzędny Divi, jest to, że po aktualizacji motywu nadrzędnego nic nie psuje się w Twojej witrynie. Utworzenie motywu podrzędnego z Divi zasadniczo działa jak sieć bezpieczeństwa, która zawsze będzie w stanie złapać Twoją witrynę, zanim się zepsuje! Ale już wybiegam w przyszłość, więc zacznijmy od podstaw.

W tym artykule omówię:

  • Czym jest Divi i jakie ma funkcje?
  • Jak stworzyć motyw podrzędny Divi (+ bezpłatne pobieranie dla dzieci!)
  • Jak sprawdzić, czy motyw podrzędny Divi działa

Zanurzmy się.

Co to jest Divi i jakie są funkcje?

Divi to motyw WordPress firmy Elegant Themes, który umożliwia tworzenie stron od podstaw przy użyciu różnych elementów strukturalnych. Oznacza to, że masz pełną kontrolę nad wszystkim w tworzonych witrynach dzięki doskonałemu edytorowi wizualnemu.

Zawiera także setki gotowych projektów, więc jeśli nie masz doświadczenia w tworzeniu i dostosowywaniu motywów, nie martw się! Niezależnie od tego, czy jesteś początkującym, który chce dostosować swoją pierwszą witrynę, czy doświadczonym programistą, Divi zapewnia narzędzia, które pozwolą Ci wcielić Twoje pomysły w życie.

programista tworzący motyw podrzędny Divi

Divi ma dwa interfejsy konstruktora: edytor wizualny na froncie WordPress i kreator zaplecza. W edytorze wizualnym sprawia, że ​​tworzenie witryn dla klientów jest 10 razy łatwiejsze, szybsze i przyjemniejsze, ponieważ możesz edytować na samej stronie i zobaczyć swoje zmiany na żywo. Na zapleczu edytujesz reprezentację opartą na blokach wewnątrz posta. Jednakże nadal możesz dodawać nowe moduły i robić zasadniczo wszystko tak, jak w edytorze wizualnym. Łatwo jest także przełączać się między redaktorami, w zależności od preferencji.

Divi ma również trzy główne elementy konstrukcyjne, które można wykorzystać w niezmienionej postaci lub dostosować do dokładnych specyfikacji: sekcje, rzędy i moduły.

Sekcje: Są to największe elementy składowe kreatora Divi. Można o nich myśleć jak o poziomych blokach układających się w stosy, które pozwalają pogrupować zawartość w wizualnie rozróżnialne obszary. Wszystko, co budujesz, zaczyna się od sekcji.

Wiersze: Wiersze to różne układy kolumn, które można umieścić wewnątrz sekcji. Mają różne ustawienia, do których można uzyskać dostęp, klikając ikonę ustawień w lewym górnym rogu wiersza. Można ich użyć do znacznego zwiększenia różnorodności układów zbudowanych za pomocą Divi Builder, ponieważ tworzą one strukturę, w której mieszczą się Twoje moduły.

Moduły: Moduły zawierają różne elementy treści, takie jak obrazy, treść, suwaki, galerie, formularze kontaktowe, wezwania do działania, blogi, formularze, referencje itp. Istnieje ponad 40 modułów, z których możesz wybierać i dostosowywać je według własnych upodobań.

Teraz, gdy już trochę lepiej rozumiesz Divi, przyjrzyjmy się, jak stworzyć motyw potomny.

Jak utworzyć motyw podrzędny Divi

Zanim zaczniesz dostosowywać rzeczy, upewnij się, że masz zainstalowaną i aktywowaną Divi. Można to zrobić na dwa sposoby:

Opcja 1: Użyj koła zamachowego + Divi do szybkiej i łatwej instalacji.

Opcja 2: Metoda ręczna (wykonaj te dwa kroki)

Krok 1: Zarejestruj się i pobierz Divi tutaj. Po utworzeniu konta i zalogowaniu się zostaniesz przekierowany do obszaru członkowskiego, po lewej stronie znajdziesz zakładkę „Pobrane”. Znajdź Divi i kliknij „Pobierz”. Spowoduje to wysłanie pobrania Divi w pliku zip do folderu Pobrane.

Krok 2: Czas zalogować się do witryny WordPress. Przejdź do Wygląd > Motywy. Kliknij Dodaj nowy lub Dodaj nowy motyw po prawej stronie. Kliknij przycisk „Prześlij motyw” w lewym górnym rogu. Wybierz plik i znajdź plik zip Divi. Uwaga: przechowuj go w pliku ZIP (nie rozpakowuj). Kliknij Zainstaluj. Po zakończeniu instalacji kliknij „Aktywuj”, a aplikacja zostanie zainstalowana i aktywowana na Twojej stronie! ?

Teraz możesz stworzyć motyw podrzędny Divi! Istnieją trzy główne sposoby tworzenia motywu podrzędnego Divi: pobierz darmowy motyw podrzędny, użyj wtyczki lub zakoduj go ręcznie.

Opcja 1: Pobierz darmowy plik motywu Divi Child

Jednym z najszybszych (i najłatwiejszych!) sposobów stworzenia motywu podrzędnego jest pobranie darmowego motywu podrzędnego Divi. Zawiera wszystko, czego potrzebujesz, aby zacząć, a także miejsce, które możesz dostosować do własnych upodobań! Pobierz poniżej darmowy motyw dziecięcy Divi.

Po pobraniu zainstaluj Divi, aktywuj go i gotowe! To takie proste. Jeśli wolisz inny sposób tworzenia motywu podrzędnego Divi, zawsze możesz wypróbować wtyczkę.

Opcja 2: Utwórz motyw podrzędny Divi za pomocą wtyczki

Dostępnych jest wiele wtyczek, które pomogą Ci stworzyć motyw podrzędny Divi. Oto kilka moich osobistych ulubionych:

  • Dzieci Divi
  • Konfigurator motywów potomnych
  • Twórca motywów dziecięcych autorstwa Orbisiusa
dwie ręce trzymają przewody z wtyczkami na końcach

Dzieci Divi

Divi Children to darmowa wtyczka opracowana specjalnie dla użytkowników Divi. Automatycznie wykonuje całą ciężką pracę za Ciebie, więc możesz skupić się na kreatywnej stronie! Każdy motyw podrzędny stworzony przez Divi Children zawiera mnóstwo funkcji dostosowywania za pośrednictwem WP Customizer. Dowiedz się, jak zainstalować tę wtyczkę tutaj.

Konfigurator motywów potomnych

Ta wtyczka została zaprojektowana dla użytkowników WordPress, którzy chcą mieć możliwość bezpośredniego dostosowywania arkuszy stylów motywów podrzędnych. Dzięki tej wtyczce możesz łatwo zidentyfikować i zastąpić dokładnie te atrybuty CSS, które chcesz dostosować, a analizator skanuje wyrenderowany motyw i automatycznie konfiguruje motyw podrzędny. Dowiedz się więcej o tej wtyczce i sposobie jej instalacji tutaj.

Twórca motywów dziecięcych autorstwa Orbisiusa

Ta wtyczka umożliwia szybkie tworzenie motywów potomnych z dowolnego motywu, który aktualnie zainstalowałeś w swojej witrynie. Dzięki tej wtyczce możesz utworzyć nieograniczoną liczbę motywów podrzędnych z motywu nadrzędnego, dzięki czemu opcje są nieograniczone. Zawiera dwa edytory i możesz wybierać fragmenty z jednego motywu i wklejać je do innego. Porozmawiaj o dostosowywaniu! Dowiedz się więcej o instalowaniu tej wtyczki tutaj.

Wreszcie, jeśli wtyczka nie jest dla Ciebie, zawsze istnieje możliwość ręcznego utworzenia motywu podrzędnego Divi!

Opcja 3: Ręcznie utwórz motyw podrzędny Divi

Jeśli jesteś programistą WordPress lub po prostu lubisz dobre wyzwania, jest to świetny sposób na stworzenie motywu podrzędnego Divi.

programista sięgający po nowe narzędzia pomocne przy swojej witrynie.

Krok 1: Utwórz plik style.CSS

Jak zapewne wiesz, plik style.css służy do informowania WordPressa o szczegółach motywu potomnego i można go wykorzystać do dodania niestandardowego CSS! Aby to zrobić, utwórz folder na swoim komputerze i nadaj mu nazwę (coś, co poinformuje Cię, że jest to motyw podrzędny Divi). Następnie utwórz plik w tym folderze i nadaj mu nazwę style.css.

Uwaga: Upewnij się, że masz narzędzie do edytowania tekstu lub kodu, w przeciwnym razie nazwanie tego pliku będzie trudne!

Krok 2: Dodaj to do pliku style.css:

 /*
 Nazwa motywu: Motyw Divi Child
 URI motywu: https://www.elegantthemes.com/gallery/divi/
 Opis: Motyw potomny dla Divi
 Autor: Twoje imię
 URI autora: https://getflywheel.com/
 Szablon: Divi
 Wersja: 1.0.0
*/

Nazwa motywu, URI motywu, opis, autor, URI autora i wersja są edytowalne. Zachowaj nazwę szablonu bez zmian! Aby uzyskać więcej możliwości dostosowania (i upewnić się, że motyw podrzędny Divi działa), dodaj tutaj dowolny niestandardowy CSS.

Krok 3: Utwórz plik funkcje.php

Utwórz kolejny plik w już utworzonym folderze i nazwij gofunctions.php

Następnie dodaj ten kod do nowego pliku i dodaj dowolne niestandardowe funkcje poniżej ostatniego wiersza:

 <?php
funkcja divi__child_theme_enqueue_styles() {
    wp_enqueue_style( 'styl-nadrzędny', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'divi__child_theme_enqueue_styles' );

Krok 4: Utwórz zrzut ekranu

To ważny krok, aby w Twojej witrynie nie było pustego miejsca na stronie z motywami WordPress, w którym powinien znajdować się obraz, więc zrobienie szybkiego zrzutu ekranu jest tutaj kluczowym krokiem! Po zrobieniu zrzutu ekranu upewnij się, że ma wymiary 880x660 pikseli, jest to plik .png lub .jpeg (albo działa!), a nazwa to [screenshot.png] lub [screenshot.jpeg]. Następnie dodasz obraz zrzutu ekranu do głównego folderu.

Krok 5: Skompresuj folder i prześlij

Na koniec skompresuj folder do pliku zip i prześlij do WordPress! Przejdź do Wygląd > Motywy > Prześlij , a następnie kliknij Aktywuj.

Voila! Pomyślnie utworzyłeś motyw dziecięcy Divi i możesz dostosować go do pragnień swojego serca.

Jak sprawdzić, czy motyw Divi Child działa

Aby sprawdzić, czy motyw potomny działa poprawnie, dodaj trochę CSS do pliku style.css motywu potomnego i zapisz zmiany. Powinieneś zobaczyć te zmiany na działającej stronie i dzięki temu będziesz wiedział, że to działa!

Uwaga: być może będziesz musiał otworzyć swoją stronę w prywatnej przeglądarce, jeśli jest przechowywana w pamięci podręcznej.

Pamiętaj: nigdy nie powinieneś wprowadzać zmian w działającej witrynie, jeśli istnieje ryzyko, że coś zepsujesz! Użyj Local, bezpłatnej aplikacji do programowania lokalnego, dzięki czemu możesz przestać debugować środowiska lokalne i spędzić więcej czasu na uruchamianiu pięknych witryn WordPress. Więcej informacji o programie Local znajdziesz tutaj.

Wniosek

Dostosowywanie to jedna z najlepszych części tworzenia witryn za pomocą WordPressa i choć motywy są świetnymi punktami wyjścia, miło jest mieć do dyspozycji motywy podrzędne, takie jak Divi.

Pobierz darmowy motyw dziecięcy Divi

Jednym z najszybszych (i najłatwiejszych!) sposobów stworzenia motywu podrzędnego jest pobranie darmowego motywu podrzędnego Divi. Zawiera wszystko, czego potrzebujesz, aby zacząć, a także miejsce, które możesz dostosować do własnych upodobań! Pobierz poniżej darmowy motyw dziecięcy Divi.