Как добавить короткий код в тег изображения HTML

Содержание

Вопрос или проблема
Ответ или решение
Проблема
Решение
Как использовать
Заключение

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

Я хочу добавить временную метку, чтобы использовать её в качестве уникального идентификатора для отслеживания конверсий.

У меня есть [[timestamp]] шорткод на моем сайте. В тексте он работает хорошо, но шорткод не работает, когда помещается внутрь атрибута src тега изображения, например:

<img src="http://example.com/transaction_id=[[timestamp]]">

Кто-нибудь знает решение этой проблемы?

Шорткод, который я использую:

// Шорткод временной метки ( timestamper() ) 
function timestamper( $atts ){

  if (!is_admin()) {
    add_filter('widget_text', 'do_shortcode', 11);
  }
  $time = current_time( 'timestamp' );
  return $time;
}

add_shortcode( 'timestamp', 'timestamper' );

Я вставил шорткод в HTML код:

`<img src="http://oa1.nl/m/4521/cf039315e6a96f616cc0fe87f861fc640b0f3327/?transactie_id=[timestamp]" style="width: 1px; height: 1px; border: 0px;”>`

Как видите, здесь в результате шорткод не заменяется на время. В тексте (числа, которые вы видите на странице) он работает хорошо, но под текстом находится код изображения (вы не можете увидеть изображение, только в коде, потому что это элемент размером 1 x 1 пиксель). Я прикрепил скриншот исходного кода:

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

// Включите использование шортkodов в текстовом виджете.
function wpse249090_widget_text_enable_shortcodes() {
    add_filter( 'widget_text', 'do_shortcode' );
}
add_action( 'init', 'wpse249090_widget_text_enable_shortcodes' );

// Шорткод временной метки ( timestamper() ) 
function timestamper( $atts ) {
  $time = current_time( 'timestamp' );
  return $time;
}
add_shortcode( 'timestamp', 'timestamper' );

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

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

Проблема

Вы заметили, что шорткод [[timestamp]], который возвращает текущую метку времени, не срабатывает при использовании внутри атрибута src тега <img>. В коде:

<img src="http://example.com/transaction_id=[[timestamp]]">

шорткод не заменяется на значение времени. Это связано с тем, что стандартный метод обработки шорткодов WordPress не применим на уровне HTML-атрибутов.

Решение

Использование фильтров для замены шорткодов: Для достижения вашей цели вам нужно создать функцию, которая будет заменять шорткоды в src атрибуте изображения непосредственно перед выводом на страницу.
Создание функции замены шорткод: Вам нужно будет добавить фильтр, который будет обрабатывать содержимое перед его выводом. Например, вы можете использовать wp_get_attachment_image или добавить свой собственный HTML-код к выводу.

Вот предложение, как это можно реализовать:

add_filter('the_content', 'replace_shortcode_in_image_src');

function replace_shortcode_in_image_src($content) {
    // Используйте регулярное выражение для поиска тега img с шорткодом в src
    $pattern = '/<img src="(.*?\[\[timestamp\]\].*?)"/';
    $timestamp = current_time('timestamp');

    // Замените шорткод временной меткой
    $replacement = '<img src="' . str_replace('[[timestamp]]', $timestamp, '$1') . '"';

    // Замените оригинальный контент на модифицированный
    return preg_replace($pattern, $replacement, $content);
}

В этом коде:

Функция replace_shortcode_in_image_src ищет в контенте теги <img>, содержащие шорткод [[timestamp]].
Регулярное выражение захватывает часть строки, в которой есть шорткод.
Затем происходит замена шорткода на текущее время с использованием current_time('timestamp').
Модифицированное содержимое возвращается для последующего отображения на сайте.

Как использовать

После добавления вышеуказанной функции в файл вашей темы (обычно в functions.php), вы можете вставить HTML код с использованием вашего шорткода в контент поста или страницы:

<img src="http://example.com/transaction_id=[[timestamp]]" style="width: 1px; height: 1px; border: 0px;">

Заключение

Таким образом, вы сможете вставить шорткод времени непосредственно в атрибут src тега <img>. Это решение позволяет интегрировать динамически генерируемые значения в статические HTML-атрибуты и эффективно использовать их для отслеживания конверсий. Не забудьте тестировать на различных страницах, чтобы убедиться, что изменения отражаются корректно.

Если у вас возникнут дополнительные вопросы или потребуется помощь, не стесняйтесь обращаться!