[WordPress] 外掛分享: SearchWP Modal Search Form

首頁外掛目錄 › SearchWP Modal Search Form
WordPress 外掛 SearchWP Modal Search Form 的封面圖片
6,000+
安裝啟用
★★★★★
5/5 分(6 則評價)
93 天前
最後更新
問題解決
WordPress 5.0+ PHP 7.0+ v0.5.7 上架:2019-06-25

內容簡介

使用 SearchWP Modal Search Form 輕鬆將一個可存取且輕量的模式搜尋表單整合到您的 WordPress 網站中!SearchWP Modal Search Form 不需要 SearchWP 但如果安裝和啟用它,SearchWP 將被使用!👍

除了在這個 README 中提供的資訊之外,還有 全面的說明文件可用。

它如何與其他模式不同?

SearchWP Modal Search Form 的理念是將可存取和輕量級的模式搜尋表單易於實現,但更重要的是提供出色的開發人員(和用戶)體驗。

SearchWP Modal Search Form 直接與 WordPress 整合,並且預設的模式表單主題建立在您的啟用主題的樣式之上,使開銷最小化。它還內建了一個完整的模板載入器,可讓您在最小的麻煩下完全自定義您的 SearchWP Modal Search Form。

查看預設模板,以了解自定義的容易程度🤓

將模式表單新增至您的網站

SearchWP Modal Search Form 讓您可在 WordPress 網站上的任何位置輕鬆實現模式搜尋表單。以下方法已內建並可供使用:

作為選單項目
使用簡碼
作為古騰堡區塊
在模板內以程式方式進行

模板自定義

SearchWP Modal Search Form 整合了適當的模板載入器,以在任意數量的模板中顯示搜尋表單,讓您完全自定義每個模板的模式表單外觀。

建立自訂模板的最直接方式如下:

在您的佈景主題內建立名為 searchwp-modal-form 的資料夾
在該資料夾中建立名為 template.php 的檔案(或以 .php 結尾的任何名稱)
將預設模板的內容複製到該檔案中
自訂標頭評論區塊中的 SearchWP Modal Form Name 值
進行任何其他您想要進而自訂的標記/樣式,請注意文件

當模式開啟和關閉時有 (jQuery) 事件觸發。jQuery 不是依賴性,但如果已載入 jQuery,則事件將觸發。

// 在模式開啟時加入回呼:
jQuery('body').on('searchwpModalOnShow', function(e) {
// 在模板中聚焦輸入。
});

外掛標籤

開發者團隊

⬇ 下載最新版 (v0.5.7) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「SearchWP Modal Search Form」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

Use SearchWP Modal Search Form to easily integrate an accessible, lightweight modal search form into your WordPress website! SearchWP Modal Search Form does not require SearchWP but it will utilize SearchWP if it’s installed and activated! 👍
Beyond the information made available in this README there is full documentation available as well.
What makes it different from other modals?
The philosophy behind SearchWP Modal Search Form is to make it easy to implement accessible and lightweight modal search forms but perhaps even more important make it a great developer (and user) experience.
SearchWP Modal Search Form directly integrates with WordPress in the way you use it, and the default modal form theme builds upon the styles put in place by your active theme, making the overhead as small as possible. There’s a full template loader built in as well, allowing you to fully customize your SearchWP Modal Search Form with minimal hassle.
Check out the default template for an example of how easy it is to customize 🤓
Adding modal forms to your site
SearchWP Modal Search Form makes it easy to implement modal search forms anywhere in your WordPress website. The following methods are built in and available to you:

As a Menu Item
Using a Shortcode
As a Gutenberg Block
Within your template(s) programmatically

Template Customization
SearchWP Modal Search Form integrates a proper template loader for displaying search forms in any number of templates, allowing you to fully customize what the modal looks like per template.
The most straightforward way to create a custom template is as follows:

Create a folder named searchwp-modal-form within your theme
Create a file within that folder named template.php (or any name ending in .php)
Copy the contents of the default template into that file
Customize the SearchWP Modal Form Name value in the header comment block
Make any other customizations you\’d like to the markup/style, paying attention to the documentation

There are (jQuery) events that fire when modals are opened and closed. jQuery is not a dependency, but if jQuery is loaded the events will fire.
// Add a callback when a modal is opened:
jQuery('body').on('searchwpModalOnShow', function(e) {
// Focus an input in the template.
e.el.find('input').focus();
});

// Add a callback when a modal is closed:
jQuery('body').on('searchwpModalOnClose', function(e) {
alert('Modal closed!');
});

Please review the full template documentation for more detailed information.

延伸相關外掛

文章
Filter
Apply Filters
Mastodon