针对wordpress系统实现每篇文章加不同的内容的弹窗 并在弹窗里面实现与文章对应内容的跳转-♚付涛纪实阁♚
欢迎访问付涛纪实阁官方网站!

针对wordpress系统实现每篇文章加不同的内容的弹窗 并在弹窗里面实现与文章对应内容的跳转

今天一个群友大清早的就跑过来问,如何针对wordpress的文章实现文章页面均出现一个弹窗,同时弹窗里面的内容与链接可根据当前页面的内容自定义跳转链接;

然后点击里面的文章后,出现以下弹窗:

针对上面这个弹窗,需要将【文字部分】与【马上去店铺看看】的图片部分针对不同的页面内容给予不同的链接与文字添加

实现方法第一步:增加HTML页面代码

将以下代码找到wordpress主题模板里面的singular.php(此为默认模板文章详细页面模板)文件,并打开;然后将以下代码添加至任意位置:

<div id="mallInfoBoxB">
        <div id="winAPI">
            <div class="winTitle">
                <span class="winNav">【为了您的购物安全,请认准官方旗舰店】</span><span class="close" onclick="hideWin()">
                    <img src="http://www.xetoo.com/img/close.gif">
                </span>
            </div>
            <div id="mallInfoBox">
                <div class="mallInfo">
                    <div class="infoDesc">
                        建议各位点下面链接进官方旗舰店购买,质量有保障。该产品是商城开设运营的在线店铺,所有展示商品与实物完全相符,严格执行七天无理由退换服务,提供正规发票,为您呈现不一样的服务;100%质量保证,全网销量领先,更多新品等你来购!
                    </div>
                </div>
                <div class="mallBtn">
                    <div class="btn">
                        <a href="<?php echo get_post_meta($post->ID,waibulianjie, $single = true); ?>" rel="nofollow">
                            <img src="http://www.xetoo.com/img/s1.gif" height="50" width="220">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
注:其中上方红色位置为文章添加时候的自定义标签参数

实现方法第二步:为弹窗增加必要的样式

找到详细页面通用的CSS样式,比如默认主题里面的style.css,将以下样式添加进style.css的最底部;

#mallInfoBoxB {
width: 400px;
text-align: center;
position: fixed;
top: 70px;
left: 320px;
z-index: 88888;
}

.mallInfoBoxB2 {
width: 100%;
text-align: center;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 88888;
}

#winAPI {
margin: 0px auto;
display: block;
padding-bottom: 6px;
width: 320px;
height: auto;
background-color: #fff;
overflow: hidden;
border: 6px solid #ed145b;
border-radius: 5px;
font-family: Microsoft Yahei;
z-index: 99999;
}

@media screen and (min-width: 1024px) {
#winAPI {
width: 820px;
height: 320px;
}
}
/*>=1024的设备屏幕*/
#winAPI .winTitle {
margin: 0 auto;
background: url(http://www.xetoo.com/img/nav_bg.png) repeat-x 0 bottom;
width: 320px;
height: 29px;
line-height: 29px;
border-bottom: 2px solid #ddd;
color: #ed145b;
z-index: 99;
}

@media screen and (min-width: 1024px) {
#winAPI .winTitle {
width: 820px;
}
}

#winAPI .winTitle .winNav {
float: left;
background: url(http://www.xetoo.com/img/home.gif) no-repeat 10px 8px;
font-size: 13px;
font-weight: bold;
text-indent: 32px;
line-height: 29px;
}

#winAPI .winTitle .winNotice {
float: right;
margin-right: 10px;
font-size: 13px;
font-weight: bold;
text-indent: 30px;
line-height: 29px;
color: #00f;
}

#winAPI .winTitle .close {
float: right;
margin: 5px;
cursor: pointer;
}

#mallInfoBoxA .close2 {
display: none;
position: absolute;
background-color: #ed145b;
border-bottom-left-radius: 60%;
border: 10px solid #ed145b;
border-right: 7px solid #ed145b;
right: 0px;
top: 0px;
cursor: pointer;
z-index: 99999;
}

#mallInfoBox .mallBtn .btn img {width: auto}

#mallInfoBox {
width: 100%;
z-index: 99;
}

#mallInfoBox .mallInfo {
width: 100%;
text-align: left;
}

#mallInfoBox .mallInfo .infoDesc {
color: red;
font-size: 24px;
line-height:1.5em;
padding: 20px;

}

#mallInfoBox .mallBtn {
width: 100%;

text-align: center;
padding-bottom:20px;
}

#mallInfoBox .mallBtn .btn {

height: 50px;
text-align: center;
}

实现方法第三步:网站后台添加文章并添加自定义参数

进入 文章添加页面,并打开顶部的【打开选项】,然后勾选其中的【自定义字段】

当文章添加成功后,再在文章编辑框下方添加自定义字段参数与对应的内容:

最终实现效果如下:

如果还需要自定义页面内容,原理同上即可;

【要是觉得不错,请帮忙点下广告呗,谢谢!】
查阅标签同类文章:
当前链接:https://www.diebaosoft.com/10186.html责任编辑:付涛
6
【友情提示:】
1、文章内容系作者个人观点,不代表除个人作者外的任何第三方针对观点赞同或支持;
2、本文为「♚付涛纪实阁♚」原创文章,遵循创作共用版权 CC 4.0 BY-SA 协议,转载请附上原文出处链接及声明,否则默认视为侵权。
3、如本站个人观点有涉及不妥的地方,可联系【QQ:860227477】,提供合理合法依据,可无偿给予修改或删除。
4、同时针对站内所有来自于【精品软件共享】及其子栏目所分享的软件均为网络收集,请用户下载后24小时内删除,否则引起的争议全使用者承担,与本站无关;
5、针对本站内容若有异义,亦可直接与【法律顾问:易兴俊,律师联系电话:13825799821】直接联系沟通;