作者moodyblue ()
看板Blog
标题[ WP ] 网页设计如何让电手机加载不同广告
时间Sun May 15 19:00:30 2016
网页设计如何让电脑手机加载不同广告
网志图文版：
http://www.b88104069.com/archives/4058
我在将自己网站调整成响应式网页的过程中，找到的教学资料，用的方法大
同小异：在CSS上加上一段媒体程式码，设定当装置寛度小於某个程度，不要
加载侧边和底部，以我的网站为例：
/* for 600px or less */
@media screen and (max-device-width: 600px) {
#home{display: none;}
#header{display: none;}
.comment{display: none;}
#sidebar {display: none;}
#footer{display: none;}
如此一来，我测试用手机浏览网页，的确没有展示#sidebar（侧边）和
#footer（底部），但是马上发现有问题，我一个广告JS代码是写在底部里面
，虽然手机已经不显示底部了，那个JS广告仍然跑出来，由此判断，就算网
页自适应看不到底部，不代表底部区块的代码没有被加载。自己架网站的想
必都能理解，JS代码很吃伺服器资源，会影响网页加载负担和速度，既然手
机浏览的网页不需要底部，那麽最好乾脆不要加载底部代码，不然只是浪费
而已。
和这个问题直接相关的，还有另一个考量。有些类型的广告是电脑版、有些
广告是手机版，我希望同样网址，在网页和手机不但呈现的内容精简不同，
更希望能加载不同的广告代码，这个，单单CSS3的媒体设定没办法做到。
在查找了一些教程中，我偶然发现wordpress有一个非常棒的函数：「
wp_is_mobile()」，利用这个是否手机装置的判断函数，很轻松完全解决了
我的问题，实际运用上有三种方式，以我自己的网站为例：
一、手机上才加载的代码：
<?php if (wp_is_mobile() ): ?>
<!-- 百度移动插屏广告 -->
XXXXXX(移动广告代码）
<?php endif; ?>
二、电脑上才加载的代码：
<?php if ( wp_is_mobile() ) { ?><?php }
else { ?>
<!-- 百度图加广告 -->
<!--[if !IE]><!-->
XXXXXX(电脑广告代码）
<!--<![endif]-->
<?php } ?>
三、电脑手机若P则Q合并代码：
<?php if ( wp_is_mobile() ) { ?>
<!-- 百度移动插屏广告 -->
XXXXXX(移动广告代码）
<?php } else { ?>
<div id="sidebar"><?php get_sidebar(); ?></div>
<div id="footer"><?php get_footer(); ?></div>
<?php } ?>
第三种方式非常合乎我的需求，不但设置了电脑和手机呈现不同广告，同时
也限制了侧边和底部只在电脑浏览时才加载。
延伸阅读（网站建设）：
如何设定CSS寛度以打造手机网页：
http://www.b88104069.com/archives/4035
部落格广告联盟：BloggerAds、GoogleAdsense、百度联盟：
http://www.b88104069.com/archives/3099
Sitemap：Google、百度到搜狗：
http://www.b88104069.com/archives/2410
--
赞赞小屋：
http://www.b88104069.com
赞赞小屋 in facebook：
https://www.facebook.com/zanzanstory
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 183.206.182.208
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Blog/M.1463310034.A.DA2.html