Вопрос или проблема
Я пытаюсь сократить объем работы для себя и надеялся, что кто-то знает, возможно ли это.
Это изображения, настроенные в слайдере, который показывает текстовое наложение на изображение на следующем слайде в многостраничном посте.
Вот что я пытаюсь сделать. Взять это:
<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. В вашем случае такой шорткод должен добавлять обертку для каждого слайда и дублировать содержимое на следующей странице.
Разработка шорткодов
Для начала определим три шорткода:
- [slide]: основной шорткод для слайдов.
- [slideimg]: для вывода изображений.
- [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]
Этот код создаст два слайда: первый с изображением и вторым разделом, который будет содержать ту же информацию, но с подписью.
Преимущества и возможности
- Понятность и гибкость: Используя атрибуты и содержимое, ваши шорткоды становятся довольно простыми в использовании и легко расширяемыми.
- Дублирование содержания: Ваша первоначальная цель — создать обертку и дублировать содержание для следующего слайда — будет выполнена с помощью предложенной структуры.
- Чистота кода: Используя функцию
esc_html()
иesc_url()
, вы обеспечиваете защиту от XSS и другие возможные проблемы с безопасностью.
Заключение
Используя данное решение, вы сможете значительно упростить процесс создания слайдов с изображениями и подписями, сократив время на редактирование HTML-кода вручную. Такие решения позволяют не только снижать трудоемкость, но и улучшать структуру и управление содержимым на сайте. Одна из лучших практик разработки — использование шорткодов для повторного использования кода, что делает его более удобным и доступным.
Если у вас возникнут дополнительные вопросы или вам потребуется помощь с настройкой шорткодов, не стесняйтесь обращаться.