Может ли шорткод получить HTML/текст из содержимого и вернуть его дважды с добавленным HTML?

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

Я пытаюсь сократить объем работы для себя и надеялся, что кто-то знает, возможно ли это.

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

Вот что я пытаюсь сделать. Взять это:

<h2>Название изображения</h2>
<img src="http">
текст для слайда

И вывести их так:

<div class="singe_slide">
<h2>Название изображения</h2>
<img src="http">
</div>
<!--nextpage-->
<div class="singe_slide">
<h2>Название изображения</h2>  //То же изображение на следующей странице
<img src="http">
<div class="slide_caption"><div class="captExt">
текст для слайда
</div></div>
<!--nextpage-->

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

[Slide]<h2>Название изображения</h2>
<img src="http">[/Slide]
<!--nextpage-->
[Slide]<h2>Название изображения</h2> //То же изображение на следующей странице
<img src="http">
[SlideCap]текст для слайда[/SlideCap][/Slide]
<!--nextpage-->

А это мои 2 шорткода:

function Slide($atts, $content = null) {
    $content = wpautop(trim($content));
    return '<div class="singe_slide">' . do_shortcode($content) . '</div>';
}
add_shortcode('Slide', 'Slide');

function SlideCap($atts, $content = null) {
    $content = wpautop(trim($content));
   return '<div class="slide_caption"><div class="captExt">' . do_shortcode($content) . '</div></div>';
}
add_shortcode('SlideCap', 'SlideCap');

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

Возможно ли получить что-то между шорткодами в качестве переменной?
[shortcode]Эта часть здесь[/shortcode]

Хорошо, я думаю, я понял, что вы на самом деле спрашиваете. Вы спрашиваете, какая переменная для части между шорткодами. Если это все, что вы спрашиваете, то ответ – параметр переменной $content. Вы уже обрабатываете это в своем коде.

Кроме того, в вашем примере у вас, кажется, есть третий шорткод, , который вы не обрабатываете. Это намеренно? Не похоже, что вы действительно хотите получить конечный html с этим, поэтому это решение предполагает, что вы этого не хотите.

Я предполагаю, что вы хотите простой формат шорткода, такой как:

[slide=НазваниеИзображения][slideimg]http://some.domain/slide.jpg[/slideimg][slidecap]Это подпись.[/slidecap][/slide]

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

function shortcode_slide($atts, $content = null) {
    if(empty($atts)) {
        $img_title="";
    } else {
        // [slide=Название]...[/slide]
        // [slide="Много слов в названии"]...[/slide]
        $atts = $this->attributefix( $atts );
        $img_title="<h2>".trim(array_shift($atts),'="').'</h2>'; //Удалить кавычки и равно.
    }

    $content = wpautop(trim($content));
    return '<div class="singe_slide">'.$img_title. do_shortcode($content) . '</div>';
}
add_shortcode('slide', 'shortcode_slide');

function shortcode_slidecap($atts, $content = null) {
    $content = wpautop(trim($content));
    return '<div class="slide_caption"><div class="captExt">' . do_shortcode($content) . '</div></div>';
}
add_shortcode('slidecap', 'shortcode_slidecap');

function shortcode_slideimg($atts, $content = null) {
    $content = wpautop(trim($content));
    return '<img src="'.$content.'" />';
}
add_shortcode('slideimg', 'shortcode_slideimg');

Это должно производить рабочий html.

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

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

Общая идея

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

Разработка шорткодов

Для начала определим три шорткода:

  1. [slide]: основной шорткод для слайдов.
  2. [slideimg]: для вывода изображений.
  3. [slidecap]: для вывода подписи к слайдам.

Вот пример кода, который позволяет реализовать вашу задачу:

function shortcode_slide($atts, $content = null) {
    $content = wpautop(trim($content));

    // Извлечение названия изображения из атрибутов шорткода
    $img_title = '';
    if (!empty($atts['title'])) {
        $img_title = '<h2>' . esc_html($atts['title']) . '</h2>';
    }

    $output = '<div class="singe_slide">' . $img_title . $content . '</div>';

    // Добавляем следующий слайд с дублированием содержимого
    $output .= '<!--nextpage-->';
    $output .= '<div class="singe_slide">' . $img_title . '<div class="slide_caption"><div class="captExt">' . do_shortcode($content) . '</div></div></div>';

    return $output;
}
add_shortcode('slide', 'shortcode_slide');

function shortcode_slideimg($atts, $content = null) {
    return '<img src="' . esc_url($content) . '" />';
}
add_shortcode('slideimg', 'shortcode_slideimg');

function shortcode_slidecap($atts, $content = null) {
    return '<div class="slide_caption"><div class="captExt">' . do_shortcode(trim($content)) . '</div></div>';
}
add_shortcode('slidecap', 'shortcode_slidecap');

Как использовать шорткоды

Теперь вы можете использовать шорткоды с параметрами для их работы следующим образом:

[slide title="Image Title"][slideimg]http://example.com/image.jpg[/slideimg][slidecap]text for slide[/slidecap][/slide]

Этот код создаст два слайда: первый с изображением и вторым разделом, который будет содержать ту же информацию, но с подписью.

Преимущества и возможности

  1. Понятность и гибкость: Используя атрибуты и содержимое, ваши шорткоды становятся довольно простыми в использовании и легко расширяемыми.
  2. Дублирование содержания: Ваша первоначальная цель — создать обертку и дублировать содержание для следующего слайда — будет выполнена с помощью предложенной структуры.
  3. Чистота кода: Используя функцию esc_html() и esc_url(), вы обеспечиваете защиту от XSS и другие возможные проблемы с безопасностью.

Заключение

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

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

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

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