Cum să creați metabox personalizate cu CMB2

Publicat: 2016-07-25

Acum câțiva ani, căutam o modalitate de a interoga postările și de a afișa locația în care a fost scrisă o postare pe o hartă Google. În cercetarea mea, am dat peste o postare pe blog despre cum să construiesc un localizator de magazine folosind CMB2 și Google Maps. De atunci, CMB2 a devenit unul dintre pluginurile mele preferate și este folosit în majoritatea proiectelor mele.

În primul rând, ce este CMB2?

Ei bine, CMB este un acronim pentru Custom Meta Boxes și, conform descrierii de pe pagina pluginului, „CMB2 este o metabox, câmpuri personalizate și bibliotecă de formulare pentru WordPress care vă va uimi mintea.” A fost dezvoltat de Justin Sternberg de la WebDevStudios și a fost în depozitul de pluginuri de puțin peste doi ani. Cu toate acestea, în februarie anul trecut, oamenii buni de la depozitul de pluginuri WordPress au recunoscut că au prost și au aprobat CMB2 ca plugin atunci când nu ar fi trebuit.

Vezi, pluginurile de obicei sunt capabile să facă ceva imediat; au o anumită funcționalitate inerentă. CMB2 este de fapt un cadru. După cum a explicat odată Sternberg, „Este un cadru de dezvoltator pentru a construi cu ușurință formulare și câmpuri pentru temele și pluginurile tale.” De fapt, când instalați CMB2, nu se va întâmpla nimic. Nu veți primi o pagină de administrare și nu există o interfață de utilizator de administrator. Pentru a utiliza CMB2, trebuie să fiți capabil să scrieți cod și să îl adăugați în fișierul functions.php . Din acest motiv, îl numesc un plugin „non-plugin”.

Vestea bună este că echipa de aprobare a pluginului a fost de acord să-l lase în depozit, astfel încât să puteți continua să îl descărcați și să îl actualizați de acolo. Puteți citi totul despre istorie aici pe site-ul lui Justin.

Cum se configurează CMB2

Pentru a începe, va trebui să găsiți fișierul example-functions.php din directorul pluginului și să îl copiați în tema dvs. Poate fi copiat direct în folderul rădăcină al temei, dar pentru a vă menține proiectul bine organizat, vă sugerez să îl copiați într-un folder precum /lib/ sau /includes/ . Dacă știți deja cum ați dori să utilizați CMB2, atunci poate doriți să continuați și să redenumiți fișierul cu ceva mai adecvat. De exemplu, dacă doriți să îl utilizați pentru a crea câmpuri personalizate pentru o pagină de mărturii, ați putea să o denumiți testimonial-functions.php .

În continuare, va trebui să vă asigurați că WordPress găsește noul fișier adăugând o declarație require_once în fișierul functions.php . Va arata cam asa:

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

Acum este timpul să vă dezvăluiți cu adevărat. Deschideți fișierul testimonial-functions.php (sau cum l-ați numit). Veți observa că nu numai că Justin a creat un exemplu pentru aproape fiecare tip de câmp posibil, dar a creat și funcții pentru afișarea câmpurilor după pagina de pornire, categorie, id-ul postării etc.

Cum să încărcați JavaScript în WordPress

JavaScript este unul dintre cele mai populare limbaje de codare din jur. Este incredibil de util atunci când construiești un site web sau o aplicație și există nenumărate biblioteci și framework-uri JavaScript de care să te folosești,...

Notă: Acest articol are scopul de a vă prezenta CMB2; nu va fi un tutorial complet despre cum să folosiți fiecare aspect al acestuia și, deoarece este un cadru și a fost dezvoltat pentru a ajuta programatorii, ar trebui să aveți o înțelegere de bază a PHP și a funcționalității interne a WordPress. Dacă sunteți în căutarea unui plugin Custom Meta Box care are o interfață de utilizator de administrator, poate doriți să verificați pluginul Advanced Custom Fields.

Deci, să revenim la construirea unor meta-cutii personalizate pentru ceva simplu, cum ar fi o mărturie. Mai întâi, determinați numărul și tipurile de câmpuri de care veți avea nevoie. Pentru a rămâne simplu, să presupunem că avem nevoie de trei câmpuri. Unul pentru mărturia propriu-zisă, unul pentru numele persoanei care dă mărturia și unul pentru o imagine a persoanei.

Lucrând în fișierul testimonial-functions.php , va trebui să găsiți secțiunea pentru înregistrarea și adăugarea noii funcții. Codul arata cam asa.

add_action( 'cmb2_admin_init', 'yourprefix_register_demo_metabox' );

În continuare, vă sugerez să redenumiți funcția cu ceva relevant pentru tema și proiectul dvs.

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() {

De asemenea, vă sugerez să redenumiți prefixul.

// 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.

Există mai multe tipuri de câmpuri diferite din care să alegeți. Voi folosi:

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

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

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

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

Aceste trei câmpuri noi trebuie adăugate la noua funcție, astfel încât să arate astfel:

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-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Testimonial Author', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Who is the testimonial from', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'textarea_small',
	) );

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

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

Si asta e! Codul final ar trebui să arate astfel:

&amp;amp;lt;?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'            =&amp;amp;gt; $prefix . 'metabox',
		'title'         =&amp;amp;gt; __( 'Homepage Custom Fields', 'cmb2' ),
		'object_types'  =&amp;amp;gt; array( 'page', ), // Post type
		'show_on'      =&amp;amp;gt; array( 'id' =&amp;amp;gt; array( 10, ) ), // Specific post IDs to display this metabox
		) );

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

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

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

Când ați terminat, ar trebui să aveți o pagină care arată cam așa:

Utilizarea CMB2 este o modalitate excelentă de a oferi site-ului dvs. exact ceea ce aveți nevoie, deoarece opțiunile sunt într-adevăr nesfârșite. De exemplu, CMB2 poate fi folosit pentru a crea o pagină cu opțiuni de temă cu metacasete pentru logo-uri, URL-uri către site-uri de socializare sau videoclipuri. În cazul construirii unui site web pentru un client, CMB2 este perfect pentru personalizarea administratorului, astfel încât clientul să nu fie nevoit să formateze conținutul pentru a se potrivi cu stilurile temei tale. Și odată ce datele sunt introduse, puteți afișa conținutul cu toate stilurile deja existente în HTML și CSS.

Odată ce ați învățat adăugarea câmpurilor de bază cu CMB2, încercați să adăugați grupuri de câmpuri repetabile. Cu acestea, veți putea adăuga oricâte tipuri de conținut doriți și apoi, folosind o buclă pentru fiecare, puteți începe să creați prezentări de diapozitive sau carusele.

CMB2 mi-a permis să duc site-urile mele WordPress la următorul nivel și sper că va face același lucru pentru tine.

Ce urmează: Pluginuri!

Găsirea pluginului WordPress perfect care accelerează dezvoltarea site-ului este un pic ca a încerca să găsești o singură greșeală de tipar într-un șir de cod – poate dura ceva timp. Și în zilele noastre, există atât de multe plugin-uri pentru diferite sarcini, încât poate fi greu de identificat exact de ce funcționalitate are (sau nu) nevoie un site și ce plugin-uri le oferă într-un mod eficient.

Descărcați această carte electronică pentru o listă cu cele mai recomandate plugin-uri pentru dezvoltatori!