本篇文章為WordPress的Code Snippets外掛教學,可以添加自己想要使用的功能程式碼,好管理也很方便。
新手架站推薦文章:
【架站教學】Cloudways架設WordPress網站,最適合速度效能優先的新手!
資訊安全外掛推薦文章:
【WordPress外掛】防止駭客後台暴力密碼破解,限制登入次數必備外掛!!
【WordPress外掛】UpdraftPlus自動備份網站到雲端,確保最後一道防線!!
點目錄可快速瀏覽資訊
為什麼要使用Code Snippets
程式碼片段可以添加Css、JavaScript以及PHP的程式碼,本篇比較會使用Css以及使用一點JavaScript的Jquery函式庫。其實WordPress佈景主題有一些功能像是網頁回到頂端也可以使用Jquery來寫這個功能以及使用Css來修改想要的版型。但是這兩個功能其實花錢買佈景主題的Pro就可以有這些功能或是很多版型可以選,所以本篇是給想要自己客製添加程式碼使用的。
安裝Code Snippets
step 1
安裝外掛點入外掛後進入安裝外掛,在搜尋的地方搜尋Code Snippets後立即安裝

step 2
啟用外掛按啟用後就可正常使用Code Snippets外掛了

開始使用外掛
step 1
新增程式碼片段按程式碼片段後再按新增程式碼片段

step 2
新增程式碼片段的內容輸入標題、程式碼、敘述程式碼的功能、標籤(如Css或是JavaScript)可自填字,輸入完成後可按儲存設定並使用

程式碼範例
網頁回到頂端
add_action( 'wp_head', function () { ?>
<body>
<a href="#" id="gotop">▲</a>
</body>
<script type="text/javascript">
jQuery(function($) {
/* 按下GoTop按鈕時的事件 */
$('#gotop').click(function(){
$('html,body').animate({ scrollTop: 0 }, 'slow'); /* 返回到最頂上 */
return false;
});
/* 偵測卷軸滑動時,往下滑超過400px就讓GoTop按鈕出現 */
$(window).scroll(function() {
if ( $(this).scrollTop() > 400){
$('#gotop').fadeIn();
} else {
$('#gotop').fadeOut();
}
});
});
</script>
<style>
#gotop {
position:fixed;
z-index:90;
right:30px;
bottom:31px;
display:none;
width:50px;
height:50px;
color:#fff;
background:#33b5e5;
line-height:50px;
border-radius:50%;
transition:all 0.5s;
text-align: center;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
#gotop :hover{
background:#0099CC;
}
</style>
<?php } );
結論
使用Code Snippets蠻方便可以管理程式碼片段,也可以自己製造外掛的功能來減少外掛。基本上外掛越多網站速度會變慢。像我自己是使用免費版Astra的佈景主題,不過免費版的Astra沒有網頁回到頂端的功能,這個時候使用Code Snippets就可以製作自己想要的功能來減少使用外掛的功能了。