首頁 » 網站架設相關 » WordPress小技巧 » [WP小技巧]Copy codes with a button

[WP小技巧]Copy codes with a button

部份網站主在文章上的分享時, 會讓瀏覽者無法使用右鍵功能, 進而無法複製想要的內容. 但又只想分享一部份的內容, 這時就可以增加一個按鈕功能, 搭配JavaScript語法來讓使用者去做選取複製的動作! 就不用把想要分享的內容存在檔案, 然後再做一個連結下載, 減少繁雜的處理過程!

當想要有此功能時, 需搭配Gutenberg(區塊編輯)的環境下使用, 若是使用Wordpress(WP)原先的編輯畫面去增加相關的功能時, 在Visual/HTML的二邊切換時, 會有部份代碼消失, 就無法完成需要的功能了.

Google搜尋相關:[stop WordPress from stripping HTML], 就可以更清楚了解為什麼了!

下圖為Gutenberg的操作環境:

確認Gutenberg功能存在

在網站主機中確認是否有加入以下代碼, 如果有記得把它刪除, 才能正常使用Gutenberg. 檢查路徑大部份都是以下位置:

//public_html/wp-content/themes/使用中的佈景主題名稱/function.php

[溫馨提醒]

修改任何佈景主題內的文件時, 建議使用子佈景主題, 以避免造成網站不正常!

加入分享的內容

這裡以程式碼的內容來示範, 一開始選擇[<>程式碼]的功能, 貼上所需的代碼, 因為要更改某些字串, 所以切換至[編輯HTML程式碼]的環境中, 更改紅色框中class成id. 圖中為示意圖, 目前並未更改成id的字串名稱. 而[=]後方的名稱, 可以隨意變更成易記的名稱就好.

在更改class的字串名稱到id時, WP系統會提示此區塊包含未預期或無效的內容, 此時切換到[轉換成HTML]即可!

增加按鈕功能

增加[自訂HTML]的區塊功能, 貼上下方的代碼, 其中藍色框為上一個步驟id的名稱. 這裡button中的onClick功能, 需要以id的名稱來使用, 如果用預設class的名稱來使用, 最後在實作功能是沒有作用的!

<button>建立一個名稱為[Copy]的按鈕, 同時有點擊的作用!

<Script>代碼功能簡介–> 選取已指定此id中的內容, 然後複製起來!

預覽實作功能畫面

到這裡就完作功能的實作了! 然後直接預覽網站前台的畫面, 在按下[Copy]此按鈕之後, 就會同時複製上方所需分享的內容, 再來就可以貼在所需的地方!

變更按鈕的樣式

若是需要更改按鈕的樣式, 則需要加入紅色框中的內容, 名稱可以自取. 而原先的[Copy]字串名稱也同時更改為[複製代碼],更淺而易懂.

加入以下代碼到網站主機內, 檔案名稱style.css, 路徑大多是以下的位置:

/public_html/wp-content/themes/使用中的佈景主題名稱/ 或是[子佈景主題內].

#btnCopy {
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	background-color:#79bbff;
	border-radius:6px;
	border:1px solid #84bbf3;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
}

#btnCopy:hover {
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	background-color:#378de5;
}
#btnCopy:active {
	position:relative;
	top:1px;
}

線上產生按鈕的樣式

若是想有不同的樣式, 可以直接到這裡, 去做任何變更, 最後把CSS的代碼複製到佈景主題中style.css檔案就可以了!

完成的畫面

最後, 就直接看網站的前台畫面中, 是不是有達到所需的要求了!

總結:
增加此功能,過程中雖然有些複雜,但照上方的內容去實作一次,相信可以完成.
以上僅供參考!

Share via:

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *