WordPress: Ako prepísať krátky kód z nadradenej témy v téme vášho dieťaťa alebo vo vlastnom doplnku
Mnoho našich klientov má tlačidlá implementované prostredníctvom krátkych kódov nadradenej témy. Jeden z našich partnerov sa opýtal, či by sme mohli sledovať nejaké udalosti na tlačidlách, pretože to boli skvelé výzvy na akciu (CTA) na všetkých stránkach. Skrátený kód tlačidla, ktorý používame, automaticky vytvorí pekné tlačidlo pridaním tried do výstupu HTML.
Tu je krátky kód na vytvorenie tlačidla na návštevu mojej stránky:
[button link="https://martech.zone/partner/dknewmedia/"]Visit DK New Media[/button]
Z toho vyplýva:
<a href="https://martech.zone/partner/dknewmedia/" class="button blue medium">Visit DK New Media</a>
A takto to vyzerá:
Pridajte sledovanie udalostí GA4 do krátkeho kódu tlačidla
Chceme aktualizovať výstup HTML, aby sa automaticky pridával Google Analytics 4 Sledovanie udalostí po kliknutí na tlačidlo:
<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>
Skrátený kód tlačidla bol vytvorený v našom nadradená téma, takže nechceme upravovať našu pôvodnú tému, aby sa prispôsobila zmene, pretože tieto zmeny by sa stratili, ak by sme tému aktualizovali. Existuje však riešenie! WordPress API vám umožňuje odstrániť krátky kód pomocou remove_shortcode
funkcia!
To sa dá dosiahnuť v téme vášho dieťaťa functions.php
súbor alebo použitím kódu vo vlastnej funkcii. Odporúčam nasadiť všetky vaše krátke kódy súvisiace s obsahom vo vlastnom doplnku a nie v súbore témy. Nástroje ako AMP nevykresľujte krátke kódy v témach.
Prepíšte krátky kód v detskej téme
V podradenej téme môžete odstrániť skrátený kód a nahradiť ho našou novou funkciou skráteného kódu. Ak chcete nájsť funkciu (tzv button_function_in_parent_theme
nižšie), ktorý vytvorí krátky kód a potom ho môžete použiť v tomto úryvku v 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' );
}
Teraz môžete pridať svoju novú a aktualizovanú funkciu krátkeho kódu so sledovaním udalostí GA4:
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');
Prepíšte krátky kód pomocou vlastného doplnku
Odporúčam vám vytvoriť vlastný doplnok pre vašu stránku, ktorý bude zahŕňať všetky vaše krátke kódy, dokonca aj tie, ktoré sú súčasťou vašej témy. Robiť to:
- Vytvorte priečinok s jedinečným názvom. Napríklad ten náš sa volá mtz-shortcodes.
- Do tohto súboru pridajte a shortcodes.php súbor. (Môžete to pomenovať ako chcete)
- Do súboru shortcodes.php môžete pridať kód uvedený vyššie okrem informácií o doplnku, ktoré sa zobrazia na stránke doplnkov:
<?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;
}
- Ak máte viac ako jeden krátky kód, ktorý chcete nahradiť pomocou vlastného doplnku, môžete vo funkcii vyššie odstrániť a pridať viacero krátkych kódov.
- Zbalte priečinok a teraz môžete nahrať a aktivovať doplnok prostredníctvom ponuky doplnkov WordPress.