WordPress站点登录交互修改:替换默认弹窗为页面跳转或Digits插件模态框
两种方案修改主题登录链接:取消默认弹窗或替换为Digits模态框
我帮你整理了两种符合需求的修改方案,你可以根据自己的偏好选择:
方案1:直接跳转至My Account页面
这个方案最简单直接,移除所有触发主题默认模态弹窗的逻辑,让所有用户(无论是否登录)点击后直接跳转到你的my-account页面。修改后的代码如下:
<?php if(negarshop_option('header_res_user') == "true" and function_exists('WC')): $account_link = wc_get_page_permalink( 'myaccount' ); $current_user = wp_get_current_user(); ?> <a href="<?php echo $account_link; ?>" class="rh-item"><i class="fal fa-user"></i></a> <?php endif; ?>
改动说明:
- 删掉了原代码中判断未登录用户时添加的
data-toggle="modal"和data-target="#login-popup-modal"属性,彻底取消了默认模态弹窗的触发逻辑; - 所有用户点击链接都会直接跳转至My Account页面,逻辑更简洁。
方案2:替换为Digits插件的[dm-modal]短代码
如果想保留模态弹窗的交互体验,但换成Digits的手机号登录弹窗,可以用以下代码:
<?php if(negarshop_option('header_res_user') == "true" and function_exists('WC')): $account_link = wc_get_page_permalink( 'myaccount' ); $current_user = wp_get_current_user(); ?> <?php if (!$current_user->exists()) { ?> <?php echo do_shortcode('[dm-modal]'); ?> <?php } else { ?> <a href="<?php echo $account_link; ?>" class="rh-item"><i class="fal fa-user"></i></a> <?php } ?> <?php endif; ?>
可选优化:保留主题原有按钮样式
如果Digits短代码默认的按钮样式和你主题的rh-item类风格不匹配,可以自定义触发按钮并绑定Digits模态框:
<?php if(negarshop_option('header_res_user') == "true" and function_exists('WC')): $account_link = wc_get_page_permalink( 'myaccount' ); $current_user = wp_get_current_user(); ?> <?php if (!$current_user->exists()) { ?> <a href="#" class="rh-item digits-login-btn"><i class="fal fa-user"></i></a> <script> // 绑定点击事件触发Digits模态框 document.querySelector('.digits-login-btn').addEventListener('click', function(e) { e.preventDefault(); jQuery('#digits-modal').modal('show'); }); </script> <?php echo do_shortcode('[dm-modal]'); ?> <?php } else { ?> <a href="<?php echo $account_link; ?>" class="rh-item"><i class="fal fa-user"></i></a> <?php } ?> <?php endif; ?>
改动说明:
- 未登录用户点击时,会触发Digits的手机号登录模态框,而非主题默认弹窗;
- 已登录用户的逻辑保持不变,依然跳转至My Account页面;
- 自定义按钮版本保留了主题原有的图标和样式,保证页面视觉一致性。
内容的提问来源于stack exchange,提问作者Hooman
相关产品推荐
相关产品推荐

