Jak dodać niestandardowe szablony i projekt do formatów postów na blogu Divi (część 1 z 3)

Witamy w dniu 1 z 3 w naszej serii na temat dodawania niestandardowych stylów do formatów postów na blogu Divi. Domyślnie Divi zawiera sześć formatów postów na blogu: Standardowy, Wideo, Audio, Cytat, Galeria i Link. W tej serii nauczymy Cię, jak dostosować je za pomocą php i css.

W ciągu następnych 3 dni przeprowadzę Cię przez dostosowywanie wszystkich formatów postów na blogu Divi: Standardowy, Cytat, Link, Wideo, Audio i Galeria. Edycja ich wszystkich (dla projektów, które mam na myśli) wymaga edycji pliku szablonu single.php. Aby zrobić to poprawnie, musimy utworzyć motyw potomny Divi, który będzie zawierał nasz zmieniony plik szablonu Single.php. A zanim to zrobimy, powinniśmy również stworzyć lokalną instalację WordPressa za pomocą Desktopserver. Zapewni to nam bezpieczną przestrzeń programistyczną, w której będziemy mogli się bawić, nie ryzykując niczego na działającej stronie internetowej.

Jak sugeruje tytuł tego posta, potrzebujemy trzech dni, aby omówić wszystko od początku do końca. Dzisiaj pokażę, jak utworzyć lokalną instalację WordPressa przy użyciu serwera Desktopserver i utworzyć motyw potomny, którego użyjemy do przechowywania naszych zmienionych formatów postów na blogu.

Uznałbym tę serię za bardziej „zaawansowaną” niż większość opublikowanych tutaj samouczków. Ale jeśli jesteś początkującym, ta seria jest naprawdę świetną okazją do poprawy umiejętności programistycznych i rozwinięcia czegoś nowego w bezpiecznej, bezpłatnej serii wpisów z przewodnikiem.

Zacznijmy!

Zajawka na temat tego, co ma nadejść

Oto szybki rzut oka na projekty, które będziemy realizować w tej serii. Po tym, jak przygotujemy dla nich podstawy w dzisiejszym poście, pokażę Ci, jak edytować plik single.php (szablon dla wszystkich naszych formatów postów na blogu), a następnie jak dalej stylizować ten szablon dla każdego formatu za pomocą CSS. To będzie niezła podróż!

Przygotowanie aktywów rozwojowych

Oto, co musisz śledzić wraz z dzisiejszym samouczkiem i samouczkami, które stworzyłem na następne 2 dni:

• Edytor kodu, taki jak Atom, Sublime, Brackets lub Notepad + + (jak wolisz)
• Lokalna instalacja WordPressa przy użyciu DesktopServer (chyba że już go masz)
• Motyw Divi Child – który stworzymy!

Gorąco polecam, jeśli zamierzasz śledzić tę serię, zrobisz to na instalacji WordPress, która jest skonfigurowana tylko do testowania i rozwoju. Ostatnią rzeczą, jakiej chcę, jest to, aby ludzie eksperymentowali ze swoją witryną na żywo i coś zepsuli.

Jeśli nie masz pewności, jak skonfigurować lokalną instalację programistyczną WordPressa, polecam skorzystać z bezpłatnej wersji desktopserver. Powinna być uruchomiona z lokalną instalacją WordPress w ciągu kilku minut (bez przesady).

Konfigurowanie serwera DesktopServer na komputerze

Oto kilka kroków, aby rozpocząć pracę z DesktopServer.

Odwiedź ich stronę internetową i pobierz bezpłatną wersję, klikając przycisk „Bezpłatne – Dodaj do koszyka” w prawej kolumnie.

Na stronie kasy podaj swoje dane osobowe, zaakceptuj ich warunki i kliknij kup.

Na stronie Potwierdzenie zakupu wybierz odpowiedni plik do pobrania dla swojego systemu operacyjnego. Proponuję zainstalować najnowszą wersję systemu Mac lub Windows.

Rozpakuj pobrany plik i uruchom instalację aplikacji na swoim komputerze.

Teraz możesz znaleźć aplikację DesktopServer w folderze o nazwie „xampplite”, w katalogu głównym dysku lokalnego (C :).

Po zainstalowaniu serwera Desktopserver przeczytaj jego instrukcje, które pomogą Ci rozpocząć konfigurację lokalnej instalacji Wordpress.

Tworzenie motywu Divi Child dla tej serii

Aby utworzyć motyw potomny Divi, musisz uzyskać dostęp do plików motywu WordPress. Jeśli postępowałeś zgodnie z ustawieniami domyślnymi podczas instalacji DesktopServer, twoje pliki motywów powinny znajdować się w folderze dokumentów w folderze oznaczonym "Witryny".

Znajdź folder motywów i dodaj nowy folder o nazwie „dziecko”.

Teraz zamierzasz dodać plik style.css do folderu motywu podrzędnego. Jest to pierwszy z 3 plików, które utworzą Twój motyw potomny.

Otwórz edytor tekstu i utwórz nowy plik z następującym nagłówkiem CSS na samej górze dokumentu.

/*
 Theme Name:     Divi Child
 Theme URI: 
 Description:	   Divi Child Theme
 Author:
 Author URI:   
 Template:       Divi
 Version:        1.0.0
 License:  
 License URI:  
 Tags:  
 Text Domain: 
*/

W razie potrzeby możesz dodać pozostałe informacje do nagłówka CSS motywu podrzędnego, aby dopasować je do swojej witryny.

Zapisz nowy plik pod nazwą i rozszerzeniem „style.css”. I dodaj go do folderu motywu potomnego:

Następnym plikiem, który musisz dodać do folderu motywu potomnego, jest plik functions.php.

Wróć do edytora tekstu i utwórz kolejny nowy plik i dodaj następujący kod php na samej górze dokumentu:

<?php 
function my_theme_enqueue_styles() {
    $parent_;
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Zapisz plik pod dokładną nazwą i rozszerzeniem „functions.php” i dodaj go do folderu podrzędnego:

Ostatnim plikiem, którego potrzebujesz dla motywu potomnego, jest plik single.php Divi. Wraz z dodaniem nowego kodu CSS do pliku style.css motywu podrzędnego, będziemy używać kopii pliku single.php Divi do edycji układu dla różnych typów postów.

Aby znaleźć plik single.php, przejdź do folderu motywu Divi (nadrzędnego).

Skopiuj plik single.php i wklej go do folderu motywu podrzędnego:

Teraz jesteśmy gotowi do dostosowania pliku single.php motywu podrzędnego.

Aktywuj swój nowy motyw potomny

Zanim zaczniemy dostosowywać plik szablonu single.php, śmiało aktywuj nowy motyw potomny.

Z pulpitu nawigacyjnego wordpress przejdź do Wygląd → Motywy i wybierz przycisk Aktywuj na nowym motywie potomnym o nazwie Divi Child.

Na razie to wszystko!

Wiem, że nie jest to jeszcze zbyt ekscytujące, ale mam nadzieję, że zostaniesz ze mną. Ważne jest, aby położyć odpowiedni fundament pod swoje projekty, a ten post jest świetnym miejscem na rozpoczęcie.

Co nadchodzi jutro?

Teraz, po aktywacji lokalnej instalacji WordPressa i motywu potomnego, jesteś gotowy na kolejną część tej serii. Jutro pokażę, jak edytować plik single.php Divi, aby stworzyć całkowicie unikalny układ dla formatów postów na blogu.

Z niecierpliwością czekam na Wasze opinie poniżej. Skonfigurowanie motywu potomnego na lokalnym serwerze może prowadzić do problemów dla początkujących, więc postaram się odpowiedzieć na wszelkie możliwe pytania. Jeśli jednak masz więcej problemów technicznych, nasz zespół wsparcia jest gotowy i chętny również do pomocy. Nie wspominając o ludziach z Desktop Server!

Pozdrawiam!