Analytics og testingContent Marketing

WordPress: Slik overskriver du en kortkode fra et overordnet tema i ditt underordnede tema eller tilpasset plugin

Mange av våre kunder har knapper implementert gjennom overordnede temakortkoder. En av partnerne våre spurte om vi kunne spore hendelser på knappene siden de var gode oppfordringer (CTA) på alle nettstedene. Knappens kortkode vi bruker gir automatisk ut en fin knapp ved å legge til klasser til utgangen HTML.

Her er kortkoden for å lage en knapp for å besøke nettstedet mitt:

[button link="https://martech.zone/partner/dknewmedia/"]Visit DK New Media[/button]

Det gir ut:

<a href="https://martech.zone/partner/dknewmedia/" class="button blue medium">Visit DK New Media</a>

Og slik ser det ut:

Besøk DK New Media

Legg til GA4-hendelsessporing i en knappkortkode

Vi ønsker å oppdatere HTML-utdataene for å legge til automatisk Google Analytics 4 Hendelsessporing når knappen klikkes:

<a href="https://martech.zone/partner/dknewmedia/" class="button blue medium" onclick="gtag('event', 'click', {'event_category': 'button', 'event_label': 'Visit DK New Media'});">Visit DK New Media</a>

Knappens kortkode ble opprettet i vår foreldretema, så vi ønsker ikke å endre det opprinnelige temaet vårt for å imøtekomme endringen, da disse endringene ville gå tapt hvis vi oppdaterte temaet. Men det finnes en løsning! WordPress API lar deg fjerne en kortkode ved hjelp av remove_shortcode funksjon!

Dette kan oppnås i barnets tema functions.php fil eller ved å bruke koden i en tilpasset funksjon. Jeg anbefaler å distribuere alle innholdsrelaterte kortkoder i en tilpasset plugin i stedet for i en temafil. Verktøy som AMP ikke gjengi kortkoder i temaer.

Overskriv en kortkode i et undertema

I et undertema kan du fjerne kortkoden og erstatte den med vår nye kortkodefunksjon. Du må søke i overordnet temakode for å finne funksjonen (kalt button_function_in_parent_theme nedenfor) som lager kortkoden, og deretter kan du bruke den i denne kodebiten functions.php:

add_action( 'after_setup_theme', 'update_button_shortcode' );

function update_button_shortcode() {
    remove_shortcode( 'button_function_in_parent_theme' );
    add_shortcode( 'button', 'new_button_shortcode' );
}

Nå kan du legge til din nye og oppdaterte kortkodefunksjon med GA4-hendelsessporing:

function new_button_shortcode($atts, $content = null) {
    // Extract shortcode attributes
    $attributes = shortcode_atts(
        array(
            'link' => '#', // Default value if 'link' is not provided
        ), 
        $atts
    );

    $url = esc_url($attributes['link']);
    $text = esc_html($content);

    // Generate the HTML output
    $html = '<a href="' . $url . '" class="button blue medium" onclick="gtag(\'event\', \'click\', {\'event_category\': \'button\', \'event_label\': \'' . $text . '\'});">' . $text . '</a>';

    return $html;
}

// Register the shortcode
add_shortcode('button', 'new_button_shortcode');

Overskriv en kortkode ved hjelp av en tilpasset plugin

Jeg vil anbefale å bygge en tilpasset plugin for nettstedet ditt som inneholder alle kortkodene dine, også de innenfor temaet ditt. Å gjøre dette:

  1. Opprett en mappe som har et unikt navn. Vår heter for eksempel mtz-kortkoder.
  2. I den filen legger du til en shortcodes.php fil. (Du kan navngi det hva du vil)
  3. Innenfor shortcodes.php-filen kan du legge til koden ovenfor i tillegg til plugin-informasjonen som vises på plugin-siden din:
<?php
/*
Plugin Name: Martech Zone Shortcodes
Description: Shortcodes for Martech Zone. This way they work with AMP.
Version: 1.0.0
Author: Douglas Karr
Author URI: https://dknewmedia.com
*/

function update_shortcodes() {
    remove_shortcode( 'button_function_in_parent_theme' );
    add_shortcode( 'button', 'new_button_shortcode' );
}
add_action( 'init', 'update_shortcodes' );

function new_button_shortcode($atts, $content = null) {
    // Extract shortcode attributes
    $attributes = shortcode_atts(
        array(
            'link' => '', // Default value if 'link' is not provided
        ), 
        $atts
    );

    $url = esc_url($attributes['link']);
    $text = esc_html($content);

    // Generate the HTML output
    $html = '<a href="' . $url . '" class="button blue medium" onclick="gtag(\'event\', \'click\', {\'event_category\': \'button\', \'event_label\': \'' . $text . '\'});">' . $text . '</a>';

    return $html;
}
  1. Du kan fjerne og legge til flere kortkoder i funksjonen ovenfor hvis du har mer enn én kortkode du vil erstatte ved å bruke din egendefinerte plugin.
  2. Zip opp mappen, og du kan nå laste opp og aktivere plugin-en via WordPress-plugin-menyen.

Douglas Karr

Douglas Karr er CMO for Åpne INSIGHTS og grunnleggeren av Martech Zone. Douglas har hjulpet dusinvis av vellykkede MarTech-startups, har bistått med due diligence på over 5 milliarder dollar i Martech-oppkjøp og -investeringer, og fortsetter å hjelpe selskaper med å implementere og automatisere salgs- og markedsføringsstrategier. Douglas er en internasjonalt anerkjent digital transformasjons- og MarTech-ekspert og foredragsholder. Douglas er også en publisert forfatter av en Dummies guide og en bok om lederskap for bedrifter.

Relaterte artikler

Tilbake til toppen-knappen
Lukke

Annonseblokkering oppdaget

Martech Zone er i stand til å gi deg dette innholdet uten kostnad fordi vi tjener penger på nettstedet vårt gjennom annonseinntekter, tilknyttede lenker og sponsing. Vi vil sette pris på om du vil fjerne annonseblokkeringen når du ser på nettstedet vårt.