Tworzenie wtyczki dla WordPressa, część 2. Tworzenie dedykowanego typu wpisu i pól Carbon Fields dla strony samochodu
The article explains how to create a custom post type for cars in WordPress and add fields using Carbon Fields. It covers setting up taxonomies and organizing custom fields for details like VIN, engine type, and price.
W tym artykule przyjrzymy się temu, jak utworzyć dedykowany typ wpisu, dedykowaną taksonomię oraz pola dla strony samochodu.
Tworzenie dedykowanego typu wpisu
Otwórz plik AddCPT.php.
Pierwszą rzeczą, którą musimy dodać do funkcji init, jest:
add_action( 'init', [ $this, 'register_post_auto' ] );
Pierwszy parametr określa, kiedy nasza funkcja zostanie wywołana. Następnie musimy przekazać tablicę parametrów. Pierwszym z nich jest $this, czyli instancja naszej klasy wskazująca, gdzie należy szukać naszej funkcji. Następnie podajemy nazwę funkcji.
Teraz musimy utworzyć funkcję, która zarejestruje nasz nowy typ wpisu Auto. W tym celu należy wywołać funkcję register_post_type i przekazać do niej następujące parametry.
Oto kod naszej funkcji:
/**
* Register CPT Auto.
*
* @return void
*/
public function register_post_auto(): void {
register_post_type(
'cars',
[
'label' => null,
'labels' => [
'name' => __( 'Cars', 'ease-car-listing' ),
'singular_name' => __( 'Car', 'ease-car-listing' ),
'add_new' => __( 'Add car', 'ease-car-listing' ),
'add_new_item' => __( 'Adding a car', 'ease-car-listing' ),
'edit_item' => __( 'Car editing', 'ease-car-listing' ),
'new_item' => __( 'New car', 'ease-car-listing' ),
'view_item' => __( 'View car', 'ease-car-listing' ),
'search_items' => __( 'Search car', 'ease-car-listing' ),
'not_found' => __( 'Not found', 'ease-car-listing' ),
'not_found_in_trash' => __( 'Not found in cart', 'ease-car-listing' ),
'menu_name' => __( 'Cars', 'ease-car-listing' ),
],
'description' => '',
'public' => true,
'show_in_rest' => null,
'rest_base' => null,
'menu_position' => 30,
'menu_icon' => 'dashicons-car',
'hierarchical' => false,
'supports' => [ 'title', 'editor', 'thumbnail', 'excerpt', 'custom-fields', 'revisions' ],
'taxonomies' => [ 'cars' ],
'has_archive' => true,
'rewrite' => true,
'query_var' => true,
]
);
}
Na jakie parametry warto zwrócić uwagę?
menu_position — pozwala zmienić pozycję w menu WordPressa.
menu_icon — wyświetla ikonę.
supports — określa funkcje, które chcemy obsługiwać: [ ‘title’, ‘editor’, ‘thumbnail’, ‘excerpt’, ‘custom-fields’, ‘revisions’ ].
Tworzenie dedykowanej taksonomii
Dodajemy kolejną akcję do funkcji init:
add_action( 'init', [ $this, 'register_tax_mark' ] );
Wszystko wygląda tak samo jak w przypadku tworzenia nowego typu wpisu.
Tworzymy funkcję, a następnie wywołujemy w niej funkcję register_taxonomy, przekazując do niej odpowiednie parametry.
/**
* Register taxonomy mark & models.
*
* @return void
*/
public function register_tax_mark(): void {
register_taxonomy(
'mark',
[ 'cars' ],
[
'label' => '',
'labels' => [
'name' => __( 'Marks & Models', 'ease-car-listing' ),
'singular_name' => __( 'Marks & Models', 'ease-car-listing' ),
'search_items' => __( 'Search Mark', 'ease-car-listing' ),
'all_items' => __( 'All Marks & Models', 'ease-car-listing' ),
'view_item ' => __( 'View Marks', 'ease-car-listing' ),
'parent_item' => __( 'Marks', 'ease-car-listing' ),
'parent_item_colon' => __( 'Models', 'ease-car-listing' ),
'edit_item' => __( 'Edit Marks & Models', 'ease-car-listing' ),
'update_item' => __( 'Update Marks & Models', 'ease-car-listing' ),
'add_new_item' => __( 'Add New', 'ease-car-listing' ),
'new_item_name' => __( 'New Marks & Models', 'ease-car-listing' ),
'menu_name' => __( 'Marks & Models', 'ease-car-listing' ),
'back_to_items' => __( '← Back to Marks & Models', 'ease-car-listing' ),
],
'description' => __( 'The main category is the brand of the car, the child category will be the model.', 'ease-car-listing' ),
'public' => true,
'hierarchical' => true,
'rewrite' => true,
'capabilities' => [],
'show_admin_column' => true,
] );
}
Musimy również dodać kolejną taksonomię dotyczącą pojemności silnika. W tym celu rejestruję osobną funkcję, dzięki czemu w przyszłości łatwiej będzie wyłączyć lub edytować poszczególne taksonomie. Wszystko wykonujemy analogicznie jak wcześniej.
/**
* Register taxonomy engine.
*
* @return void
*/
public function register_tax_engine(): void {
register_taxonomy(
'engine',
[ 'cars' ],
[
'label' => '',
'labels' => [
'name' => __( 'Engine', 'ease-car-listing' ),
'singular_name' => __( 'Engine', 'ease-car-listing' ),
'search_items' => __( 'Search Engine', 'ease-car-listing' ),
'all_items' => __( 'All Engine', 'ease-car-listing' ),
'view_item ' => __( 'View Engine', 'ease-car-listing' ),
'parent_item' => __( 'Parens Engine', 'ease-car-listing' ),
'parent_item_colon' => __( 'Parent', 'ease-car-listing' ),
'edit_item' => __( 'Edit Engine', 'ease-car-listing' ),
'update_item' => __( 'Update Engine', 'ease-car-listing' ),
'add_new_item' => __( 'Add New', 'ease-car-listing' ),
'new_item_name' => __( 'New Engine', 'ease-car-listing' ),
'menu_name' => __( 'Engine', 'ease-car-listing' ),
'back_to_items' => __( '← Back to Engine', 'ease-car-listing' ),
],
'description' => '',
'public' => true,
'hierarchical' => true,
'rewrite' => true,
'capabilities' => [],
'show_admin_column' => true,
] );
}
Pełny kod naszego pliku znajdziesz tutaj: https://gitlab.com/AlsconWeb/ease-car-listing/-/blob/25ed13774bf667a8cb553a947be13cda08a403c7/src/php/CPT/AddCPT.php
Tworzenie pól dla naszego typu wpisu samochodu
Przechodzimy do pliku CarboneFields.php.
Przede wszystkim musimy zainicjalizować główną klasę Carbon Fields, aby wczytała wszystkie swoje klasy.
Dodaj akcję do funkcji init:
add_action( 'after_setup_theme', [ $this, 'carbon_fields_init' ] );
Musimy uruchomić tę funkcję na hooku after_setup_theme, a jedyne, co musimy zrobić w tej funkcji, to wywołać statyczną funkcję Boot.
Carbon_Fields::boot();
code of our function
/**
* Carbone field init.
*
* @return void
*/
public function carbon_fields_init(): void {
Carbon_Fields::boot();
}
Teraz możemy dodać same pola. W tym celu potrzebujemy akcji z Carbon Fields:
carbon_fields_register_fields
add_action( 'carbon_fields_register_fields', [ $this, 'add_carbone_fields_to_cars' ] );
Tworzymy tę funkcję i zaczynamy dodawać pola.
Aby utworzyć pola, przede wszystkim musimy utworzyć kontener, korzystając z poniższego kodu:
Container::make( 'post_meta', __( 'Vehicle parameters', 'ease-car-listing' ) )
Pierwszy parametr określa typ kontenera, a drugi — jego nazwę.
Następnie musimy określić, gdzie mają być wyświetlane te pola. W tym celu używamy funkcji where, której pierwszy parametr może przyjmować wartości: post_format, post_id, post_level, post_parent_id, post_ancestor_id, post_template, post_term, post_type.
Drugi parametr określa sposób porównywania wartości i może przyjmować następujące wartości: ‘=’, ‘!=’, ‘>’, ‘>=’, ‘<‘, ‘<=’, ‘IN’, ‘NOT IN’, ‘CUSTOM’. Więcej informacji na temat tych opcji znajdziesz w dokumentacji Carbon Fields.
W naszym przypadku użyjemy post_type i podamy nazwę naszego typu wpisu.
->where( 'post_type', '=', 'cars' )
Będę używać zakładek do rozdzielenia poszczególnych typów pól, dlatego skorzystam z funkcji add_tab, która przyjmuje 2 parametry. Pierwszy z nich to nazwa zakładki wyświetlana w panelu administracyjnym, a drugi to tablica pól Carbon Fields.
W ten sposób otrzymaliśmy kompletny kod tej funkcji.
Jeśli masz jakiekolwiek pytania, możesz zawsze zadać je w komentarzach pod filmem.
/**
* Add Carbon fields to CPT cars
*
* @return void
*/
public function add_carbone_fields_to_cars(): void {
Container::make( 'post_meta', __( 'Vehicle parameters', 'ease-car-listing' ) )
->where( 'post_type', '=', 'cars' )
->add_tab(
__( 'General', 'ease-car-listing' ),
[
Field::make( 'text', 'ecl_vin', __( 'Vin number', 'ease-car-listing' ) )->set_width( 50 ),
Field::make( 'text', 'ecl_stock_number', __( 'Stock number', 'ease-car-listing' ) )
->set_width( 50 ),
Field::make( 'text', 'ecl_car_mileage', __( 'Сar mileage', 'ease-car-listing' ) )
->set_width( 50 ),
Field::make( 'select', 'ecl_body_type', __( 'Body type', 'ease-car-listing' ) )
->add_options(
[
'compact' => __( 'Compact', 'ease-car-listing' ),
'sedan' => __( 'Sedan', 'ease-car-listing' ),
'coupe' => __( 'Coupe', 'ease-car-listing' ),
'hatchback' => __( 'Hatchback', 'ease-car-listing' ),
'kombi' => __( 'Kombi', 'ease-car-listing' ),
'limousine' => __( 'Limousine', 'ease-car-listing' ),
'microvan' => __( 'Microvan', 'ease-car-listing' ),
'minivan' => __( 'Minivan', 'ease-car-listing' ),
'pickup' => __( 'Pickup', 'ease-car-listing' ),
'roadster' => __( 'Roadster', 'ease-car-listing' ),
'suv' => __( 'SUV', 'ease-car-listing' ),
'wagon' => __( 'Wagon', 'ease-car-listing' ),
'pickup_track' => __( 'Pickup track', 'ease-car-listing' ),
'van' => __( 'Van', 'ease-car-listing' ),
]
)->set_width( 50 ),
Field::make( 'select', 'ecl_fuel_type', __( 'Fuel type', 'ease-car-listing' ) )
->add_options(
[
'gas' => __( 'Gas', 'ease-car-listing' ),
'diesel' => __( 'Diesel', 'ease-car-listing' ),
'electric' => __( 'Electric', 'ease-car-listing' ),
]
)->set_width( 50 ),
Field::make( 'text', 'ecl_car_year', __( 'Vehicle year', 'ease-car-listing' ) )
->set_width( 50 ),
Field::make( 'text', 'ecl_horsepower', __( 'Vehicle Horsepower', 'ease-car-listing' ) )
->set_width( 50 )
->set_attribute( 'type', 'number' ),
Field::make( 'text', 'ecl_body_color', __( 'Body color', 'ease-car-listing' ) )
->set_width( 50 ),
Field::make( 'text', 'ecl_interior_color', __( 'Interior color', 'ease-car-listing' ) )
->set_width( 50 ),
Field::make( 'text', 'ecl_number_of_airbags', __( 'Number of airbags', 'ease-car-listing' ) )
->set_width( 50 )
->set_attribute( 'type', 'number' ),
Field::make( 'text', 'ecl_number_of_seats', __( 'Number of seats', 'ease-car-listing' ) )
->set_width( 50 )
->set_attribute( 'type', 'number' ),
Field::make( 'text', 'ecl_number_of_doors', __( 'Number of doors', 'ease-car-listing' ) )
->set_width( 50 )
->set_attribute( 'type', 'number' ),
]
)
->add_tab(
__( 'Additional Information', 'ease-car-listing' ),
[
Field::make( 'rich_text', 'ecl_additional_info', __( 'Additional Information', 'ease-car-listing' ) ),
]
)
->add_tab(
__( 'Gallery', 'ease-car-listing' ),
[
Field::make( 'media_gallery', 'ecl_gallery', __( 'Gallery', 'ease-car-listing' ) )
->set_type(
[
'image',
'video',
]
),
]
)
->add_tab(
__( 'Price', 'ease-car-listing' ),
[
Field::make( 'text', 'ecl_price', __( 'Price', 'ease-car-listing' ) )->set_width( 30 ),
Field::make( 'text', 'ecl_sales_price', __( 'Sales price', 'ease-car-listing' ) )
->set_width( 30 ),
Field::make( 'text', 'ecl_by_month', __( 'Price per month', 'ease-car-listing' ) )
->set_width( 30 ),
]
);
}
Pełny kod całego pliku możesz zawsze znaleźć tutaj: https://gitlab.com/AlsconWeb/ease-car-listing/-/commit/ee77a1cb22d2135f5bbeccdf26f9d37fb934b7c0#9ef8bcfcbdaab0d19e056f80ce0cc3d3c362c61f
Gotowy, aby wynieść swój projekt
na wyższy poziom?
Wprowadźmy Twoją wizję w życie dzięki profesjonalnemu tworzeniu stron i dedykowanym rozwiązaniom.
Skontaktuj się z nami już teraz i rozpocznijmy pracę nad przekształceniem Twoich pomysłów w rzeczywistość!