Tworzenie wtyczki dla WordPressa, część 3. Tworzenie szablonu pojedynczego wpisu i wyświetlanie pól Carbon Fields

W tym artykule dodamy wyświetlanie naszego samochodu oraz wszystkich pól, które utworzyliśmy w poprzednim artykule.

Dołączanie skryptów

Zacznijmy od utworzenia folderu assets w katalogu głównym naszego projektu i skopiowania do niego wszystkich plików, które otrzymaliśmy wraz z projektem graficznym.

Teraz musimy dodać hook dołączający skrypty i style do pliku Main.php w funkcji init.

add_action( 'wp_enqueue_scripts', [ $this, 'add_scripts' ] );

Utwórz tę funkcję

public function add_scripts(): void {

   wp_enqueue_script( 'ecl_build', ECL_URL . '/assets/js/build.js', [ 'jquery' ], ECL_VERSION, true );

   wp_enqueue_script( 'html5shiv', '//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', [], '3.7.0', false );

   wp_enqueue_script( 'respond', '//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js', [], '1.4.2', false );



   wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );

   wp_script_add_data( 'respond', 'conditional', 'lt IE 9' );



   wp_enqueue_style( 'ecl_main', ECL_URL . '/assets/css/main.css', '', ECL_VERSION );



   $global_style = ':root{ --color-one:#f26b36; --color-two:#be542a;}';

   wp_add_inline_style( 'ecl_main', $global_style );

}

• wp_enqueue_script — dołącza skrypt
• wp_script_add_data — dodaje warunki dotyczące dołączania skryptu
• wp_enqueue_style — dołącza arkusz stylów
• wp_add_inline_style — dodaje style inline w nagłówku strony

Utwórz filtr nadpisujący szablon wyświetlania

Przejdź do pliku AddCPT.php i dodaj filtr do funkcji init.

add_filter( 'template_include', [ $this, 'add_single_car_page' ] );

Utwórz funkcję i dodaj warunki umożliwiające nadpisanie szablonu.

/**
 * Add single car template.
 *
 * @param string $template
 *
 * @return string
 */
public function add_single_car_page( string $template ): string {

   if ( is_singular( 'cars' ) && ! locate_template( [ 'single-cars.php' ] ) ) {
      return ECL_PATH . '/template/single-cars.php';
   }

   return $template;
}

Sprawdzany warunek dotyczy strony samochodu oraz tego, czy w używanym motywie znajduje się szablon single-cars.php. Jeśli szablon nie istnieje, zostanie on wczytany z folderu template znajdującego się w katalogu głównym naszej wtyczki.

is_singular — sprawdza, czy wyświetlana jest strona pojedynczego wpisu.

locate_template — znajduje najlepszą ścieżkę do wskazanego pliku szablonu. Podczas wyszukiwania uwzględniany jest również motyw potomny.

Podłączenie projektu graficznego

Tworzymy folder template w katalogu głównym naszej wtyczki, a następnie umieszczamy w nim plik single-cars.php.

Kopiujemy do niego nasz projekt graficzny. Możesz znaleźć go pod tym adresem: https://drive.google.com/file/d/1dF94sQjEREAOG3jLGMr3OqX4wSCwMc6n/view?usp=share_link

Pełny kod pliku znajdziesz tutaj: https://gitlab.com/AlsconWeb/ease-car-listing/-/blob/16d71d9a5677e4944619b3069aac5f8ffde98320/template/single-cars.php

carbon_get_the_post_meta(“Nazwa pola, które chcemy pobrać”) — funkcja używana w standardowej pętli.

Jeśli chcemy pobrać to pole poza pętlą, musimy użyć:

carbon_get_post_meta(“ID wpisu, z którym powiązane jest pole”, “Nazwa pola, które chcemy pobrać”)

numfmt_create — tworzy formatter liczb.