DUX 主题 2.0 版本之后新增了 erphpdown 登录时使用dux弹出登录框的功能,然而会员中心一直是老样式,并未集成 Erphpdown 的前端功能。同时,虽然 Erphpdown 插件作者提供了一个前端会员中心的页面(page-erphpdown-user.php),这个页面比较粗糙,而且同一个网站使用两个不同的用户中心,对访问者来说似乎也不太友好。于是自己决定将 DUX主题用户中心与 Erphpdown 集成起来,方便博客用户使用,下面是集成前后的前端样式,我将相关功能合并到了不同的选项卡,避免前端臃肿。
前端显示大概就是这个样子,有喜欢的继续看下面(当然,样式的话自己调整也是可以的)。温馨提示:主题修改前请做好备份!备份!!备份!!!
此次集成 Erphpdown 主要用了插件的短代码功能,插件新增短代码的相关的代码在 includes 文件夹下的 shortcode.php 文件中,主要是以下内容:
add_shortcode( 'ice_purchased_goods','purchased_goods_lists');//已购商品 add_shortcode( 'ice_purchased_tuiguang','purchased_tuiguang_lists');//我的推广 add_shortcode( 'ice_purchased_tuiguangxiazai','purchased_tuiguangxiazai_lists');//推广下载 add_shortcode( 'ice_purchased_tuiguangvip','purchased_tuiguangvip_lists');//推广vip add_shortcode( 'ice_order_tracking','order_tracking_lists');//订单查询 add_shortcode( 'ice_my_property', 'my_property' );//我的资产 add_shortcode( 'ice_recharge_money','recharge_money');//充值 add_shortcode( 'ice_cash_application','cash_application');//取现申请 add_shortcode( 'ice_cash_application_lists','cash_application_lists');//取现列表 add_shortcode( 'vip_tracking_lists','vip_tracking_lists');//VIP订单查询 add_shortcode( 'ice_vip_member_service','vip_member_service');//VIP会员服务
此次主题修改比较繁琐,需要动几个位置,这里以“我要推广”为例,简单说下配置的过程,同时文后会提供我此次修改的下载文件,大家自行下载即可!
user.php 文件修改
位于主题根目录下的 pages/user.php 文件是 DUX 主题的会员中心页面模板,我们只需要在该文件中大概 24 行代码处插入如下代码即可:
<li class="usermenu-tuiguang"><a href="#tuiguang">我要推广</a></li>
插入完成并保存上传后应该可以在会员中心显示出对应的选项卡。然后继续修改本文件,在 160行代码处,最后一个 script 标签结束位置插入如下代码:
<script id="temp-tuiguang" type="text/x-jsrender"> <?php echo purchased_tuiguang_lists(); ?> <?php echo purchased_tuiguangxiazai_lists(); ?> <?php echo purchased_tuiguangvip_lists(); ?> </script>
注意这地方的 purchased_tuiguang_lists(); 可在文章开篇短代码处找到,其他的修改与之类似。
user.js 文件修改
文件 js/user.js 主要是控制会员中心的一些动作的,在文件大概 204 行代码处应该可以找到 ‘post-new’: function() 这样一句代码。在该代码之前插入如下一段代码:
'tuiguang': function(){ menuactive('tuiguang') _main.html( $('#temp-tuiguang').render() ) },
如此我们即能对程序的运行有个简单的了解。用户点击会员中心选项卡触发上面这段 JS 代码,代码激活“我要推广”菜单,并通过 render() 渲染生成上一步在 script 标签中的页面信息以显示出来。做到这一步基本上前端可以获取相关数据了,但是不太美观,下面我们对其进行简单美化。
user.css 文件修改
控制 DUX 主题会员中心显示样式的代码在 css/user.css 文件中,由于插件会不断更新,主题也会不断更新,为了避免日后调整修改较大,这里尽量没有修改插件下相关核心文件的样式类。当然,这也不可避免地造成了样式代码的臃肿。“鱼与熊掌不可兼得”,如果你希望能更精简代码,可自行调整代码以进一步优化。这里仅给出我完全修改完后 PC 端显示样式的代码(懒,不想再调整移动端的样式了)。代码如下:
/** DUX 主题用户中心集成 Erphpdown */ .user-main-property>.wrap{ margin:20px 10px 5px; padding:5px; } .user-main-property>.wrap h2{ margin: 10px; padding: 5px; font-size: 20px; line-height: 20px; border-left: 5px solid #239fef; } /** 表单 form-table */ .user-main-property>.wrap .form-table{ width: 100%; margin: 20px; border-collapse: collapse; } .user-main-property>.wrap .form-table tr{ font-size: 16px; margin: 10px; line-height: 36px; } .user-main-property>.wrap .form-table td{ padding: 0 30px; } .user-main-property>.wrap .form-table td input{ padding: 0 10px; line-height: 24px; font-size: 12px; text-align: right; border: 1px solid #239fef; border-radius: 5px; } .user-main-property>.wrap .form-table td input[type=radio]{ display: inline-block; vertical-align: text-top; font-size: 18px; width: 1em; height: 1em; margin-right: .5em; line-height: 1; } .user-main-property>.wrap .form-table td input[type=submit] { margin: 20px 0 0; padding: 5px 30px; color: #fff; font-size: 18px; text-align: center; line-height: 20px; background: #239fef; border: 1px solid #239fef; border-radius: 9px; } .user-main-property>.wrap .form-table td input[type=submit]:hover { opacity: 0.8; } /** 表单 widefat */ .user-main-property>.wrap>.widefat{ border-collapse: collapse; width: 100%; border: 1px solid #239fef; margin: 20px 10px 0px; } .user-main-property>.wrap>.widefat th{ border-collapse: collapse; border-right:1px solid #fff; border-bottom:1px solid #239fef; background-color:#239fef; padding:5px 9px; color: #fff; font-size: 14px; line-height:24px; font-weight: normal; text-align: center; white-space: nowrap; word-break: break-all; } .user-main-property>.wrap>.widefat th:last-child{ border-right:1px solid #239fef; } .user-main-property>.wrap>.widefat td{ border-collapse: collapse; border-right:1px solid #239fef; border-bottom:1px solid #239fef; padding:5px 9px; font-size:12px; line-height:20px; font-weight:normal; text-align:left; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } .user-main-property>.wrap>.widefat tr:nth-child(odd){ background-color: #fff; } .user-main-property>.wrap>.widefat tr:nth-child(even){ background-color: #f8f8f8; } .user-main{ position: relative; min-height: 600px; padding: 20px 0px; } .user-main>font{ margin: 20px; padding: 5px; font-size: 20px; font-weight: 700; } .user-main>.wrap{ margin:20px; padding:5px; } .user-main>.wrap h2{ margin: 10px; padding: 5px; font-size: 20px; line-height: 20px; border-left: 5px solid #239fef; } .user-main>.wrap>p{ margin: 3px; padding: 5px; } .user-main>.wrap p:first-child{ margin: 3px; padding: 5px; color: red; font-size: 16px; } .user-main>.wrap>p>textarea{ display: block; margin: 20px 10px; padding: 5px; width: 100%; border: 1px solid #239fef; border-radius: 5px; overflow: hidden; } /** 表单 form-table */ .user-main>.wrap .form-table{ width: 100%; margin: 20px 10px 0; border-collapse: collapse; } .user-main>.wrap .form-table tr{ font-size: 16px; margin: 10px; line-height: 36px; } .user-main>.wrap .form-table td{ padding: 0 30px; } .user-main>.wrap .form-table td input{ padding: 0 10px; line-height: 24px; font-size: 12px; text-align: right; border: 1px solid #239fef; border-radius: 5px; } .user-main>.wrap .form-table td input[type=radio]{ display: inline-block; vertical-align: text-top; font-size: 18px; width: 1em; height: 1em; margin-right: .5em; line-height: 1; } .user-main>.wrap form p{ margin: 10px; } .user-main>.wrap form input[type=submit] { padding: 5px 30px; color: #fff; font-size: 18px; text-align: center; line-height: 20px; background: #239fef; border: 1px solid #239fef; border-radius: 9px; } .user-main>.wrap form input[type=submit]:hover { opacity: 0.8; } /** 表单 widefat */ .user-main>.wrap>.widefat{ border-collapse: collapse; width: 100%; border: 1px solid #239fef; margin: 20px 10px 0px; } .user-main>.wrap>.widefat th{ border-collapse: collapse; border-right:1px solid #fff; border-bottom:1px solid #239fef; background-color:#239fef; padding:5px 9px; color: #fff; font-size: 14px; line-height:24px; font-weight: normal; text-align: center; white-space: nowrap; word-break: break-all; } .user-main>.wrap>.widefat th:last-child{ border-right:1px solid #239fef; } .user-main>.wrap>.widefat td{ border-collapse: collapse; border-right:1px solid #239fef; border-bottom:1px solid #239fef; padding:5px 9px; font-size:12px; line-height:20px; font-weight:normal; text-align:left; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } .user-main>.wrap>.widefat tr:nth-child(odd){ background-color: #fff; } .user-main>.wrap>.widefat tr:nth-child(even){ background-color: #f8f8f8; }
方法大概就是这样了。不想折腾的直接下载文后的文件替换即可。如果还有什么其他问题,请在文章下方反馈。