Jak zbudować układ kazania za pomocą niestandardowych pól i dynamicznej zawartości w Divi

Możliwość dostępu i słuchania kazań jest istotną częścią każdej kościelnej witryny internetowej. A wraz z wydaniem nowego pakietu Divi Church Layout Pack, pomyślałem, że przydatne będzie pokazanie, jak można zbudować układ kazania przy użyciu dynamicznej zawartości. Aby to zrobić, użyję wtyczki Zaawansowane pola niestandardowe, aby utworzyć grupę pól niestandardowych, które możesz zaktualizować na zapleczu swojego posta. Korzystając z funkcji dynamicznej zawartości Divi, pokażę Ci, jak zaprojektować układ, aby wciągnąć te niestandardowe pola w celu wypełnienia treści posta. Gdy wszystko zostanie powiedziane i zrobione, będziesz mieć ładny układ kazania z dynamiczną treścią, którą można aktualizować na zapleczu za pomocą intuicyjnego interfejsu użytkownika z niestandardowymi polami bez konieczności wdrażania wizualnego konstruktora.

Zacznijmy.

Czego potrzebujesz

Do tego samouczka potrzebne będą:

• Motyw Divi
• Wtyczka Zaawansowane pola niestandardowe
• Church Blog Layout z Church Layout Pack (dostępny z Divi Builder)

Zapowiedź układu kazań

Oto rzut oka na układ, który zbudujemy. Piękno tego układu polega na tym, że większość treści jest generowana z niestandardowych pól na zapleczu przy użyciu treści dynamicznej.

Tworzenie niestandardowych pól za pomocą wtyczki Advanced Custom Fields

Wtyczka Advanced Custom Fields (ACF) ułatwia grupowanie niestandardowych pól w celu wykorzystania ich jako dynamicznej zawartości w Twoich postach lub stronach. Obsługuje wiele typów pól (takich jak selektor dat, edytor Wysiwyg i oEmbed), które sprawiają, że aktualizowanie pól niestandardowych jest naprawdę łatwe. Jest to niezwykle pomocne w zapewnianiu bardziej intuicyjnego interfejsu użytkownika, który umożliwia klientom aktualizowanie witryny za pomocą pól niestandardowych.

Po zainstalowaniu i aktywacji wtyczki ACF przejdź do pulpitu nawigacyjnego WordPress i pól niestandardowych > Dodaj nowy.

Dodaj nowe pole Grupa

Aby skonfigurować nową grupę, nadaj nowej grupie pól tytuł.

W sekcji lokalizacji (lub przełącznika) zmień ustawienia tak, aby typ wpisu był równy „Projekt” zamiast wpisu. Zasadniczo mówi to wtyczce, aby wyświetlała tylko tę niestandardową grupę pól w typie postu projektu wbudowanym w Divi (możesz zostawić to jako post, jeśli chcesz. Twój wybór).

Następnie przewiń w dół do sekcji ustawień i zaktualizuj następujące elementy:

Pozycja: Wysoka (po treści)

To ustawienie pozycji określa lokalizację Twojej niestandardowej grupy pól w edytorze zaplecza Twojego posta lub strony.

Dodaj pola niestandardowe do grupy pól

Teraz, gdy Twoja grupa została utworzona i skonfigurowana, nadszedł czas, aby rozpocząć dodawanie niestandardowych pól do grupy.

Pole niestandardowe głośnika

W przypadku pierwszego pola niestandardowego dodajmy miejsce, w którym użytkownicy mogą wpisać mówcę na kazanie. Aby dodać nowe pole, kliknij przycisk „Dodaj pole” i wprowadź następujące informacje:

Etykieta pola: Głośnik
Nazwa pola: głośnik
Typ pola: Wybierz
Wybory (wpisz każdy w nowej linii): starszy pastor, zastępca pastora, pastor młodzieżowy, mówca gościnny

Pole niestandardowe tytułu kazania

Następnie dodaj niestandardowe pole na tytuł kazania.

Etykieta pola: Tytuł kazania
Nazwa pola: tytuł_kazania
Typ pola: Tekst
Tekst zastępczy: Tytuł kazania

Niestandardowe pole daty kazania

Następnie dodaj niestandardowe pole na datę kazania. W tym przypadku ustawimy typ pola wyboru daty, dzięki czemu dodanie nowych dat będzie bardzo proste.

Etykieta pola: Data kazania
Nazwa pola: data_kazania
Typ pola: Selektor daty
Format wyświetlania: Fj, Y
Format zwrotu: Fj, Y
Początek tygodnia: poniedziałek

Pole niestandardowe opisujące kazanie

Następnie dodaj niestandardowe pole do opisu kazania. Umożliwi to użytkownikom aktualizowanie treści wpisu za pomocą edytora Wysiwyg bez konieczności otwierania wizualnego kreatora.

Etykieta pola: Opis kazania
Nazwa pola: kazanie_opis
Typ pola: Edytor Wysiwyg

Niestandardowe pole kazania Audio Embed

Następnie dodaj niestandardowe pole do osadzania dźwięku kazania przy użyciu typu pola oEmbed. Umożliwi nam to osadzenie dźwięku kazania, po prostu aktualizując adres URL dźwięku do umieszczenia na zapleczu.

Etykieta pola: Osadzenie dźwięku kazania
Nazwa pola: sermon_audio_embed
Typ pola: oEmbed

Pole niestandardowe URL kazania audio

Następnie dodaj niestandardowe pole dla adresu URL audio kazania, abyśmy mogli użyć adresu URL do wypełnienia łącza w module, aby utworzyć łącze do pobrania pliku.

Etykieta pola: URL kazania audio
Nazwa pola: kazanie_audio_url
Typ pola: Url

W porządku. Po dodaniu pól niestandardowych do naszej grupy pól nie zapomnij zapisać grupy pól. Teraz możemy zacząć tworzyć układ kazania dla naszej niestandardowej treści kazania, która będzie używana jako treść dynamiczna w całym poście.

Utwórz nowy projekt

Z pulpitu nawigacyjnego WordPress przejdź do Projekty > Dodaj nowy. Następnie wprowadź tytuł Projektu, który powinien być również tytułem kazania (ale to zależy od Ciebie). Następnie kliknij, aby użyć Divi Builder. Zobaczysz grupę niestandardowych pól wyświetlanych w górnej części kreatora divi.

Teraz wypełnij pola niestandardowe informacjami z kazania specyficznymi dla tego postu.

Prelegent: Starszy Pastor (wybierany z menu rozwijanego)
Tytuł kazania: Nowe stworzenie (lub cokolwiek chcesz)
Data Kazania: wybierz datę z selektora dat
Opis kazania: użyj edytora WYSIWYG, aby wprowadzić opis kazania
Sermon Audio Embed: wprowadź adres URL do pliku multimedialnego, który chcesz osadzić w odtwarzaczu multimedialnym
URL Kazania Audio: wprowadź adres URL do pliku multimedialnego (powinien to być plik zip, jeśli chcesz go pobrać natychmiast po kliknięciu)

Następnie dodaj wyróżniony obraz do swojego projektu. Będzie to służyć jako obraz używany do odtwarzacza audio układu kazania.

Dodawanie nowego gotowego układu do twojego projektu

Teraz kliknij, aby użyć programu Visual Builder.

(Uwaga: obecnie konstruktor zaplecza nie obsługuje zawartości dynamicznej, więc musimy wdrożyć konstruktor wizualny. Jeśli wolisz dostosować układ za pomocą większej funkcjonalności konstruktora zaplecza, po prostu wdróż konstruktor wizualny i kliknij tryb szkieletowy.)

Następnie kliknij opcję Wybierz gotowy układ. Z wyskakującego okna ładowania z biblioteki wybierz pakiet Church Layout Pack, a następnie kliknij, aby użyć układu Church Blog Page.

Po załadowaniu układu na stronę usuń drugą, czwartą i piątą sekcję z układu. Teraz Twój układ powinien mieć tylko trzy sekcje: górną sekcję nagłówka, sekcję „Najnowsze kazania” i sekcję dolną stopki.

Następnie usuń moduł bloga w drugiej sekcji.

Zaktualizuj moduł tekstowy „Najnowsze kazania”, aby zawierał następującą zawartość:

<h3>Description</h3>

Następnie zduplikuj ten moduł tekstowy i zaktualizuj zawartość, aby powiedzieć „Słuchaj teraz”.

Dodawanie dynamicznej zawartości układu kazania

Opis kazania

Teraz jesteśmy gotowi do rozpoczęcia tworzenia dynamicznej treści dźwiękowej kazań dla naszej sekcji. Na początek dodamy opis kazania tuż pod modułem tekstowym o tytule „Opis”. Aby to zrobić, dodaj nowy moduł tekstowy. Najedź kursorem na pole wprowadzania treści i kliknij ikonę treści dynamicznej.

Następnie wybierz z listy rozwijanej pole niestandardowe Opis kazania.

Zapisz ustawienia.

Teraz opis Twojego kazania będzie wyświetlany jako treść dynamiczna. Oznacza to, że cokolwiek dodasz do pola wprowadzania opisu kazania na ekranie edytora zaplecza, zostanie dynamicznie zaktualizowane na stronie projektu.

Moduł audio i osadzanie audio

Pod modułem tekstowym o tytule „Słuchaj teraz” dodaj nowy moduł audio. Następnie zaktualizuj zawartość tekstową za pomocą następującej zawartości dynamicznej:

Tytuł: Tytuł kazania (pole niestandardowe)
Nazwa wykonawcy: mówca (pole niestandardowe)
Nazwa albumu: Data kazania (pole niestandardowe)

Etykiety tak naprawdę nie mają znaczenia, ponieważ zajmujemy się głównie rozmieszczeniem zawartości dynamicznej w module audio. Tytuł kazania, mówca i data kazania są ładnie wyświetlane w module audio bez większego nakładu pracy.

W przypadku obrazu okładki modułu audio dodaj zawartość dynamiczną, klikając ikonę zawartości dynamicznej po najechaniu kursorem na obszar podglądu obrazu i wybierz opcję Polecany obraz.

Teraz to, co ustawiłeś jako swój polecany obraz na zapleczu, automatycznie wypełni obraz okładki dla dźwięku kazania.

Aby lepiej dopasować projekt układu, zapisz ustawienia i skopiuj tło dolnej sekcji, klikając prawym przyciskiem myszy tekst kategorii Tło w ustawieniach sekcji i wybierając „Kopiuj tło”.

Teraz wklej tło do ustawień tła modułu audio, otwierając ustawienia modułu audio, klikając prawym przyciskiem myszy tekst kategorii tła i klikając opcję "Wklej tło".

Następnie przejdź do ustawień projektu i zaktualizuj następujące elementy:

Orientacja tekstu: w lewo
Margines niestandardowy: 0px dół

Teraz wszystko, co nam pozostało, aby ukończyć odtwarzacz audio kazań, to faktyczne osadzenie odtwarzacza audio. Obecnie pole wejściowe audio wbudowane w moduł audio nie obsługuje zawartości dynamicznej (jestem pewien, że tak będzie w przyszłości), więc zrobimy małe obejście. Stworzymy nowy moduł tekstowy i dodamy osadzony plik audio za pomocą dynamicznej zawartości. A ze względu na sposób, w jaki WordPress rozpoznaje krótki kod wygenerowany przez pole niestandardowe, wyświetli domyślny odtwarzacz audio.

Aby to zrobić, dodaj moduł tekstowy pod modułem audio, a następnie dodaj niestandardowe pole „Sermon Audio Embed” jako zawartość dynamiczną. Upewnij się, że włączyłeś surowy HTML, aby krótki kod działał.

Teraz możemy umieścić nasz odtwarzacz audio w module audio z pewnym niestandardowym marginesem. Przejdź do zakładki projekt i zaktualizuj następujące elementy:

Margines niestandardowy (komputer): -40px góra, 280px po lewej, 60px po prawej
Margines niestandardowy (tablet): 0px po lewej, 0px po prawej

Link do pobrania

Czasami pomocne jest pobranie pliku audio. Aby to ułatwić, możesz dodać link do pliku audio do swojego posta. Aby to zrobić, użyjemy treści dynamicznych, aby wypełnić moduł notki tytułem kazania i adresem URL audio.

Dodaj moduł notki pod modułem audio i zaktualizuj zawartość w następujący sposób:

Tytuł: Tytuł kazania (pole niestandardowe)
Ikona: zobacz zrzut ekranu
URL linku tytułu: URL kazania audio (pole niestandardowe)

Aby nadać opisowi styl bardziej przypominający link, który można kliknąć, zaktualizuj następujące elementy:

Kolor ikony: rgba (33,50,94,086)
Umieszczenie obrazu/ikony: po lewej
Styl czcionki tytułu: U
Kolor podkreślenia tytułu: rgba (33,50,94,086)
Kolor tekstu tytułu: rgba (33,50,94,0.86)
Wysokość wiersza tytułu: 2em
Szerokość treści: 100%

Aby link był jeszcze bardziej rozpoznawalny jako pobrany, możesz edytować dynamiczną zawartość tytułu kazania, która zajmuje tytuł notki, z dodatkowym tekstem w polu wprowadzania tekstu „(pobierz)”.

Dodawanie tytułu kazania i meta do nagłówka

W ostatnim kroku upewnijmy się, że nasza sekcja nagłówka projektu/postu używa dynamicznej zawartości w tytule postu wraz z imieniem prelegenta i datą kazania. Aby to zrobić, otwórz ustawienia modułu nagłówka o pełnej szerokości i zaktualizuj następujące elementy:

Tytuł: Tytuł kazania (pole niestandardowe)
Tekst podtytułu: Mówca (pole niestandardowe)
(Uwaga: w przypadku zawartości dynamicznej głośnika wprowadź „by: ” we wcześniej wprowadzonych danych)
Przycisk #1 Tekst linku: usuń
Przycisk #2 Link Tekst: usuń
Treść: Data Kazania (pole niestandardowe)

Teraz przejdź do zakładki projektowania i wyjmij używane niestandardowe wypełnienie.

Oto ostateczny wynik.

Teraz wszystko, co musisz zrobić, to zapisać układ w swojej bibliotece Divi, aby można go było wykorzystać w przyszłych postach z kazaniami. A ponieważ masz swoją grupę pól niestandardowych gotową do użycia we wszystkich projektach, możesz po prostu zaktualizować informacje o polach niestandardowych w zapleczu bez konieczności otwierania programu Visual Builder.

Ponadto, z kazaniami zapisanymi jako projekty, możesz łatwo utworzyć portfolio, które można filtrować, aby wyświetlić swoje kazania!

Końcowe przemyślenia

Mam nadzieję, że ten samouczek pomoże rzucić więcej światła na dynamiczną zawartość i jak można go używać z wtyczką Advanced Custom Fields do tworzenia potężnego układu kazań. Konfiguracja wszystkiego może trochę potrwać, ale z pewnością warto. Oczywiście ten sam proces można wykorzystać do tworzenia wszelkiego rodzaju treści dynamicznych dla różnych typów postów. Daj mi znać, jeśli masz jakieś pytania w komentarzach poniżej. Czekam na kontakt z Państwem.

Pozdrawiam!