網站 / 增加置頂文章並顯示”置頂文章”

網站 / 增加置頂文章並顯示”置頂文章”

Post Views: 428

WordPress 有三種方式可以將文章設定成置頂文章

但是我想在文章前加上”置頂文章”四個字

這就必須要用額外的程式來呈現

研究了很久

以下簡單說明程式碼內容

#3 WordPress的置頂文章會加上一個名稱為”sticky”的class

#5-12 由於抓取class的回傳值是陣列型態，所以透過for迴圈的方式逐一加上標誌文字

#6 創建一個html H2的標籤

#7 創建一個文字節點來設定要存入的文字串

#8 將文字節點加到剛剛新建的H2標籤內

#10 再取得 sticky，這邊就要指定是哪一個

#11 將新增的H2標籤加到 sticky的第一個子節點

再配合外掛”程式碼片段”加上下面的程式碼就大功告成

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
 
window.onload = function() {

		var oTest_all = document.getElementsByClassName("sticky");
		
		for(var i=0; i < oTest_all.length; i++){
			var h=document.createElement("H2")
			var t=document.createTextNode("置頂文章─"+(i+1));
			h.appendChild(t);
			
			var oTest_one = document.getElementsByClassName("sticky")[i];
			oTest_one.insertBefore(h,oTest_one.childNodes[0]);
		}
}

 

參考資料

HTML DOM createTextNode() 方法

HTML DOM insertBefore() 方法

forEach is not a function error with JavaScript array

Tags: