Блог

У меня около 60 целевых страниц, на которых используются разные телефонные номера. Я использую комбинацию WordPress и расширенных пользовательских полей для размещения телефонных номеров на соответствующих страницах.

Меня просят показать <div> URL-адрес целевой страницы на основе URL-адреса, который будет не только показывать номер телефона, присвоенный этой странице, но и продолжать показывать <div> (и номер телефона) независимо от того, на какую страницу пользователь переходит на веб-сайте.

Я практически не нашел поддержки в том, как сделать <div> так, чтобы он оставался видимым на протяжении всего сеанса, пока пользователь не закроет окно.

Я думаю, что это каким-то образом будет связано с cookie и динамической вставкой чисел, но у меня нет реального прогресса, о котором можно говорить. Должно ли это быть сделано с помощью PHP или JS? Существует ли плагин, который позволил бы это сделать на WordPress? Я открыт для всех предложений.

Пожалуйста, попробуйте этот код. Как упоминал @John C, движок WP не рекомендует использовать Cookie или сеанс PHP для повышения производительности и безопасности. Это чистый код JavaScript, и я думаю, что это решит вашу проблему.

Код в вашем файле шаблона публикации / страницы:

 <div id="phone-number"></div>
<?php if( get_field('phone_number') ): ?>
    <script type="text/javascript">
        let phone_number = "<?php the_field('phone_number'); ?>";
    </script>
<?php endif; ?>
 

Код в файле JavaScript вашей темы:

 <script type="text/javascript">
    // in the case of the div data is persistent on the same site
    // let storage = localStorage;

    // in the case of the div data is persistent in the same tab, but not in new tab
    let storage = sessionStorage;
    
    let key = "phone_number"; // storage key

    var global_phone_number = storage.getItem(key);

    // check if storage data is set before
    if (null === global_phone_number) {
        // if not set the data on page into storage
        global_phone_number = phone_number ? phone_number : '';
        storage.setItem(key, global_phone_number);
    }
    document.getElementById('phone-number').innerHTML = global_phone_number;
</script>
 

Вы должны использовать PHP и записывать сеанс.

(предупреждение о непроверенном коде)

 add_action('wp_footer', 'dynamic_phone_div');
function dynamic_phone_div() {
 session_start;

 if(isset($_SESSION['phone_div']) ? $phone_div = $_SESSION['phone_div'] : 
 $phone_div = '';

 if($phone_div != '') {

   echo '<div class="that_div_thing">';
   echo $phone_div;
   echo '</div>';

 } else {

   $_SESSION['phone_div'] = 123456789;
   echo '<div class="that_div_thing">';
   echo '123456789';
   echo '</div>';

 }
}
 

Это всего лишь необработанная логика. Я не уверен, где находится ваш div (верхний / нижний колонтитул / страница) — в зависимости от того, где он находится, вы должны либо использовать хук (верхний / нижний колонтитул), либо закодировать его в шаблон (страница / сообщение).

Сеанс будет уничтожен после того, как пользователь закроет вкладку / окно.

Я бы, вероятно, сделал это с хранилищем сеансов на стороне клиента. Если все страницы открываются на одной вкладке, значение останется для сеанса, а затем будет удалено.

PHP-код (в вашем functions.php файл?) было бы что-то вроде этого:

 function phone_script() {
    $params = array(
        'phone_number'      => null, // Insert logic for current number. Can stay null if this is running on a non-landing page
        'is_landing_page'   => false // Change to true/false based on is current page a landing one or not
    );

    $params = json_encode( $params );

    echo <<< EOT
    <script>
        let settings = $params;

        document.addEventListener("DOMContentLoaded", function() {
            if( settings.is_landing_page ) {
                window.sessionStorage.setItem( 'phone-number', settings.phone_number );
            } else {
                settings.phone_number = window.sessionStorage.getItem( 'phone-number' );
            }
            
            if( settings.phone_number ) {
                let div = document.createElement('div');
                div.classList.add('phone-div');
                // or add inline style 
                // div.style.cssText = 'position:fixed'; //etc

                // Some logic here to actually add the number and any other content to the div
                div.innerHTML = `The Phone number is: ${settings.phone_number}`;

                document.body.appendChild(div);
            }
        });
    </script>
EOT;
}
add_action( 'wp_footer', 'phone_script');
 

Обратите внимание, что в строке EOT; НЕ должно быть начальных или конечных пробелов.

Вышеуказанное не проверено.