WordPress - Advanced Custom Fields


De onderstaande codes zijn specifiek gericht op de extensie Advanced Custom Fields, een extensie die ook in het overzicht met handige plugins voor WordPress is geplaatst.

Met de plugin kun je een pagina of bericht voorzien van diverse extra velden. Zo voeg je tekstvelden toe (met wysiwyg editor), velden om bestanden te uploaden, afbeeldingen, checkboxes, radio buttons, en meer. Bij elk veld kunnen er instructies worden toegevoegd en op deze manier kunnen meerdere flexibele templates worden opgezet.

Velden worden onderverdeeld in groepen en zodoende kun je een bepaalde groep alleen bij berichten tonen of alleen bij pagina's. Op www.advancedcustomfields.com zijn uitgebreide handleidingen te vinden evenals de benodigde codes om de velden te kunnen tonen aan de voorkant van een website waarvan je er ook een aantal hieronder ziet.

Veld tonen

<?php
        the_field("naam_veld");
?>


Veld met voorwaarde

<?php
        if(!get_field("naam_veld") == ''):
                echo get_field("naam_veld");
        endif;
?>


Veld tonen van een specifieke pagina op basis van ID

<?php
        the_field('naam_veld', 10);
?>


Afbeelding

<?php
        echo wp_get_attachment_image(get_field('naam_veld'), 'eigen-formaat');
?>


Waar / Niet waar

<?php
        if(get_field('naam_check') == '1'):
        endif;
?>


Taxonomy

<?php
        $id = get_queried_object_id();
        if(!get_field('naam_veld', 'tax-movies'. $id .'') == ''):
                echo get_field('naam_veld', 'tax-movies_'. $id .'');
        endif;
?>


Taxonomy op detailpagina

<?php
        $terms = get_the_terms($post->ID, 'tax-movies');
        if($terms && ! is_wp_error($terms)):
                foreach ( $terms as $term ):
                        $termID = $term->term_id;
                        echo $term->name;
                        echo get_term_link($term);
                        echo get_field('projects_tag_image', 'tax-movies_'. $termID .'');
                endforeach;
        endif;
?>


Embeds (Responsive)

<div class="embed-container">
        <?php the_field('oembed'); ?>
</div>
<style>
        .embed-container {
                position: relative;
                padding-bottom: 56.25%;
                height: 0;
                overflow: hidden;
                max-width: 100%;
                height: auto;
        }
        .embed-container iframe,
        .embed-container object,
        .embed-container embed {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
        }
</style>


Gebruiker / Auteur

<?php
        $author_id = get_current_user_id();
        $author_field = get_field('author_picture', 'user_'. $author_id);
        if($author_field == ''):
        else:
        endif;
?>


Google Maps (Enkele locatie)

Er is hierbij wel een aanvullende code nodig om de kaart van Google Maps daadwerkelijk te tonen. De code bestaande uit CSS en Javascript kan op deze pagina worden gedownload.

<?php
        $location = get_field('location');
        if(!empty($location)):
                echo '<div class="acf-map">';
                         echo '<div class="marker" data-lat="' . $location['lat'] .'" data-lng="' . $location['lng'] . '"></div>';
                echo '</div>';
        endif;
?>


Relationship

<?php
        $posts = get_field('naam_veld');
        if($posts):
                foreach( $posts as $post):
                        setup_postdata($post);
                        $post_type = get_post_type($post->ID);
                        $post_status = get_post_status($post->ID);
                        if($post_status == "publish"):
                                echo '<a href="' . get_the_permalink() . '">';
                                        echo get_the_title();
                                echo '</a><br />';
                        endif;
                        wp_reset_postdata();
                endforeach;
        endif;
?>

Advanced Custom Fields Pro

De extensie hierboven genoemd is gratis maar er bestaat ook een betaalde extensie die nog enkele aanvullende mogelijkheden geeft, dit is Advanced Custom Fields Pro. Bijvoorbeeld een Repeater Field om makkelijk velden te herhalen, een Gallery Field, Flexible Content Fields en handig is de toevoeging van Options Pages. Options Pages zijn losstaande pagina's met velden die bijvoorbeeld voor een header / footer kunnen worden ingezet.

Options Page

Het activeren van een Options Page moet gedaan worden in het functions.php bestand van een thema. Het kan dan gaan om een enkele pagina maar dit kunnen ook meerdere pagina's zijn. Na het activeren wordt er een menu item Site opties toegevoegd aan het hoofdmenu aan de linkerkant. Het toevoegen van velden kan op de gebruikelijke manier met als verschil dat je bij een groep instelt dat deze specifiek bij de Options Page hoort.

Enkele Options Page

<?php
        if(function_exists('acf_add_options_page')):
                acf_add_options_page();
        endif;
?>


Meerdere Options Pages

<?php
        if(function_exists('acf_add_options_page')):
                acf_add_options_page(array(
                        'page_title' => 'Header',
                        'menu_title' => 'Site opties',
                        'menu_slug' => 'theme-general-settings',
                        'capability' => 'edit_posts',
                        'redirect' => false
                ));
                acf_add_options_sub_page(array(
                        'page_title' => 'Google Analytics',
                        'menu_title' => 'Google Analytics',
                        'parent_slug' => 'theme-general-settings',
                ));
        endif;
?>


Tonen velden van Options Pages in template

<?php
        if(get_field('naam_veld', 'option')):
                the_field('naam_veld', 'option');
        endif;
?>


Repeater Field

Het tonen van een Repeater veld aan de voorkant.

<?php
        if(get_field('naam_repeater')):
                while(has_sub_field('naam_repeater')):
                        echo get_sub_field('naam_veld');
                endwhile;
        endif;
?>


Google Maps (Meerdere locaties in combinatie met repeater)

Er is hierbij wel een aanvullende code nodig om de kaart van Google Maps daadwerkelijk te tonen. De code bestaande uit CSS en Javascript kan op deze pagina worden gedownload.

<?php
        if(have_rows('locations')):
                echo '<div class="acf-map">';
                        while ( have_rows('locations') ) : the_row();
                                $location = get_sub_field('location');
                                echo '<div class="marker" data-lat="' . $location['lat'] . '" data-lng="' . $location['lng'] . '">';
                                        echo the_sub_field('address');
                                echo '</div>';
                        endwhile;
                echo '</div>';
        endif;
?>


Flexible Content Field

Het tonen van een flexible content veld aan de voorkant.

<?php
        if(have_rows('naam_veld')):
                while(have_rows('naam_veld')) : the_row();
                        if(get_row_layout() == 'one_column'):
                                echo get_sub_field('block_title');
                        elseif(get_row_layout() == 'two_columns'):
                                echo get_sub_field('block_title');
                        endif;
                endwhile;
        endif;
?>


Gallery

Het tonen van een fotogalerij aan de voorkant.

<?php
        $images = get_field('gallery');
        if( $images ):
?>
<ul>
        <?php foreach( $images as $image ): ?>
        <li>
                <a href="<?php echo $image['url']; ?>">
                        <img src="<?php echo $image['sizes']['thumbnail']; ?>" />
                </a>
        </li>
        <?php endforeach; ?>
</ul>
<?php endif; ?>