在WordPress中實(shí)現(xiàn)評(píng)論頭像的自定義默認(rèn)和延遲加載
自定義 WordPress 默認(rèn)評(píng)論頭像
對(duì)于沒(méi)有設(shè)置Gravatra頭像的評(píng)論者來(lái)說(shuō),WordPress會(huì)顯示一個(gè)你在后臺(tái)設(shè)置的默認(rèn)頭像,可以是神秘人、空白、默認(rèn)的Gravatar 標(biāo)志等等。但是這些頭像有一個(gè)共同的不足之處,就是不怎么美觀,可看性不強(qiáng)!打個(gè)比方,如果你去一個(gè)博客閱讀文章,但當(dāng)你放心評(píng)論文章的讀者頭像都是小怪物、復(fù)古等一系列WordPress自動(dòng)生成的“不堪入目”的頭像時(shí),你還有很濃的興趣去閱讀這個(gè)博客的文章嗎?我想答案是肯定的!那么,你有沒(méi)有想過(guò),自己設(shè)計(jì)或找一個(gè)屬于你博客、適合你博客的默認(rèn)WordPress頭像那?好了,周良就不吊大家的胃口了,讓我來(lái)說(shuō)一下如何不使用插件實(shí)現(xiàn)自定義WordPress默認(rèn)評(píng)論頭像的方法。
方法很簡(jiǎn)單,將下面我提供的這段代碼放在你正在使用的主題functions.php文件中。
<?php // Make a new default gravatar available on the dashboard function newgravatar ($avatar_defaults) { $myavatar = get_bloginfo('template_directory') . '/images/tweaker.jpg'; $avatar_defaults[$myavatar] = "Tweaker"; return $avatar_defaults; } add_filter( 'avatar_defaults', 'newgravatar' ); ?>
上面代碼中的/images/tweaker.jpg就是自定義默認(rèn)頭像的相對(duì)路徑,你可以自行修改圖片的地址。建議將頭像放到你正在使用的主題images文件下面。
延遲加載 WordPress 評(píng)論頭像
修改 HTML 結(jié)構(gòu)
因?yàn)榍懊嬲f(shuō)到在新式瀏覽器中的問(wèn)題, 我們不能再用一般書(shū)寫(xiě) HTML 圖片的方式, 而是要將占位符寫(xiě)到 src 屬性, 而將真正的圖片地址寫(xiě)在 data-original 屬性上. 所以 WordPress 頭像代碼結(jié)構(gòu)應(yīng)該是下面這樣的.
<img class="avatar" src="占位符圖片.gif" data-original="頭像圖片.jpg" />
在 WordPress 中, 本來(lái)輸出頭像如下.
<?php echo get_avatar($comment); ?>
現(xiàn)在需要改為適合 Lazy Load 插件的結(jié)構(gòu)如下.
<?php echo '<img class="avatar" src="占位符圖片.gif" alt="" data-original="' . preg_replace(array('/^.+(src=)(\"|\')/i', '/(\"|\')\sclass=(\"|\').+$/i'), array('', ''), get_avatar($comment)) . '" />'; ?>
這里建議使用 loading 圖片或者默認(rèn)頭像作為占位符圖片.
添加 Lazy Load 支持
打開(kāi) footer.php, 在 </body> 前添加 Lazy Load 插件和調(diào)用即可.
<script src="jquery.lazyload.js"></script> <script> /* <![CDATA[ */ $("img.avatar").lazyload(); /* ]]> */ </script>
當(dāng)然, 在這之前你還需確保你的網(wǎng)站已經(jīng)載入 jQuery. 完整的說(shuō)明可以參考我翻譯的關(guān)于 Lazy Load 的文章.
使用 Lazy Load 的優(yōu)缺點(diǎn)
為什么用要 Lazy Load? 可能使用之前你就知道, 可以延遲加載圖片, 提升頁(yè)面加載速度. 但其實(shí)緊緊是速度問(wèn)題, 其對(duì)網(wǎng)站的 SEO 也很重要. 比如: 現(xiàn)在有某文章頁(yè)面, 后面有 N 多人回復(fù), 但這些回復(fù)者的頭像與文章內(nèi)容往往沒(méi)有關(guān)系, 我們不希望搜索引擎收錄這么多無(wú)關(guān)的圖片.
換個(gè)角度, 如果我們做的是電子商務(wù)網(wǎng)站, 希望產(chǎn)品的 description 中有豐富的圖文信息, 并且被搜索引擎爬取. 但這些圖片往往尺寸大影響加載速度, 淘寶為了頁(yè)面性能也已經(jīng)全部延遲加載, 而那些對(duì) SEO 依賴性強(qiáng)的平臺(tái)來(lái)說(shuō)這種做法未必是好事.
選擇是否延遲加載圖片, 要衡量?jī)?nèi)容的重要性和頁(yè)面的性能, 在其中取得平衡很重要.
- 使用jQuery實(shí)現(xiàn)WordPress中的Ctrl+Enter和@評(píng)論回復(fù)
- 利用AJAX實(shí)現(xiàn)WordPress中的文章列表及評(píng)論的分頁(yè)功能
- WordPress中利用AJAX異步獲取評(píng)論用戶頭像的方法
- WordPress中限制非管理員用戶在文章后只能評(píng)論一次
- 講解WordPress中用于獲取評(píng)論模板和搜索表單的PHP函數(shù)
- 利用jQuery實(shí)現(xiàn)WordPress中@的ID懸浮顯示評(píng)論內(nèi)容
- 修改PHP腳本使WordPress攔截垃圾評(píng)論的方法示例
- WordPress中對(duì)訪客評(píng)論功能的一些優(yōu)化方法
- WordPress過(guò)濾垃圾評(píng)論的幾種主要方法小結(jié)
相關(guān)文章
PHP結(jié)合Vue實(shí)現(xiàn)滾動(dòng)底部加載效果
這篇文章主要給大家介紹了關(guān)于PHP結(jié)合Vue如何實(shí)現(xiàn)滾動(dòng)底部加載效果的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12瀏覽器預(yù)覽PHP文件時(shí)頂部出現(xiàn)空白影響布局分析原因及解決辦法
在編寫(xiě)PHP文件過(guò)程中,發(fā)現(xiàn)在瀏覽器預(yù)覽PHP文件時(shí),頂部會(huì)出現(xiàn)一行空白,影響了頁(yè)面的布局2013-01-01分享PHP計(jì)算兩個(gè)日期相差天數(shù)的代碼
這篇文章主要為大家分享了PHP計(jì)算兩個(gè)日期差的代碼,實(shí)例分析了php操作日期的技巧,需要的朋友可以參考下2015-12-12win7 64位系統(tǒng) 配置php最新版開(kāi)發(fā)環(huán)境(php+Apache+mysql)
作為一個(gè)phper,基礎(chǔ)的php開(kāi)發(fā)環(huán)境的配置是最基本的本事了,今天我們來(lái)看下在win7 64位系統(tǒng)中,如何配置php的開(kāi)發(fā)環(huán)境呢2014-08-08PHP數(shù)組無(wú)限分級(jí)數(shù)據(jù)的層級(jí)化處理代碼
在很多朋友寫(xiě)無(wú)限級(jí)分類數(shù)據(jù)時(shí)都直接使用遞歸來(lái)操作,下面我來(lái)介紹一下關(guān)于PHP無(wú)限分級(jí)代碼優(yōu)化方法,有需要的朋友可參考一下2012-12-12php實(shí)現(xiàn)等比例不失真縮放上傳圖片的方法
這篇文章主要介紹了php實(shí)現(xiàn)等比例不失真縮放上傳圖片的方法,結(jié)合實(shí)例形式分析了php基于自定義函數(shù)實(shí)現(xiàn)等比例不失真縮放上傳圖片的具體功能定義與使用方法,需要的朋友可以參考下2016-11-11