Wordpress

Дополнительное поле в WordPress

• 12-07-2018 •

Что если вам нужно вводить на каждую статью или страницу больше информации, чем позволяет это wordpress изначально?. Что если нам нужно вводить пару слов, которые будут отображаться в определенном месте на сайте? К примеру картинки аккордов к тексту или флаг страны.

Для этого решения есть функция «произвольные поля» или «meta fields«

Как добавить мета поля к себе на сайт?

Весь функционал можно писать сразу в файл functions.php , но я советую создать отдельный файл, т.к. потом легче будет найти, вставить его в папку inc и подключить в файле functions.php

Предположим мы называли файл meta-field.php, тогда подключение будет выглядить следующим образом:


require get_template_directory() . '/inc/meta-field.php';

Теперь, в этом файле пишем следующее


add_action('admin_init', 'meta_custom', 1);
function meta_custom() {
    add_meta_box( 'meta_box', 'Дополнительная информация', 'meta_func', 'post', 'normal', 'high' );
}

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

Дальше мы будем создавать сами поля. Мы создадим поле, для загрузки дополнительной картинки и еще одно поле для текста


function meta_func( $post ){
    ?> 
     <div>  
	  <label style="font-weight: bold; padding-top:20px; font-size: 20px;display:block;">Картинка</label><br>  
	   <div>  
	    <input type="text" placeholder="Image link" name="extra[img]" value="<?php echo get_post_meta($post->ID, "img", true); ?>" style="width: 70%">
	    <input type="button" class="buttoncam" value="SelectPhoto">  
	   </div>  
	  <div>  
	   <input type="text" placeholder="Title" name="extra[title]" value="<?php echo get_post_meta($post->ID, "title", true); ?>" style="width: 70%">  
	  </div>  
	 </div> 
     <input type="hidden" name="extra_fields_nonce" value="<?php echo wp_create_nonce(__FILE__); ?>" /> 


    <script>
        jQuery(document).ready(function () {
            jQuery('.buttoncam').click(function (e) {
                e.preventDefault();
                var inp = jQuery(this).siblings('input');
                var image = wp.media({
                    title: 'Upload Image',
                    multiple: false
                }).open()
                    .on('select', function (e) {
                        var uploaded_image = image.state().get('selection').first();
                        var image_url = uploaded_image.toJSON().url;
                        inp.val(image_url);
                    });
            });

        });
    </script>

    <?php
}

В первую очередь, обратите внимание на название функции, оно точно такое же, как мы писали в add_meta_box. Дальше стоит обратить внимание на поля input. Атрибут name, имеет название extra, а в квадратных скобках дополнительное название соответсвующее полю. Это нужно для того, чтобы упростить сохранение значения, которое мы напишем чуть ниже.

Дальше идет value, в него мы пишем:


echo get_post_meta($post->ID, "img", true);

Для того, чтобы видеть сохраненное значение данного поля.

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


<input type="hidden" name="extra_fields_nonce" value="<?php echo wp_create_nonce(__FILE__); ?>" /> 

Дальше у нас идет скрипт, который отвечает за добавление ссылки картинки в поле. При нажатии на кнопку .buttoncam, откроется стандартное wordpress поле, для выбора картинки и когда по стандартной схеме мы выбираем картинку, он добавляет ссылку картинки в соседнее поле, которое рядом с кнопкой, для этого я поместил input и button в один div.

Визуальная часть у нас готова, теперь осталось при сохранении записи, сохранять наши мета значения.

Как сохранить все мета поля


add_action('save_post', 'meta_save', 0);

function meta_save( $post_id ){
    if ( !wp_verify_nonce($_POST['extra_fields_nonce'], __FILE__) ) return false;
    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE  ) return false;
    if ( !current_user_can('edit_post', $post_id) ) return false;
    if( !isset($_POST['extra']) ) return false;
    $_POST['extra'] = array_map('trim', $_POST['extra']);
    foreach( $_POST['extra'] as $key=>$value ){
        if( empty($value) ) {
            delete_post_meta($post_id, $key);
            continue;
        }
        update_post_meta($post_id, $key, $value);
    }

    return $post_id;
}

Перед сохранением мы проверяем следующее:

  • На наличие нашего уникального поля с названием extra_fields_nonce
  • Дальше мы проверяем что пост не делает autosave
  • Пользователь который редактирует пост имеет права
  • Есть ли поля с названием extra

Если все по феншую, то проходимся по всем полям с названием extra и сохраняем их значения.

Вот и все дела, надеюсь статья была вам полезна! Так же можете почитать, как создать несколько языков на wordpress?

Добавить комментарий