Как создать бегущую строку для CMS WordPress?

В данной статье мы рассмотрим код на языке PHP, который представляет собой функцию для создания короткого кода (shortcode) под названием «running_text».

Код начинается с объявления функции «running_text_shortcode», которая принимает параметры в виде атрибутов (atts). Внутри функции определена переменная «a», которая содержит массив со значениями атрибутов по умолчанию.

Первый атрибут «text» содержит текст, который будет отображаться в бегущей строке. Значение по умолчанию — приглашение производителей одежды к сотрудничеству.

Второй атрибут «link» содержит ссылку, на которую будет осуществляться переход при клике на текст бегущей строки. Значение по умолчанию — «#».

Третий атрибут «speed» определяет скорость прокрутки бегущей строки. Значение по умолчанию — 5.

Далее идет блок кода, в котором используется функция «ob_start()», которая запускает буферизацию вывода.

Затем создается HTML-элемент div с классом «running-text», внутри которого располагается HTML-элемент marquee.

HTML-атрибут behavior=»scroll» определяет тип прокрутки бегущей строки, атрибут direction=»left» задает направление прокрутки влево, а атрибут scrollamount=»» определяет скорость прокрутки, которая берется из значения атрибута «speed».

Внутри элемента marquee находится HTML-элемент a, который содержит текст из атрибута «text» и ссылку из атрибута «link».

Затем следует закрытие элементов marquee и div.

После этого используется функция «ob_get_clean()», которая возвращает содержимое буфера вывода и очищает его.

В конце кода используется функция «add_shortcode()», которая регистрирует короткий код «running_text» и связывает его с функцией «running_text_shortcode».

Таким образом, данный код позволяет создать бегущую строку с заданным текстом, ссылкой и скоростью прокрутки. Чтобы использовать эту функцию в WordPress, необходимо вставить короткий код «[running_text]» в соответствующее место на сайте.

PHP код для functions.php

function running_text_shortcode($atts) {
    $a = shortcode_atts( array(
        'text' => 'Ваш текст',
        'link' => '#',
        'speed' => '5', // значение по умолчанию
    ), $atts );

    ob_start();
    ?>
  
    <div class="running-text">
        <marquee behavior="scroll" direction="left" scrollamount="<?php echo esc_attr($a['speed']); ?>">
            <a href="<?php echo esc_url($a['link']); ?>"><?php echo esc_html($a['text']); ?></a>
        </marquee>
    </div>
    <?php

    return ob_get_clean();
}
add_shortcode('running_text', 'running_text_shortcode');

CSS код

    .running-text {
       
        width: 100% !important;
				max-width: 2000px !important;
        background-color: #f9d0d6;
        color: #000;
        font-size: 24px;
        padding: 20px 10px 10px 10px;
        z-index: 9999;
        white-space: nowrap;
        overflow: hidden;
    }

    .running-text a {
        color: #50575e;
        text-decoration: none;
        text-transform: uppercase;
			  font-weight: 800;
    }

Виды шорт кодов

[running_text speed="10"]

[running_text text="Новый текст" link="http://example.com"]

[running_text text="Новый текст" link="http://example.com" speed="10"]