Title: Sticky Copy Button for Code Blocks
Author: Kasuga
Published: 2025 年 8 月 23 日
Last modified: 2026 年 5 月 21 日
---
搜尋外掛
# Sticky Copy Button for Code Blocks
由 [Kasuga](https://profiles.wordpress.org/kasuga16/) 開發
[下載](https://downloads.wordpress.org/plugin/stick-copy-button-codeblock.1.6.0.zip)
* [詳細資料](https://tw.wordpress.org/plugins/stick-copy-button-codeblock/#description)
* [使用者評論](https://tw.wordpress.org/plugins/stick-copy-button-codeblock/#reviews)
* [安裝方式](https://tw.wordpress.org/plugins/stick-copy-button-codeblock/#installation)
* [開發資訊](https://tw.wordpress.org/plugins/stick-copy-button-codeblock/#developers)
[技術支援](https://wordpress.org/support/plugin/stick-copy-button-codeblock/)
## 外掛說明
**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**
**Enable**
Must be checked for the value to apply.
**Code block max height (px)**
Sets a maximum height (minimum: 100px). Content
taller than this becomes scrollable.
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.
You can also fine-tune the position of the line numbers (offset adjustment is available).
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
Optionally, you can enable **“Add !important to CSS declarations automatically”**
to force your custom styles to take effect even when the theme’s CSS has higher
specificity.
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;` `}`
### 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
## 螢幕擷圖
* [[
* Plugin settings screen
* [[
* Button display in an actual blog post
* [[
* Line numbers displayed on a code block.
## 安裝方式
1. Upload via WordPress Dashboard:
2. – In your WordPress dashboard, go to ‘Plugins’ ‘Add New’.
– Search for “stick-
copy-button-codeblock” and click ‘Install Now’. – Click ‘Activate’ once the installation
is complete. – (Optional) Go to ‘Settings’ ‘Stick Copy Button’ to configure options.
3. Manual Installation via FTP:
4. – Download the plugin’s zip file and extract it.
– Connect to your server via
FTP and navigate to the “wp-content/plugins/” directory. – Upload the extracted“
stick-copy-button-codeblock” folder to this directory. – Go to ‘Plugins’ in your
WordPress dashboard and activate the plugin. – (Optional) Go to ‘Settings’ ‘Stick
Copy Button’ to configure options.
## 常見問題集
### Which code blocks does this plugin support?
It supports only code blocks marked up in the `pre > code` format.
## 使用者評論
### [Excellent plug-in](https://wordpress.org/support/topic/excellent-plug-in-417/)
[ch3252](https://profiles.wordpress.org/ch3252/) 2026 年 5 月 5 日 1 則留言
A great little plug-in that does exactly what I want. Simple to set up, automatically
adds a copy button to any code block.
### [Simple and works well](https://wordpress.org/support/topic/simple-and-works-well-56/)
[Jon Henshaw](https://profiles.wordpress.org/jonhenshaw/) 2025 年 12 月 26 日
This is an excellent companion to the native code block in WordPress. It adds a
code button inside the code block, which I prefer so it doesn’t take up too much
room. I had to add some CSS overrides in my theme to maintain the appearance of
my code block style, and to move the button to the far right of the block where
I wanted it. I’m giving it 4 stars because of that, but I otherwise would have given
it 5 stars for ease of use. /* Removes 50px padding added by the plugin’s CSS */.
code-block-wrapper { padding-right: 0 !important; }/* Forces the button to move
to the right after removing the 50px padding */.copy-code-btn { right:4px !important;}
[ 閱讀全部 2 則使用者評論 ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/)
## 參與者及開發者
以下人員參與了開源軟體〈Sticky Copy Button for Code Blocks〉的開發相關工作。
參與者
* [ Kasuga ](https://profiles.wordpress.org/kasuga16/)
[將〈Sticky Copy Button for Code Blocks〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/stick-copy-button-codeblock)
### 對開發相關資訊感興趣？
任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/stick-copy-button-codeblock/)、
查看 [SVN 存放庫](https://plugins.svn.wordpress.org/stick-copy-button-codeblock/)，
或透過 [RSS](https://plugins.trac.wordpress.org/log/stick-copy-button-codeblock/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/stick-copy-button-codeblock/)。
## 變更記錄
#### 1.6.0
* Refactored CSS settings for broader theme compatibility.
* Improved stability of line number display.
* Added line number offset adjustment option.
* Added automatic !important appending feature for custom CSS.
#### 1.5.1
* Minor fix to the conditional script loading logic introduced in 1.5.0.
#### 1.5.0
* Load scripts only when code blocks are detected.
#### 1.4.0
* Added an option to display line numbers.
* Minor bug fixes.
* Updated readme.txt.
#### 1.3.0
* Changed the method for limiting code block height from line count to pixel-based
sizing.
* Minor bug fixes.
#### 1.2.0
* Added support for limiting code block height by line count.
* Added a Custom CSS option, allowing users to apply their own CSS to style the
copy button or code blocks.
#### 1.1.0
* Changed button size settings from a size selector to a numeric input field.
* Minor improvements and cleanup.
#### 1.0.1
* Minor bug fixes
#### 1.0.0
* Initial release
* Optimized and fixed code for official distribution.
* Added internationalization support.
## 中繼資料
* 版本 **1.6.0**
* 最後更新 **4 天前**
* 啟用安裝數 **30+**
* WordPress 版本需求 ** 5.0 或更新版本 **
* 已測試相容的 WordPress 版本 **7.0**
* PHP 版本需求 ** 7.4 或更新版本 **
* 語言
* [English (US)](https://wordpress.org/plugins/stick-copy-button-codeblock/)
* 標籤:
* [button](https://tw.wordpress.org/plugins/tags/button/)[code](https://tw.wordpress.org/plugins/tags/code/)
[copy](https://tw.wordpress.org/plugins/tags/copy/)[easy](https://tw.wordpress.org/plugins/tags/easy/)
[line-numbers](https://tw.wordpress.org/plugins/tags/line-numbers/)
* [進階檢視](https://tw.wordpress.org/plugins/stick-copy-button-codeblock/advanced/)
## 評分
4.5 星，滿分為 5 星
* [ 1 個 5 星使用者評論 ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=5)
* [ 1 個 4 星使用者評論 ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=4)
* [ 0 個 3 星使用者評論 ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=3)
* [ 0 個 2 星使用者評論 ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=2)
* [ 0 個 1 星使用者評論 ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=1)
[Your review](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/#new-post)
[查看全部使用者評論](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/)
## 參與者
* [ Kasuga ](https://profiles.wordpress.org/kasuga16/)
## 技術支援
使用者可在技術支援論壇提出意見反應或使用問題。
[檢視技術支援論壇](https://wordpress.org/support/plugin/stick-copy-button-codeblock/)
## 贊助
想要支援這個外掛的發展嗎？
[ 贊助這個外掛 ](https://www.paypal.me/kasuga16)