部份網站主在文章上的分享時, 會讓瀏覽者無法使用右鍵功能, 進而無法複製想要的內容. 但又只想分享一部份的內容, 這時就可以增加一個按鈕功能, 搭配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檔案就可以了!
完成的畫面
最後, 就直接看網站的前台畫面中, 是不是有達到所需的要求了!
總結:
增加此功能,過程中雖然有些複雜,但照上方的內容去實作一次,相信可以完成.
以上僅供參考!
