玩玩EXTRA模板的CSS並將首頁的ADSENSE代碼取消

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

裝修後過了一天,感覺首頁的那個slider似乎沒有太大必要,而且主題也不明確。

還是用一個靜態圖片好一些,用EXTRA的image 模塊加一張圖片很簡單,但沒有什麼動態效果,感覺不太美觀。好吧,用CSS打磨一個動態效果吧。



添加一個TEXT模塊,然後寫上下麵代碼
<div class="zoomimg-container">

<img class="zoomimg" style="width: 100%;" src="/placeholder.svg" data-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 國際許可協議進行許可。簡而言之,可隨意轉發轉載,轉載請注明出處。


留点评论吧: