发布价值信息
Wordpress、Software、VPN。。

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

DUX 主题 2.0 版本之后新增了 erphpdown 登录时使用 dux 弹出登录框的功能,然而会员中心一直是老样式,并未集成 Erphpdown 的前端功能。同时,虽然 Erphpdown 插件作者提供了一个前端会员中心的页面(page-erphpdown-user.php),这个页面比较粗糙,而且同一个网站使用两个不同的用户中心,对访问者来说似乎也不太友好。于是自己决定将 DUX 主题用户中心与 Erphpdown 集成起来,方便博客用户使用,下面是集成前后的前端样式,我将相关功能合并到了不同的选项卡,避免前端臃肿。

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

内容已加密

PS:扫码关注微信公众号 何先生

或者在微信里搜索 何先生

回复关键词 密码:umrhe 获取密码

weixin 何先生

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

完成了。

赞(1) 打赏本站

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

×
打赏作者
未经允许不得转载:何先生 » DUX 主题会员中心集成 Erphpdown 插件
分享到: 更多 (0)

评论 抢沙发

上传图片
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

何先生的博客 专注分享 更优质

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

测试夜间模式中。。晚上体验不好望见谅

何先生自用推荐:Vultr vps

限时:注册即可赠送 $25美元

服务器每月仅需:$5/月

注册