0
579
2019-02-16

Как добавить мета боксы в контент WordPress при помощи плагина CMB2

Инструкция по добавлению пользовательских мета-боксов в контент WordPress. Рассмотрим как добавлять meta box к сообщениям, страницам и даже страницам пользовательских типов сообщений.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Существует несколько плагинов, которые помогут вам добавить собственные мета-блоки в контент Вашего сайта на CMS WordPress. Все они имеют свои плюсы и минусы, и в конце концов Вами конечно же будет использоваться именно тот плагин (или не плагин, а код) который больше придется по душе. Моей душе очень даже понравился вариант добавления метабоксов при помощи плагина CMB2.

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

Установка плагина CMB2

Плагин CMB2 в магазине WordPress

Загрузить плагин можно по ссылке ниже:

https://ru.wordpress.org/plugins/cmb2/

Описание

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

Плагин CMB2 - это полное переписывание пользовательских метабоксов и полей для WordPress. Для начала следуйте примерам во включенном example-functions.php файле и ознакомьтесь с основными инструкциями по использованию .

Вы можете увидеть список доступных типов полей здесь .

Вклад

Разработка происходит на Github, и все взносы приветствуются разработчиками плагина. Пожалуйста, прочитайте ДОКУМЕНТАЦИЮ для более подробной информации.

Возможности

Создание файла в теме, для создания мета боксов в WP

  1. Установите плагин CMB2 в панели управления WordPress и активируйте его.
  2. Создайте новый файл в корне своей WordPress темы _SDStudio_CMB2-Meta-Boxes.php и сохраните его в /_SDStudio_CMB2-Meta-Boxes/ каталоге.
  3. В этом новом _SDStudio_CMB2-Meta-Boxes.php файле используйте пример кода, который я написал ниже. Данный код создан для продуктов Woocommerce, и я оставил в рабочем состоянии только данный сниппет:

    // Text Area
    $cmb->add_field( array(
        'name'    => __( 'Woocommerce - product description for carousel ', 'cmb2' ),
        'desc'    => __( 'Woocommerce - product description for carousel on the main page', 'cmb2' ),
        'id'      => $prefix . 'wysiwyg',
        'type'    => 'wysiwyg',
        'options' => array( 'textarea_rows' => 5, ),
    ) );

Который отвечает за вывод метабокса текстового поля:

Пример реализации метабокса для Woocommerce

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

Тип контента нужно указывать в строке 'object_types' => array( 'product', ), // Post type - Woocommerce product в данной части кода:

$cmb = new_cmb2_box( array(
    'id'            => 'test_metabox',
    'title'         => __( 'Test Metabox', 'cmb2' ),
    'object_types'  => array( 'product', ), // Post type - Woocommerce product
    'context'       => 'normal',
    'priority'      => 'high',
    'show_names'    => true, // Show field names on the left
    // 'cmb_styles' => false, // false to disable the CMB stylesheet
    // 'closed'     => true, // Keep the metabox closed by default
) );

Если Вам интересен оригинальный файл с примерами от разработчиков CMB2, Вы можете найти его здесь.

Теперь собственно сам код для файла _SDStudio_CMB2-Meta-Boxes.php (Код, о котором шла речь выше):

<?php

// Post:
// https://helpwp.com/add-meta-box-wordpress-theme/

// Exemples functions:
// https://github.com/CMB2/CMB2/blob/630d305c9f251631e92d2ec1e480bb0692daaf67/example-functions.php
// ================================

add_action( 'cmb2_admin_init', 'cmb2_sample_metaboxes' );
/**
 * Define the metabox and field configurations.
 */
function cmb2_sample_metaboxes() {

    // Start with an underscore to hide fields from custom fields list
//  $prefix = '_sdstudio_wysiwyg';
    $prefix = '_sdstudio_';

    /**
     * Initiate the metabox
     */
    $cmb = new_cmb2_box( array(
        'id'            => 'test_metabox',
        'title'         => __( 'Test Metabox', 'cmb2' ),
        'object_types'  => array( 'product', ), // Post type - Woocommerce product
        'context'       => 'normal',
        'priority'      => 'high',
        'show_names'    => true, // Show field names on the left
        // 'cmb_styles' => false, // false to disable the CMB stylesheet
        // 'closed'     => true, // Keep the metabox closed by default
    ) );

    // Text Area
    $cmb->add_field( array(
        'name'    => __( 'Woocommerce - product description for carousel ', 'cmb2' ),
        'desc'    => __( 'Woocommerce - product description for carousel on the main page', 'cmb2' ),
        'id'      => $prefix . 'wysiwyg',
        'type'    => 'wysiwyg',
        'options' => array( 'textarea_rows' => 5, ),
    ) );

/* OTHER FOR EXEMPLES:
*************************************************************
*************************************************************

    // Regular text field
    $cmb->add_field( array(
        'name'       => __( 'Test Text', 'cmb2' ),
        'desc'       => __( 'field description (optional)', 'cmb2' ),
        'id'         => $prefix . 'text',
        'type'       => 'text',
        'show_on_cb' => 'cmb2_hide_if_no_cats', // function should return a bool value
        // 'sanitization_cb' => 'my_custom_sanitization', // custom sanitization callback parameter
        // 'escape_cb'       => 'my_custom_escaping',  // custom escaping callback parameter
        // 'on_front'        => false, // Optionally designate a field to wp-admin only
        // 'repeatable'      => true,
    ) );

    // URL text field
    $cmb->add_field( array(
        'name' => __( 'Website URL', 'cmb2' ),
        'desc' => __( 'field description (optional)', 'cmb2' ),
        'id'   => $prefix . 'url',
        'type' => 'text_url',
        // 'protocols' => array('http', 'https', 'ftp', 'ftps', 'mailto', 'news', 'irc', 'gopher', 'nntp', 'feed', 'telnet'), // Array of allowed protocols
        // 'repeatable' => true,
    ) );

    // Email text field
    $cmb->add_field( array(
        'name' => __( 'Test Text Email', 'cmb2' ),
        'desc' => __( 'field description (optional)', 'cmb2' ),
        'id'   => $prefix . 'email',
        'type' => 'text_email',
        // 'repeatable' => true,
    ) );

    // This text_datetime_timestamp_timezone field type
    // is only compatible with PHP versions 5.3 or above.
    // Feel free to uncomment and use if your server meets the requirement
    // $cmb->add_field( array(
    //  'name' => __( 'Test Date/Time Picker/Time zone Combo (serialized DateTime object)', 'cmb2' ),
    //  'desc' => __( 'field description (optional)', 'cmb2' ),
    //  'id'   => $prefix . 'datetime_timestamp_timezone',
    //  'type' => 'text_datetime_timestamp_timezone',
    // ) );
    $cmb->add_field( array(
        'name' => __( 'Test Money', 'cmb2' ),
        'desc' => __( 'field description (optional)', 'cmb2' ),
        'id'   => $prefix . 'textmoney',
        'type' => 'text_money',
        // 'before_field' => '£', // override '$' symbol if needed
        // 'repeatable' => true,
    ) );
    $cmb->add_field( array(
        'name'    => __( 'Test Color Picker', 'cmb2' ),
        'desc'    => __( 'field description (optional)', 'cmb2' ),
        'id'      => $prefix . 'colorpicker',
        'type'    => 'colorpicker',
        'default' => '#ffffff',
        // 'attributes' => array(
        //  'data-colorpicker' => json_encode( array(
        //      'palettes' => array( '#3dd0cc', '#ff834c', '#4fa2c0', '#0bc991', ),
        //  ) ),
        // ),
    ) );
    $cmb->add_field( array(
        'name' => __( 'Test Text Area', 'cmb2' ),
        'desc' => __( 'field description (optional)', 'cmb2' ),
        'id'   => $prefix . 'textarea',
        'type' => 'textarea',
    ) );
    $cmb->add_field( array(
        'name' => __( 'Test Text Area Small', 'cmb2' ),
        'desc' => __( 'field description (optional)', 'cmb2' ),
        'id'   => $prefix . 'textareasmall',
        'type' => 'textarea_small',
    ) );
    $cmb->add_field( array(
        'name' => __( 'Test Text Area for Code', 'cmb2' ),
        'desc' => __( 'field description (optional)', 'cmb2' ),
        'id'   => $prefix . 'textarea_code',
        'type' => 'textarea_code',
    ) );
    $cmb->add_field( array(
        'name' => __( 'Test Title Weeeee', 'cmb2' ),
        'desc' => __( 'This is a title description', 'cmb2' ),
        'id'   => $prefix . 'title',
        'type' => 'title',
    ) );
    $cmb->add_field( array(
        'name'             => __( 'Test Select', 'cmb2' ),
        'desc'             => __( 'field description (optional)', 'cmb2' ),
        'id'               => $prefix . 'select',
        'type'             => 'select',
        'show_option_none' => true,
        'options'          => array(
            'standard' => __( 'Option One', 'cmb2' ),
            'custom'   => __( 'Option Two', 'cmb2' ),
            'none'     => __( 'Option Three', 'cmb2' ),
        ),
    ) );
    $cmb->add_field( array(
        'name'             => __( 'Test Radio inline', 'cmb2' ),
        'desc'             => __( 'field description (optional)', 'cmb2' ),
        'id'               => $prefix . 'radio_inline',
        'type'             => 'radio_inline',
        'show_option_none' => 'No Selection',
        'options'          => array(
            'standard' => __( 'Option One', 'cmb2' ),
            'custom'   => __( 'Option Two', 'cmb2' ),
            'none'     => __( 'Option Three', 'cmb2' ),
        ),
    ) );
    $cmb->add_field( array(
        'name'    => __( 'Test Radio', 'cmb2' ),
        'desc'    => __( 'field description (optional)', 'cmb2' ),
        'id'      => $prefix . 'radio',
        'type'    => 'radio',
        'options' => array(
            'option1' => __( 'Option One', 'cmb2' ),
            'option2' => __( 'Option Two', 'cmb2' ),
            'option3' => __( 'Option Three', 'cmb2' ),
        ),
    ) );
    $cmb->add_field( array(
        'name'     => __( 'Test Taxonomy Radio', 'cmb2' ),
        'desc'     => __( 'field description (optional)', 'cmb2' ),
        'id'       => $prefix . 'text_taxonomy_radio',
        'type'     => 'taxonomy_radio',
        'taxonomy' => 'category', // Taxonomy Slug
        // 'inline'  => true, // Toggles display to inline
    ) );
    $cmb->add_field( array(
        'name'     => __( 'Test Taxonomy Select', 'cmb2' ),
        'desc'     => __( 'field description (optional)', 'cmb2' ),
        'id'       => $prefix . 'taxonomy_select',
        'type'     => 'taxonomy_select',
        'taxonomy' => 'category', // Taxonomy Slug
    ) );
    $cmb->add_field( array(
        'name'     => __( 'Test Taxonomy Multi Checkbox', 'cmb2' ),
        'desc'     => __( 'field description (optional)', 'cmb2' ),
        'id'       => $prefix . 'multitaxonomy',
        'type'     => 'taxonomy_multicheck',
        'taxonomy' => 'post_tag', // Taxonomy Slug
        // 'inline'  => true, // Toggles display to inline
    ) );
    $cmb->add_field( array(
        'name' => __( 'Test Checkbox', 'cmb2' ),
        'desc' => __( 'field description (optional)', 'cmb2' ),
        'id'   => $prefix . 'checkbox',
        'type' => 'checkbox',
    ) );
    $cmb->add_field( array(
        'name'    => __( 'Test Multi Checkbox', 'cmb2' ),
        'desc'    => __( 'field description (optional)', 'cmb2' ),
        'id'      => $prefix . 'multicheckbox',
        'type'    => 'multicheck',
        // 'multiple' => true, // Store values in individual rows
        'options' => array(
            'check1' => __( 'Check One', 'cmb2' ),
            'check2' => __( 'Check Two', 'cmb2' ),
            'check3' => __( 'Check Three', 'cmb2' ),
        ),
        // 'inline'  => true, // Toggles display to inline
    ) );

//  Маленькое текстовое поле

    $cmb->add_field( array(
        'name'    => __( 'Test wysiwyg', 'cmb2' ),
        'desc'    => __( 'field description (optional)', 'cmb2' ),
        'id'      => $prefix . 'wysiwyg',
        'type'    => 'wysiwyg',
        'options' => array( 'textarea_rows' => 5, ),
    ) );

    $cmb->add_field( array(
        'name' => __( 'Test Image', 'cmb2' ),
        'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ),
        'id'   => $prefix . 'image',
        'type' => 'file',
    ) );
    $cmb->add_field( array(
        'name'         => __( 'Multiple Files', 'cmb2' ),
        'desc'         => __( 'Upload or add multiple images/attachments.', 'cmb2' ),
        'id'           => $prefix . 'file_list',
        'type'         => 'file_list',
        'preview_size' => array( 100, 100 ), // Default: array( 50, 50 )
    ) );
    $cmb->add_field( array(
        'name' => __( 'oEmbed', 'cmb2' ),
        'desc' => __( 'Enter a youtube, twitter, or instagram URL. Supports services listed at <a href="http://codex.wordpress.org/Embeds">http://codex.wordpress.org/Embeds</a>.', 'cmb2' ),
        'id'   => $prefix . 'embed',
        'type' => 'oembed',
    ) );
    $cmb->add_field( array(
        'name'         => 'Testing Field Parameters',
        'id'           => $prefix . 'parameters',
        'type'         => 'text',
        'before_row'   => 'yourprefix_before_row_if_2', // callback
        'before'       => '<p>Testing <b>"before"</b> parameter</p>',
        'before_field' => '<p>Testing <b>"before_field"</b> parameter</p>',
        'after_field'  => '<p>Testing <b>"after_field"</b> parameter</p>',
        'after'        => '<p>Testing <b>"after"</b> parameter</p>',
        'after_row'    => '<p>Testing <b>"after_row"</b> parameter</p>',
    ) );
    // Add other metaboxes as needed

$cmb->add_field( array(
        'name'       => __( 'Test Text', 'cmb2' ),
        'desc'       => __( 'field description (optional)', 'cmb2' ),
        'id'         => $prefix . 'text',
        'type'       => 'text',
        'show_on_cb' => 'yourprefix_hide_if_no_cats', // function should return a bool value
        // 'sanitization_cb' => 'my_custom_sanitization', // custom sanitization callback parameter
        // 'escape_cb'       => 'my_custom_escaping',  // custom escaping callback parameter
        // 'on_front'        => false, // Optionally designate a field to wp-admin only
        // 'repeatable'      => true,
        // 'column'          => true, // Display field value in the admin post-listing columns
    ) );

    $cmb->add_field( array(
        'name' => __( 'Test Text Small', 'cmb2' ),
        'desc' => __( 'field description (optional)', 'cmb2' ),
        'id'   => $prefix . 'textsmall',
        'type' => 'text_small',
        // 'repeatable' => true,
        // 'column' => array(
        //  'name'     => __( 'Column Title', 'cmb2' ), // Set the admin column title
        //  'position' => 2, // Set as the second column.
        // );
        // 'display_cb' => 'yourprefix_display_text_small_column', // Output the display of the column values through a callback.
    ) );

    $cmb->add_field( array(
        'name' => __( 'Test Text Medium', 'cmb2' ),
        'desc' => __( 'field description (optional)', 'cmb2' ),
        'id'   => $prefix . 'textmedium',
        'type' => 'text_medium',
        // 'repeatable' => true,
    ) );

    $cmb->add_field( array(
        'name' => __( 'Custom Rendered Field', 'cmb2' ),
        'desc' => __( 'field description (optional)', 'cmb2' ),
        'id'   => $prefix . 'render_row_cb',
        'type' => 'text',
        'render_row_cb' => 'yourprefix_render_row_cb',
    ) );

    $cmb->add_field( array(
        'name' => __( 'Website URL', 'cmb2' ),
        'desc' => __( 'field description (optional)', 'cmb2' ),
        'id'   => $prefix . 'url',
        'type' => 'text_url',
        // 'protocols' => array('http', 'https', 'ftp', 'ftps', 'mailto', 'news', 'irc', 'gopher', 'nntp', 'feed', 'telnet'), // Array of allowed protocols
        // 'repeatable' => true,
    ) );

    $cmb->add_field( array(
        'name' => __( 'Test Text Email', 'cmb2' ),
        'desc' => __( 'field description (optional)', 'cmb2' ),
        'id'   => $prefix . 'email',
        'type' => 'text_email',
        // 'repeatable' => true,
    ) );

    $cmb->add_field( array(
        'name' => __( 'Test Time', 'cmb2' ),
        'desc' => __( 'field description (optional)', 'cmb2' ),
        'id'   => $prefix . 'time',
        'type' => 'text_time',
        // 'time_format' => 'H:i', // Set to 24hr format
    ) );

    $cmb->add_field( array(
        'name' => __( 'Time zone', 'cmb2' ),
        'desc' => __( 'Time zone', 'cmb2' ),
        'id'   => $prefix . 'timezone',
        'type' => 'select_timezone',
    ) );
    $cmb->add_field( array(
        'name' => __( 'Test Date Picker', 'cmb2' ),
        'desc' => __( 'field description (optional)', 'cmb2' ),
        'id'   => $prefix . 'textdate',
        'type' => 'text_date',
        // 'date_format' => 'Y-m-d',
    ) );

    $cmb->add_field( array(
        'name' => __( 'Test Date Picker (UNIX timestamp)', 'cmb2' ),
        'desc' => __( 'field description (optional)', 'cmb2' ),
        'id'   => $prefix . 'textdate_timestamp',
        'type' => 'text_date_timestamp',
        // 'timezone_meta_key' => $prefix . 'timezone', // Optionally make this field honor the timezone selected in the select_timezone specified above
    ) );

    $cmb->add_field( array(
        'name' => __( 'Test Date/Time Picker Combo (UNIX timestamp)', 'cmb2' ),
        'desc' => __( 'field description (optional)', 'cmb2' ),
        'id'   => $prefix . 'datetime_timestamp',
        'type' => 'text_datetime_timestamp',
    ) );
OTHER FOR EXEMPLES:
*************************************************************
*************************************************************/  

}

/*

To display the content on the frontend:

    $text  = get_post_meta( get_the_ID(), '_yourprefix_text', true );
    $email = get_post_meta( get_the_ID(), '_yourprefix_email', true );
    $url   = get_post_meta( get_the_ID(), '_yourprefix_url', true );
    echo esc_html( $text );
    echo is_email( $email );
    echo esc_url( $url );

*/

Подключение файла _SDStudio_CMB2-Meta-Boxes.php в тему WordPress

  1. Добавьте данный код в Ваш файл function.php:

    /**
     * Meta Boxes.
     * START
     */
    
        require_once(__DIR__.'/_SDStudio_CMB2-Meta-Boxes/_SDStudio_CMB2-Meta-Boxes.php');
    
    /**
     * END
     * Meta Boxes.
     */
  2. Откройте любой товар Woocommerce (или одну из своих страниц если Вы указали 'object_types' => array( 'page', ) ) из панели управления WordPress и убедитесь, что в мета-полях отображаются и сохраняются введенные вами данные.

Отображение контента метабоксов на внешней стороне сайта

  1. Теперь, когда у нас есть данные, сохраненные в бэкэнде, нам нужно отобразить контент в веб-интерфейсе. Для этого добавьте следующий код в _SDStudio_CMB2-Meta-Boxes.php:

    <?php
        $text_area  = get_post_meta( get_the_ID(), '_sdstudio_wysiwyg', true );
        echo esc_html( $text_area );
    
        // Other Exemples:
        //$text  = get_post_meta( get_the_ID(), '_yourprefix_text', true );
        //$email = get_post_meta( get_the_ID(), '_yourprefix_email', true );
        //$url   = get_post_meta( get_the_ID(), '_yourprefix_url', true );
        //echo esc_html( $text );
        //echo is_email( $email );
        //echo esc_url( $url );
    ?>

Хорошее видео для работы с CBM2