內容簡介
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<title>Clipboard Snippet Copier WordPress 外掛介紹</title>
</head>
<body>
<h2>總結：</h2>
<p>Clipboard Snippet Copier 可讓您向用戶提供示範代碼、shortcodes 或任何可重覆使用的片段。透過安全地存儲這些片段以及在用戶點擊複製時僅通過 AJAX 從 WordPress 管理員處提取，而不在頁面上暴露原始代碼。</p>
<h2>問題與答案：</h2>
<ul>
<li>
<h3>這個外掛的功能特色有哪些？</h3>
<ul>
<li>📋 直接將任何片段/shortcode 複製到剪貼板。</li>
<li>🔒 片段不在前端顯示 - 僅透過 AJAX 提取。</li>
<li>⚡ 輕量且安全（使用 WordPress AJAX + nonce 技術）。</li>
<li>🖱️ 支援在同一頁面上使用多個按鈕。</li>
<li>🎨 輕鬆與任何主題或頁面建構器集成。</li>
</ul>
</li>
<li>
<h3>可以如何應用此外掛？</h3>
<ul>
<li>提供 WPBakery 示範 shortcodes 給您的用戶。</li>
<li>分享 Gutenberg 區塊模板作為代碼片段。</li>
<li>提供客戶 shortcode 預設值，而不暴露雜亂的代碼。</li>
</ul>
</li>
<li>
<h3>如何使用此外掛？</h3>
<ol>
<li>在「代碼片段」->「新增」中加入一個新的片段。</li>
<li>為您的參考提供標題。</li>
<li>在代碼編輯器中粘貼代碼。</li>
<li>在內容中放置帶有 ID 的按鈕：[clipsnco_code_copy_btn id=”123″ label=”複製示範”]</li>
<li>當使用者點擊按鈕時，片段將被複製到他們的剪貼板中（未呈現）。</li>
</ol>
</li>
</ul>
</body>
</html>
外掛標籤
開發者團隊
原文外掛簡介
Clipboard Snippet Copier lets you share ready-to-use shortcodes, demo layouts, or any reusable code snippets with your visitors. Click a button and the snippet is copied straight to their clipboard. No manual selection, no copy/paste errors.
You decide whether the snippet stays hidden (fetched only when copied) or is displayed inline as a styled code block. Either mode is one click away for the visitor.
Why use it?
Sell or showcase shortcodes — give buyers a “Copy Demo” button without exposing messy markup.
Document your code — share PHP / JS / CSS examples on tutorial pages with a proper copy button.
Reduce support tickets — eliminate “the shortcode didn’t work” issues caused by smart quotes, missing brackets, or whitespace mangling.
Track engagement — built-in per-snippet copy counter shows what your audience actually uses.
Key features
📋 One-click copy to clipboard with success/failure tooltip.
🔒 Hidden mode — the snippet is stored in the admin and fetched via AJAX only when copied (never rendered in the HTML).
👁️ Inline mode — render the snippet visibly as a
block with a copy button on top.
🧱 Gutenberg block with sidebar controls (snippet ID, label, inline toggle, language hint).
🔢 Shortcode for the Classic Editor, WPBakery, Elementor and any other builder.
🧮 Copy counter — sortable “Copies” column on the admin list, so you can see what’s popular.
⚙️ Settings page — default label, default CSS class, tooltip text, guest-access toggle.
📝 CodeMirror editor on the snippet edit screen — keeps your indentation and angle brackets intact.
⚡ Tiny footprint — no jQuery dependency on the frontend, no external libraries.
🌐 Translation-ready.
How it works
You add a snippet in Code Snippets → Add New and note its ID.
You drop the Clipboard Snippet block (or the [clipsnco_code_copy_btn] shortcode) onto any page.
When a visitor clicks the button, the snippet is fetched over AJAX and written to their clipboard — without ever appearing in the page source (unless you turned on inline mode).
Usage
Quick start (shortcode)
[clipsnco_code_copy_btn id="123" label="Copy Code"]
Where 123 is the ID of your snippet (visible in the Code Snippets admin list).
Shortcode attributes
id (required, integer) — the snippet ID.
label (optional, string) — button text. Defaults to the value set on the Settings page.
class (optional, string) — extra CSS classes added to the button.
inline (optional, “yes” / “no”) — when yes, the snippet is rendered as a
block with a copy button on top. Default no.
language (optional, string) — e.g. php, js, css. Adds a language-xxx class on the element so syntax-highlighter libraries (Prism.js, highlight.js) can colourise it.
Examples:
Hidden snippet, custom label: [clipsnco_code_copy_btn id="42" label="Copy shortcode"]
Inline display with PHP highlighting: [clipsnco_code_copy_btn id="42" inline="yes" language="php"]
Extra CSS class for theme styling: [clipsnco_code_copy_btn id="42" class="my-cta-btn"]
Gutenberg block
In the block editor, search for “Clipboard Snippet” and insert it. The sidebar lets you set:
Snippet ID — the post ID of the snippet to copy.
Button label — overrides the default label.
Show code inline — toggle hidden vs inline display.
Language hint — optional syntax-highlighter class.
The block is server-rendered, so you can switch between block and shortcode usage freely.
Alternative button markup
If your page builder won’t let you drop a
…or, when even attributes aren’t allowed, use the class-only form:
Copy
Settings
Code Snippets → Settings lets you configure:
Default button label
Default CSS class applied to every button
Tooltip text shown on copy success / failure
Whether non-logged-in visitors are allowed to copy snippets
Copy counter
Every successful copy by a non-editor user bumps a _clipsnco_copy_count post meta value. The count is shown in the Copies column on the snippets admin list. Click the column header to sort by most-copied.
Styling
The button receives the class wcp-code-copy-btn plus anything you add via the shortcode/block class attribute. The inline-mode wrapper uses these classes (override them from your theme):
.clipsnco-inline-wrap — outer container
.clipsnco-inline-toolbar — top bar containing the copy button
.clipsnco-pre — the
element
.clipsnco-code — the element (also gets language-xxx when set)