▲

【WordPress外掛】WordPress添加程式碼片段，Code Snippets好管理的程式碼

wordpress外掛 / 2020 年 10 月 24 日
【WordPress外掛】WordPress添加程式碼片段，Code Snippets好管理的程式碼

本篇文章為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後立即安裝

Code Snippets安裝外掛

step 2

  啟用外掛

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

Code Snippets啟用外掛

開始使用外掛

step 1

  新增程式碼片段

按程式碼片段後再按新增程式碼片段

Code Snippets新增程式碼片段

step 2

  新增程式碼片段的內容

輸入標題、程式碼、敘述程式碼的功能、標籤(如Css或是JavaScript)可自填字，輸入完成後可按儲存設定並使用

Code Snippets新增程式碼片段的內容

程式碼範例

網頁回到頂端

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就可以製作自己想要的功能來減少使用外掛的功能了。

發表迴響