前言介紹
- 這款 WordPress 外掛「Sticky Copy Button for Code Blocks」是 2025-08-22 上架。
- 目前有 10 個安裝啟用數。
- 上一次更新是 2026-02-20，距離現在已有 6 天。
- 外掛最低要求 WordPress 5.0 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
- 有 1 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
kasuga16 |
外掛標籤
code | copy | easy | button | line-numbers |
內容簡介
總結：這個外掛在您的部落格文章中的每個程式碼區塊添加了一個方便的複製按鈕，讓使用者能夠輕鬆以一鍵複製程式碼。
1. 這個外掛如何幫助使用者輕鬆複製程式碼？
- 透過點擊程式碼區塊上的按鈕，使用者即可將程式碼立即複製到剪貼簿中。
2. 這個外掛有哪些彈性的客製化功能？
- 使用者可以從專用設定頁面自由調整按鈕的位置、大小、顏色和標籤（複製前和複製後）以完美匹配您的網站設計。
3. 這個外掛如何確保輕量又快速？
- 外掛僅加載必要的 CSS 和 JavaScript，確保不會影響網站的效能。
4. 透過這個外掛如何讓您的部落格訪客更容易抓取程式碼片段？
- 透過在每個程式碼區塊上添加一個簡單的複製按鈕，提高便利性，使您的程式碼內容更加友好。
原文外掛簡介
Sticky Copy Button for Code Blocks automatically adds a floating copy button to each
block on your website.
It provides convenient front-end copying for developers, readers, and tutorial users.
Features
This plugin is light, fast, and highly customizable:
Adjustable button position (up/down and left/right)
Customizable labels (“Copy” / “Copied”)
Adjustable font size
Background color, text color, or transparent mode
Max-height option for large code blocks (with scroll support)
Optional line numbers (simple native implementation)
Custom CSS that is safely sanitized
No dependencies such as Prism or Highlight.js are required.
Detailed Settings Guide
The following explains every option in the plugin settings page.
1. Button Position
Adjust vertical position (top offset in px)
Moves the button up or down relative to the top of the code block.
Use positive or negative values to fine-tune vertical alignment.
Adjust horizontal position (right offset in px)
Moves the button left or right by adjusting how far it sits from the right edge of the code block.
Use positive or negative values to fine-tune horizontal alignment.
These values help fine-tune button alignment to avoid overlapping with theme elements.
2. Button Text and Behavior
Copy button label
The label shown normally (default: “Copy”).
Label after copying (2 seconds)
Once the text is copied, the button temporarily displays this label.
Default: “Copied”.
3. Button Size
Button size (8–36 px)
Controls the font size of the button.
Padding is automatically adjusted based on this value.
4. Button Colors
Button text color
Hex color of button text.
Button background color
Hex background color.
When copying, the plugin automatically swaps the text and background colors for visual feedback.
However, if the background is transparent, only the text color is swapped.
Always transparent background
If enabled:
– The button background always becomes transparent.
– Only text + border remain visible
5. Code Block Max Height
Code block max height (px)
Sets a maximum height (minimum: 100px).
Content taller than this becomes scrollable.
Enable
Must be checked for the value to apply.
This prevents long code blocks from stretching your page layout.
6. Display Line Numbers
Display Line Numbers (Enable)
Shows simple line numbers next to each line.
Notes:
– Line height is unified for consistency.
– Theme-specific code styling is preserved.
– Line wrapping is forcibly disabled.
This is a built-in lightweight alternative to syntax-highlighter libraries.
7. Custom Styles (CSS)
You can add any custom CSS to adjust:
Button design
Wrapper layout
Code spacing
Line number appearance
Usable Selectors (CSS) :
.copy-code-btn → The copy button
.copy-code-btn.copied → The button after Copying
.code-block-wrapper → Wrapper of the code block (position: relative)
.code-block-wrapper pre → Inner code text area (the
element)
.line-numbers → The container holding the line numbers
Example:
.copy-code-btn {
font-family: "Comic Sans MS", cursive;
font-weight: 700;
border: none;
}
Note: Do not include any comments.
Donate
If you find this plugin useful and would like to support its development,
you can make a voluntary donation via PayPal.
Your support helps keep this plugin maintained and improved.
Thank you!
PayPal: https://www.paypal.me/Kasuga16
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Sticky Copy Button for Code Blocks」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0.0 | 1.0.1 | 1.1.0 | 1.2.0 | 1.4.0 | 1.5.0 | 1.5.1 | trunk |
延伸相關外掛（你可能也想知道）
WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager 》插入標頭和頁腳 + 完整的 WordPress 代碼片段外掛, WPCode (前稱为 WPBeginner 的 "插入標頭和頁腳"）是使用率超过 100 万个网站的 WordPress 代码片段外掛中...。
Code Snippets 》Code Snippets 是在您的網站上運行程式碼片段的簡單，清潔和簡單的方法。它消除了將自定義片段添加到您的佈景主題的 functions.php 檔案的需求。, 現在提供 C...。
Simple Custom CSS Plugin 》無需麻煩地將自訂 CSS 新增到 WordPress 網站中。, 這是一個易於使用的 WordPress 外掛，可以添加自訂 CSS 樣式以覆寫外掛和佈景主題的預設樣式。該外掛旨在...。
Shortcoder — Create Shortcodes for Anything 》Shortcoder 外掛可讓您建立 HTML、JavaScript、CSS 和其他代碼片段的自訂捷徑。現在，這些捷徑可以在文章/頁面中使用，並且該片段將取代其位置。, ✍ 輕鬆建立...。
Head & Footer Code 》Head & Footer Code 插件可以讓你在不是開發人員的情況下，添加自定義代碼片段（JavaScript、CSS 或 HTML）到網頁中。您可以將代碼放置在 <head>（...。
Scripts n Styles 》這個外掛讓管理員用戶能夠將自訂的 CSS 和 JavaScript 直接添加到個別文章、頁面或任何註冊的自訂文章類型中，也可以將類別添加到 body 標籤和文章容器中。還...。
SyntaxHighlighter Evolved 》現在支援 WordPress 5.0 中的新區塊編輯器！, SyntaxHighlighter Evolved 讓您可以輕鬆地在網站上張貼帶有語法加亮功能的程式碼，而不會失去格式或做任何手動...。
Code Embed 》注意： WordPress 5.0 及以上版本的使用者請查看常見問題以了解如何在區塊編輯器中使用此外掛。, Code Embed 外掛允許您在文章中嵌入程式碼（JavaScript 和 H...。
PHP Everywhere 》注意：此外掛更新至 3.0.0 版本是一項重大變更，將移除 [php_everywhere] 短代碼和小工具。請透過外掛設定頁面中的升級嚮導，將原本的代碼轉換為 Gutenberg ...。
WP Coder – Insert & Manage Code Snippets 》WP Coder 是一個用於在網站添加自定義代碼的外掛程式。您可以輕鬆地將 HTML、CSS 和 JS 代碼添加到網站頁面中。此外掛程式非常適合連接各種腳本或樣式，使網...。
Highlighting Code Block 》「Highlighting Code Block」外掛可讓你以一個點擊的方式添加一個有語法突顯的程式碼區塊。, 它支援「區塊編輯器」和「傳統編輯器」。, （不過，我們建議在「...。
CSS & JavaScript Toolbox 》感謝您查看我們的程式碼片段外掛。我相信它將完全符合您的需求。, 適用於以下情況：, , 前端修改（無需修改主題文件）, 添加功能（無需修改functions.php）, ...。
Code Block Pro – Beautiful Syntax Highlighting 》展示你美麗的程式碼，不僅僅是顯示它！這個版塊外掛提供編輯程式碼塊的功能，直接運行你的程式碼，使用與受歡迎的 VS Code 編輯器相同的渲染引擎。此外掛提供...。
Advance Custom HTML – Show Live Code, Share Snippets, Embed Code, and Style Them Your Way. 》這是一款用來專業編寫 HTML 代碼的高級 HTML 編輯器，提供不同的樣式、縮排與更多功能。, Advance Custom HTML 是一款功能強大、彈性十足的區塊外掛，讓您可...。
Code Syntax Block 》代碼語法區塊（Code Syntax Block）擴充了 WordPress 區塊編輯器，使用 Prism 語法高亮工具為核心代碼區塊添加了語法高亮支持。, Prism 語法高亮工具在前端執...。