在WordPress中實現(xiàn)評論頭像的自定義默認和延遲加載
自定義 WordPress 默認評論頭像
對于沒有設置Gravatra頭像的評論者來說,WordPress會顯示一個你在后臺設置的默認頭像,可以是神秘人、空白、默認的Gravatar 標志等等。但是這些頭像有一個共同的不足之處,就是不怎么美觀,可看性不強!打個比方,如果你去一個博客閱讀文章,但當你放心評論文章的讀者頭像都是小怪物、復古等一系列WordPress自動生成的“不堪入目”的頭像時,你還有很濃的興趣去閱讀這個博客的文章嗎?我想答案是肯定的!那么,你有沒有想過,自己設計或找一個屬于你博客、適合你博客的默認WordPress頭像那?好了,周良就不吊大家的胃口了,讓我來說一下如何不使用插件實現(xiàn)自定義WordPress默認評論頭像的方法。
方法很簡單,將下面我提供的這段代碼放在你正在使用的主題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就是自定義默認頭像的相對路徑,你可以自行修改圖片的地址。建議將頭像放到你正在使用的主題images文件下面。
延遲加載 WordPress 評論頭像
修改 HTML 結構
因為前面說到在新式瀏覽器中的問題, 我們不能再用一般書寫 HTML 圖片的方式, 而是要將占位符寫到 src 屬性, 而將真正的圖片地址寫在 data-original 屬性上. 所以 WordPress 頭像代碼結構應該是下面這樣的.
<img class="avatar" src="占位符圖片.gif" data-original="頭像圖片.jpg" />
在 WordPress 中, 本來輸出頭像如下.
<?php echo get_avatar($comment); ?>
現(xiàn)在需要改為適合 Lazy Load 插件的結構如下.
<?php echo '<img class="avatar" src="占位符圖片.gif" alt="" data-original="' . preg_replace(array('/^.+(src=)(\"|\')/i', '/(\"|\')\sclass=(\"|\').+$/i'), array('', ''), get_avatar($comment)) . '" />'; ?>
這里建議使用 loading 圖片或者默認頭像作為占位符圖片.
添加 Lazy Load 支持
打開 footer.php, 在 </body> 前添加 Lazy Load 插件和調用即可.
<script src="jquery.lazyload.js"></script> <script> /* <![CDATA[ */ $("img.avatar").lazyload(); /* ]]> */ </script>
當然, 在這之前你還需確保你的網(wǎng)站已經(jīng)載入 jQuery. 完整的說明可以參考我翻譯的關于 Lazy Load 的文章.
使用 Lazy Load 的優(yōu)缺點
為什么用要 Lazy Load? 可能使用之前你就知道, 可以延遲加載圖片, 提升頁面加載速度. 但其實緊緊是速度問題, 其對網(wǎng)站的 SEO 也很重要. 比如: 現(xiàn)在有某文章頁面, 后面有 N 多人回復, 但這些回復者的頭像與文章內容往往沒有關系, 我們不希望搜索引擎收錄這么多無關的圖片.
換個角度, 如果我們做的是電子商務網(wǎng)站, 希望產品的 description 中有豐富的圖文信息, 并且被搜索引擎爬取. 但這些圖片往往尺寸大影響加載速度, 淘寶為了頁面性能也已經(jīng)全部延遲加載, 而那些對 SEO 依賴性強的平臺來說這種做法未必是好事.
選擇是否延遲加載圖片, 要衡量內容的重要性和頁面的性能, 在其中取得平衡很重要.
相關文章
瀏覽器預覽PHP文件時頂部出現(xiàn)空白影響布局分析原因及解決辦法
在編寫PHP文件過程中,發(fā)現(xiàn)在瀏覽器預覽PHP文件時,頂部會出現(xiàn)一行空白,影響了頁面的布局2013-01-01win7 64位系統(tǒng) 配置php最新版開發(fā)環(huán)境(php+Apache+mysql)
作為一個phper,基礎的php開發(fā)環(huán)境的配置是最基本的本事了,今天我們來看下在win7 64位系統(tǒng)中,如何配置php的開發(fā)環(huán)境呢2014-08-08PHP數(shù)組無限分級數(shù)據(jù)的層級化處理代碼
在很多朋友寫無限級分類數(shù)據(jù)時都直接使用遞歸來操作,下面我來介紹一下關于PHP無限分級代碼優(yōu)化方法,有需要的朋友可參考一下2012-12-12