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