• Home
  • Inne
  • Dodajemy niestandardowe elementy wyświetlane przy postach

Dodajemy niestandardowe elementy wyświetlane przy postach

Bardzo możliwe, że pomyślałeś kiedyś o tym, by rozbudować sposób wyświetlania postów o elementy, które wyświetlać się będą jedynie przy wybranych wpisach. Zazwyczaj użytkownikom z pomocą przychodzą wtedy wtyczki. Jedna do dodatkowych zdjęć, druga do tekstów, a trzecia do wyświetlenia mapy z Google Maps.

Tak z kilku najpotrzebniejszych liczba używanych pluginów rośnie do przynajmniej kilkunastu. Dziś pokażemy Wam jak w prosty sposób z jedynie elementarną wiedzą z zakresu języka HTML oraz PHP rozbudować sposób wyświetlania wpisów na Waszych stronach.

Do tego celu wykorzystamy wtyczkę Advanced Custom Fields, która pozwoli nam w łatwy sposób dodać dodatkowe elementy (takie jak tekst, zdjęcie, plik, czy też mapę Google Maps) do szablonu. Po zainstalowaniu wtyczki oraz jej aktywacji tworzymy nową grupę pól. W tym przykładzie postanowiłem wyświetlać pod wybranymi postami niestandardowe obrazki. W tym celu dodane nowe pole będzie posiadało rodzaj „obrazek”. Następnie po kolei wypełniam pola konfiguracyjne:

  • etykieta pola (etykieta ta będzie widoczna w panelu administracyjnym),
  • nazwa pola (tą nazwą posługiwać się będziemy w kodzie szablonu),
  • instrukcje pola (tutaj możemy pozostawić instrukcję wykorzystania pola dla innych autorów na stronie),
  • wymagane (jeśli zaznaczymy TAK, będziemy musieli wprowadzić obrazek przy publikacji postu),
  • wartość zwrotna (tu możemy wybrać pomiędzy obiektem, adresem URL i ID – od tego wyboru zależy jak zwracany będzie przez WordPressa wstawiony obrazek),
  • rozmiar podglądu (tutaj deklarujemy jakiej wielkości obrazek będzie wyświetlany),
  • biblioteka (określamy, czy będziemy mogli wybrać obrazek z całej biblioteki wgranych do WordPressa plików, czy tylko te które załadowaliśmy do edytowanego postu),
  • warunek logiczny.

Dodawanie nowej grupy pól we wtyczce Advanced Custom Fields

Po wypełnieniu powyższych pól musimy wybrać warunek, po którego spełnieniu pojawiać się będzie w panelu użytkownika nasze nowe pole. W tym przypadku zostawiam ustawienia domyślne, czyli: Pokaż tę grupę pól, gdy: RODZAJ WPISU – JEST RÓWNE – POST. Poniżej znajdziemy również ustawienia wyświetlania grupy pól oraz ukrywania domyślnych elementów na stronie edycji postu. Tę część mogę pominąć. Po opublikowaniu, czyli de facto zapisaniu nowej grupy pól możemy przejść do edycji postu.

Rozbudowanie panelu edycji wpisu dzięki wtyczce Advanced Custom Fields

Widzimy, że moje nowe pole jest już widoczne w panelu administracyjnym. Zanim jednak będzie je można wykorzystać musimy wprowadzić do kodu źródłowego szablonu odpowiedni kod PHP. Aby tego dokonać szukamy na serwerze FTP w katalogu wykorzystywanego motywu [miejsce instalacji strony]/wp-content/themes/[nazwa motywu] pliku odpowiadającego za wygląd postu. W moim przypadku, a więc i motywu Twenty Seventeen, był to plik content.php.

Struktura plików w systemie WordPress

Teraz musimy odnaleźć miejsce, w którym chcemy aby wyświetlał się obrazek. Ja zamierzam umieścić go na końcu treści wpisu, czyli po linii nr 67.

Kod źródłowy widoku pojedynczego postu w WordPress

W tym miejscu tworzymy zmienną pod postacią adresu URL oraz wyświetlamy obrazek, jeżeli tylko został on wprowadzony do postu. Brzmi groźnie? Niepotrzebnie. Odpowiada za to taki prosty kod:

<?php
$linkobrazka = get_field('wyświetlamy_banner'); // zamiast WYŚWIETLAMY BANNER wpisujemy NAZWĘ POLA, którą wpisaliśmy przy tworzeniu pola
if (!empty($linkobrazka)) {
echo '<img src="'.$linkobrazka.'">';
}
?>

Kod źródłowy widoku pojedynczego postu w WordPress z dodatkowym kodem dla Advanced Custom Fields

Teraz możemy zapisać plik, wrócić do edycji postu i dodać nowe zdjęcie, a następnie zaktualizować lub opublikować wpis. Poniżej jego treści pojawi się u Was, tak samo jak u mnie, wskazany obrazek.

Udane wdrożenie elementu dzięki wtyczce Advanced Custom Fields

Do obrazków możemy dodawać na przykład linki. Aby tego dokonać wróćmy do panelu edycji grupy pól i dodajmy pole tekstowe. Następnie odpowiednio modyfikujemy dodany wcześniej kod PHP:

<?php
$linkobrazka = get_field('wyświetlamy_banner'); // zamiast WYŚWIETLAMY BANNER wpisujemy NAZWĘ POLA, którą wpisaliśmy przy tworzeniu pola
$linkdostrony = get_field('link'); // zamiast LINK wpisujemy NAZWĘ POLA, którą wpisaliśmy przy tworzeniu pola
if (!empty($linkobrazka)) {
echo '<a href="'.$linkdostrony.'"><img src="'.$linkobrazka.'"></a>';
}
?>

Kod źródłowy widoku pojedynczego postu w WordPress z dodatkowym kodem dla Advanced Custom Fields

Warto zwrócić uwagę na bardzo dokładną dokumentację funkcji wtyczki Advanced Custom Fields, która opisuje wszystkie opcje i pokazuje przykłady zastosowania. Można ją podejrzeć tutaj. Istnieje praktycznie nieskończona liczba zastosowań wtyczki Advanced Custom Fields. Widywałem ją zarówno w małych stronach do stworzenia slidera, jak i na stronach korporacji do obsługi wyświetlania odpowiedniego cennika przy wpisach.

Tags:, , ,

Redaktor naczelny serwisu WPhaker.pl. Na co dzień administrator kilkudziesięciu witryn na systemie WordPress oraz audytor bezpieczeństwa stron. Po godzinach stara się sprawić, by jego mieszkanie stało się inteligentne.

  • Dominik Kawula

    Wszystko fajnie, tylko dlaczego uczysz ludzi modyfikować motyw zamiast użyć motywu potomnego. Przecież wszystkie zmiany zostaną nadpisane z pierwszą lepszą aktualizacją motywu i będzie płacz, że mi zniknął banner 🙁

Facebook - LH.pl

Page plugin Facebook nie działa poprawnie. Proszę włączyć śledzenie w ustawieniach przeglądarki.