Wordpress實現調用一篇文章的第一張圖片

在HTML中很多時候會有鼠標滑動至一個文章標題或鏈接然后使得該篇文章的圖片顯示，這個可以通過jQuery來實現，而在通過wordpress管理后臺當中，也可以通過一段代碼來簡單實現。

html代碼的簡單樣式

<h3 style="font-size: 28px;">實驗中學熱點新聞</h3>

<li class="list-group-item"><a href="#">我小舉行大型文藝活動</a><span class="badge">2016-10-25</span></li>

</ul>

</div>

</ul>

</div>

第一個DIV顯示文章標題和時間

第二個div顯示想對應圖片，實現方法為調用函數

jQuery函數

// 主頁熱點新聞實現鼠標移動至新聞，顯示對應圖片

// 所有圖片隱藏,隱藏這一步由CSS完成

//初始狀態第一張圖片顯示

$('#center-top .hot-right>ul>li').eq(0).show();

//當鼠標移至新聞鏈接上時，讓該事件產生回調函數

$('.hot-left>ul>li>a').css('color','#666')

$('.hot-left>ul>li').mouseover(function(){

//獲取該條新聞的key值，也可稱下標

var j=$(this).index();

$(' .hot-left>ul>li').css('background-color','#fff')

$(this).css('background-color','#16A085')

$('.hot-left>ul>li>a').css('color','#666')

$('.hot-left>ul>li>a').eq(j).css('color','#fff')

//隱藏所有圖片

$('.hot-right>ul>li').hide();

//對應下標的圖片顯示

$(' .hot-right>ul>li').eq(j).show();

});

首先在WordPress的functions.php加入以下函數調用第一張圖片，代碼

//在Function.php里面加入一段獲取首張圖片的函數：

function catch_that_image() {

global $post, $posts;

$first_img='';

ob_start();

ob_end_clean();

$output=preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);

$first_img=$matches [1] [0];

if(empty($first_img)){

$first_img=get_bloginfo('template_directory')."/img/default.jpg";

}

return $first_img;

}

通過定義抓取第一張圖片的函數catch_that_image()

然后在要實現的頁面如index.php中使用loop循環

<?php query_posts('showposts=5&cat=3'); ?>

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post();?>

<li class="list-group-item"><a href="<?php the_permalink() ?>"><img src="<?php echo catch_that_image(); ?>" class="img-responsive" alt=""></a></li>

<?php endwhile;?>

<?php endif;?>

</ul>

<?php wp_reset_query(); ?>

這樣就能動態的實現這個功能了！

好程序員web前端學習路線分享jQuery學習技巧，jQuery在web前端學習中是一個必不可少的內容，很多小伙伴都在學習這階段的時候遇到問題，今天我們就來聊一下jQuery，讓我們一起來看一看吧！

1、關于頁面元素的引用

通過jquery的$引用元素包括通過id、class、元素名以及元素的層級關系及dom或者xpath條件等方法，且返回的對象為jquery對象(集合對象)，不能直接調用dom定義的方法。

2、jQuery對象與dom對象的轉換

只有jquery對象才能使用jquery定義的方法。注意dom對象和jquery對象是有區別的，調用方法時要注意操作的是dom對象還是jquery對象。普通的dom對象一般可以通過$轉換成jquery對象。

如：$(document.getElementById("msg"))則為jquery對象，可以使用jquery的方法。

由于jquery對象本身是一個集合。所以如果jquery對象要轉換為dom對象則必須取出其中的某一項，一般可通過索引取出。

如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get[1]，$("td")[5]這些都是dom對象，可以使用dom中的方法，但不能再使用Jquery的方法。

以下幾種寫法都是正確的：

$("#msg").html;

$("#msg")[0].innerHTML;

$("#msg").eq(0)[0].innerHTML;

$("#msg").get(0).innerHTML;

3、如何獲取jQuery集合的某一項

對于獲取的元素集合，獲取其中的某一項(通過索引指定)可以使用eq或get(n)方法或者索引號獲取，要注意，eq返回的是jquery對象，而get(n)和索引返回的是dom元素對象。對于jquery對象只能使用jquery的方法，而dom對象只能使用dom的方法，如要獲取第三個

元素的內容。

有如下兩種方法：

$("div").eq(2).html;//調用jquery對象的方法

$("div").get(2).innerHTML;//調用dom的方法屬性

4、同一函數實現set和get

Jquery中的很多方法都是如此，主要包括如下幾個：

· $("#msg").html;//返回id為msg的元素節點的html內容。

· $("#msg").html("new content");

· //將“new content” 作為html串寫入id為msg的元素節點內容中,頁面顯示粗體的new content

· $("#msg").text;//返回id為msg的元素節點的文本內容。

· $("#msg").text("newcontent");

· //將“new content” 作為普通文本串寫入id為msg的元素節點內容中,頁面顯示new content

· $("#msg").height;//返回id為msg的元素的高度

· $("#msg").height("300");//將id為msg的元素的高度設為300

· $("#msg").width;//返回id為msg的元素的寬度

· $("#msg").width("300");//將id為msg的元素的寬度設為300

· $("input").val(");//返回表單輸入框的value值

· $("input").val("test");//將表單輸入框的value值設為test

· $("#msg").click;//觸發id為msg的元素的單擊事件

· $("#msg").click(fn);//為id為msg的元素單擊事件添加函數

· 同樣blur,focus,select,submit事件都可以有著兩種調用方法

5、集合處理功能

· $.extend({

· min:function(a, b){return a < b?a:b; },

· max:function(a, b){return a > b?a:b; }

· });//為jquery擴展了min,max兩個方法

· 使用擴展的方法(通過“$.方法名”調用)：

· alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

6、支持方法的連寫

所謂連寫，即可以對一個jquery對象連續調用各種不同的方法。

例如：

$("p").click(function{alert($(this).html)})

.mouseover(function{alert('mouseover event')})

.each(function(i){this.style.color=['#f00','#0f0','#00f'][i ]});

7、操作元素的樣式

主要包括以下幾種方式：

· $("#msg").css("background");//返回元素的背景顏色

· $("#msg").css("background","#ccc")//設定元素背景為灰色

· $("#msg").height(300);$("#msg").width("200"); //設定寬高

· $("#msg").css({color: "red", background:"blue" });//以名值對的形式設定樣式

· $("#msg").addClass("select");//為元素增加名稱為select的class

· $("#msg").removeClass("select");//刪除元素名稱為select的class

· $("#msg").toggleClass("select");//如果存在(不存在)就刪除(添加)名稱為select的class

8、完善的事件處理功能

Jquery已經為我們提供了各種事件處理方法，我們無需在html元素上直接寫事件，而可以直接為通過jquery獲取的對象添加事件。

如：

$("#msg").click(function{alert("good")})//為元素添加了單擊事件

$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i ]})

//為三個不同的p元素單擊事件分別設定不同的處理

jQuery中幾個自定義的事件：

(1)hover(fn1,fn2)：一個模仿懸停事件(鼠標移動到一個對象上面及移出這個對象)的方法。當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。

//當鼠標放在表格的某行上時將class置為over，離開時置為out。

$("tr").hover(function{

$(this).addClass("over");

function{

$(this).addClass("out");

});

(2)ready(fn):當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。

$(document).ready(function{alert("Load Success")})

//頁面加載完畢提示“Load Success”,相當于onload事件。與$(fn)等價

(3)toggle(evenFn,oddFn):每次點擊時切換要調用的函數。如果點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二個函數。隨后的每次點擊都重復對這兩個函數的輪番調用。

//每次點擊時輪換添加和刪除名為selected的class。

$("p").toggle(function{

$(this).addClass("selected");

},function{

$(this).removeClass("selected");

});

(4)trigger(eventtype):在每一個匹配的元素上觸發某類事件。

例如：

$("p").trigger("click");//觸發所有p元素的click事件

(5)bind(eventtype,fn)，unbind(eventtype): 事件的綁定與反綁定

從每一個匹配的元素中(添加)刪除綁定的事件。

例如：

$("p").bind("click",function{alert($(this).text);}); //為每個p元素添加單擊事件

$("p").unbind;//刪除所有p元素上的所有事件

$("p").unbind("click")//刪除所有p元素上的單擊事件

9、幾個實用特效功能

其中toggle和slidetoggle方法提供了狀態切換功能。

如toggle方法包括了hide和show方法。

slideToggle方法包括了slideDown和slideUp方法。

10、幾個有用的jQuery方法

$.browser.瀏覽器類型：檢測瀏覽器類型。有效參數：safari, opera,msie,mozilla。如檢測是否ie：$.browser.isie，是ie瀏覽器則返回true。

$.each(obj,fn)：通用的迭代函數?？捎糜诮频氐鷮ο蠛蛿到M(代替循環)。

如

$.each([0,1,2], function(i, n){ alert( "Item #" + i + ": " + n );});

等價于：

vartempArr=[0,1,2];

for(vari=0;i

alert("Item#"+i+": "+tempArr[ i ]);

}

也可以處理json數據，如

$.each({ name: "John", lang: "JS" }, function(i, n){ alert("Name: " + i + ", Value: " + n ); });

結果為：

Name:name,Value:John

Name:lang,Value:JS

$.extend(target,prop1,propN)：用一個或多個其他對象來擴展一個對象，返回這個被擴展的對象。這是jquery實現的繼承方式。

如：

$.extend(settings,options);

//合并settings和options，并將合并結果返回settings中，相當于options繼承setting并將繼承結果保存在setting中。

var settings=$.extend({}, defaults, options);

//合并defaults和options，并將合并結果返回到setting中而不覆蓋default內容。

可以有多個參數(合并多項并返回)

$.map(array,fn)：數組映射。把一個數組中的項目(處理轉換后)保存到到另一個新數組中，并返回生成的新數組。

如：

vartempArr=$.map( [0,1,2], function(i){ return i + 4; });

tempArr內容為：[4,5,6]

vartempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });

tempArr內容為：[2,3]

$.merge(arr1,arr2):合并兩個數組并刪除其中重復的項目。

如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]

$.trim(str)：刪除字符串兩端的空白字符。

如：$.trim(" hello, how are you? "); //返回"hello,how are you? "

11、解決自定義方法或其他類庫與jQuery的沖突

很多時候我們自己定義了$(id)方法來獲取一個元素，或者其他的一些js類庫如prototype也都定義了$方法，如果同時把這些內容放在一起就會引起變量方法定義沖突，Jquery對此專門提供了方法用于解決此問題。

使用jquery中的jQuery.noConflict;方法即可把變量$的控制權讓渡給第一個實現它的那個庫或之前自定義的$方法。之后應用Jquery的時候只要將所有的$換成jQuery即可，如原來引用對象方法$("#msg")改為jQuery("#msg")。

1. 基本要求

前端界面顯示的速度一般要求是：60fps

2. 根據要求 1s / 60=16.67ms 即：處理一個界面的時間，除了瀏覽器自己需要的時間，開發者能使用的時間大概10ms

10ms中處理的流程為：

javascript > style > layout > paint > composite

如果JS的操作影響到了界面樣式的變化，則有上面的處理流程

如果style的操作影響到布局，則會進入layout，反之亦然；style改了transform屬性，在blink和edge瀏覽器里面不需要layout和paint

3. 減少渲染堵塞

避免head標簽JS堵塞

異步加載JS: HTML5 的script 屬性 defer

JS寫在body后面

Tips: 可能有時候JS庫，還沒加載完就要執行了，可能會報錯

減少 head 中的 CSS 資源

CSS 會影響到 layout ，寫在Body里面會界面閃爍，但寫在Head里面如果太多會影響渲染

不要寫太多base64，雖然很方便，但會改變文件大小

如果CSS文件沒有達到三位數的大小，可以直接寫到Html界面中，因為如果使用外鏈樣式，則可能會花費更多時間，如DNS解析，建立鏈接，下載等

優化圖片，使用響應式圖片，圖片的srcset 屬性，會有兼容問題

使用picture按需加載，需要寫在HTML中，如果使用JS來調用，則無效

<source srcset='baner_w1000.jpg' media="(min-width:801px)"> # source 還有其它的優化屬性，不過會有兼容問題: type='image/webp'

<img src='baner_w800.jpg' alt=''> # picture 必需有 img 標簽，只有img標簽才會觸發onload事件; picture 與 source 都不觸發 layout

</picture>

判斷瀏覽器是否支持：

var supportSrcset='srcset' in document.createElement('img');

var surportPicture='HTMLPictureElement' in window;

延遲加載

<img data-src="photo_w350.jpg" src="about:blank" alt=""> # src 寫為此值不會報錯，也對瀏覽器友好

</picture>

監聽Scroll事件

showImage(leftSpace=500){

var scrollTop=$window.scrollTop(), $containers=this.$imgContainers, scrollPosition=$window.scrollTop() + $window.height();

for(var i=0; i < $containers.length; i++){

//如果快要滑到圖片的位置了

var $container=$containers.eq(i);

if($container.offset().top - scrollPosition < leftSpace) {

this.ensureImgSrc($container);

}

ensureImgSrc($container) {

var $source=$container.find("source");

if($source.length && !$source.attr("srcset")){

$source.attr("srcset", $source.data("srcset"));

}

var $img=$container.find("img:not(.loading)");

if($img.length && $img.attr("src").indexOf("http://") < 0){

$img.attr("src", $img.data("src"));

this.shownCount++;

}

init(){

//初始化

var leftSpace=0;

this.showImage(leftSpace);

//滑動

$window.on("scroll", this, this.throttleShow);

}

ensureImgSrc($container){

//如果全部顯示，off掉window.scroll

if(this.shownCount >=this.allCount){

$window.off("scroll", this.throttleShow);

}

指定圖片尺寸，避免 reflow

4. 壓縮與緩存

作用

第一個是把200變成304，避免資源重新傳輸，

第二個是讓瀏覽器直接從緩存取，連http請求都不用了，這樣對于第二次訪問頁面是極為有利的。

開啟壓縮 gzip

server {

gzip on;

gzip_types text/plain application/javascript application/x-javascript text/html text/css text/xml text/javascript

}

緩存 Cache-Control

location ~* \.(jpg|gif|png|webp) {

expires 30d;

}

location ~* \.(css|js) {

expires 1d;

}

此方法會在返回的請求響應頭中添加 Cache-Control: max-age=604800 ，且 max-age 的優先級會大于 last-modified

開啟 nginx last-modified 字段，在響應頭中： last-modified 字段接收nginx的數據，在請求頭中： If-Modified-Since 字段返回給nginx

這個辦法得查手冊

使用etag，在響應頭中是： Etag 字段，在請求頭中會記錄在 If-None-Match 字段

server {

etag on;

}

5. 其它優化

DNS預讀取

HTML優化

刪除注釋、縮進，除了 pre 或 code 這樣的標簽不能刪除，其它的都可以

代碼優化

例如說html別嵌套太多層，否則加重頁面layout的壓力

CSS的選擇器別寫太復雜，不然匹配的計算量會比較大

JS的濫用閉包，閉包會加深作用域鏈，加長變量查找的時間

6. 利用HTML5或CSS3

代替圖片或 LocalStorage、 Offline Storage

在線咨詢

上一篇：從0搭建一個WebRTC，實現多房間多對多通話，并實
下一篇：Eclipse轉型IDEA快速上手指南

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Wordpress實現調用一篇文章的第一張圖片

1. 基本要求

2. 根據要求 1s / 60=16.67ms 即：處理一個界面的時間，除了瀏覽器自己需要的時間，開發者能使用的時間大概10ms

3. 減少渲染堵塞

4. 壓縮與緩存

5. 其它優化

6. 利用HTML5或CSS3

您的項目需求

2. 根據要求 1s / 60=16.67ms 即：處理一個界面的時間，除了瀏覽器自己需要的時間，開發者能使用的時間大概10ms