Как добавить пользовательские поля к изображениям для текста источника изображения и URL.

Вопрос или проблема

Как мне добавить два пользовательских поля к изображению, чтобы я мог ввести текст для названия источника, например: Shutterstock и затем ссылку на это текстовое поле во втором пользовательском поле URL, например: shutterstock.com

Некоторые решения, которые существуют, не работают или устарели.

add_filter( ‘attachment_fields_to_edit’, ‘ac_add_image_source’, 10, 2 );

function ac_add_image_source( $form_fields, $post ) {

$form_fields['source_name'] = array(
    'label' => __('Название источника'),
    'input' => 'text',
    'value' => get_post_meta( $post->ID, '_wp_attachment_source_name', true ),
    'helps' => __('Введите название источника изображения'),
);

$form_fields['source_url'] = array(
    'label' => __('URL источника'),
    'input' => 'text',
    'value' => get_post_meta( $post->ID, '_wp_attachment_source_url', true ),
    'helps' => __('Введите URL, где изначально было опубликовано изображение'),
);

return $form_fields;

}

/**
* Сохранение полей кредита
*
*/
add_filter( ‘attachment_fields_to_save’, ‘ac_save_image_source’, 10 , 2 );

function ac_save_image_source( $post, $attachment ) {

if ( isset( $attachment['source_name'] ) ) {
    $source_name = get_post_meta( $post['ID'], '_wp_attachment_source_name', true );
    if ( $source_name != esc_attr( $attachment['source_name'] ) ) {
        if ( empty( $attachment['source_name'] ) )
            delete_post_meta( $post['ID'], '_wp_attachment_source_name' );
        else
            update_post_meta( $post['ID'], '_wp_attachment_source_name', esc_attr( $attachment['source_name'] ) );
    }
}

if ( isset( $attachment['source_url'] ) ) {
    $source_name = get_post_meta( $post['ID'], '_wp_attachment_source_url', true );
    if ( $source_name != esc_attr( $attachment['source_url'] ) ) {
        if ( empty( $attachment['source_url'] ) )
            delete_post_meta( $post['ID'], '_wp_attachment_source_url' );
        else
            update_post_meta( $post['ID'], '_wp_attachment_source_url', esc_attr( $attachment['source_url'] ) );
    }
}

return $post;

}

Существует несколько разных способов достижения этого.

Самый очевидный способ – использовать два существующих поля изображения – вы уже используете Заголовок, подпись, альтернативный текст и описание? Если нет, они доступны, и вы можете просто добавить немного кода в ваш шаблон, чтобы использовать (скажем) подпись в качестве ссылки и описание в качестве источника.

Если это кажется запутанным или если вы уже используете поля изображения, вы можете также использовать плагин, чтобы сделать категории доступными для медиафайлов. Я недавно использовал этот с некоторым успехом:
https://wordpress.org/plugins/wp-media-library-categories/

С добавлением нескольких строк кода это позволяет хранить категории изображений отдельно от обычных категорий постов:

/**
* отделить медиа-категории от категорий постов
* используйте пользовательскую категорию 'category_media' для категорий в медиабиблиотеке
*/
add_filter( 'wpmediacategory_taxonomy', function(){ return 'category_media'; } );

Таким образом, вы можете хранить источники как медиа-категории, помещая URL в поле описания категории. Преимуществом этого подхода будет то, что вы сможете глобально изменять URL источников, не меняя данные отдельных изображений.

Надеюсь, это поможет.

ИЗМЕНЕНИЕ

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

$source_url = get_post_meta(get_post_thumbnail_id(get_the_ID()),'_wp_attachment_source_url', true);
$source_name = get_post_meta(get_post_thumbnail_id(get_the_ID()),'_wp_attachment_source_name', true); ?>
<a href="https://wordpress.stackexchange.com/questions/240666/<?php echo $source_url; ?>"><?php echo $source_name; ?></a>

Сообщите мне, если у вас возникнут проблемы.

ИЗМЕНЕНИЕ 2

В ответ на запрос первоначального автора вот фильтр для incorporación новой сохраненной информации о источнике в изображения, вставленные через редактор WordPress. Эта функция и фильтр также нужно поместить в файл functions.php. Это проверяет, существуют ли как ссылка, так и название источника. Если они есть, он выводит перенос строки и ссылку на источник, открывающуюся в новом окне.

function image_add_caption_with_source( $html, $id, $caption, $title, $align, $url, $size, $alt="" ) {

  /**
   * Фильтрует текст подписи и добавляет информацию о источнике.
   *
   * Примечание: Если текст подписи пуст, то краткое содержание подписи не будет добавлено
   * к HTML изображения, когда оно вставлено в редактор.
   *
   * Передача пустого значения также предотвращает обработку {@see 'image_add_caption_shortcode'}
   * Фильтры в конце image_add_caption().
   *
   * @since 4.1.0
   *
   * @param string $caption Исходный текст подписи.
   * @param int    $id      ID вложения.
   */
  $caption = apply_filters( 'image_add_caption_text', $caption, $id );
  $source_url = get_post_meta($id,'_wp_attachment_source_url', true);
  $source_name = get_post_meta($id,'_wp_attachment_source_name', true);
  /**
   * Фильтрует возможность отключения подписей.
   *
   * Предотвращает добавление подписей изображений к HTML изображениям, когда они вставляются в редактор.
   *
   * @since 2.6.0
   *
   * @param bool $bool Нужно ли отключить добавление подписей. Возвращение true на фильтр
   *                   отключит подписи. По умолчанию пустая строка.
   */
  if ( empty($caption) || apply_filters( 'disable_captions', '' ) )
    return $html;

  $id = ( 0 < (int) $id ) ? 'attachment_' . $id : '';

  if ( ! preg_match( '/width=["\']([0-9]+)/', $html, $matches ) )
    return $html;

  $width = $matches[1];

  $caption = str_replace( array("\r\n", "\r"), "\n", $caption);
  $caption = preg_replace_callback( '/<[a-zA-Z0-9]+(?: [^<>]+>)*/', '_cleanup_image_add_caption', $caption );

  // Конвертировать оставшиеся переносы строк в <br>.
  $caption = preg_replace( '/[ \n\t]*\n[ \t]*/', '<br />', $caption );

  $html = preg_replace( '/(class=["\'][^\'"]*)align(none|left|right|center)\s?/', '$1', $html );
  if($source_url && $source_name):
   $source="<br /><a target="_blank" href="".$source_url.'">'.$source_name.'</a>';
  else:
   $source = "";
  endif;
  if ( empty($align) )
    $align = 'none';

  $shcode="' . $html . ' ' . $caption . $source . '';

  /**
   * Фильтрует HTML-разметку изображения, включая краткое содержание подписи.
   *
   * @since 2.6.0
   *
   * @param string $shcode HTML-разметка изображения с кратким содержанием подписи.
   * @param string $html   HTML-разметка изображения.
   */

  return apply_filters( 'image_add_caption_shortcode', $shcode, $html );
}

// удалить существующий фильтр
remove_filter( 'image_send_to_editor', 'image_add_caption', 20, 8 );
// добавить новый фильтр
add_filter( 'image_send_to_editor', 'image_add_caption_with_source', 20, 8 ); 

Ответ или решение

Как добавить пользовательские поля к изображениям для текста источника и URL

В современных системах управления контентом, таких как WordPress, возможности персонализации полей для медиафайлов предоставляют мощные инструменты для улучшения пользовательского опыта и повышения SEO. Если вам необходимо добавить два пользовательских поля к изображениям, чтобы указать имя источника (например, Shutterstock) и ссылку на него (например, shutterstock.com), вы можете следовать приведённым ниже инструкциям.

1. Регистрация пользовательских полей

Для начала необходимо зарегистрировать пользовательские поля для вложений (изображений). Это делается с помощью хуков WordPress attachment_fields_to_edit и attachment_fields_to_save. Вставьте следующий код в файл functions.php вашей темы:

add_filter('attachment_fields_to_edit', 'ac_add_image_source', 10, 2);

function ac_add_image_source($form_fields, $post) {
    $form_fields['source_name'] = array(
        'label' => __('Source Name'),
        'input' => 'text',
        'value' => get_post_meta($post->ID, '_wp_attachment_source_name', true),
        'helps' => __('Add the name of the image source'),
    );

    $form_fields['source_url'] = array(
        'label' => __('Source URL'),
        'input' => 'text',
        'value' => get_post_meta($post->ID, '_wp_attachment_source_url', true),
        'helps' => __('Add the URL where the original image was posted'),
    );

    return $form_fields;
}

2. Сохранение значений пользовательских полей

После того как добавлены пользовательские поля, необходимо реализовать логику их сохранения. Для этого используем следующий код:

add_filter('attachment_fields_to_save', 'ac_save_image_source', 10, 2);

function ac_save_image_source($post, $attachment) {
    if (isset($attachment['source_name'])) {
        if (empty($attachment['source_name'])) {
            delete_post_meta($post['ID'], '_wp_attachment_source_name');
        } else {
            update_post_meta($post['ID'], '_wp_attachment_source_name', esc_attr($attachment['source_name']));
        }
    }

    if (isset($attachment['source_url'])) {
        if (empty($attachment['source_url'])) {
            delete_post_meta($post['ID'], '_wp_attachment_source_url');
        } else {
            update_post_meta($post['ID'], '_wp_attachment_source_url', esc_attr($attachment['source_url']));
        }
    }

    return $post;
}

3. Вывод значений пользовательских полей

Теперь, когда пользовательские поля добавлены и данные сохраняются, вам нужно вывести эти значения на вашем сайте. Например, следующий код выводит источник и его ссылку в виде HTML:

$source_url = get_post_meta(get_post_thumbnail_id(get_the_ID()), '_wp_attachment_source_url', true);
$source_name = get_post_meta(get_post_thumbnail_id(get_the_ID()), '_wp_attachment_source_name', true);

if ($source_url && $source_name): 
    echo '<a href="' . esc_url($source_url) . '" target="_blank">' . esc_html($source_name) . '</a>';
endif;

4. Применение пользовательских полей в изображениях

Чтобы дополнительно интегрировать информацию о поле источника в HTML-код изображений, можно использовать фильтры. Вот пример кода, который добавляет текст источника в HTML изображения с использованием функции image_send_to_editor:

function image_add_caption_with_source($html, $id, $caption, $title, $align, $url, $size, $alt = "") {
    $caption = apply_filters('image_add_caption_text', $caption, $id);
    $source_url = get_post_meta($id, '_wp_attachment_source_url', true);
    $source_name = get_post_meta($id, '_wp_attachment_source_name', true);

    if (!empty($caption)) {
        $html .= '<div class="caption">' . esc_html($caption);
        if ($source_url && $source_name) {
            $html .= '<br/><a href="' . esc_url($source_url) . '" target="_blank">' . esc_html($source_name) . '</a>';
        }
        $html .= '</div>';
    }

    return $html;
}

remove_filter('image_send_to_editor', 'image_add_caption', 20, 8);
add_filter('image_send_to_editor', 'image_add_caption_with_source', 20, 8);

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

Заключение

Добавление пользовательских полей к изображениям поможет вам эффективно управлять атрибуцией изображений на вашем сайте, что также позитивно скажется на SEO. Советуем обратить внимание на аккуратное использование пользовательских полей, чтобы не загромождать интерфейс и обеспечить лучшую читаемость.

С помощью вышеуказанных шагов вы с легкостью сможете интегрировать пользовательские поля с именами и URL источников для изображений в вашей системе WordPress. Это улучшит взаимодействие с пользователями и поможет избежать возможных проблем с авторскими правами.

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

Капча загружается...