Buttonbar (WordPress)

Uit De Vliegende Brigade
Naar navigatie springen Naar zoeken springen
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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
  • The title of the first buttonbar on a page
  • The title of the second buttonbar on this page, would be buttonbars_1_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:
  • title: Title of the link
  • url: The actual URL.

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 beschrijven
  • add_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:
  • Tooltip
  • URL
  • Target (bv. _blank)
Country Veld options_languages_x_country, string
Language Veld options_languages_0_language, string

Zie ook

Overgenomen van "https://wiki.devliegendebrigade.nl/index.php?title=Buttonbar_(WordPress)&oldid=35272"