Вывод произвольных полей ACF в шаблонах WordPress

Вывод произвольных полей ACF в WordPress

В этом уроке мы будем выводить произвольные поля или как их еще называют мета поля в WordPress. Будем выводить поля заданные плагином Advanced Custom Fields (ACF). В прошлом уроке мы научились создавать мета поля установив плагин Advanced Custom Fields. Это важно, потому что для вывода будем использовать функции которые заданы этим плагином. То есть если вы создали поля без установки этого плагина, то вам следует использовать другие функции. С пояснениями закончили, приступим.

Этот урок является частью цикла уроков, посвященных произвольным типам записей в WordPress. Обязательно посмотрите все уроки из данного цикла. Ссылки на них представлены ниже. Порядок имеет значение. Лучше начинать с первого урока этого цикла, чтобы все было понятно.

Произвольные типы записей и поля:

  1. Добавление произвольных типов записей в WordPress
  2. Вывод произвольных типов записей в WordPress
  3. Добавление произвольных полей к записям в WordPress
  4. Вывод произвольных полей в записях WordPress

 

В плагине ACF есть замечательная документация. Рекомендую обращаться к ней при выводе мета полей в шаблоне WordPress. Знакомство начнем с двух функций.

Часть первая. Теория

Если чувствуете себя уверенно, можно сразу перейти ко второй части.

Наверняка вам будет интересно узнать что означают используемые в примерах ниже функции. Для этого можно ознакомиться с теорией и документацией плагина. В общем в примерах ниже используются две функции, с которыми следует ознакомиться и понять способ их работы и отличие.

Функция — get_field()

Возвращает значение заданного поля.

Это очень универсальная функция. Ее можно использовать чтобы получить значение, вывести значение (через echo), и взаимодействовать со значением. Обратите внимание, что тип возвращаемой переменной будет соответствовать типу поля (для текстового поля — это будет строка, для изображения — массив, в некоторых случаях — это может быть многомерный массив). Источник

Параметры

<?php $field = get_field($field_name, $post_id, $format_value); ?>
  • $field_name: имя поля из которого будут получены данные, пример: “page_content” Обязательный параметр.
  • $post_id: ID записи в которой было задано данное значение. По умолчанию равно текущему посту в которой применяется данная функция. Необязательный параметр. Также это может быть ID опции, таксономии, пользователя, и т.п.
  • $format_value: форматировать или нет значение полученное из БД. По умолчанию — true. Необязательный параметр.

Использование

<?php 

/*
*  get a field value from the current post
*/

$value = get_field( "text_field" ); 

/*
*  get a field value from another post
*/

$value = get_field( "text_field", 123 ); 

/*
*  use get_field with conditional statements
*/

$value = get_field( "text_field" );
if( $value )
{

}
else
{

}

Функция — the_field()

Отображает значение заданного поля. Эта функция аналогична выражению “echo get_field($field_name)”. Источник

Параметры

<?php the_field($field_name, $post_id); ?>
  • $field_name:имя поля из которого будут получены данные, пример: “page_content” Обязательный параметр.
  • $post_id: ID записи в которой было задано данное значение. По умолчанию равно текущему посту в которой применяется данная функция. Необязательный параметр. Также это может быть ID опции, таксономии, пользователя, и т.п.

Использование

<?php 

/*
*  display a field value from the current post
*/

the_field( "text_field" ); 

/*
*  display a field value from another post
*/

the_field( "text_field", 123 ); 

/*
*  use the_field / get_field with conditional statements
*/

if( get_field( "text_field" ) ): ?>
    <p><?php the_field( "text_field" ); ?></p>
<?php endif;>

В принципе этих функций вполне достаточно, чтобы понять описанные выше готовые конструкции по отображения разных мета полей в шаблонах WordPress. Все примеры этих конструкций можно найти в документации к ACF, вот пример из документации как выводить в шаблоне поле с изображением.

Часть вторая. Практическая

Здесь я приведу готовые блоки кода, которые можно брать и использовать на своем сайте, заменив ID поля на свои значения.

Текстовое поле, текстовый блок

<?php the_field('text'); ?>

<?php the_field('textarea'); ?>

Изображение

Базовый способ. Отображение картинки.

<?php 

$image = get_field('image');

if( !empty($image) ): ?>

    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

<?php endif; ?>

Продвинутый способ. Разбор массива по переменным.

<?php 

$image = get_field('image');

if( !empty($image) ): 

    // vars
    $url = $image['url'];
    $title = $image['title'];
    $alt = $image['alt'];
    $caption = $image['caption'];

    // thumbnail
    $size = 'thumbnail';
    $thumb = $image['sizes'][ $size ];
    $width = $image['sizes'][ $size . '-width' ];
    $height = $image['sizes'][ $size . '-height' ];

    if( $caption ): ?>

        <div class="wp-caption">

    <?php endif; ?>

    <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">

        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />

    </a>

    <?php if( $caption ): ?>

            <p class="wp-caption-text"><?php echo $caption; ?></p>

        </div>

    <?php endif; ?>

<?php endif; ?>

Упрощенный способ, когда нужно получить только конкретный размер изображения, и конкретный дополнительные параметры:

<?php 

$image = get_field('image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)

if( $image ) {

    echo wp_get_attachment_image( $image, $size );

}

?>

Файл

Простой способ. Вывод ссылки на файл.

<?php $myfile = get_field('file'); ?>

<a href="<?php echo $myfile['url']; ?>" >Download File</a>

Расширенный способ. Вывод ссылки, заголовка, подписи и описания файла.

<?php

        $myfile = get_field('file');

        if( !empty($myfile) ): ?>

        <p>
            <a href="<?php echo $myfile['url']; ?>" >
                Download File "<?php echo $myfile['title']; ?>"
            </a><br>
            
            <?php echo $myfile['caption']; ?><br>

            <?php echo $myfile['description']; ?>

        </p>

<?php endif; ?>

Дебаг для поля с файлом

<?php 

//Return value = Object, requires ACF 3.3.7+

$file = get_field('field_name');

// view array of data
var_dump($file);

?>

Календарь

Для вывода даты заданной через date picker, используем:

<?php
/*
*  Create PHP DateTime object from Date Piker Value
*  this example expects the value to be saved in the format: yymmdd (JS) = Ymd (PHP)
*/

$date = DateTime::createFromFormat('Ymd', get_field('date_picker'));
echo $date->format('d-m-Y');

?>

Сортировка постов по дате заданной через поле выбора даты.

<?php

/*
*  Order Posts based on Date Picker value
*  this example expects the value to be saved in the format: yymmdd (JS) = Ymd (PHP)
*/

$posts = get_posts(array(
    'meta_key' => 'custom_order', // name of custom field
    'orderby' => 'meta_value_num',
    'order' => 'ASC'
));

if( $posts )
{
    foreach( $posts as $post )
    {
        setup_postdata( $post );

        // ...

    }

    wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly
}

/*
*  Format examples
*/

$js = "yymmdd"
$php = "Ymd"

$js = "dd/mm/yy"
$php = "d/m/Y"

$js = "yy_mm_dd"
$php = "Y_m_d"

?>

Карта Google

Для отображения карты Google с маркером предлагаю использовать следующий код. Есть два варианта.

Первый способ, с официального сайта по документации по ACF

Первая часть. Отвечает только за генерацию карты Google.

<style type="text/css">

.acf-map {
    width: 100%;
    height: 400px;
    border: #ccc solid 1px;
    margin: 20px 0;
}

</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
(function($) {

/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type    function
*  @date    8/11/2013
*  @since    4.3.0
*
*  @param    $el (jQuery element)
*  @return    n/a
*/

function render_map( $el ) {

    // var
    var $markers = $el.find('.marker');

    // vars
    var args = {
        zoom        : 16,
        center        : new google.maps.LatLng(0, 0),
        mapTypeId    : google.maps.MapTypeId.ROADMAP
    };

    // create map                
    var map = new google.maps.Map( $el[0], args);

    // add a markers reference
    map.markers = [];

    // add markers
    $markers.each(function(){

        add_marker( $(this), map );

    });

    // center map
    center_map( map );

}

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type    function
*  @date    8/11/2013
*  @since    4.3.0
*
*  @param    $marker (jQuery element)
*  @param    map (Google Map object)
*  @return    n/a
*/

function add_marker( $marker, map ) {

    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

    // create marker
    var marker = new google.maps.Marker({
        position    : latlng,
        map            : map
    });

    // add to array
    map.markers.push( marker );

    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        // create info window
        var infowindow = new google.maps.InfoWindow({
            content        : $marker.html()
        });

        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'click', function() {

            infowindow.open( map, marker );

        });
    }

}

/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type    function
*  @date    8/11/2013
*  @since    4.3.0
*
*  @param    map (Google Map object)
*  @return    n/a
*/

function center_map( map ) {

    // vars
    var bounds = new google.maps.LatLngBounds();

    // loop through all markers and create bounds
    $.each( map.markers, function( i, marker ){

        var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

        bounds.extend( latlng );

    });

    // only 1 marker?
    if( map.markers.length == 1 )
    {
        // set center of map
        map.setCenter( bounds.getCenter() );
        map.setZoom( 16 );
    }
    else
    {
        // fit to bounds
        map.fitBounds( bounds );
    }

}

/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type    function
*  @date    8/11/2013
*  @since    5.0.0
*
*  @param    n/a
*  @return    n/a
*/

$(document).ready(function(){

    $('.acf-map').each(function(){

        render_map( $(this) );

    });

});

})(jQuery);
</script>

Вторая часть. Выводит на карте единичный маркер.

<?php 

$location = get_field('location');

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

Другой вариант второй части, для вывода нескольких маркеров на карте.

<?php if( have_rows('locations') ): ?>
    <div class="acf-map">
        <?php while ( have_rows('locations') ) : the_row(); 

            $location = get_sub_field('location');

            ?>
            <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
                <h4><?php the_sub_field('title'); ?></h4>
                <p class="address"><?php echo $location['address']; ?></p>
                <p><?php the_sub_field('description'); ?></p>
            </div>
    <?php endwhile; ?>
    </div>
<?php endif; ?>

Источник

Второй способ, вариант с форума поддержки WordPress.

<div id="view1">
<?php
$location = get_field('carte_google');
if( ! empty($location) ):
?>
<div id="map" style="width: 100%; height: 350px;"></div>
<script src='http://maps.googleapis.com/maps/api/js?sensor=false' type='text/javascript'></script>

<script type="text/javascript">
  //<![CDATA[
	function load() {
	var lat = <?php echo $location['lat']; ?>;
	var lng = <?php echo $location['lng']; ?>;
// coordinates to latLng
	var latlng = new google.maps.LatLng(lat, lng);
// map Options
	var myOptions = {
	zoom: 9,
	center: latlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
   };
//draw a map
	var map = new google.maps.Map(document.getElementById("map"), myOptions);
	var marker = new google.maps.Marker({
	position: map.getCenter(),
	map: map
   });
}
// call the function
   load();
//]]>
</script>
<?php endif; ?> 

</div>

Источник

В этом уроке были рассмотрены основные принципы и способы вывода в шаблоне базовых мета полей в WordPress заданных через плагин Advanced Custom Field. Как вывести не описанные здесь поля — можно найти в документации плагина.

 

Этот урок является частью цикла уроков, посвященных произвольным типам записей в WordPress. Обязательно посмотрите все уроки из данного цикла.

Произвольные типы записей и поля:

  1. Добавление произвольных типов записей в WordPress
  2. Вывод произвольных типов записей в WordPress
  3. Добавление произвольных полей к записям в WordPress
  4. Вывод произвольных полей в записях WordPress