Voeg een ‘Call to Action’ toe aan je WordPress theme, nu inclusief een gemakkelijke Meta-box voor het beheer!

Mark Lindhout 8 maanden geleden

Call to Action - metabox

De uiteindelijke metabox voor de ‘Call to Action’.

Een Call to Action is een duidelijke, herkenbare actie die een bezoeker van een website kan ondernemen. Vaak houdt dit in dat men contact opneemt, een mail stuurt, of een product koopt. WordPress biedt deze functionaliteit wel aan, maar voor de minder computer-vaardigen onder ons kan het soms een beetje ingewikkeld zijn. Daarom presenteer ik hier een gebruiksvriendelijke manier om dit in te bouwen. Handig voor jezelf én de eindgebruikers van de website!

Voor alle voorbeelden geldt: Je kunt mytheme vervangen door de naam van je template.
Allereerst maken we de meta-box aan. De volgende code moet in het bestand functions.php komen te staan.

Deze code genereert de eigenlijke meta-box die getoond wordt aan de WordPress beheerkant:

function mytheme_create_cta_metabox() {
 
    global $post;  
 
    // het (onzichtbare) authorisatieveld
    if (function_exists('wp_nonce_field')) {
            wp_nonce_field('mytheme_nonce_action', 'mytheme_noncename');
    }
 
    // de velden van de meta-box
    echo '  <p><strong>' . __('Teaser Text', 'mytheme' ) . '</strong></p>
            <label class="screen-reader-text" for="mytheme_cta_teasertext">'
            . __('Teaser Text', 'mytheme' ) . '</label>
            <textarea type="text" id="mytheme_cta_teasertext"
            	name="mytheme_cta_teasertext"
            	cols="25" rows="7" style="width:100%;">'
            	.  get_post_meta( $post->ID, 'teasertext', true)
            . '</textarea>';
    echo '  <p><strong>' . __('Link URL', 'mytheme' ) . '</strong></p>
            <label class="screen-reader-text" for="mytheme_cta_linkurl">'
            . __('Link URL', 'mytheme' ) . '</label>
            <input type="text" id="mytheme_cta_linkurl"
            	name="mytheme_cta_linkurl"
            	value="' .  get_post_meta( $post->ID, 'linkurl', true) . '"
            	size="25" style="width:100%;" />';
    echo '  <p><strong>' . __('Link Text', 'mytheme' ) . '</strong></p>
            <label class="screen-reader-text" for="mytheme_cta_linktext">'
            . __('Link Text', 'mytheme' )
            . '</label>
            <input type="text" id="mytheme_cta_linktext"
            	name="mytheme_cta_linktext"
            	value="' .  get_post_meta( $post->ID, 'linktext', true) . '"
            	size="25" style="width:100%;" />';          
}

Als de post wordt opgeslagen, zorgt de volgende functie ervoor dat onze data wordt meegenomen.

function mytheme_save_postdata( $post_id ) {
 
        // klopt de login, en komt de aanvraag van het juiste scherm?
        if ( !wp_verify_nonce( $_POST['mytheme_noncename'], 'mytheme_nonce_action' ) ) {
                return $post_id;
        }
 
        // is dit de auto-save?
        if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) {
                return $post_id;
        }
 
        // toestemming correct?
        if ( !current_user_can( 'edit_post', $post_id ) ) {
                return $post_id;
        }
 
        // alles in orde, alle velden dus opslaan.
        update_post_meta($post_id, 'teasertext', $_POST['mytheme_cta_teasertext']);
        update_post_meta($post_id, 'linkurl', $_POST['mytheme_cta_linkurl']);
        update_post_meta($post_id, 'linktext', $_POST['mytheme_cta_linktext']);
 
}
add_action('save_post', 'mytheme_save_postdata');

Deze volgende functie neemt al het voorgaande en voegt dat samen in een echte, zichtbare meta-box aan de beheerkant van WordPress. In het onderstaande voorbeeld wordt de meta-box toegevoegd aan twee post types, namelijk aan post en aan page.

Tip: Voor ieder inhoudstype waar je de metabox wilt terugzien, voeg je een nieuwe add_meta_box() functie toe.

function mytheme_add_cta_metabox() {
 
        add_meta_box(
        	'mytheme_cta_metabox',
        	__( 'Call To Action', 'mytheme' ),
        	'mytheme_create_cta_metabox',
        	'post', // post type
        	'side',
        	'high'
        );
 
        add_meta_box(
        	'mytheme_cta_metabox',
        	__( 'Call To Action', 'mytheme' ),
        	'mytheme_create_cta_metabox',
        	'page', // post type
        	'side',
        	'high'
        );
 
}
add_action('add_meta_boxes', 'mytheme_add_cta_metabox');

Dan moeten we nog een functie bouwen die de inhoud van de meta-box vertaalt naar een bruikbare, vrij te stylen ‘Call to Action’ aan de voorkant.

function get_mytheme_cta() {
 
    // haal de velden op met de link URL, de linktekst, en de teaser-tekst 
    $linkurl = get_post_custom_values('linkurl', get_the_ID());
    $linktext = get_post_custom_values('linktext', get_the_ID());
    $teasertext = get_post_custom_values('teasertext', get_the_ID());
 
    // zorgt ervoor dat de call-to-action alléén getoond wordt als er inhoud is
    if ( $linkurl[0] || $linkurl[0] || $teasertext[0] ) {
 
        $output .= '<div class="cta-container">';
 
        if ( $linkurl[0] && $linktext[0] ) {
            $output .= '<a id="call-to-action" href="' . $linkurl[0] . '">'
            . $linktext[0]
            . '</a>';
        }
 
        if ( $teasertext[0] ) {
            $output .= '<div class="cta-text">'
            . $teasertext[0]
            . '</div>';
        }
 
        $output .= '</div>';
 
    }
 
    return $output;
 
}

Heb je dit allemaal ingevoegd en aangepast aan je wensen, dan kun je de ‘Call to Action’ gebruiken in je template. In dit voorbeeld voegen we deze toe aan een pagina, daartoe kun je de volgende code in het bestand page.php toevoegen.

<?php  echo get_mytheme_cta(); ?>

Natuurlijk kun je de ‘Call to Action’ ook aan nieuwsberichten koppelen of aan zelfgemaakte inhoudstypes. Wees creatief!

Het resultaat

En hoe ziet dat er nu eigenlijk uit? Een voorbeeld staat hieronder, maar je kunt met CSS alle mogelijke vormgeving op de Call to Action loslaten. Lees bijvoorbeeld maar eens het handige artikel op Smashing Magazine over het vormgeven van deze belangrijke beeldelementen.

Een recent voorbeeld dat ikzelf heb gebruikt vind je hieronder:

Een ‘Call to Action’ in zijn volle glorie

Een ‘Call to Action’ in zijn volle glorie

, , , , , ,

Leave a Reply