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

cmb2WEBWordPress

Последнее обновление Сен 22, 2021

Содержание

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

Описание

Вклад

Возможности

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

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

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

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

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

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

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

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

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

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

Описание

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

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

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

Вклад

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

Возможности

Создавайте метабоксы для использования на страницах редактирования сообщений.
Создавайте формы для использования на страницах параметров .
Создавайте формы для обработки пользовательских мета полей и отображайте их на страницах добавления / редактирования профиля пользователя.
Создавайте формы для обработки мета-терминов и отображайте их везде, где используются ваши таксономии.
Гибкий API, который позволяет использовать формы CMB практически в любом месте, даже на внешнем интерфейсе .
Несколько типов полей включены по умолчанию .
Пользовательский хук API, который позволяет создавать собственные типы полей .
Существует множество хуков и фильтров, позволяющих изменять многие аспекты библиотеки (без непосредственного редактирования).
Поддерживаются повторяемые поля для большинства типов полей, а также повторяемые группы полей.
CMB2 безопасен для любого проекта.

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

Установите плагин CMB2 в панели управления WordPress и активируйте его.
Создайте новый файл в корне своей WordPress темы _SDStudio_CMB2-Meta-Boxes.php и сохраните его в /_SDStudio_CMB2-Meta-Boxes/ каталоге.

В этом новом _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, ),
) );

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

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

Тип контента нужно указывать в строке '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 (Код, о котором шла речь выше):


// 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 http://codex.wordpress.org/Embeds.', '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'       => 'Testing "before" parameter',
        'before_field' => 'Testing "before_field" parameter',
        'after_field'  => 'Testing "after_field" parameter',
        'after'        => 'Testing "after" parameter',
        'after_row'    => 'Testing "after_row" parameter',
    ) );
    // 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

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


/**
 * Meta Boxes.
 * START
 */

    require_once(__DIR__.'/_SDStudio_CMB2-Meta-Boxes/_SDStudio_CMB2-Meta-Boxes.php');

/**
 * END
 * Meta Boxes.
 */

Откройте любой товар Woocommerce (или одну из своих страниц если Вы указали 'object_types' => array( 'page', ) ) из панели управления WordPress и убедитесь, что в мета-полях отображаются и сохраняются введенные вами данные.

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

Теперь, когда у нас есть данные, сохраненные в бэкэнде, нам нужно отобразить контент в веб-интерфейсе. Для этого добавьте следующий код в _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

Источник записи: