Как вывесть на страницу картинку (Wordpress)?

Question

[RushV]

Всем привет!
Как реализовать на странице загрузка дополнительного фото?
Нашёл вот такой код а как вывести на страницу не знаю.

function add_custom_meta_boxes() {
 
    // Define the custom attachment for posts
    add_meta_box(
        'wp_custom_attachment',
        'Custom Attachment',
        'wp_custom_attachment',
        'post',
        'side'
    );
     
    // Define the custom attachment for pages
    add_meta_box(
        'wp_custom_attachment',
        'Custom Attachment',
        'wp_custom_attachment',
        'page',
        'side'
    );
 
} // end add_custom_meta_boxes
add_action('add_meta_boxes', 'add_custom_meta_boxes');

function wp_custom_attachment() {
 
    wp_nonce_field(plugin_basename(__FILE__), 'wp_custom_attachment_nonce');
     
    $html = '<p class="description">';
    $html .= 'Фон загаловка страницы.';
    $html .= '</p>';
    $html .= '<input type="file" id="wp_custom_attachment" name="wp_custom_attachment" value="" size="25" />';
     
    echo $html;
 
} // end wp_custom_attachment

После добавления этого кода на странице появилось дополнительное поле для загрузки файла

Answer 1

[Борис Черепанов]

Вообще выводиться это с помощью функции get_post_meta($postID, 'meta_box_id', true);
Но в вашем коде нет обработчика сохранения данных.
Вам нужно не только отобразить виджет в админке, но и по событию save_post сохранить то что вы в него положили.
Пример кода

function fgb_fs_gallery_id_callback( $post, $meta ){
    $screens = $meta['args'];
    // Используем nonce для верификации
    wp_nonce_field( plugin_basename(__FILE__), 'fgb_fsg_id_noncename' );
    // Поля формы для введения данных
    echo '<label for="fgb_fsg_id">' . __("Put gallery id", 'fgb' ) . '</label> ';
    echo '<input type="text" id= "fgb_fsg_id" name="fgb_fsg_id" size="2"  value="'. get_post_meta( $post->ID, '_fgb_fsg_id',true ) .'"/>';
}
// Сохраняем данные, когда пост сохраняется
add_action( 'save_post', 'fgb_fsg_id_save_postdata' );
function fgb_fsg_id_save_postdata( $post_id ) {
    // Убедимся что поле установлено.
    if ( ! isset( $_POST['fgb_fsg_id'] ) )
        return;
    // проверяем nonce нашей страницы, потому что save_post может быть вызван с другого места.
    if ( ! wp_verify_nonce( $_POST['fgb_fsg_id_noncename'], plugin_basename(__FILE__) ) )
        return;
    // если это автосохранение ничего не делаем
    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
        return;
    // проверяем права юзера
    if( ! current_user_can( 'edit_post', $post_id ) )
        return;
    // Все ОК. Теперь, нужно найти и сохранить данные
    // Очищаем значение поля input.
    $my_data = sanitize_text_field( $_POST['fgb_fsg_id'] );
    // Обновляем данные в базе данных.
    update_post_meta( $post_id, '_fgb_fsg_id', $my_data );
}

Я недавно реализовывал галерею на wordpress, возможно вы делаете что-то похожее. Посмотрите здесь

Comments

[RushV]

Нашёл часть кода где сохраняет данные страницы
Но есть проблема при обновлении страницы пишет вот:

"Файл не выбран"
но фото отображаться и сохранился в базе данных всё ок.

function add_custom_meta_boxes() {
 
    // Define the custom attachment for posts
    add_meta_box(
        'wp_custom_attachment',
        'Custom Attachment',
        'wp_custom_attachment',
        'post',
        'side'
    );
     
    // Define the custom attachment for pages
    add_meta_box(
        'wp_custom_attachment',
        'Custom Attachment',
        'wp_custom_attachment',
        'page',
        'side'
    );
 
} // end add_custom_meta_boxes
add_action('add_meta_boxes', 'add_custom_meta_boxes');

function wp_custom_attachment() {
 
    wp_nonce_field(plugin_basename(__FILE__), 'wp_custom_attachment_nonce');
     
    $html = '<p class="description">';
        $html .= 'Upload your jpg here.';
    $html .= '</p>';
    $html .= '<input type="file" id="wp_custom_attachment" name="wp_custom_attachment" value="" size="25" />';
     
    echo $html;
 
} // end wp_custom_attachment

function save_custom_meta_data($id) {
 
    /* --- security verification --- */
    if(!wp_verify_nonce($_POST['wp_custom_attachment_nonce'], plugin_basename(__FILE__))) {
      return $id;
    } // end if
       
    if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
      return $id;
    } // end if
       
    if('page' == $_POST['post_type']) {
      if(!current_user_can('edit_page', $id)) {
        return $id;
      } // end if
    } else {
        if(!current_user_can('edit_page', $id)) {
            return $id;
        } // end if
    } // end if
    /* - end security verification - */
     
    // Make sure the file array isn't empty
    if(!empty($_FILES['wp_custom_attachment']['name'])) {
         
        // Setup the array of supported file types. In this case, it's just PDF.
        $supported_types = array('image/jpeg');
         
        // Get the file type of the upload
        $arr_file_type = wp_check_filetype(basename($_FILES['wp_custom_attachment']['name']));
        $uploaded_type = $arr_file_type['type'];
         
        // Check if the type is supported. If not, throw an error.
        if(in_array($uploaded_type, $supported_types)) {
 
            // Use the WordPress API to upload the file
            $upload = wp_upload_bits($_FILES['wp_custom_attachment']['name'], null, file_get_contents($_FILES['wp_custom_attachment']['tmp_name']));
     
            if(isset($upload['error']) && $upload['error'] != 0) {
                wp_die('There was an error uploading your file. The error is: ' . $upload['error']);
            } else {
                add_post_meta($id, 'wp_custom_attachment', $upload);
                update_post_meta($id, 'wp_custom_attachment', $upload);     
            } // end if/else
 
        } else {
            wp_die("The file type that you've uploaded is not a jpg.");
        } // end if/else
         
    } // end if
     
} // end save_custom_meta_data
add_action('save_post', 'save_custom_meta_data');

function update_edit_form() {
    echo ' enctype="multipart/form-data"';
} // end update_edit_form
add_action('post_edit_form_tag', 'update_edit_form');

[Борис Черепанов]

RushV, В функции wp_custom_attachment вы должны проверять есть ли данные или нет (например через get_post_meta) и если есть то написать другой текст в и вывести картинки перед инпутом

[RushV]

Борис Черепанов, А сложно написать проверку? Просто я с PHP не особо лажу полный чайник(

[Борис Черепанов]

get_post_meta($post->id, 'название мета поля', false) - вернёт массив.

Можно проверить так

$arrImg = get_post_meta($post->id, 'название мета поля', false);
if(empty($arrImg)){
  // Выводите то что было раньше 
$html = '<p class="description">';
        $html .= 'Upload your jpg here.';
    $html .= '</p>';
    $html .= '<input type="file" id="wp_custom_attachment" name="wp_custom_attachment" value="" size="25" />';
     
    echo $html;
} else {
    // Выводите то что нужно вывести если уже есть картинки
}

[RushV]

Борис Черепанов, В этом коде что выше в начале комментария я заметил один недостаток. Фото размещает всё ок , а вот удалить кнопки нет. Можно ли сделать
кнопку удаления картинки?

[Борис Черепанов]

Можно, но вам придётся помучатся с js-ом и php

[RushV]

Борис Черепанов, JS я знаю - не на 100% но знаю, а вот PHP для меня проблема.
Спасибо вам за помощь!

[RushV]

Такой вопрос можно ли обойтись без PHP при создании кнопки удаление фото с страницы?