DUX主题会员中心集成 Erphpdown 插件

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 文件修改

[wxcaptcha]文件 js/user.js 主要是控制会员中心的一些动作的，在文件大概 204 行代码处应该可以找到 ‘post-new’: function() 这样一句代码。在该代码之前插入如下一段代码：

'tuiguang': function(){
    menuactive('tuiguang')
    _main.html(
        $('#temp-tuiguang').render()
    )				
},

如此我们即能对程序的运行有个简单的了解。用户点击会员中心选项卡触发上面这段 JS 代码，代码激活“我要推广”菜单，并通过 render() 渲染生成上一步在 script 标签中的页面信息以显示出来。做到这一步基本上前端可以获取相关数据了，但是不太美观，下面我们对其进行简单美化。[/wxcaptcha]

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

方法大概就是这样了。不想折腾的直接下载文后的文件替换即可。如果还有什么其他问题，请在文章下方反馈。

取消

评论提交中...

昵称昵称(必填)
邮箱邮箱(必填)
ＱＱＱＱ(选填)
网址网址(选填)

#20

冲了十块钱没到账

q8740335 5年前 (2020-04-20) 展开回复
- 用户名给我下，或者加QQ：2220379479
  
  蝈蝈要安静 5年前 (2020-04-27) 展开回复
- 当前用户名充上了
  
  蝈蝈要安静 5年前 (2020-04-27) 展开回复
#19

怎么公众号，是多少，不能关注吗，没有看懂，

hechao 5年前 (2020-01-07) 展开回复
- 微信搜索[蝈蝈要安静]即可
  
  蝈蝈要安静 5年前 (2020-01-08) 展开回复
#18

我Q 5795593

mm8008 5年前 (2019-09-30) 展开回复
#17

我充值了10块，为啥没有啊

mm8008 5年前 (2019-09-30) 展开回复
- 刷新下看看
  
  蝈蝈要安静 5年前 (2019-09-30) 展开回复
  - 记得好像解决了吧。记不清了，没解决的话加我下QQ：2220379479。
    
    蝈蝈要安静 5年前 (2019-10-14) 展开回复
#16

博主我的样式为什么没有显示出来

mengji 5年前 (2019-09-07) 展开回复
- 看下是不是缓存的问题
  
  蝈蝈要安静 5年前 (2019-09-11) 展开回复
#15

海报功能到底咋弄

bemu 5年前 (2019-09-06) 展开回复
#14

不知转载文章是否介意，先转载了，如果侵权麻烦回复告知，之后删除。感谢

何先生 5年前 (2019-09-05) 展开回复
- 没事，加个链接就行
  
  蝈蝈要安静 5年前 (2019-09-07) 展开回复
#13

加不上去，点击我要推广，可是确自动跳到我的评论中去了

user123 5年前 (2019-08-30) 展开回复
#12

博主，请问充值中心不显示充值方式，怎么解决呀,求拯救。。。

wonder 5年前 (2019-08-25) 展开回复
- 有没有什么报错信息？
  
  蝈蝈要安静 5年前 (2019-08-25) 展开回复
#11

@wei 解决了吗，我也是这样，只要添加充值的那个代码，样式就错位，删掉就正常

vhfhgc 5年前 (2019-08-15) 展开回复
#10

:twisted:

匿名 5年前 (2019-08-11) 展开回复
#9

这个可以有

匿名 5年前 (2019-07-28) 展开回复
#8

牛逼啊~~这个

chengzouv74860 6年前 (2019-04-30) 展开回复
#7

感觉买的有点废，不能自适应手机端显示不完整。

a2371344226 6年前 (2019-03-03) 展开回复
- 额，仔细看下文章。。。
  
  蝈蝈要安静 6年前 (2019-03-03) 展开回复
#6

请教dux如何集成instantclick? 卡在loader.js这里了

dsg 6年前 (2019-03-01) 展开回复
- 没用过 instantclick ，不太清楚。
  
  蝈蝈要安静 6年前 (2019-03-01) 展开回复
#5

站长什么时候做一个其他主题通用的用户中心呗，好羡慕dux主题的童鞋们。感谢！收费就可以！但是也别太贵嘿嘿！

img 6年前 (2019-02-19) 展开回复
- 修改方式差不多，主要是通过短代码相应调整就可以了。
  
  蝈蝈要安静 6年前 (2019-02-20) 展开回复
#4

你好，添加充值代码后会员中心我的资产就显示异常，我的资产页面内容显示在会员页面最下方，去掉充值代码就又正常了，请问是哪里出错了呢？

wei 6年前 (2019-02-14) 展开回复
- 充值代码的配置需要根据上面的方法略作调整。
  
  蝈蝈要安静 6年前 (2019-02-19) 展开回复
- 请问你解决问题了吗？我也遇到了
  
  空空小名 5年前 (2019-08-06) 展开回复
#3

好东西，本来想自己弄弄的，正好看到这篇文章哈哈，欢迎来访哦~

沃茨博客 6年前 (2019-02-14) 展开回复
- 欢迎来访。。。
  
  蝈蝈要安静 6年前 (2019-02-14) 展开回复
#2

好东西，确实好看很多！

缙哥哥 6年前 (2019-02-13) 展开回复
#1

好东西，先收藏！

CPS广告 6年前 (2019-02-08) 展开回复