«
»
cmb2WEBWordPressПлагины

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

Существует несколько плагинов, которые помогут вам добавить собственные мета-блоки в контент Вашего сайта на 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 (Код, о котором шла речь выше):

// 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

  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:
<span class="hljs-meta"><?php</span> $text_area = get_post_meta( get_the_ID(), <span class="hljs-string">'_sdstudio_wysiwyg'</span>, <span class="hljs-keyword">true</span> ); <span class="hljs-keyword">echo</span> esc_html( $text_area ); <span class="hljs-comment">// Other Exemples:</span> <span class="hljs-comment">//$text = get_post_meta( get_the_ID(), '_yourprefix_text', true );</span> <span class="hljs-comment">//$email = get_post_meta( get_the_ID(), '_yourprefix_email', true );</span> <span class="hljs-comment">//$url = get_post_meta( get_the_ID(), '_yourprefix_url', true );</span> <span class="hljs-comment">//echo esc_html( $text );</span> <span class="hljs-comment">//echo is_email( $email );</span> <span class="hljs-comment">//echo esc_url( $url );</span> <span class="hljs-meta">?></span>

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

Связанные записи
ElementorWordPressПлагиныПолезные сайты

Elementor - 10 потрясающих мест для поиска бесплатных или премиальных шаблонов

Chrome DevToolsGoogleGoogle ChromeWEB

Запускайте фрагменты JavaScript на любой странице с помощью Chrome DevTools

MailChimpWordPressПлагины

5 лучших плагинов WordPress для Mailchimp (большинство из них бесплатны)

WoocommerceWordPressПлагины

Дропшиппинг: Как импортировать продукты AliExpress в WooCommerce при помощи плагина DropshipMe