外掛說明
Code Snippets 是一個輕量化、簡單易用,專為在網站上執行程式碼片段所設計的解決方案。使用 Code Snippets 外掛後,便不再需要為了自訂程式碼片段,而必須修改使用中的佈景主題的 functions.php
檔案。
Code Snippets Pro 現已推出,包含完整 CSS/JavaScript 功能,並整合區塊編輯器/Gutenberg 及 Elementor。
程式碼片段是一小段可用來擴充 WordPress 網站功能的 PHP 程式碼,本質上就是一個對網站主機負擔較小的微型外掛。
大多數提供程式碼片段的網站,都會告訴使用將程式碼片段加入網站目前使用的佈景主題的 functions.php
檔案中,但這會導致在一段時間後,檔案變得又長又混亂。
Code Snippets 外掛為新增程式碼片段提供了圖形使用者介面,並讓在外掛中加入的程式碼片段,執行起來的結果跟將程式碼片段加入佈景主題的 functions.php
檔案一模一樣。
觀看 Imran Siddiq 所製作的 Code Snippets 快速概觀影片:
Code Snippets 提供了類似 [外掛] 頁面的圖形化界面,藉以管理程式碼片段。加入 Code Snippets 外掛中的程式碼片段可以個別啟用或停用,就跟外掛一樣。
程式碼片段編輯器包含可供網站管理員組織及管理程式碼片段的名稱欄位、可進行視覺化編輯的內容說明欄位、標籤欄位,以及功能完整的程式碼編輯器。現有的程式碼片段可以匯出,並移轉至其他網站;匯出的檔案為 JSON 及 PHP,前者用於在使用 Code Snippets 外掛的網站匯入,而後者可用於自行開發的外掛或佈景主題。
觀看 Ferdy Korpershoek 所製作的 Code Snippets 全方位自學課程影片 (含實作範例):
如果有任何意見反應、問題或改進建議,請前往技術支援論壇提出,加入 Facebook 社團或在 GitHub 存放庫查看相關資訊。
如果喜歡這個外掛,或外掛對網站確實有幫助,請在 WordPress.org 為它進行評等。
語言套件
感謝下列本地化人員,讓 Code Snippets 可以顯示多國語言介面。
- 白羅斯文:Hrank.com
- 葡萄牙文 (巴西):Bruno Borges
- 簡體中文 (中國):Jincheng Shan 及詩語
- 繁體中文 (台灣):Alex Lion (阿力獅) 及 Chun-Chih Cheng
- 克羅地亞文:Web Hosting Hub 的 Borisa Djuraskovic
- 捷克文:Lukáš Tesař 及 Jakub Humpolec
- 丹麥文:Finn Sommer Jensen
- 荷蘭文:Sander Spies、Peter Smits 及 mother.of.code.a11n
- 英文 (紐西蘭) 及英文 (英國):webaware
- 英文 (南非):webaware 及 Ian Barnes
- 法文 (法國):momo-fr、Didier Demory、Cyrille Sanson 及 Shea Bunge
- 法文 (加拿大):Dominic Desbiens
- 德文 (德國):Mario Siegmann、Joerg Knoerchen、David Decker 及 Andreas
- 希臘文:Konstantinos Megas 及 Toni Bishop from Jrop
- 印尼文:ChameleonJohn.com 的 Jordan Silaen
- 義大利文:Usman Wagan、Luisa Ravelli 及 ElectricFeet
- 日文:mt8、Takakazu Nagaya、Naoko Takano 及 melvas
- 波斯文:Mohammad Novintanon
- 俄文:Alexander Samsonov、Yui、Denis Yanchevskiy 及 krioteh
- 斯洛伐克文:Ján Fajčák
- 西班牙文 (哥倫比亞) 及西班牙文 (厄瓜多爾):Javier Esteban
- 西班牙文 (西班牙):Ibidem Group、Javier Esteban、Fernando Tellado 及 Juanma Aranda
- 西班牙文 (委內瑞拉):Yordan Soares
- 瑞典文:Argentum、Fredrik 及 Tor-Bjorn Fjellner
- 烏都文:Samuel Badree
- 越南文:Tuan Phan
安裝方式
自動安裝
- 登入 WordPress 網站管理後台
- 點擊 [外掛]
- 點擊 [安裝外掛]
- 搜尋「Code Snippets」
- 點擊 Code Snippets 外掛中的 [立即安裝]
- 啟用外掛
手動安裝
- 下載外掛安裝套件 ZIP 壓縮檔
- 解壓縮外掛的 ZIP 壓縮檔
- 將解壓縮外掛的 ZIP 壓縮檔所得的
code-snippets
資料夾上傳至 WordPress 網站的wp-content/plugins/
目錄 - 在 [外掛] 頁面中啟用 Code Snippets 外掛
在多站網路控制台中為多站網路啟用 Code Snippets 外掛,會顯示一個特殊介面,用於標示執行於整個多站網路的程式碼片段。
常見問題集
請參考 help.codesnippets.pro 以取得常見問題集的完整清單。
-
在執行有程式碼錯誤的程式碼片段導致網站無法正常執行後,如何復原網站?
-
網站管理員可以啟用 Code Snippets 的安全模式以復原網站。請參考 https://help.codesnippets.pro/article/12-safe-mode 以了解啟用安全模式的方式。
-
如果變更佈景主題或升級 WordPress,現有的程式碼片段是否會失效?
-
不會。在這個外掛中輸入的程式碼片段,均會儲存於資料庫中,既獨立於佈景主題之外,也不受 WordPress 更新的影響。
-
這個外掛是否能完整解除安裝?
-
如果在外掛的設定頁面中啟用 [完整解除安裝] 設定,在 WordPress 的 [外掛] 選單中刪除 Code Snippets 時,並會清除全部資料。請注意,這項設定會清除包含儲存於資料庫中的程式碼片段的全部資料。如需保留之前建立的程式碼片段,請先執行匯出程序。
-
是否能使用已為其他 WordPress 網站建立的程式碼片段?
-
可以。在 [全部程式碼片段] 頁面中,網站管理員可以使用程式碼片段名稱下方的 [匯出] 連結匯出個別程式碼片段,或是使用 [批次操作] 功能批次匯出多個程式碼片段。已匯出的程式碼片段稍後可以在其他網站透過 [匯入程式碼片段] 頁面,上傳程式碼片段檔案並匯入。
-
能將現有的程式碼片段匯出為 PHP 程式碼,以供未採用 Code Snippets 外掛的網站使用嗎?
-
可以。點擊想要匯出的程式碼片段旁的核取方塊,然後從 [批次操作] 選單中選取 [匯出為 PHP] 並點擊 [套用],這項操作產生的 PHP 檔案會包含匯出的程式碼片段,以及名稱及內容說明。
-
能為多站網路中的全部網路執行同一份程式碼片段嗎?
-
在多站網路控制台中,可以透過多站網路啟用功能將某份程式碼片段啟用於多站網路中的全部網站;多站網路管理員能將 Code Snippets 外掛啟用於全部網站,也能在個別網站啟用外掛。
-
程式碼片段都儲存在 WordPress 網站資料庫的哪個位置?
-
程式碼片段儲存於 WordPress 網站資料庫的
wp_snippets
資料表中。請注意,這個資料表的名稱實際上可能略有不同,主要取決於安裝網站時的資料表前置詞設定。 -
在何處可以提出新功能建議?
-
請在 Code Snippets 外掛的 WordPress 技術支援論壇或 GitHub 存放庫回報程式碼錯誤、新功能建議及改進意見。
-
如何參與 Code Snippets 外掛的開發?
-
先感謝你有這樣的意願。每個人都可以為外掛的 GitHub 存放庫進行版本分支,並提出提取要求。
使用者評論
參與者及開發者
變更記錄
3.5.0 (14 Sep 2023)
- Added: Support for the Code Snippets Cloud API.
- Added: Search and download public snippets.
- Added: Codevault back-up and synchronisation. (PRO)
- Added: Synchronised local snippets are automatically updated in Cloud. (PRO)
- Added: Bulk actions – ‘update’ and ‘download’.
- Added: Download snippets from public and private codevaults. (PRO)
- Added: Search and download any publicly viewable snippet in Code Snippet Cloud by keyword or name of codevault. (PRO)
- Added: Deploy snippets to plugin from Code Snippets Cloud app. (PRO)
- Added: Bundles of Joy! Search and download Snippet Bundles in one go direct from Code Snippets Cloud. (PRO)
- Fixed: Error when attempting to update network shared snippets after saving. [#]
- Improved: Redirect to snippets table when deleting snippet from the edit menu.
- Improved: Scroll new notices into view on edit menu.
3.4.2 (05 Jul 2023)
- Fixed: Issue causing export process to fail with fatal error. [#]
- Fixed: Type issue on
the_posts
filter when no posts available. [#]
3.4.1 (29 Jun 2023)
- Fixed: Undefined array key error. [#]
- Fixed: Potential type issue when loading Prism. [#]
- Improved: Added better debugging when calling REST API methods from the edit menu.
- Improved: Escape special characters when sending snippet code through AJAX to avoid false-positives from security modules. [#]
- Improved: Only display the latest update or error notice on the edit page, instead of allowing them to stack.
- Fixed: Potential type issue when sorting snippets. [#]
- Fixed: Issue preventing asset revision numbers from updating correctly. (PRO) [#]
3.4.0 (17 May 2023)
- Added: Proper WordPress REST API support for retrieving and modifying snippets.
- Improved: Better compatibility with modern versions of PHP (7.0+).
- Improved: Converted Edit/Add New Snippet page to use React.
- Converted action buttons to asynchronously use REST API endpoints through AJAX.
- Load page components dynamically through React.
- Added action notice queue system.
- Replaced native alert dialog with proper React modal.
- Improved: Catch snippet execution errors to prevent site from crashing.
- Improved: Display recent snippet errors in admin dashboard instead.
- Improved: Updated editor block to use new REST API endpoints. (PRO)
- Improved: Change colour of upgrade notice in Pro plugin. (PRO)
- Improved: All available snippet data is included in export files.
- Improved: Only import specific fields from export file, even if additional fields specified.
- Fixed: Issue preventing editor colorpicker from loading correctly. (PRO)
- Improved: Added help links to content snippet options.
- Improved: Pass additional attributes specified in
[code_snippet]
content shortcode to shortcode content. - Improved: Make shortcode attributes available as individual variables.
- Improved: Allow boolean attributes to be passed to code snippets shortcodes without specifying a value.
- Improved: Replace external links to Pro pricing page with an upgrade modal.
- Fixed: Issue preventing linting libraries from loading correctly in the code editor.
3.3.0 (09 Mar 2023)
- Fixed: Do not enqueue CSS or JS snippet file if no snippets exist. (PRO)
- Improved: Added additional editor shortcuts to list in tooltip.
- Added: Filter for changing Snippets admin menu position. See this help article for more information.
- Added: Ability to filter shortcode output. Thanks to contributions from Jack Szwergold.
- Fixed: Bug causing all snippets to show in site health information instead of those active.
- Fixed: Unnecessary sanitization of file upload data causing import process to fail on Windows systems.
3.2.2 (17 Nov 2022)
- Fixed: Plugin lacking a valid header error on activation.
3.2.1 (05 Oct 2022)
- Fixed: Issue making survey reminder notice not dismissible.
- Added:
Ctrl
+/
orCmd
+/
as shortcut for commenting out code in the snippet editor. - Added: Additional hooks to various snippet actions, thanks to contributions made by ancient-spirit.
- Added: Fold markers, additional keyboard shortcuts and keymap options to snippet editor,
thanks to contributions made by Amaral Krichman. - Improved: Removed duplicate tables exist query. (#).
- Improved: Enabled ‘add paragraphs and formatting’ option by default for newly inserted content snippets.
- Added: WP-CLI commands for retrieving, activating, deactivating, deleting, creating, updating, exporting and importing snippets.
- Fixed: Path to iron visible when updating the pro plugin.
3.2.0 (22 Jul 2022)
- Fixed: Remove default value from SQL columns to improve compatibility with certain versions of MySQL.
- Fixed: Delay loading snippets in Gutenberg editor blocks. (PRO)
- Added: Option to show and hide line numbers in Gutenberg source code editor block. (PRO)
- Added: Support for highlighting HTML, CSS, JS and embedded code in the front-end PrismJS code highlighter.
- Added: Additional features to front-end PrismJS code highlighter, including automatic links and a copy button.
- Added: Support for multiple code styles in the source code Gutenberg editor block. (PRO)
- Added: Admin notice announcing release of Code Snippets Pro.
- Fixed: Inconsistencies with translations between different plugin versions.
- Fixed: Issue with Content Snippet shortcode information not displaying.
- Added: Button for copying shortcode text to clipboard.
- Improved: Include Code Snippets CSS and JS source code in distributed package.
- Improved: Don’t delete data from plugin if deleting Code Snippets Free while Code Snippets Pro is active.
- Improved: Streamlined user interface and experience in Gutenberg editor blocks. (PRO)
- Added: Option to choose from 44 different themes for the Prism code highlighter in the source editor block and Elementor widget. (PRO)
- Improved: Compatibility of Elementor widgets with the latest version of Elementor. (PRO)
- Improved: Replace icon font menu icon with embedded SVG icon.
3.1.2 (03 Jul 2022)
- Updated external links and branding for Code Snippets Pro.
- Fixed: Various fixes to block editor scripts. (PRO)
- Fixed: Improved visual style of Gutenberg editor blocks. (PRO)
3.1.1 (13 Jun 2022)
- Fixed: Download snippets feature not including snippet content.
- Fixed: Alignment of ‘opens externally’ dashicon.
- Improved: Added additional parameters to
code_snippets/export/filename
filter.
3.1.0 (17 May 2022)
- Fixed: Caching inconsistencies preventing snippets and settings from refreshing on sites with persistent object caching.
- Improved: Simplified database queries.
- Added: More comprehensive cache coverage, including for active snippets.
- Added: Icon to ‘Go Pro’ button indicating it opens an external tab.
- Improved: Allow display styles in snippet descriptions.
3.0.1 (14 May 2022)
- Fixed: Incompatibility issue with earlier versions of PHP.
3.0.0 (14 May 2022)
Added
- Added: HTML content snippets for displaying as shortcodes or including in the page head or footer area.
- Added: Notice reminding users to upgrade unsupported PHP versions.
- Added: Visual settings to add attributes to shortcodes.
- Added: Shortcode buttons to the post and page content editors.
- Added: Basic REST API endpoints.
- Added: Snippet type column to the snippets table.
- Added: Snippet type badges to Edit and Add New Snippet pages.
- Added: Setting to control whether the current line of the code editor is highlighted.
- Added: Display a warning when saving a snippet with missing title or code.
- Added: Add suffix to title of cloned snippets.
Changed
- Improved: Updated plugin code to use namespaces, preventing name collisions with other plugins.
- Improved: Added key for the ‘active’ and ‘scope’ database table columns to speed up queries.
- Improved: Redirect from edit menu if not editing a valid snippet.
- Improved: Moved activation switch into its own table column.
- Improved: Updated code documentation according to WordPress standards.
- Improved: Added snippet type labels to the tabs on the Snippets page.
- Improved: Split settings page into tabs.
- Improved: Use the version of CodeMirror included with WordPress where possible to inherit the additional built-in features.
- Improved: Added hover effect to priority settings in the snippets table to show that they are editable.
- Fixed: Snippets table layout on smaller screens.
Deprecated
- Removed: Deprecated functions and compatibility code for unsupported PHP versions.
- Removed: Option to disable snippet scopes.
New in Pro
- Added: CSS style snippets for the site front-end and admin area.
- Added: JavaScript snippets for the site head and body area on the front-end.
- Added: Browser cache versioning for CSS and JavaScript snippets.
- Added: Support for exporting and downloading CSS and JavaScript snippets.
- Added: Support for highlighting code on the front-end.
- Added: Editor syntax highlighting for CSS, JavaScript and HTML snippets.
- Added: Button to preview full file when editing CSS or JavaScript snippets.
- Added: Option to minify CSS and JavaScript snippets.
- Added: Gutenberg editor block for displaying content snippets.
- Added: Gutenberg editor block for displaying snippet source code.
- Added: Elementor widget for displaying content snippets.
- Added: Elementor widget for displaying snippet source code.