Title: Inline Context Author: Joop Laan Published: 2025 年 11 月 28 日 Last modified: 2026 年 5 月 2 日 --- 搜尋外掛 ![](https://ps.w.org/inline-context/assets/banner-772x250.png?rev=3405478) ![](https://ps.w.org/inline-context/assets/icon.svg?rev=3405470) # Inline Context 由 [Joop Laan](https://profiles.wordpress.org/joop/) 開發 [下載](https://downloads.wordpress.org/plugin/inline-context.2.8.1.zip) [即時預覽](https://tw.wordpress.org/plugins/inline-context/?preview=1) * [詳細資料](https://tw.wordpress.org/plugins/inline-context/#description) * [使用者評論](https://tw.wordpress.org/plugins/inline-context/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/inline-context/#installation) * [開發資訊](https://tw.wordpress.org/plugins/inline-context/#developers) [技術支援](https://wordpress.org/support/plugin/inline-context/) ## 外掛說明 **Inline Context** is a powerful Block Editor enhancement that lets you create inline expandable notes or clean tooltip-style popovers anywhere in your content. It is ideal for **content-rich websites**, including editorial platforms, research sites, online magazines, documentation hubs, and educational blogs that rely on clear explanation without breaking the reader’s focus. Instead of sending readers to glossary pages or external links, Inline Context allows you to provide definitions, references, clarifications, and annotations _in place_— keeping readers engaged and your content structured. Notes can be **reusable**, categorized, styled, centrally managed, and automatically updated everywhere they appear. [Check the live preview](https://wordpress.org/plugins/inline-context/?preview=1) #### Why this is valuable for content-heavy websites Websites with substantial text often need: * definitions and terminology * source references * background information * contextual inline explanations * mini footnotes without scrolling * inline callouts, tips, or warnings Inline Context delivers all of this with a frictionless, accessible user experience. It helps readers stay focused, reduces navigation fatigue, and improves knowledge retention — especially in long articles or research-based content. #### How it works 1. Highlight text in the Block Editor. 2. Click **Inline Context**. 3. Enter your note content (rich text supported). 4. Optionally assign a category with custom icon & color. 5. Publish — your note appears inline or as a tooltip, depending on settings. You can also create **reusable** notes from a dedicated Custom Post Type. Updating a reusable note updates all instances site-wide. ### Key Features #### Display modes * Inline expansion (reveals a small content panel) * Tooltip popovers (floating contextual bubbles) * Smart tooltip positioning to avoid off-screen display * Direct anchor links (`#context-note-xxx`) for deep linking * Auto-open on page load when accessed via link #### Editor productivity * Reusable notes with global updates * Notes Library with usage tracking (shows where each note is used) * Quick Search inside the editor to insert existing notes * Rich text support via ReactQuill (bold, italic, lists, links) * Clean, integrated Rich Text toolbar button #### Categories & icons * Create unlimited categories (Definition, Reference, External Article, Tip, Warning, etc.) * Choose from curated Dashicons or any of 300+ icons * Separate icons for open and closed states #### Styling & customization Full styling control from **Settings Inline Context**: * **NEW in v2.6**: Five pre-configured color presets for one-click professional styling * Choose from Modern Blue, Minimalist Gray, High Contrast, Warm Earth Tones, or Dark Mode * All presets meet WCAG 2.1 AA accessibility standards * Link colors, hover, and focus states * Note padding, spacing, borders, backgrounds, shadows * Tooltip appearance * Chevron/indicator styling * Live interactive preview of all style changes #### Accessibility & security * ARIA support, focus lock, Escape key behavior * Keyboard-navigable for both link and note * DOMPurify sanitization of note content ### Internationalization Inline Context is fully translation-ready. ### Examples & inspiration The idea for this plugin originated from a project with Renée Kool — a visual artist working in public art, film, and emerging media. She wanted to create a website where a single link could reveal additional content containing multiple related links. We looked at the Dutch journalism platform De Correspondent, which use subtle inline notes to provide context without interrupting the flow of reading. You can see examples of their inline notes in this article: [Hoe Nederland kampioen deeltijdwerken werd](https://decorrespondent.nl/15887/hoe-nederland-kampioen-deeltijdwerken-werd/9053b712-3591-0002-29b3-8c7b69eae0c3) ### Source code Inline Context uses `@wordpress/scripts` with webpack and npm to build assets. Full source (including uncompiled JS and CSS) is available at: [https://github.com/jooplaan/inline-context](https://github.com/jooplaan/inline-context) ## 螢幕擷圖 * [[ * Inline context note link with pill style * [[ * Inline context note link with pill style expanded * [[ * Inline context note link with pill style as tooltip * [[ * Editor popover for adding inline context with category selection * [[ * Modal window for writing an inline context note * [[ * Search interface for inserting reusable notes * [[ * Inline context note on the frontend (default expanded mode) * [[ * Tooltip version of the inline note on the frontend * [[ * Notes Library in the admin area showing usage count and linked posts ## 安裝方式 1. Upload the plugin files to `/wp-content/plugins/inline-context`, or install via the Plugins screen. 2. Activate the plugin. 3. Configure categories and styling under **Settings Inline Context**. 4. In the Block Editor, select text and click **Inline Context**. 5. Add your note content and choose a category (optional). ## 常見問題集 ### Does this work with the Classic Editor? No. Inline Context is built specifically for the WordPress Block Editor (Gutenberg). ### Can I change the styles? Yes. Extensive visual customization options are available under **Settings Inline Context Styling**. ### Is there a limit to the number of categories? No. Create as many categories as your content structure requires. ### Can I use any Dashicon? Yes. You can type any Dashicon class name to use all 300+ icons. ## 使用者評論 ![](https://secure.gravatar.com/avatar/87ad33919ebb1f8fc48bad3ed2a736207746ffb6562ecc0a4b52baf855588988? s=60&d=retro&r=g) ### 󠀁[Great plugin! Responsive dev, very happy!](https://wordpress.org/support/topic/great-plugin-responsive-dev-very-happy/)󠁿 [shannonpayne](https://profiles.wordpress.org/shannonpayne/) 2026 年 5 月 2 日 Super happy with this plugin. Ticks all the boxes. Easy to use, lightweight, accessible. There was one feature that myself (and client) wanted and after requesting this from Joop the dev he delivered within a few days. 10/10! ![](https://secure.gravatar.com/avatar/074d2e4afb46da5ab1b71d5916162a1fcc8c1c570da059810aaf33b15c4df2f6? s=60&d=retro&r=g) ### 󠀁[Super straightforward and lightweight](https://wordpress.org/support/topic/super-straightforward-and-lightweight/)󠁿 [boxhamster](https://profiles.wordpress.org/boxhamster/) 2025 年 12 月 1 日 1 則 留言 If only more plugins were like this… Easy to setup, intuitive and light. Thanks [ 閱讀全部 2 則使用者評論 ](https://wordpress.org/support/plugin/inline-context/reviews/) ## 參與者及開發者 以下人員參與了開源軟體〈Inline Context〉的開發相關工作。 參與者 * [ Joop Laan ](https://profiles.wordpress.org/joop/) 〈Inline Context〉外掛目前已有 1 個本地化語言版本。 感謝[全部譯者](https://translate.wordpress.org/projects/wp-plugins/inline-context/contributors) 為這個外掛做出的貢獻。 [將〈Inline Context〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/inline-context) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/inline-context/)、 查看 [SVN 存放庫](https://plugins.svn.wordpress.org/inline-context/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/inline-context/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/inline-context/)。 ## 變更記錄 #### 2.8.1 – May 2, 2026 * FIX: Inline context popover no longer closes when inserting an image from the WordPress Media Library #### 2.8.0 – May 2, 2026 * NEW: Embed images inside inline context notes via the WordPress Media Library * NEW: Image button in the note editor toolbar (shown when image support is enabled) * NEW: “Allow images in notes” admin setting in the General tab (default: enabled) * NEW: Custom Quill image blot preserves alt, loading, decoding, and class attributes * NEW: `inline_context_allowed_image_protocols` filter for sites that need data URIs or other schemes * NEW: Three CSS variables for image sizing customization (tooltip max width/height, inline max height) * IMPROVED: Tooltip mode caps images at ~280×200 to keep tooltips compact * IMPROVED: Inline mode caps image height at 400px while allowing full content width * IMPROVED: Print styles handle images with page-break avoidance and sensible sizing * IMPROVED: Confirmed WordPress 7.0 compatibility — “Tested up to” bumped to 7.0 * IMPROVED: Always sets alt=”” on images missing alt text so screen readers don’t announce filenames * IMPROVED: Image src restricted to http(s) and relative paths by default for security * IMPROVED: Settings export/import now includes the image-support toggle #### 2.7.3 – March 21, 2026 * FIX: Category icons now align correctly with text at all icon placement settings * FIX: Category icon double-scaling issue causing icons to render at half the intended size #### 2.7.2 – March 20, 2026 * FIX: Custom category icons now respond to size and placement settings * FIX: Default chevron icon now responds to color and placement settings * FIX: Tooltip hover mode no longer shows erratic show/hide behavior * FIX: Admin settings JS toggles now work (display mode, link style, preset warnings) * NEW: Icon right margin CSS variable for theme.json and admin settings * IMPROVED: Refactored icon rendering to use consistent HTML elements for both default and category icons * IMPROVED: Fine-tuned icon placement values for top, middle, and bottom positions * IMPROVED: Pill style always centers icons regardless of placement setting #### 2.7.1 – December 30, 2025 * FIX: Keyboard shortcut Cmd+Shift+K now works correctly on first try for reusable notes * IMPROVED: Documentation for automatic cleanup feature with WP-CLI command #### 2.7.0 – December 29, 2025 * NEW: Export/Import Settings – Backup and restore all plugin configurations as JSON * NEW: Print Styles – Professional print formatting with automatic note expansion * NEW: Footnote-style numbering for printed documents using CSS counters * NEW: Import/Export tab in admin settings with validation and error handling * IMPROVED: Smart link URL display in print (shows URLs except for anchor links) * IMPROVED: Print-optimized typography and colors for professional documents * FIX: Export/Import now properly handles headers to prevent HTML output issues #### 2.6.0 – December 27, 2025 * NEW: Color preset system with five pre-configured professional color schemes * NEW: Modern Blue (Default), Minimalist Gray, High Contrast, Warm Earth Tones, and Dark Mode presets * NEW: Automatic preset detection and “Custom” indicator when values are modified * NEW: Warning dialog before applying preset over custom settings * IMPROVED: All presets meet WCAG 2.1 AA accessibility standards * IMPROVED: One-click preset application with instant visual feedback #### 2.4.1 – December 19, 2025 * IMPROVED: Documentation #### 2.4.0 – December 19, 2025 * NEW: Pill-style link display option with button-like appearance * NEW: WordPress 6.9+ Abilities API integration for AI assistant discovery * NEW: Five REST API abilities for AI-powered content enhancement * NEW: Context Library Panel in editor sidebar * IMPROVED: Updated “Tested up to” WordPress 6.9 For complete version history, see [changelog.txt](https://github.com/jooplaan/inline-context/blob/main/changelog.txt) ## 中繼資料 * 版本 **2.8.1** * 最後更新 **2 週前** * 啟用安裝數 **10+** * WordPress 版本需求 ** 6.0 或更新版本 ** * 已測試相容的 WordPress 版本 **7.0** * PHP 版本需求 ** 7.4 或更新版本 ** * 語言 * [Dutch](https://nl.wordpress.org/plugins/inline-context/) 及 [English (US)](https://wordpress.org/plugins/inline-context/). * [將這個外掛本地化為你的母語版本](https://translate.wordpress.org/projects/wp-plugins/inline-context) * 標籤: * [annotations](https://tw.wordpress.org/plugins/tags/annotations/)[context](https://tw.wordpress.org/plugins/tags/context/) [footnote](https://tw.wordpress.org/plugins/tags/footnote/)[inline](https://tw.wordpress.org/plugins/tags/inline/) [tooltip](https://tw.wordpress.org/plugins/tags/tooltip/) * [進階檢視](https://tw.wordpress.org/plugins/inline-context/advanced/) ## 評分 5 星，滿分為 5 星 * [ 2 個 5 星使用者評論 ](https://wordpress.org/support/plugin/inline-context/reviews/?filter=5) * [ 0 個 4 星使用者評論 ](https://wordpress.org/support/plugin/inline-context/reviews/?filter=4) * [ 0 個 3 星使用者評論 ](https://wordpress.org/support/plugin/inline-context/reviews/?filter=3) * [ 0 個 2 星使用者評論 ](https://wordpress.org/support/plugin/inline-context/reviews/?filter=2) * [ 0 個 1 星使用者評論 ](https://wordpress.org/support/plugin/inline-context/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/inline-context/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/inline-context/reviews/) ## 參與者 * [ Joop Laan ](https://profiles.wordpress.org/joop/) ## 技術支援 最近 2 個月解決的問題: 總計 1 個問題，已解決 1 個 [檢視技術支援論壇](https://wordpress.org/support/plugin/inline-context/)