Code Snippets

外掛說明

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 可以顯示多國語言介面。

螢幕擷圖

  • 管理現有的程式碼片段
  • 新增程式碼片段
  • 編輯程式碼片段
  • 從匯出檔匯入程式碼片段

安裝方式

自動安裝

  1. 登入 WordPress 網站管理後台
  2. 點擊 [外掛]
  3. 點擊 [安裝外掛]
  4. 搜尋「Code Snippets」
  5. 點擊 Code Snippets 外掛中的 [立即安裝]
  6. 啟用外掛

手動安裝

  1. 下載外掛安裝套件 ZIP 壓縮檔
  2. 解壓縮外掛的 ZIP 壓縮檔
  3. 將解壓縮外掛的 ZIP 壓縮檔所得的 code-snippets 資料夾上傳至 WordPress 網站的 wp-content/plugins/ 目錄
  4. 在 [外掛] 頁面中啟用 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 存放庫進行版本分支,並提出提取要求。

使用者評論

2022 年 9 月 18 日
This plugin has been the solution to have all my add-on PHP-codes and CSS-codes for specific customization and it have never failed me once. Now with the premium-features that could be bought they added everything I have been missing. Well worth every dollar if you want extra features. The free version is still as good as earlier and people who says they have removed anything from the free plugin is wrong. Highly recommended.
2022 年 8 月 3 日
I've been using this pluggin for months on several websites. They now removed features that used to be free and made them premium, like CSS. I have many clients complaining about their broken sites now, thank you very much for that. This is bad attitude and I won't be buying the full plugin just because of that.
2022 年 8 月 1 日
Since WordPress 5.2 there is a built-in feature that detects when a plugin or theme causes a fatal error on your site, and notifies you with this automated email. In this case, WordPress caught an error with one of your plugins, Code Snippets.
閱讀全部 392 則使用者評論

參與者及開發者

以下人員參與了開源軟體〈Code Snippets〉的開發相關工作。

參與者

Code Snippets 外掛目前已有 21 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將〈Code Snippets〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

3.2.0 (22 July 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 (3 July 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.

2.14.6 (13 May 2022)

  • Fixed: Issue with processing uploaded import files.
  • Fixed: Issue with processing tag filters.

2.14.5 (10 May 2022)

  • Fixed: Incompatibility issue with older versions of PHP.

2.14.4 (5 May 2022)

  • Fixed: Prevent array key errors when loading the snippet table with unknown order values.

2.14.3 (10 Dec 2021)

  • Fixed: Potential security issue outputting snippets-safe-mode query variable value as-is. Thanks to Krzysztof Zając for reporting.

2.14.2 (9 Sep 2021)

  • Fixed: Prevent network snippets table from being created on single-site installs.
  • Added translations:
  • Added: Support for :class syntax to the code validator.
  • Added: PHP8 support to the code linter.
  • Added: Color picker feature to the code editor.
  • Added: Failsafe to prevent multiple versions of Code Snippets from running simultaneously.

2.14.1 (10 Mar 2021)

  • Added: Czech translation by Lukáš Tesař.
  • Fixed: Code validator now supports function_exists and class_exists checks.
  • Fixed: Code validator now supports anonymous functions.
  • Fixed: Issue with saving the hidden columns setting.
  • Fixed: Replaced the outdated tag-it library with tagger for powering the snippet tags editor.
  • Added: Code direction setting for RTL users.
  • Updated CodeMirror to version 5.59.4.
  • Added: Additional action hooks and search API thanks to @Spreeuw.

2.14.0 (26 Jan 2020)

  • Updated CodeMirror to version 5.50.2.
  • Added: Basic error checking for duplicate functions and classes.
  • Updated Italian translations to fix display issues – thanks to Francesco Marino.
  • Fixed: Ordering snippets in the table by name will now be case-insensitive.
  • Added: Additional API options for retrieving snippets.
  • Fixed: Code editor will now properly highlight embedded HTML, CSS and JavaScript code.
  • Changed the indicator color for inactive snippets from red to grey.
  • Fixed a bug preventing the editor theme from being set to default.
  • Added: Store the time and date when each snippet was last modified.
  • Added: Basic error checking when activating snippets.
  • Fixed: Ensure that imported snippets are always inactive.
  • Fixed: Check the referer on the import menu to prevent CSRF attacks. Thanks to Chloe with the Wordfence Threat Intelligence team for reporting.
  • Fixed: Ensure that individual snippet action links use proper verification.

The full changelog is available on GitHub