Jak tworzyć niestandardowe metaboxy za pomocą CMB2

Kilka lat temu szukałem sposobu na zapytanie o posty i pokazanie lokalizacji, w której post został napisany na Google Map. W moich badaniach natknąłem się na post na blogu o tym, jak zbudować lokalizator sklepów przy użyciu CMB2 i Google Maps. Od tego czasu CMB2 stał się jedną z moich ulubionych wtyczek i jest używany w większości moich projektów.

Po pierwsze, czym jest CMB2?

Cóż, CMB jest akronimem od Custom Meta Boxes i zgodnie z opisem na stronie wtyczki, „CMB2 to metabox, niestandardowe pola i biblioteka formularzy dla WordPressa, która zaskoczy Cię”. Został opracowany przez Justina Sternberga z WebDevStudios i znajdował się w repozytorium wtyczek od nieco ponad dwóch lat. Jednak w lutym zeszłego roku dobrzy ludzie z repozytorium wtyczek WordPress zauważyli, że oszukali i zatwierdzili CMB2 jako wtyczkę, gdy nie powinni tego robić.

Widzisz, wtyczki zazwyczaj są w stanie zrobić coś od razu po wyjęciu z pudełka; mają pewną nieodłączną funkcjonalność. CMB2 jest w rzeczywistości frameworkiem. Jak wyjaśnił kiedyś Sternberg: „Jest to platforma programistyczna do łatwego tworzenia formularzy i pól do motywów i wtyczek”. W rzeczywistości po zainstalowaniu CMB2 nic się nie stanie. Nie otrzymasz strony administratora i nie ma interfejsu administratora. Aby używać CMB2 musisz umieć napisać kod i dodać go do pliku functions.php . Z tego powodu nazywam to wtyczką „bez wtyczki”.

Dobrą wiadomością jest to, że zespół zatwierdzający wtyczki zgodził się pozostawić ją w repozytorium, dzięki czemu możesz dalej pobierać i aktualizować ją stamtąd. Możesz przeczytać wszystko o historii tutaj na stronie Justina.

Jak skonfigurować CMB2

Aby rozpocząć, musisz znaleźć plik example-functions.php z katalogu wtyczek i skopiować go do swojego motywu. Można go skopiować bezpośrednio do folderu głównego motywu, ale aby utrzymać porządek w projekcie, sugeruję skopiowanie go do folderu takiego jak /lib/ lub /includes/ . Jeśli już wiesz, jak chcesz używać CMB2, możesz zmienić nazwę pliku na bardziej odpowiednią. Na przykład, jeśli chcesz użyć go do tworzenia niestandardowych pól dla strony z referencjami, możesz nazwać go testimonial-functions.php .

Następnie musisz upewnić się, że WordPress znajdzie nowy plik, dodając instrukcję require_once do pliku functions.php . To będzie wyglądać mniej więcej tak:

require_once( dirname(__FILE__) . '/lib/testimonial-functions.php');

Teraz nadszedł czas, aby naprawdę się zagłębić. Otwórz plik testimonial-functions.php (lub jak go nazwałeś). Zauważysz, że Justin nie tylko stworzył przykład prawie każdego możliwego typu pola, ale także stworzył funkcje do wyświetlania pól według strony głównej, kategorii, identyfikatora postu itp.

Jak załadować JavaScript w WordPressie

JavaScript jest jednym z najpopularniejszych języków programowania. Jest niezwykle przydatny podczas tworzenia strony internetowej lub aplikacji, a do tego istnieje niezliczona ilość bibliotek i frameworków JavaScript, z których można korzystać,...

Uwaga: ten artykuł ma na celu wprowadzenie do CMB2; nie będzie to pełny samouczek, jak korzystać z każdego jego aspektu, a ponieważ jest to framework i został opracowany, aby pomóc programistom, powinieneś mieć podstawową wiedzę na temat PHP i wewnętrznego działania WordPressa. Jeśli szukasz wtyczki Custom Meta Box z interfejsem administratora, możesz wypróbować wtyczkę Advanced Custom Fields.

Wróćmy więc do tworzenia niestandardowych metaboxów dla czegoś prostego, takiego jak referencja. Najpierw określ liczbę i rodzaje pól, których będziesz potrzebować. Dla uproszczenia powiedzmy, że potrzebujemy trzech pól. Jeden na faktyczne świadectwo, jeden na imię osoby, która składa świadectwo, a jeden na wizerunek osoby.

Pracując w pliku testimonial-functions.php , będziesz musiał znaleźć sekcję dotyczącą rejestracji i dodania nowej funkcji. Ten kod wygląda mniej więcej tak.

add_action( 'cmb2_admin_init', 'yourprefix_register_demo_metabox' );

Następnie sugeruję zmianę nazwy funkcji na coś związanego z tematem i projektem.

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

Proponuję również zmienić nazwę prefiksu.

// Start with an underscore to hide fields from custom fields list
$prefix = '_yourprefix_'; //note, you can use anything you'd like here, but you need to remember what you use, because you will be using it again later.

Do wyboru jest kilka różnych typów pól. użyję:

'type' => 'textarea_small' // for the author field
'type'    => 'wysiwyg' // for the testimonial in case we want to include html
'type' => 'file' // for the image of the project or author

$cmb_demo->add_field( array(
	'name' => __( 'Testimonial Author', 'cmb2' ),
	'desc' => __( 'Who is the testimonial from', 'cmb2' ),
	'id'   => $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' => 'textarea_small',
	) );

$cmb_demo->add_field( array(
	'name'    => __( 'Testimonial', 'cmb2' ),
	'desc'    => __( 'add the testimonial here', 'cmb2' ),
	'id'      => $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    => 'wysiwyg',
	'options' => array( 'textarea_rows' => 5, ),
	) );

	$cmb_demo->add_field( array(
	'name' => __( 'Author Image', 'cmb2' ),
	'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   => $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' => 'file',
	) );

Te trzy nowe pola należy dodać do nowej funkcji, tak aby wyglądało to następująco:

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

 // Start with an underscore to hide fields from custom fields list
    $prefix = '_yourprefix_'; //note, you can use anything you'd like here

/**
 * Start field groups here
 */

$cmb_demo->add_field( array(
	'name' => __( 'Testimonial Author', 'cmb2' ),
	'desc' => __( 'Who is the testimonial from', 'cmb2' ),
	'id'   => $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' => 'textarea_small',
	) );

$cmb_demo->add_field( array(
	'name'    => __( 'Testimonial', 'cmb2' ),
	'desc'    => __( 'add the testimonial here', 'cmb2' ),
	'id'      => $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    => 'wysiwyg',
	'options' => array( 'textarea_rows' => 5, ),
	) );

	$cmb_demo->add_field( array(
	'name' => __( 'Author Image', 'cmb2' ),
	'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   => $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' => 'file',
	) );
}

I to wszystko! Twój ostateczny kod powinien wyglądać tak:

<?php
/**
 * Include and set up custom metaboxes and fields. (Make sure you copy this file outside the CMB2 directory)
 *
 * Be sure to replace all instances of 'yourprefix_' with your project's prefix.
 * http://nacin.com/2010/05/11/in-wordpress-prefix-everything/
 *
 * @category YourThemeOrPlugin
 * @package  Demo_CMB2
 * @license  http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
 * @link     https://github.com/WebDevStudios/CMB2
 */

/**
 * Get the bootstrap! If using the plugin from wordpress.org, REMOVE THIS!
 */

if ( file_exists( dirname( __FILE__ ) . '/cmb2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/cmb2/init.php';
} elseif ( file_exists( dirname( __FILE__ ) . '/CMB2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/CMB2/init.php';
}

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

 // Start with an underscore to hide fields from custom fields list
    $prefix = '_yourprefix_'; //note, you can use anything you'd like here

/**
 * Start field groups here
 */

// This first field group tells WordPress where to put the fields. In the example below, it is set to show up only on Post_ID=10

$cmb_demo = new_cmb2_box( array(
		'id'            => $prefix . 'metabox',
		'title'         => __( 'Homepage Custom Fields', 'cmb2' ),
		'object_types'  => array( 'page', ), // Post type
		'show_on'      => array( 'id' => array( 10, ) ), // Specific post IDs to display this metabox
		) );

$cmb_demo->add_field( array(
	'name' => __( 'Testimonial Author', 'cmb2' ),
	'desc' => __( 'Who is the testimonial from', 'cmb2' ),
	'id'   => $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' => 'textarea_small',
	) );

$cmb_demo->add_field( array(
	'name'    => __( 'Testimonial', 'cmb2' ),
	'desc'    => __( 'add the testimonial here', 'cmb2' ),
	'id'      => $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    => 'wysiwyg',
	'options' => array( 'textarea_rows' => 5, ),
	) );

	$cmb_demo->add_field( array(
	'name' => __( 'Author Image', 'cmb2' ),
	'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   => $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' => 'file',
	) );
}

Po zakończeniu powinieneś mieć stronę, która wygląda mniej więcej tak:

Korzystanie z CMB2 to świetny sposób na zapewnienie witrynie dokładnie tego, czego potrzebujesz, ponieważ opcje są naprawdę nieograniczone. Na przykład CMB2 może służyć do tworzenia strony opcji motywu z metapolami na logo, adresy URL do serwisów społecznościowych lub filmy. W przypadku budowania strony internetowej dla klienta, CMB2 doskonale nadaje się do dostosowywania administratora, aby klient nie musiał formatować treści, aby pasowały do ​​stylów Twojego motywu. A po wprowadzeniu danych możesz wyświetlić zawartość z wszystkimi stylami już wpisanymi w kod HTML i CSS.

Po opanowaniu dodawania podstawowych pól za pomocą CMB2 spróbuj dodać powtarzalne grupy pól. Dzięki nim będziesz mógł dodać dowolną liczbę dowolnych typów zawartości, a następnie za pomocą pętli for-each możesz rozpocząć tworzenie pokazów slajdów lub karuzeli.

CMB2 pozwolił mi przenieść moje witryny WordPress na wyższy poziom i mam nadzieję, że zrobi to samo dla Ciebie.

Co dalej: Wtyczki!

Znalezienie idealnej wtyczki WordPress, która przyspiesza tworzenie witryn, przypomina trochę szukanie pojedynczej literówki w ciągu kodu – może to zająć trochę czasu. A w dzisiejszych czasach jest tak wiele wtyczek do różnych zadań, że może być trudno dokładnie określić, jakiej funkcjonalności strona potrzebuje (lub nie) i jakie wtyczki zapewniają to w efektywny sposób.

Pobierz ten ebook, aby zobaczyć listę naszych najbardziej polecanych wtyczek dla programistów!