Аналітика та тестуванняВміст Маркетинг

WordPress: як перезаписати шорткод із батьківської теми у вашій дочірній темі або спеціальному плагіні

Багато наших клієнтів мають кнопки, реалізовані через шорткоди батьківської теми. Один із наших партнерів запитав, чи можна відстежувати події на кнопках, оскільки вони були чудовими закликами до дії (CTA) на всіх сайтах. Короткий код кнопки, який ми використовуємо, автоматично виводить гарну кнопку, додаючи до виводу класи HTML.

Ось короткий код для створення кнопки для відвідування мого сайту:

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

Це виводить:

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

А ось як це виглядає:

візит DK New Media

Додайте відстеження подій GA4 до короткого коду кнопки

Ми хочемо оновити висновок HTML для автоматичного додавання Google Analytics 4 Відстеження подій під час натискання кнопки:

<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>

Шорткод кнопки було створено в нашому батьківська тема, тому ми не хочемо змінювати нашу оригінальну тему, щоб врахувати зміни, оскільки ці зміни буде втрачено, якщо ми оновимо тему. Однак рішення є! WordPress API дає змогу видалити шорткод за допомогою remove_shortcode функція!

Це можна зробити у вашій дочірній темі functions.php або застосувавши код у спеціальній функції. Я раджу розгортати всі ваші короткі коди, пов’язані з вмістом, у спеціальному плагіні, а не у файлі теми. Такі інструменти, як AMP не відображати короткі коди в темах.

Перезаписати шорткод у дочірній темі

У дочірній темі ви можете видалити короткий код і замінити його новою функцією короткого коду. Щоб знайти функцію (називається button_function_in_parent_theme нижче), який створює короткий код, а потім ви можете використовувати його в цьому фрагменті 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' );
}

Тепер ви можете додати нову та оновлену функцію короткого коду з відстеженням подій 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');

Перезапишіть шорткод за допомогою спеціального плагіна

Я б порекомендував створити спеціальний плагін для вашого сайту, який включатиме всі ваші короткі коди, навіть ті, що знаходяться у вашій темі. Зробити це:

  1. Створіть папку з унікальною назвою. Наприклад, наш називається mtz-шорткоди.
  2. У цьому файлі додайте a короткі коди.php файл. (Ви можете назвати як завгодно)
  3. У файлі shortcodes.php ви можете додати наведений вище код на додаток до інформації про плагін, яка відображатиметься на сторінці ваших плагінів:
<?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. Ви можете видалити та додати кілька шорткодів у наведеній вище функції, якщо у вас є більше ніж один шорткод, який ви хочете замінити за допомогою спеціального плагіна.
  2. Заархівуйте папку, і тепер ви можете завантажити та активувати плагін через меню плагінів WordPress.

Douglas Karr

Douglas Karr є CMO компанії OpenINSIGHTS і засновник Martech Zone. Дуглас допоміг десяткам успішних стартапів MarTech, допоміг у належній перевірці понад 5 мільярдів доларів у придбання та інвестиції Martech, і продовжує допомагати компаніям у впровадженні та автоматизації їхніх продажів і маркетингових стратегій. Дуглас — міжнародно визнаний експерт і спікер з цифрової трансформації та MarTech. Дуглас також є опублікованим автором посібника для чайників і книги про лідерство в бізнесі.

Статті по темі

Догори кнопки
близько

Виявлено блокування реклами

Martech Zone може надати вам цей вміст безкоштовно, оскільки ми монетизуємо наш сайт за рахунок доходів від реклами, партнерських посилань і спонсорства. Ми будемо вдячні, якщо ви видалите блокувальник реклами під час перегляду нашого сайту.