Advanced Custom Fields – własne typy pól WordPress

W tym poradniku dowiesz się jak dodać własne typy pól dla Custom Post Type w WordPress za pomocą pluginu Advanced Custom Fields. Dzięki własnym typom pól możemy dodać do własnego typu post’a właściwości, obrazy i każdą inną treść jaka ustalałaby dodatkowe funkcjonalności naszego wpisu. W tym poradniku dowiesz się jak dodać takie pola do danego typu post’ów.

Jak dodać własne typy pól dla Custom Post Type za pomocą pluginu Advanced Custom Fields? – WordPress

Czego będziemy potrzebować aby dodać własne typy pól w WordPress (plugin Advanced Custom Fields)?

Plugin Advanced Custom Fields – plugin pozwalający dodawać własne typy pól,
Wiedzy z poprzedniego poradnika – Tworzenie template dla custom post – jeśli nie wiesz jak stworzyć Custom Post Type za pomocą CPT UI odsyłam Cię do tego poradnika,
Podstawowej wiedzy z języka PHP – nie będą tu używane żadne skomplikowane funkcje natomiast należałoby zapoznać się z podstawową składnią języka, aby móc zrozumieć kod, który będzie w tym poradniku.

Let’s do it!

Po zainstalowaniu pluginu ACF (Advanced Custom Fields) przechodzimy do stworzenia nowego typu post’a – Projekt. Będziemy chcieli stworzyć listę projektów w formie portfolio, które będą zawierały kilka podstawowych pól:

Tytuł,
Krótki opis projektu,
Opis projektu,
Rok stworzenia projektu,
Co wykonaliśmy w projekcie,
Obraz wyróżniający,
Obrazy projektu

Przechodzimy do pluginu CPT UI i dodajemy nowy typ post’a (jeśli nie wiesz jak to zrobić ponownie odsyłam do poprzedniego poradnika):

Slug -> projekt,
Plural -> Projekty,
Singular -> Projekt

Skorzystajmy z wbudowanych opcji CPT UI aby stworzyć kilka podstawowych pól naszego custom post’a.

Po stworzeniu Custom Post Type -> Projekt i dodaniu podstawowych pól przechodzimy do dodania pozostalych pól za pomocą Custom Fields. Przejdź do zakładki w panelu WordPressa: Własne pola -> Dodaj nową. Następnie należy nadać tytuł grupie pól. Tutaj proponuję aby nazewnictwo się nie mieszało się w dalszej części tworzenia projektu nazwać od liczby pojedynczej naszego Custom Post’a do którego chcemy dodać dane pola i dodać nazwę Inputs aby było wiadomo, że chodzi o własne typy pól. W naszym przypadku będzie to: Projekt Inputs.

Kliknij przycisk dodaj pole i wybierz potrzebny typ pola oraz nadaj odpowiednią nazwę.

Etykieta pola -> Nazwa wyświetlająca pole, mogą występować polskie znaki i spacje – będzie widoczna tylko w panelu WordPress’a. Nadaj taką etykietę, abyś wiedział za co odpowiada dane pole, np. ”Co wykonaliśmy w projekcie”.

Nazwa pola -> Podobnie jak slug w przypadku dodawania typu post’a, nie może zawierać polskich znaków oraz będzie wykorzystywana w kodzie PHP. Nadaj łatwą nazwę pola, np. „wykonanie”.

Typ pola -> typy pól są różne, są one opisane w dokumentacji pluginu. W naszym przypadku będzie to np. Tekst

Reszta pól -> są one opcjonalne i możemy za ich pomocą dostosować wprowadzanie pola do naszego projektu, natomiast w naszym przypadku nie będzie to potrzebne. Więcej informacji znajdziesz w dokumentacji.

Pamiętaj aby po stworzeniu wszystkich typów pól, dodać Warunek dla danej grupy pól:

Typ wpisu -> jest równe -> Projekt (Custom Post Type, u nas typ: Projekt).

Gotowe!

Dodaliśmy własne typy pól dla własnego typu post’a. Teraz możemy przejść do dodania kilku przykładowych projektów.

Dodaliśmy kilka przykładowych projektów podglądowych. Teraz przechodzimy do strony backend’owej i spróbujemy stworzyć widok dla pojedynczego projektu, wyświetlający wszystkie pola.

Pracujemy na pustym motywie wp_tutorial, stworzonym na potrzeby tutoriala. Jeśli nie wiesz jak stworzyć własny motyw odsyłam do poradnika. Kopiujemy plik single.php i dodajemy do niego nazwę naszego custom post type slug, tworząc plik single-projekt.php.

Przystępujemy do edycji naszego kodu:

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package wp_tutorial
 */
get_header();
?>
  <div id="primary" class="content-area">
    <main id="main" class="site-main">
    <?php
    while ( have_posts() ) : the_post();
    ?>
      <h2 class="tytul-projektu"><?php the_title();?></h2>
      <h5 class="krotki-opis-projektu"><?php the_excerpt();?></h5>
      <span class="wykonanie"><?php the_field('wykonanie') ?></span>
      <span class="rok"><?php the_field('rok') ?></span>
      <div class="obraz-glowny"><?php the_post_thumbnail( 'full' ); ?></div>
      <div class="opis-projektu"><?php the_content(); ?></div>
      <div class="obrazy">
      <?php 
      $image1 = get_field('obraz_1');
      $image2 = get_field('obraz_2');
        if( $image1 ): ?>
        <?php
        
          $title = $image1['title'];
          $alt = $image1['alt'];
          $size = 'large';
          $thumb = $image1['sizes'][ $size ];
        ?>
          <a title="<?php echo esc_attr($title); ?>">
            <img  src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
          </a>
        <?php endif;
        if( $image2 ): ?>
        <?php
          $title = $image2['title'];
          $alt = $image2['alt'];
          $size = 'large';
          $thumb = $image2['sizes'][ $size ];
        ?>
          <a title="<?php echo esc_attr($title); ?>">
            <img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
          </a>
        <?php endif; ?>
      </div>
    <?php
    // End of the loop.
    endwhile;
    ?>
    </main><!-- #main -->
  </div><!-- #primary -->
<?php
get_footer();

<?php

/**

* The template for displaying all single posts

* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post

* @package wp_tutorial

get_header();

<?php

while ( have_posts() ) : the_post();

<?php

$image1 = get_field('obraz_1');

$image2 = get_field('obraz_2');

if( $image1 ): ?>

<?php

$title = $image1['title'];

$alt = $image1['alt'];

$size = 'large';

$thumb = $image1['sizes'][ $size ];

</a>

<?php endif;

if( $image2 ): ?>

<?php

$title = $image2['title'];

$alt = $image2['alt'];

$size = 'large';

$thumb = $image2['sizes'][ $size ];

</a>

<?php endif; ?>

</div>

<?php

// End of the loop.

endwhile;

</main>

</div>

<?php

get_footer();

W ten sposób wyświetliliśmy wszystkie pola custom post’a typu projekt. Główną metodą wyświetlania wartości pola jest metoda the_field(‘nazwa_pola’). Za jej pomocą wyświetliliśmy pola: wykonanie, rok.

<span class="wykonanie"><?php the_field('wykonanie') ?></span>
<span class="rok"><?php the_field('rok') ?></span>

1 2	<span class="wykonanie"><?php the_field('wykonanie') ?></span> <span class="rok"><?php the_field('rok') ?></span>

Użyliśmy także metody get_field(’nazwa_pola’) w celu pobrania obrazów. Obrazy pobierane za pomocą custom field’s można pobrać za pomocą tablicy lub adresu url. Domyślnie jest zwracana tablica, na której później operujemy w celu pobrania tytułu obrazu oraz tekstu alternatywnego, a także ustawienia odpowiedniego rozmiaru zdjęcia.

$image1 = get_field('obraz_1');
$image2 = get_field('obraz_2');

1 2	$image1 = get_field('obraz_1'); $image2 = get_field('obraz_2');

W wartości $title przechowujemy tytuł obrazu,
$alt przechowuje tekst alternatywny,
$size określa rozmiar obrazu,
$thumb odpowiada za pobranie adresu obrazu w odpowiednim rozmiarze.

$title = $image1['title'];
$alt = $image1['alt'];
$size = 'large';
$thumb = $image1['sizes'][ $size ];

$title = $image1['title'];

$alt = $image1['alt'];

$size = 'large';

$thumb = $image1['sizes'][ $size ];

Metody esc_attr() oraz esc_url() pozwalają na odpowiednie wyświetlenie atrybutów oraz adresu url.

<a title="<?php echo esc_attr($title); ?>">
<img  src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
</a>

</a>

Otrzymaliśmy widok, w którym znajdują się wszystkie dodane pola. W ten sposób możemy wyświetlić dowolnie dodaną zawartość za pomocą pluginów CPT UI oraz ACF.

Podsumowanie

Dodawanie custom post type z własnymi typami pól jest zaawansowanym zastosowaniem WordPress dzięki, któremu możemy dodawać wiele modułów, widoków oraz funkcjonalności, które nie występują w podstawowej wersji WordPress’a. Zastosowanie z naszego przykładu jest dosyć prostym rozwiązaniem, natomiast trzeba znać podstawową składnię PHP oraz HTML. Dodatkowo pojawiają się wbudowane funkcje WordPress oraz ACF. Największą trudnością w danym przykładzie jest pobieranie obrazów oraz odpowiednie wyświetlenie. Gdy, poznamy funkcję z powyższego przykładu bez problemu będziemy mogli wyświetlać własne typy pól w widokach.