Herbruikbare aangepaste metaboxen Deel 3 extra velden

In deel 1 en deel 2 van onze zelfstudieseries met meta-boxsjablonen hebben we geleerd hoe u een veldarray maakt om door te lussen en een aangepaste metabox maakt met uw standaardvelden. Laten we nu een beetje JavaScript toevoegen voor een paar mooie, maar zeer nuttige velden.

Datumkiezer

Elk van de velden die we in deze tutorial behandelen, vereist jQuery en de gebruikersinterface van jQuery. Gelukkig maakt WordPress het super eenvoudig om deze mee te gebruiken wp_enqueue_script, en vanaf 3.3 worden alle interacties en widgets van jQuery UI gebundeld met WordPress.

Omdat we werken aan een pagina die al jQuery in wachtrij plaatst, kunnen we dit overslaan, maar we zullen de jQuery UI Datepicker wel nodig hebben. We moeten ook ons ​​eigen stylesheet maken, omdat de benodigde CSS nog niet in WordPress is gebundeld, hoewel ze dat wel doen.

 if (is_admin ()) wp_enqueue_script ('jquery-ui-datepicker'); wp_enqueue_style ('jquery-ui-custom', get_template_directory_uri (). '/ css / jquery-ui-custom.css'); 

We hoeven deze alleen in de admin te laden, en niet aan de voorkant van de site, dus wikkel de functies in een voorwaardelijke. De eerste functie roept de datepicker aan en laadt ook de jQuery UI Core. De tweede functie roept ons jQuery-ui-custom.css-stylesheet uit de css-map van het thema. Voor het voorbeeld van de stylesheet in de download aan het begin van deze zelfstudie zijn geen afbeeldingen vereist. U kunt ook uw eigen jQuery UI-thema maken.

Laten we nu kijken naar het array-item dat we aan ons moeten toevoegen $ custom_meta_fields array die we in Deel 1 zijn gestart.

 array ('label' => 'Date', 'desc' => 'Een beschrijving voor het veld', 'id' => $ prefix.'date ',' type '=>' date ')

Deze array is bijna identiek aan ons tekstitem. Het heeft een hoofdlabel, een beschrijving, een uniek ID en het datumtype is gedefinieerd. We gaan hier in ons voorbeeld gewoon een basisimplementatie van de datumkiezer gebruiken, maar als u uw gebruik van de datumkiezer wilt verbeteren, kunt u ook andere informatie aan de array toevoegen, zoals het gewenste formaat, lokalisatie en datumbereik om er een paar te noemen. Dan zou je die informatie kunnen gebruiken in de volgende scriptbeller die we aan de kop van de pagina moeten toevoegen:

 add_action (admin_head ',' add_custom_scripts); function add_custom_scripts () global $ custom_meta_fields, $ post; $ output = ''