0

Есть пост на сайте Вордпресс. Выводится таким образом:

введите сюда описание изображения

Слева - видео или картинка, справа - текст. Если высота текст становится больше левого блока, то он автоматически разбивается на "слайды", которые переключаются точками под текстом.

Горизонтальный слайдер могу реализовать на slick. Меня интересует, как можно разбить текст таким образом, чтобы для каждого блока текста создавался свой div.

P.S. мое представление - вместо функции the_content(); должно быть что-то вроде цикла: для каждого блока текста создается div с классом item и текстом внутри. Возможно, нужен какой-то фильтр?

Спасибо!

5
  • Это не подход. Что вы будете делать при изменении размеров окна браузера? Commented 26 июн. 2018 в 16:34
  • У меня три брейкпоинта - ПК, смартфон и планшет. Но вы правы - функция сработает только один раз, при загрузке. У вас есть какой-нибудь вариант?
    – daniel_ts
    Commented 26 июн. 2018 в 16:55
  • Хотя, есть вариант - изменять размер шрифта.
    – daniel_ts
    Commented 26 июн. 2018 в 16:59
  • Контент разбить на блоки при выводе по количеству слов, а дальше уже играться с размером шрифта Commented 26 июн. 2018 в 17:16
  • буду очень благодарен, если вы скинете кусок кода (или хотя бы покажите, каким образом разбить на блоки :))
    – daniel_ts
    Commented 26 июн. 2018 в 17:43

1 ответ 1

0

Код примерно такой

// Получаем контент.
$content = get_the_content();

// Заменяем все переводы строк на <br>.
$content = nl2br( $content );

// Разбиваем на блоки по 200 символов. Разделитель по умолчанию - "\n".
$content = wordwrap( $content, 200 );

// Создаём массив блоков.
$divs = explode( "\n", $content );

// Выводим блоки.
foreach ( $divs as $div ) {
    $div = '<div class="my-text-block">' . $div . '</div>';
    echo wp_kses_post( $div );
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.