Buttonbar (WordPress)
Buttonbar is a custom functionality that was developed for a customer project in late 2019-early 2020. It provides a visual selection menu, or button bar. It makes extensive use of ACF - Advanced Custom Fields. I call it buttonbar - one word and without a capital letter.
Read & update through code
Reading or updating an existing buttonbar, is easy:
Associated with a page?
A major distinction is, whether a buttonbar is associated with a page or not. If it is, data is stored in table wp_postmeta
and can be manipulated through the WP-CLI using wp post meta
.
If it isn't, data is stored in table wp_options
and can be manipulated through the WP-CLI using wp optionc
. The site selector discussed at the end of this article, is an example of this.
Unless otherwise specified, this article is about buttonbars that are associated with pages.
Fields
All fields (and other entities?) of a buttonbar are created through ACF. In the past, buttonbars had the possibility to expand and collapse it. That functionality isn't used anymore, but it lives on in word selection
as part of a buttonbar button.
Here are the fields (wp_postmeta
) that are still relevant. This is illustrated with the buttonbars on a home page of nl_nl:
Field | Notes |
---|---|
buttonbars_0_buttonbar_title
|
|
buttonbars_0_buttonbar_selection_0_title
|
Title of the button. Just plain text |
buttonbars_0_buttonbar_selection_0_image
|
post-id of an image
|
buttonbars_0_buttonbar_selection_0_link
|
A compound field, consisting of two parts:
|
WP-CLI
Toon alle meta-objecten van de home page (dit toont ook niet-ACF-velden):
wp post meta list 7
Fetch details van het link-veld van de eerste button van de eerste buttonbar op de home page:
$ wp post meta get 7 buttonbar_selection_0_link array ( 'title' => '', 'url' => 'http://knl.s1/heel-goed/', 'target' => '', )
Lees nu specifiek het URL-veld:
$ wp post meta pluck 7 buttonbar_selection_0_link url http://knl.s1/heel-goed/
SQL
- Als het even kan, zou ik geen SQL gebruiken om ACF-velden aan te passen. Dit is slechts een voorbeeld
- Alle buttonbar-velden hebben het sleutelwoord
buttonbar_
in hun meta-key
# Alle buttonbar objects on the home page # select * from wp_postmeta where post_id=7 and meta_key like "%buttonbar%";
# All fields of the first buttonbar of the first button of the home page # (only "selection" fields are used nowadays) # select * from wp_postmeta where post_id=7 and meta_key like "%buttonbars_0_buttonbar_selection_0_%"
Uitvoer:
meta_id post_id meta_key meta_value ------ ------- ----------------------------------------- ---------- 912631 7 buttonbars_0_buttonbar_selection_0_title ABC 912632 7 _buttonbars_0_buttonbar_selection_0_title field_5e450082734a2 912633 7 buttonbars_0_buttonbar_selection_0_image 2851 912634 7 _buttonbars_0_buttonbar_selection_0_image field_5e450106734a3 912635 7 buttonbars_0_buttonbar_selection_0_link a:3:{s:5:"ti... 912636 7 _buttonbars_0_buttonbar_selection_0_link field_5e450111734a4
Opnieuw is link het enige veld met serialised content.
PHP-API
Script om het datamodel van een pagina met een buttonbar uit te lezen:
<?php # Set variables ############### # $site_path = "/var/www/example.com"; $page_id = 14278; # The page for which the datamodel is extracted # Load library ############## # require_once($site_path . "/wp-load.php"); # Get datamodel given page ########################## # print_r(get_fields($page_id));
Ik vergeet wel eens hoe je een PHP-script executeert vanaf Bash. Zo dus:
php -f bestandsnaam.php
Dit is de output van een pagina met een buttonbar, waar alleen de twee titels zijn ingevuld:
Array ( [buttonbar_title] => Knoppenbalk-titel [buttonbar_expand_text] => Knoppenbalk-uitbreid [buttonbar_selection] => [buttonbar_all] => [buttonbar] => Array ( [buttonbar_title] => Knoppenbalk-titel [buttonbar_expand_text] => Knoppenbalk-uitbreid [buttonbar_selection] => [buttonbar_all] => ) )
Voor een pagina met een twee buttonbars, is de uitvoer al een paar A4'tjes lang (zie Historie van deze pagina om deze te zien - Ik heb het in juni 2022 verwijderd).
Create through code
Creating a buttonbar through code, is much harder than working with existing buttonbars. The trials below don't work. In 2022, functionality was developed to create a buttonbar through PHP, but that hasn't been included here yet.
PHP-API
Dit is de hiërarchie van een buttonbar:
butonbar_title buttonbar_expand_text buttonbar_selection title image (diverse subvelden) link (diverse subvelden) ... title image link buttonbar_all title image (diverse subvelden) link (diverse subvelden) ... title image link
Merk op, dat je onder buttonbar_selection en buttonbar_all een zich herhalende structuur hebt. Ik geloof dat dit een repeater heet, in ACF-terminologie.
ACF biedt API-calls voor schrijven en bijwerken van velden:
update_field
- Om een bestaand veld bij te werken of te beschrijvenadd_row
- Vermoedelijk nodig om repeaters te vullen.
buttonbar_titel
Simpel:
require_once("/var/www/example.com/wp-load.php"); $return_value = update_field("buttonbar_title", "Blub", 51116); echo "Return_value: '"; print_r($return_value); echo "'\n";
Return-code
- Als de operatie geslaagd is (dwz., er staat nu een waarde die er daarvoor niet stond), dan retourneert de functie '1'
- Operatie niet geslaagd (dwz., er was nix te updaten), dan retourneert de functie niets. Dus een lege string
- Als de operatie een foutmelding tegenkomt (bv. als je een niet-bestaand veld probeert bij te werken), krijg je een code retour. Bv. '395903' (ik had de naam van het veld verandert)
- Je kunt deze functie dus ongestraft herhalen met dezelfde data. In het ergste geval krijg je lege strings terug :).
buttonbar_expand_text
Dit gaat hetzelfde als voor buttonbar-titel:
require_once("/var/www/example.com/wp-load.php"); $return_value = update_field("buttonbar_expand_text", "Blub2", 51116); echo "\nReturn_value: '"; print_r($return_value); echo "'\n";
buttonbar_selection - DIT WERKT NIET
Hieronder wordt update_field
gebruikt voor het vullen van de buttons. Ik dacht dat dit werkte (begin 2020), maar dat lijkt toch anders te liggen (mei 2020). Misschien dat add_row
de oplossing is. Helaas krijg ik dat nog niet goed aan de praat: Ik krijg lege rijen (dus ik ben warm!).
<?php # Set variables ############################################ # $site_path = "/var/www/example.com"; $page_name = "buttonbar-testpage"; $post_id = 14278; # Load library ############################################ # require_once($site_path . "/wp-load.php"); # buttonbar_selection-object aanmaken ##################################### # $field_key = "buttonbar_selection"; $value_01[]=array ( "title" => "title (test)", "image" => array ( # Afbeelding-ID ############### # # * ID van een bestaande afbeelding op de site # * Helaas kun je niet bv. bestandsnaam gebruiken # * Velden zoals "title" worden overruled door de info bij de afbeelding # "ID" => 14276 ), "link" => array ( "url" => "http://example.com/shop/" ) ); # buttonbar_selection-object schrijven ##################################### # update_field($field_key, $value_01, $post_id);
buttonbar_all - DIT WERKT NIET
Variant op het script hierboven:
require_once("/var/www/example.com/wp-load.php"); $button_title = "Blazer"; $image_id = 2949; $link = "http://example.com/shop/bd/blazer-bd/"; $field_key = "buttonbar_all"; $wp_brandpage_id = 51116; $return_value = create_button($button_title, $image_id, $link, $field_key, $wp_brandpage_id); echo "\nReturn_value: '"; print_r($return_value); echo "'\n"; ###################################################################################### # Function create_button() ###################################################################################### # function create_button($button_title, $image_id, $link, $field_key, $wp_brandpage_id) { $button[]=array( "title" => $button_title, "image" => array("ID"=>$image_id), "link" => array("url"=>$link) ); $return_value = update_field($field_key, $button, $wp_brandpage_id); return $return_value; }
Site-selector
De site-selector is een buttonbar met aangepaste velden, die niet is geassociëerd met een pagina. Daarom dit aparte hoofdstuk over deze specifieke buttonbar
wp_options
Omdat deze buttonbar niet geassociëerd is met een pagina, vind je 'm niet terug in tabel wp_postmeta
, maar in tabel wp_options
:
select * from wp_options where option_name like "options_languages%";
Deel van de uitvoer:
+-----------+-------------------------------+----------------------------------------------------------------------------------------------------+----------+ | option_id | option_name | option_value | autoload | +-----------+-------------------------------+----------------------------------------------------------------------------------------------------+----------+ | 332805 | options_languages | 30 | no | | 332793 | options_languages_0_country | Netherlands | no | | 332789 | options_languages_0_flag | 56449 | no | | 332795 | options_languages_0_language | English | no | | 332791 | options_languages_0_link | a:3:{s:5:"title";s:22:"Go to example.nl";s:3:"url";s:24:"https://example.nl";s:6:"target";s:0:"";} | no | | 332878 | options_languages_1_country | Australia | no | | 332874 | options_languages_1_flag | 65350 | no | | 332880 | options_languages_1_language | English | no | | 332876 | options_languages_1_link | a:3:{s:5:"title";s:33:"Go to example.au";s:3:"url";s:35:"https://example.au";s:6:"target";s:0:"";} | no | +-----------+-------------------------------+----------------------------------------------------------------------------------------------------+----------+
Datamodel
Onderdelen van een buttonbar-regel van de site-selector:
Veld | Details |
---|---|
Afbeelding | Veld options_languages_x_flag . Hier wordt het post-ID van de afbeelding (wp_posts) opgeslagen
|
Link | Veld options_languages_0_link met serialised content:
|
Country | Veld options_languages_x_country , string
|
Language | Veld options_languages_0_language , string
|