Как вывести произвольные поля в WPS Framework

170

Добрый день, уважаемые пингвины. Мы продолжаем цикл статей и сегодня доведем работу до логического конца. Вы, наверное, много раз себе задавали вопрос: как же вывести произвольное поле или произвольный тип записи в WordPress?. Ответ есть! С помощью нашего фреймворка это сделать очень просто и сейчас мы пошагово рассмотрим весь процесс.

Файл, в котором мы будем работать: single-portfolio.php. Он был создан при помощи возможностей Framework.

Перед тем, как выводить информацию, добавим пару записей в админпанели. Получаем вот такой список контента:

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

Для того чтобы вывести произвольное поле в списке записей на CMS WordPress, нам достаточно использовать вот такой код:

new WPS_PostColumns(
  array(
    'post_type' => 'example_post_type',
    'fields'    => array(
      array(
        'field_type'   => 'views',
        'columns_name' => 'Просмотры'
      ),
      // views первый
      array(
        'field_type'   => 'image',
        'field_name'   => 'image',
        'columns_name' => 'image'
      ),
      array(
        'field_type'   => 'checkbox',
        'field_name'   => 'checkbox',
        'columns_name' => 'checkbox'
      ),
      array(
        'field_type'   => 'text',
        'field_name'   => 'input',
        'columns_name' => 'input'
        'after_text'   => ''
      ),
      array(
        'field_type'   => 'row_color',
        'field_name'   => 'checkbox',
        'columns_name' => 'Row Color',
        'options'      => array(
          "on" => "rgba(130, 218, 185, 0.3)",
          ""   => "rgba(255, 90, 90, 0.3)",
        )
      ),
    )
  )
);

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

Итак, наша задача сейчас – вывести изображение в списке записей. Для этого нам потребуется вот такой код:

new WPS_PostColumns(
    array(
        'post_type' => 'portfolio',
        'fields'    => array(
            array(
                'field_type'   => 'image',
                'field_name'   => 'main_photo',
                'columns_name' => 'Фото'
            ),
        )
    )
);

Разберем детальней данный программный код:

post_type – название произвольного типа записи, для которого необходимо применить код;
field – массив произвольных полей для вывода, полный список доступных полей смотрите на актуальной версии документации;
field_name – имя произвольного поля, которое нужно будет вывести;
columns_name – произвольное название столбца в админпанели;

Совет: код для вывода произвольных полей в списке записей советуем размещать в том же файле, где указана конфигурация произвольного типа записи.

В нашем случае — это файл wps_portfolio.php в директории wps_config

После того, как записи созданы, перейдем к фронт-части нашего проекта и займемся выводом информации.

Ранее системой был создан файл archive-portfolio.php, он и отвечает за вывод списка записей (архив записей). Когда вы откроете данный файл, увидите в нем стандартный код для вывода записей (только при условии, если файл был сгенерирован средствами framework), который полностью готов к использованию. Его внешний вид представлен ниже:

Чтобы вывести список наших записей, модифицируем немного данный код:

<?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<?php endwhile; else: ?>
 <p><?php _e(''); ?></p>
<?php endif; ?>

<?php get_footer(); ?>

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

Теперь получим вот такой результат:

Теперь приступим к выводу информации внутри самой записи.

У нас присутствуют следующие данные:

изображение;
галерея фото;
описание;
список работ.

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

Сразу получим id изображения:

$image = get_post_meta($post->ID, 'main_photo','true');

После этого сделаем сам вывод изображения:

<div>
    <?php echo wp_get_attachment_image($image,'full') ?>
</div>

Далее займемся выводом галереи. Здесь нам понадобится функция, которая есть в WPS Framework:

    $gallery = UI_SimpleGallery::wps__get_simple_gallery( 'simple_gallery' );

Примечание: в круглых скобках указываем название произвольного поля, которое является галереей.

И, собственно, сам вывод:

<div>
    <h2>Галерея фото</h2>
    <?php foreach ($gallery as $gallery_item) :?>
        <div>
            <?php echo wp_get_attachment_image($gallery_item,'thumbnail') ?>
        </div>
    <?php endforeach; ?>
</div>

Описание выводится как обычное произвольное поле, для этого проделаем такие шаги:

Выбираем нужное произвольное поле из БД.

    $description = get_post_meta($post->ID,'wp_editor',true);

И выведем его в нашей странице:

<div>
    <h2>Описание</h2>
    <?php echo $description ?>
</div>

Последним этапом рассмотрим вывод данных, которые представлены таким полем как repeater.

Чтобы получить массив данных такого поля, используем встроенную функцию:

$repeater = UI_Repeater::wps__get_repeater( ‘repeater’ );</p>

Примечание: в круглых скобках указываем название произвольного поля, которое является типом repeater

Теперь приступим к выводу информации:

<div>
<table>
<?php foreach ($repeater as $item) :?>
<tr>
<td><b><?php echo $item[‘work_title’] ?></b></td>
<td><?php echo $item[‘work_time’] ?></td>
</tr>
<?php endforeach; ?>
</table>
</div>

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

Итоговый код выглядит вот так:

<?php get_header(); ?>

<?php
    $image = get_post_meta($post->ID, 'main_photo','true');
    $gallery = UI_SimpleGallery::wps__get_simple_gallery( 'simple_gallery' );
    $description = get_post_meta($post->ID,'wp_editor',true);
    $repeater = UI_Repeater::wps__get_repeater( 'repeater' );

?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h1><?php the_title(); ?></h1>

    <!--Вывод изображения-->
    <div>
        <?php echo wp_get_attachment_image($image,'full') ?>
    </div>

    <!--Галерея фото-->
    <div>
        <h2>Галерея фото</h2>
        <?php foreach ($gallery as $gallery_item) :?>
            <div>
                <?php echo wp_get_attachment_image($gallery_item,'thumbnail') ?>
            </div>
        <?php endforeach; ?>
    </div>

    <!--Вывод описания-->
    <div>
        <h2>Описание</h2>
        <?php echo $description ?>
    </div>

    <!--Список работа (репитер)-->
    <div>

Полученный результат:

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

Улучшить свой AdWords

Получите 7 писем, о том, как можно улучшить свой аккаунт в AdWords

Вывод произвольных полей и типов записей в WPS Framework

Популярные статьи

Гайд по созданию сайта. Часть 5: фронт-часть

Как работать с системой GIT: делимся опытом

Гайд по созданию сайта. Часть 4: дизайн главной страницы

Гайд по созданию сайта. Часть 3: Что такое Landing Page?

Гайд по созданию сайта. Часть 2: UX-проектирование