今天一个群友大清早的就跑过来问,如何针对wordpress的文章实现文章页面均出现一个弹窗,同时弹窗里面的内容与链接可根据当前页面的内容自定义跳转链接;
然后点击里面的文章后,出现以下弹窗:
针对上面这个弹窗,需要将【文字部分】与【马上去店铺看看】的图片部分针对不同的页面内容给予不同的链接与文字添加
将以下代码找到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; }
进入 文章添加页面,并打开顶部的【打开选项】,然后勾选其中的【自定义字段】
当文章添加成功后,再在文章编辑框下方添加自定义字段参数与对应的内容:
最终实现效果如下:
如果还需要自定义页面内容,原理同上即可;