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

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

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

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

最终实现效果如下：

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