玩玩EXTRA模板的CSS并将首页的ADSENSE代码取消

2018-09-23 约 905 字 预计阅读 2 分钟

装修后过了一天,感觉首页的那个slider似乎没有太大必要,而且主题也不明确。

还是用一个静态图片好一些,用EXTRA的image 模块加一张图片很简单,但没有什么动态效果,感觉不太美观。好吧,用CSS打磨一个动态效果吧。



添加一个TEXT模块,然后写上下面代码
<div class="zoomimg-container">

<img class="zoomimg" style="width: 100%;" src="https://jesselau.com/wp-content/uploads/2018/09/jesselaublog-1.jpg" />
<div class="zoomimg-content">
<h1>Welcome to Jesse Lau's Blog</h1>
Website Programing, Internet Marketing, Forex Trading, Billiard, Darts And I Can Stand On One Leg For 30 Minutes With My Eyes Closed. ☺

</div>
</div>



然后在EXTRA THEME OPTION的CUSTOM CSS添加下列代码:
.zoomimg-container {
position: relative;
width: 100%;
overflow: hidden;
}
.zoomimg {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.zoomimg-container:hover .zoomimg {
opacity: 0.5;
transform: scale(1.1);
}

.zoomimg-container:hover .zoomimg-content {
opacity: 1;
}

.zoomimg-container .zoomimg-content {
text-align: center;
position: absolute;
bottom: 0;
background: rgb(0, 0, 0); /* Fallback color */
background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
color: #f1f1f1 !important;
width: 100%;
padding: 20px;
opacity: 0;
font-size: 18px;
}
.zoomimg-container .zoomimg-content h1{

color: #f1f1f1 !important;

}

在本页展示一下效果。

 




Welcome to Jesse Lau's Blog


Website Programing, Internet Marketing, Forex Trading, Billiard, Darts And I Can Stand On One Leg For 30 Minutes With My Eyes Closed. ☺



 

这个方法其实跟EXTRA或者DIVI没有关系,也不需要去找他们的ID或CLASS。就是用的最简单的CSS代码,最本质的就是最好用的。

昨天加了ADSENSE自动代码后,今早发现首页上怎么这么多广告,弄得首页很难看,故此决定不在首页上作广告了。

Google本身对放置广告的页面质量有一定的要求,一个不小心很有可能放在不符合要求的页面,就会招致封号的惩罚。

对于博客而言,最有质量的页面就是经常更新的帖子,而不是首页或者关于作者、联系方式等页面。

故此需要想个办法将其他页面的广告代码屏蔽掉,只保留帖子里面的代码。

如果只采用AD Unit的方式,EXTRA很容易实现。直接在THEME OPTION里就可以设置。



只在帖子里面做广告,EXTRA内置两种方式,帖子前和帖子后两个广告,这个可以直接贴上google广告单元的代码即可。

但是google的AUTO ADS却是要求贴在HTML的head部分。这个就会导致全站都有广告,这个对用户界面也造成很大不利。

现在看起来需要改代码了。

Wordpress有一个很简单的函数可以判断是帖子还是其他,我们打开编辑器找到EXTRA模板的header.php文件,在</head>那行之上贴上下列代码:

 
<?php if ( is_single() ) { ?>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-123456789",
enable_page_level_ads: true
});
</script>
<?php }; ?>



存盘测试一下。首页或者关于页面等都没有google的自动广告代码了。

 

 

author

Jesse Lau

网名遁去的一,简称遁一。2012年定居新西兰至今,自由职业者。
本文采用知识共享署名 4.0 国际许可协议进行许可。简而言之,可随意转发转载,转载请注明出处。


留点评论吧:

本网站使用cookie技术以提高用户体验度。 了解我们的隐私政策 我已了解