1

Тема: Как создать функцию смены текста/картинки?

Здравствуйте! Я новичок в WordPress и надеюсь на вашу помощь. Мне нужно сделать функцию смены текста на своём сайте: приблизительно как тут: https://lifehacker.ru/special/calm/
Версия WordPress: WordPress 5.3
Только начал создавать сайт, шаблон не важен (вообще планирую делать без шаблонов на пустой страничке), а также планирую использовать Elementor или другой похожий плагин.
Спасибо!

2

Re: Как создать функцию смены текста/картинки?

Вот решения со стороны javascript, сменяет текст при нажатии на пробел:

<div id="text"></div>

<script>
    /* Массив со списком текстов */
    var global_texts = [
        {'active': false, 'value': 'text1'},
        {'active': false, 'value': 'text2'},
        {'active': false, 'value': 'text3'},
        {'active': false, 'value': 'text4'},
        {'active': false, 'value': 'text5'}
    ];

    /* В этом месте будет происходить отлов каждого нажатия пробела */
    document.addEventListener('keyup', checkSpace);



    /* Функция, которая вызывается при нажатии на пробел
     * и определяет какой текст показывать следующим
      * */

    function checkSpace(e) {
        if( e.keyCode === 32 ) {
            var next = 0;
            for( var i=0; i<global_texts.length; i++ ) {
                if( global_texts[i]['active'] ) {
                    next = i+1;

                    if( next >= global_texts.length ) {
                        next = 0;
                    }

                    break;
                }
            }

            setActiveText( next );
        }
    }

    /* Функция, которая показывает нужный там текст из списка выше */
    function setActiveText( index ) {
        for( var i=0; i<global_texts.length; i++ ) {
            global_texts[i]['active'] = false;
        }

        document.getElementById('text').innerHTML = global_texts[index]['value'];
        global_texts[index]['active'] = true;
    }

    /* Показ самого первого текста, так как в начале у нас пустой элемент,
     * в котором мы отображаем тексты из списка */
    
    window.onload = function () {
        setActiveText( 0 );
    }
</script>

Также можно добавить css классы, которые будут задавать анимации

3

Re: Как создать функцию смены текста/картинки?

Спасибо! А смогу ли я впоследствии менять текст, не прибегая к коду? Возможно ли такое?

4

Re: Как создать функцию смены текста/картинки?

Для этого можно написать код, который будет сохранять все тексты из админки в БД. а потом на клиентской стороне этим текстом заполнять массив global_texts

5

Re: Как создать функцию смены текста/картинки?

На карме есть хорошее описание как можно сделать такую админку:

https://wp-kama.ru/function/add_meta_box/

6

Re: Как создать функцию смены текста/картинки?

Огромное спасибо... Но в процессе я понял, что примерно ничего не понял) Т.к. у меня нет каких-либо знаний html. Есть ли другой способ создать такую функцию? С помощью Elementor или чего-нибудь подобного. Спасибо!)

7

Re: Как создать функцию смены текста/картинки?

NewUser пишет:

С помощью Elementor или чего-нибудь подобного. Спасибо!)

Есть знания php и html, потому плагины не использую, во всяком случае билдеры :-) Есть вариант собрать саму админку с помощью ACF, он позволяет это сделать за 10 минут, но на сторне, которую видят обычные пользователи сайта, там придется код дописывать