WordPress: Hvernig á að skrifa yfir stuttkóða úr foreldraþema í barnþema eða sérsniðnu viðbóti
Margir af viðskiptavinum okkar hafa hnappa útfærða í gegnum foreldri þema stuttkóða. Einn af samstarfsaðilum okkar spurði hvort við gætum gert viðburðarrakningu á hnöppunum þar sem þeir voru frábærar ákall til aðgerða (CTA) um allar síðurnar. Stuttkóði hnappsins sem við notum gefur sjálfkrafa út fallegan hnapp með því að bæta flokkum við úttakið HTML.
Hér er stuttkóði til að búa til hnapp til að heimsækja síðuna mína:
[button link="https://martech.zone/partner/dknewmedia/"]Visit DK New Media[/button]
Það gefur út:
<a href="https://martech.zone/partner/dknewmedia/" class="button blue medium">Visit DK New Media</a>
Og svona lítur það út:
Bættu GA4 viðburðarakningu við stuttkóða fyrir hnapp
Við viljum uppfæra HTML úttakið til að bæta sjálfkrafa við Google Analytics 4 Atburðamæling þegar smellt er á hnappinn:
<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>
Hnappurinn stuttkóði var búinn til í okkar foreldraþema, svo við viljum ekki breyta upprunalegu þema okkar til að mæta breytingunni þar sem þessar breytingar myndu glatast ef við uppfærðum þemað. Það er samt lausn! WordPress API gerir þér kleift að fjarlægja skammkóða með því að nota remove_shortcode
virka!
Þetta er hægt að ná í þema barnsins þíns functions.php
skrá eða með því að nota kóðann í sérsniðinni aðgerð. Ég ráðlegg þér að dreifa öllum innihaldstengdum stuttkóðum þínum í sérsniðnu viðbóti frekar en í þemaskrá. Verkfæri eins og AMP ekki birta stuttkóða í þemum.
Skrifaðu yfir skammkóða í barnaþema
Í barnaþema geturðu fjarlægt stuttkóðann og skipt honum út fyrir nýja stuttkóðaaðgerðina okkar. Þú þarft að leita í foreldraþemakóðanum þínum til að finna aðgerðina (kallað button_function_in_parent_theme
hér að neðan) sem býr til stuttkóðann og síðan geturðu notað hann í þessum bút inn 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ú geturðu bætt við nýju og uppfærðu stuttkóðaaðgerðinni þinni með GA4 atburðarakningu:
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');
Skrifaðu yfir skammkóða með því að nota sérsniðna viðbót
Ég mæli með því að búa til sérsniðna viðbót fyrir síðuna þína sem inniheldur alla stuttkóðana þína, jafnvel þá sem eru innan þemaðs þíns. Til að gera þetta:
- Búðu til möppu sem ber einstakt nafn. Til dæmis, okkar heitir mtz-stuttkóða.
- Innan þeirrar skráar skaltu bæta við a shortcodes.php skrá. (Þú getur nefnt það hvað sem þú vilt)
- Innan shortcodes.php skráarinnar geturðu bætt við kóðanum hér að ofan til viðbótar við viðbótaupplýsingarnar sem birtast á viðbótasíðunni þinni:
<?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;
}
- Þú getur fjarlægt og bætt við mörgum stuttkóðum í aðgerðinni hér að ofan ef þú ert með fleiri en einn skammkóða sem þú vilt skipta um með því að nota sérsniðna viðbótina þína.
- Renndu möppunni upp og þú getur nú hlaðið upp og virkjað viðbótina í gegnum WordPress viðbætur valmyndina þína.