內容簡介
總結：Search Modal Block 外掛為您的 WordPress 網站增添了一個現代、彈出式搜索介面，既美觀又實用。它專為區塊編輯器 (Gutenberg) 而建，提供無縫方式在內容的任何部分添加搜索功能。
1. 這個外掛的特點是什麼？
- 潔淨、極簡設計，適用於任何主題
- 完全響應式佈局
- 兼容無障礙性，具有 ARIA 標籤和鍵盤導航
- 可自定義的文本元素，如搜索輸入提示文字、搜尋按鈕文字、螢幕閱讀器標籤
- 為更好的鍵盤導航提供焦點-可見性支援
- 與 WordPress 搜索無縫整合
2. 這個外掛適合哪些網站？
- 需要優雅搜索解決方案的極簡主題
- 想要提升搜索用戶體驗的網站
- 專注於無障礙性的網站
- 任何使用區塊編輯器的 WordPress 網站
3. 這個外掛是如何開發的？
- 使用 WordPress Create Block 工具構建
- 所有源代碼位於外掛的 /src 目錄中
- 從源代碼構建外掛的步驟包括克隆存儲庫、安裝依賴項、運行建立生產文件的命令、以及用於開發的命令
- 依賴的開發模塊有 @wordpress/scripts、@wordpress/eslint-plugin、@wordpress/stylelint-config、eslint
4. 這個外掛使用了哪些第三方庫？
- MicroModal: 一個輕量且可配置的網絡應用程式模態庫
更多資訊及外掛源碼請至 GitHub 查看。
外掛標籤
開發者團隊
原文外掛簡介
The Search Modal Block enhances your WordPress site with a modern, popup search interface that’s both beautiful and functional. Built specifically for the block editor (Gutenberg), it provides a seamless way to add search functionality to any part of your content.
Key Features:
Clean, minimal design that works with any theme
Fully responsive layout
Accessibility-ready with ARIA labels and keyboard navigation
Customizable text elements:
Search input placeholder
Search button text
Screen reader labels
Focus-visible support for better keyboard navigation
Seamless integration with WordPress search
Perfect For:
Minimalist themes needing an elegant search solution
Sites wanting to improve their search UX
Accessibility-focused websites
Any WordPress site using the block editor
Development
This block is built using the WordPress Create Block tool, ensuring compatibility with modern WordPress standards and practices. The source code is available in the plugin’s /src directory.
Building from Source
To build the plugin from source:
Clone the repository
Install dependencies with npm install
Run npm run build to build the production files
For development, use npm run start to start the development server
The build process uses @wordpress/scripts to compile and minify the JavaScript and CSS files. The source code for the compiled files in the /build directory can be found in the /src directory.
Development Dependencies
@wordpress/scripts: ^27.9.0
@wordpress/eslint-plugin: ^21.4.0
@wordpress/stylelint-config: ^21.41.0
eslint: ^8.57.1
The complete source code is available on GitHub: https://github.com/philhoyt/search-modal-block
Credits
This plugin uses the following third-party libraries:
MicroModal – A lightweight, configurable modal library for web applications.
