[WordPress] 外掛分享： Share Target

內容簡介

透過此外掛，您可以直接從適用裝置和瀏覽器分享圖像、媒體、URL 和文字到您的 WordPress 網站。舉例來說，您可以像使用原生訊息應用程式一樣，將您剛在手機上拍攝的照片分享到 WordPress 網站上。

使用此外掛分享內容到您的 WordPress 網站後，它會自動開啟一篇新的區塊編輯器草稿文章，接著您只需添加任何其他內容，或者直接以目前內容立即發布。對於某些用例，例如圖像部落格，分享圖片創建文章可能就足夠並能立即發布。

此外掛可分享的其他範例包括音訊和視訊檔案、短文本備註、Spotify 播放清單，基本上您可以通過手機應用程式分享的任何內容，現在也可以直接分享到 WordPress 網站上。

需求
為了使用此外掛，您還需要安裝並啟用 PWA 外掛，它為您的網站提供成為 PWA 的基礎架構。

用法
當兩個外掛都啟用後，當您在合適的裝置和瀏覽器上訪問您的網站時，您應該會看到提示（通過 PWA 外掛的功能），要將該外掛新增到您的主畫面（例如手機上的應用程式）。

當您將內容從該裝置分享到 WordPress 網站時，您的網站已安裝的 PWA 應該會打開。然後，您應該（可能需要登錄）直接進入一篇包含共用內容的新文章編輯器，如果您分享的是媒體檔案（例如影像或影片檔），它會自動添加到您的網站媒體庫中。

背景資訊
此外掛由 Web Share Target API 驅動。Web Share Target API 是一種現代瀏覽器 API，允許直接將圖像、媒體、URL 和基本文本內容分享到您的網站，依賴於您的手機中整合的常規分享 UI。請查看 Web Share Target API 的更多技術背景資訊。

第三方開發者 API
Share Target 外掛允許其他外掛與之整合。當共用內容到達區塊編輯器時，您可以條件性地覆蓋外掛的預設行為，從而自定義共用行為。

在 PHP 中，載入您的自定義 JavaScript 檔案。請務必在它的依賴項中包含 share-target script。例如：
wp_enqueue_script(
'my-share-target-handler',
'/assets/js/my-share-target-handler.js',
array( 'share-target' )
);

然後在您的 JavaScript 檔案中，您可以使用以下函數添加自定義共用程序處理：
wp.shareTarget.registerShareHandler( options )

註冊一個新的共用程序處理程式，處理傳入的共用資料。

參數：

options：（Object）（必填）處理程序選項。
options.handle：（Function）（必填）共用程序處理功能。 必須是 asynchronous，並接受一個具有 title、description、link 屬性（每個字符串）、和 image（URL字符串）屬性的物件。

外掛標籤

開發者團隊

原文外掛簡介

By using this plugin, you can share content like images, media, URLs and text directly to your WordPress site from a capable device and browser. For example, you can share a photo that you just took on your phone to your WordPress site in the same way that you would otherwise share it with your friends in a native messaging app.
When you share content to your WordPress site using this plugin, it will automatically start a new block editor draft post with it; you can then just add anything else you like, or immediately publish it as is. For certain use-cases, e.g. an image blog, creating a post with the shared image might be everything that’s needed before publishing right away!
To name a few other examples of what you can share to your WordPress site using this plugin, think about audio and video files, short text notes, Spotify playlists – basically anything that you can share from an app on your phone you can now also share directly to your WordPress site.
Requirements
In order to use this plugin, you will also need to install and activate the PWA plugin, which provides the basic infrastructure for your site to become a PWA.
Usage
With both plugins active, once you visit your site on a capable device and browser, you should see a prompt (via the PWA plugin’s functionality) to add the plugin to your home screen (e.g. similar to an app on your phone).
Once you have added your website to the home screen of your device, it should be available as a target when sharing any content from that device, e.g. a photo or a URL.
When you share something to your WordPress site, the installed PWA of your website should open. You should then (potentially after logging in) land directly on a new post in the block editor where the shared content has already been added. If you are sharing a media file (e.g. an image or video file), it will be automatically added to your site’s media library.
Background information
This plugin is powered by the Web Share Target API. The Web Share Target API is a modern browser API which allows sharing images, media, URLs and basic text content directly to your website, relying on the regular sharing UI that is for example integrated in your phone. See here for more technical background information about the Web Share Target API.
Third-party developer API
The Share Target plugin allows other plugins to integrate with it. You can customize what should happen with incoming shared content when it arrives in the block editor, conditionally overriding the default behavior of the plugin.
In PHP, enqueue your custom JavaScript file. Make sure to include the share-target script in its dependencies. For example:
wp_enqueue_script(
'my-share-target-handler',
'/assets/js/my-share-target-handler.js',
array( 'share-target' )
);

In your JavaScript file you can then add your custom share handler using the following function:
wp.shareTarget.registerShareHandler( options )
Registers a new share handler for incoming shared data.
Parameters:

options: (Object) (required) Handler options.
options.handle: (Function) (required) Share handler function. Must be asynchronous and accept an object with properties title, description, link (each strings), and attachment (object). Any of these may be undefined. Depending on the data, the function should decide whether to handle it and if so run the necessary logic and return true, to stop following handlers from being called. Otherwise, it should return false.
options.priority: (number) (optional) Priority for the handler. A lower number means higher priority, like for WordPress hooks. Default is 10.

The following example handles any shared Spotify content and embeds it into the post:
// Matches a shared Spotify URL.
const spotifyRegex = /^https:\/\/open\.spotify\.com/;

wp.shareTarget.registerShareHandler( {
handle: async ( { link, attachment } ) => {
// Do not handle if a media file is being shared.
if ( attachment ) {
return false;
}

// If a shared Spotify URL, embed it.
if ( link && link.match( spotifyRegex ) ) {
wp.data.dispatch( 'core/block-editor' ).insertBlocks( [
wp.blocks.createBlock( 'core/embed', {
url: link,
type: 'rich',
providerNameSlug: 'spotify',
responsive: true,
} ),
] );
return true;
}

// Otherwise fall back to other handlers.
return false;
},
priority: 5,
} );