DNI 显示 div 基于着陆页，继续显示 div 整个会话

Question

我有大约 60 个使用不同 phone 编号的着陆页。我结合使用 WordPress 和高级自定义字段将 phone 数字放在各自的页面上。

我被要求显示基于着陆页 URL 的 <div>，它不仅会显示分配给该页面的 phone 编号，而且会继续显示 <div>（和 phone 数字），无论用户导航到网站上的哪个页面。

我发现几乎没有人支持如何使 <div> 在整个会话期间保持可见，直到用户关闭 window。

我认为这将以某种方式围绕 cookie 和动态数字插入展开，但我没有真正的进展可言。这应该使用 PHP 还是 JS 来完成？是否存在允许在 WordPress 上执行此操作的插件？我愿意接受所有建议。

Answer 1

您应该使用 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 在哪里 (header/footer/page) - 根据它的位置，您应该使用挂钩 (header/footer) 或将其编码到模板中 (page/post ).

会话将在用户关闭tab/window后销毁。

Answer 2

我可能会使用客户端会话存储来执行此操作。如果所有页面都在同一个选项卡中打开，该值将为会话保留，然后被删除。

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；行必须没有前导或尾随空格。

以上未经测试

Answer 3

请尝试此代码。就像@John C 提到的那样，WP Engine 出于性能和安全的考虑，不推荐使用 Cookie 或 PHP Session。这是纯 JavaScript 代码，我认为这会解决您的问题。

您的 Post/Page 模板文件中的代码：

<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>

DNI 显示 div 基于着陆页，继续显示 div 整个会话

DNI show div based on landing page, continue showing div entire session

javascript

php

cookies

wordpress

session-cookies