Buttonbar (WordPress)

Uit De Vliegende Brigade
Ga naar: navigatie, zoeken

Buttonbar is een maatwerk-functionaliteit die eind 2019-begin 2020 is ontwikkeld voor een klantproject. Het biedt een visueel keuzemenu, oftewel button bar of knoppenbalk. Het maakt gebruik van ACF - Advanced Custom Fields. Ik noem het buttonbar, dus één woord en zonder hoofdletter.

Voor mij is het belangrijk dat ik buttonbars via API's kan lezen en aanmaken - Daar gaat dit artikel voornamelijk over.

Lezen & API

Script om het ACF-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] => 
        )

)

Dit is de output voor een pagina met één button onder Selection en één button onder All. Merk op hoe uitgebreid het datamodel is, en dat het heel veel werk zou zijn om dit buiten de API om te doen. Onder andere lijken alle beschikbare afbeeldingsformaten te zijn geïncorporeerd:

Array
(
    [buttonbar_title] => Knoppenbalk-titel
    [buttonbar_expand_text] => Knoppenbalk-uitbreid
    [buttonbar_selection] => Array
        (
            [0] => Array
                (
                    [title] => Titel-selection-01
                    [image] => Array
                        (
                            [ID] => 14276
                            [id] => 14276
                            [title] => K
                            [filename] => B2.jpg
                            [filesize] => 254020
                            [url] => h2.jpg
                            [link] => h1/?attachment_id=14276#main
                            [alt] => Kp
                            [author] => 0
                            [description] => Koop
                            [caption] => Koop
                            [name] => koo-3
                            [status] => inherit
                            [uploaded_to] => 13300
                            [date] => 2020-04-22 15:52:25
                            [modified] => 2020-04-22 15:52:26
                            [menu_order] => 0
                            [mime_type] => image/jpeg
                            [type] => image
                            [subtype] => jpeg
                            [icon] => http://example.com/wp-includes/images/media/default.png
                            [width] => 856
                            [height] => 784
                            [sizes] => Array
                                (
                                    [thumbnail] => http://example.com/wp-content/uploads/2020/04/Widgets-c-02-2-150x150.jpg
                                    [thumbnail-width] => 150
                                    [thumbnail-height] => 150
                                    [medium] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets--300x275.jpg
                                    [medium-width] => 300
                                    [medium-height] => 275
                                    [medium_large] => http://example.com/wp-content/uploads/2020/04/Wg-Widget68x703.jpg
                                    [medium_large-width] => 654
                                    [medium_large-height] => 599
                                    [large] => http://example.com/wp-content/uploads/2020/04/Wg-Widgetp-02-2.jpg
                                    [large-width] => 654
                                    [large-height] => 599
                                    [1536x1536] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets-02-2.jpg
                                    [1536x1536-width] => 856
                                    [1536x1536-height] => 784
                                    [2048x2048] => http://example.com/wp-content/uploads/2020/04/Wg-Widgetsp-02-2.jpg
                                    [2048x2048-width] => 856
                                    [2048x2048-height] => 784
                                    [small-magazine] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets-cx403.jpg
                                    [small-magazine-width] => 440
                                    [small-magazine-height] => 403
                                    [medium-magazine] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets2-2.jpg
                                    [medium-magazine-width] => 856
                                    [medium-magazine-height] => 784
                                    [extra-large-magazine] => http://example.com/wp-content/uploads/2020/04/Wg-Widgetsp-02-2.jpg
                                    [extra-large-magazine-width] => 856
                                    [extra-large-magazine-height] => 784
                                    [woocommerce_thumbnail] => http://example.com/wp-content/uploads/2020/04/Wg-Wix275.jpg
                                    [woocommerce_thumbnail-width] => 300
                                    [woocommerce_thumbnail-height] => 275
                                    [woocommerce_single] => http://example.com/wp-content/uploads/2020/04/Wg-Wx550.jpg
                                    [woocommerce_single-width] => 600
                                    [woocommerce_single-height] => 550
                                    [woocommerce_gallery_thumbnail] => http://example.com/wp-content/uploads/2020/04/Wg-Widgex100.jpg
                                    [woocommerce_gallery_thumbnail-width] => 100
                                    [woocommerce_gallery_thumbnail-height] => 100
                                    [shop_catalog] => http://example.com/wp-content/uploads/2020/04/Wg-Wi00x275.jpg
                                    [shop_catalog-width] => 300
                                    [shop_catalog-height] => 275
                                    [shop_single] => http://example.com/wp-content/uploads/2020/04/Wg-Widg2-600x550.jpg
                                    [shop_single-width] => 600
                                    [shop_single-height] => 550
                                    [shop_thumbnail] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets-ca00x100.jpg
                                    [shop_thumbnail-width] => 100
                                    [shop_thumbnail-height] => 100
                                )

                        )

                    [link] => Array
                        (
                            [title] => Widgetset cas-00-0250 voor Kanus-&-gunnink KA273A
                            [url] => http://example.com/product/widgetsa273a/
                            [target] => 
                        )

                )

        )

    [buttonbar_all] => Array
        (
            [0] => Array
                (
                    [title] => Titel-all-01
                    [image] => Array
                        (
                            [ID] => 14090
                            [id] => 14090
                            [title] => Widgetidgets.shop
                            [filename] => Wg-Widgets-cas-00-0157-Kanp-02-2.jpg
                            [filesize] => 254020
                            [url] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets-cas-p-02-2.jpg
                            [link] => http://example.com/?attachment_id=14090#main
                            [alt] => Widgets voor Kanus-&-guts.shop
                            [author] => 0
                            [description] => Widgets voodgets.shop
                            [caption] => Widgets vooets.shop
                            [name] => widgets-voor-Kanus-&-gunnis-shop-3
                            [status] => inherit
                            [uploaded_to] => 13207
                            [date] => 2020-04-22 15:47:53
                            [modified] => 2020-04-22 15:47:54
                            [menu_order] => 0
                            [mime_type] => image/jpeg
                            [type] => image
                            [subtype] => jpeg
                            [icon] => http://example.com/wp-includes/images/media/default.png
                            [width] => 856
                            [height] => 784
                            [sizes] => Array
                                (
                                    [thumbnail] => http://exampldgets.shop-02-2-150x150.jpg
                                    [thumbnail-width] => 150
                                    [thumbnail-height] => 150
                                    [medium] => http://example.com/wp-content/uploads/2020/04/Wg-Widgetop-02-2-300x275.jpg
                                    [medium-width] => 300
                                    [medium-height] => 275
                                    [medium_large] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets-casx703.jpg
                                    [medium_large-width] => 654
                                    [medium_large-height] => 599
                                    [large] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets-cashop-02-2.jpg
                                    [large-width] => 654
                                    [large-height] => 599
                                    [1536x1536] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets-cshop-02-2.jpg
                                    [1536x1536-width] => 856
                                    [1536x1536-height] => 784
                                    [2048x2048] => http://example.com/wp-content/uploads/2020/04/Wg-Widghop-02-2.jpg
                                    [2048x2048-width] => 856
                                    [2048x2048-height] => 784
                                    [small-magazine] => http://example.com/wp-content/uploads/2020/04/Wg-Widget40x403.jpg
                                    [small-magazine-width] => 440
                                    [small-magazine-height] => 403
                                    [medium-magazine] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets-02-2.jpg
                                    [medium-magazine-width] => 856
                                    [medium-magazine-height] => 784
                                    [extra-large-magazine] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets-cas-00-0157-Kanus-&-gunn-2.jpg
                                    [extra-large-magazine-width] => 856
                                    [extra-large-magazine-height] => 784
                                    [woocommerce_thumbnail] => http://example.com/wp-content/uploads/2020/04/Wg-Wi0x275.jpg
                                    [woocommerce_thumbnail-width] => 300
                                    [woocommerce_thumbnail-height] => 275
                                    [woocommerce_single] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets-cas-00-0157-Kanu550.jpg
                                    [woocommerce_single-width] => 600
                                    [woocommerce_single-height] => 550
                                    [woocommerce_gallery_thumbnail] => http://example.com/wp-content/uploads/2020/04/Wg-Widg0x100.jpg
                                    [woocommerce_gallery_thumbnail-width] => 100
                                    [woocommerce_gallery_thumbnail-height] => 100
                                    [shop_catalog] => http://example.com/wp-content/uploads/2020/04/Wg-Widge300x275.jpg
                                    [shop_catalog-width] => 300
                                    [shop_catalog-height] => 275
                                    [shop_single] => http://example.com/wp-content/uploads/2020/04/Wg-Widge0x550.jpg
                                    [shop_single-width] => 600
                                    [shop_single-height] => 550
                                    [shop_thumbnail] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets--100x100.jpg
                                    [shop_thumbnail-width] => 100
                                    [shop_thumbnail-height] => 100
                                )

                        )

                    [link] => Array
                        (
                            [title] => Widgetset cas KA273
                            [url] => http://example.com/product/widgetsa273/
                            [target] => 
                        )

                )

        )

    [buttonbar] => Array
        (
            [buttonbar_title] => Knoppenbalk-titel
            [buttonbar_expand_text] => Knoppenbalk-uitbreid
            [buttonbar_selection] => Array
                (
                    [0] => Array
                        (
                            [title] => Titel-selection-01
                            [image] => Array
                                (
                                    [ID] => 14276
                                    [id] => 14276
                                    [title] => Widgets vdgets.shop
                                    [filename] => Wg-Widget2.jpg
                                    [filesize] => 254020
                                    [url] => http://example.com/wp-content/uploads/2020/04/Wg-Wiop-02-2.jpg
                                    [link] => http://example.com/?attachment_id=14276#main
                                    [alt] => Widgegets.shop
                                    [author] => 0
                                    [description] => Widgep widgets.shop
                                    [caption] => Wigets.shop
                                    [name] => widgeets-shop-3
                                    [status] => inherit
                                    [uploaded_to] => 13300
                                    [date] => 2020-04-22 15:52:25
                                    [modified] => 2020-04-22 15:52:26
                                    [menu_order] => 0
                                    [mime_type] => image/jpeg
                                    [type] => image
                                    [subtype] => jpeg
                                    [icon] => http://example.com/wp-includes/images/media/default.png
                                    [width] => 856
                                    [height] => 784
                                    [sizes] => Array
                                        (
                                            [thumbnail] => http://example.com/wp-content/uploads/2020/04/Wg-x150.jpg
                                            [thumbnail-width] => 150
                                            [thumbnail-height] => 150
                                            [medium] => http://example.com/wp-content/uploads/2020/04/Wg-300x275.jpg
                                            [medium-width] => 300
                                            [medium-height] => 275
                                            [medium_large] => http://example.com/wp-content/uploads/2020/04/Wg-Widge68x703.jpg
                                            [medium_large-width] => 654
                                            [medium_large-height] => 599
                                            [large] => http://example.com/wp-content/uploads/2020/04/Wg-Widge.shop-02-2.jpg
                                            [large-width] => 654
                                            [large-height] => 599
                                            [1536x1536] => http://example.com/wp-content/uploads/2020/04/Wg-Widhop-02-2.jpg
                                            [1536x1536-width] => 856
                                            [1536x1536-height] => 784
                                            [2048x2048] => http://example.com/wp-content/uploads/2020/04/Wg-Widget-02-2.jpg
                                            [2048x2048-width] => 856
                                            [2048x2048-height] => 784
                                            [small-magazine] => http://example.com/wp-content/uploads/2020/04/Wg-Wi40x403.jpg
                                            [small-magazine-width] => 440
                                            [small-magazine-height] => 403
                                            [medium-magazine] => http://example.com/wp-content/uploads/2020/04/Wg-Widgshop-02-2.jpg
                                            [medium-magazine-width] => 856
                                            [medium-magazine-height] => 784
                                            [extra-large-magazine] => http://example.com/wp-content/uploads/2020/04/Wg-Widgp-02-2.jpg
                                            [extra-large-magazine-width] => 856
                                            [extra-large-magazine-height] => 784
                                            [woocommerce_thumbnail] => http://example.com/wp-content/uploads/2020/04/Wg-Widg0x275.jpg
                                            [woocommerce_thumbnail-width] => 300
                                            [woocommerce_thumbnail-height] => 275
                                            [woocommerce_single] => http://example.com/wp-content/uploads/2020/04/Wg-Widgx550.jpg
                                            [woocommerce_single-width] => 600
                                            [woocommerce_single-height] => 550
                                            [woocommerce_gallery_thumbnail] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets-cas-00-0250-Kanus-&-gunnink-KA273A-Widgets.shop-02-2-100x100.jpg
                                            [woocommerce_gallery_thumbnail-width] => 100
                                            [woocommerce_gallery_thumbnail-height] => 100
                                            [shop_catalog] => http://example.com/wp-content/uploads/2020/04/Wg-Widge275.jpg
                                            [shop_catalog-width] => 300
                                            [shop_catalog-height] => 275
                                            [shop_single] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets0x550.jpg
                                            [shop_single-width] => 600
                                            [shop_single-height] => 550
                                            [shop_thumbnail] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets100.jpg
                                            [shop_thumbnail-width] => 100
                                            [shop_thumbnail-height] => 100
                                        )
                                )

                            [link] => Array
                                (
                                    [title] => Widgetset cas-00-0250 voor Kanus-&-gunnink KA273A
                                    [url] => http://example.com/product/widgetsa273a/
                                    [target] => 
                                )

                        )

                )

            [buttonbar_all] => Array
                (
                    [0] => Array
                        (
                            [title] => Titel-all-01
                            [image] => Array
                                (
                                    [ID] => 14090
                                    [id] => 14090
                                    [title] => Widgetets.shop
                                    [filename] => Wg-W-02-2.jpg
                                    [filesize] => 254020
                                    [url] => http://example.com/wp-content/uploads/2020/04/Wg-Widget-02-2.jpg
                                    [link] => http://example.com/?attachment_id=14090#main
                                    [alt] => Widgets vogets.shop
                                    [author] => 0
                                    [description] => Widgetets.shop
                                    [caption] => Widgeets.shop
                                    [name] => widgetsshop-3
                                    [status] => inherit
                                    [uploaded_to] => 13207
                                    [date] => 2020-04-22 15:47:53
                                    [modified] => 2020-04-22 15:47:54
                                    [menu_order] => 0
                                    [mime_type] => image/jpeg
                                    [type] => image
                                    [subtype] => jpeg
                                    [icon] => http://example.com/wp-includes/images/media/default.png
                                    [width] => 856
                                    [height] => 784
                                    [sizes] => Array
                                        (
                                            [thumbnail] => http://example.com/wp-content/uploads/2020/04/Wg-Widx150.jpg
                                            [thumbnail-width] => 150
                                            [thumbnail-height] => 150
                                            [medium] => http://example.com/wp-content/uploads/2020/04/Wg-Widget00x275.jpg
                                            [medium-width] => 300
                                            [medium-height] => 275
                                            [medium_large] => http://example.com/wp-content/uploads/2020/04/Wg-W68x703.jpg
                                            [medium_large-width] => 654
                                            [medium_large-height] => 599
                                            [large] => http://example.com/wp-content/uploads/2020/04/Wg-Widp-02-2.jpg
                                            [large-width] => 654
                                            [large-height] => 599
                                            [1536x1536] => http://example.com/wp-content/uploads/2020/04/Wg-Widg02-2.jpg
                                            [1536x1536-width] => 856
                                            [1536x1536-height] => 784
                                            [2048x2048] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets-p-02-2.jpg
                                            [2048x2048-width] => 856
                                            [2048x2048-height] => 784
                                            [small-magazine] => http://example.com/wp-content/uploads/2020/04/Wg-Wi403.jpg
                                            [small-magazine-width] => 440
                                            [small-magazine-height] => 403
                                            [medium-magazine] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets.shop-02-2.jpg
                                            [medium-magazine-width] => 856
                                            [medium-magazine-height] => 784
                                            [extra-large-magazine] => http://example.com/wp-content/uploads/2020/04/Wg-Widgep-02-2.jpg
                                            [extra-large-magazine-width] => 856
                                            [extra-large-magazine-height] => 784
                                            [woocommerce_thumbnail] => http://example.com/wp-content/uploads/2020/04/Wg-Widge0x275.jpg
                                            [woocommerce_thumbnail-width] => 300
                                            [woocommerce_thumbnail-height] => 275
                                            [woocommerce_single] => http://example.com/wp-content/uploads/2020/04/Wg-Wi0x550.jpg
                                            [woocommerce_single-width] => 600
                                            [woocommerce_single-height] => 550
                                            [woocommerce_gallery_thumbnail] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets0x100.jpg
                                            [woocommerce_gallery_thumbnail-width] => 100
                                            [woocommerce_gallery_thumbnail-height] => 100
                                            [shop_catalog] => http://example.com/wp-content/uploads/2020/04/Wg-Wid0x275.jpg
                                            [shop_catalog-width] => 300
                                            [shop_catalog-height] => 275
                                            [shop_single] => http://example.com/wp-content/uploads/2020/04/Wg-Widge0x550.jpg
                                            [shop_single-width] => 600
                                            [shop_single-height] => 550
                                            [shop_thumbnail] => http://example.com/wp-content/uploads/2020/04/Wg-Widgets-c100.jpg
                                            [shop_thumbnail-width] => 100
                                            [shop_thumbnail-height] => 100
                                        )
                                )

                            [link] => Array
                                (
                                    [title] => Widgetset ne KA273
                                    [url] => http://example.com/product/widgetset-cae-ka273/
                                    [target] => 
                                )
                        )
                )
        )
)

Schrijven & 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;
}

Database-model