[WordPress] 外掛分享： Embed React app

前言介紹

  • 這款 WordPress 外掛「Embed React app」是 2018-08-08 上架。
  • 目前有 200 個安裝啟用數。
  • 上一次更新是 2019-02-26，距離現在已有 2259 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
  • 外掛最低要求 WordPress 4.0 以上版本才可以安裝。
  • 有 5 人給過評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

pavex |

外掛標籤

embed | react | reactapp |

內容簡介

這是一種簡單的方式，如何在您的文章中嵌入 React 應用程式。在我的部落格中，我想要加入小型應用程式，但是典型的 React 應用程式是單頁應用程式，很難在 index.html 中進行鏈接。我需要一個簡單的方式來解決它。結果可以在我的部落格上看到，例如：嵌入 Google 相片相簿。

如何操作

您需要在公共 URL 上託管編譯後的 React 應用程式。在應用程式建置後找到檔案名稱。如果您使用 create-ract-app 腳本，所有需要的東西都在“靜態”目錄中。將文件名組裝成類似這樣的短代碼：

[reactapp id="root" js="pathto/static/js/main.000000.js" css="pathto/static/css/main.000000.css"]
[reactapp id="custom_id" "pathto/static/js/main.000000.js" "pathto/static/css/main.000000.css" "pathto/static/css/another.css"]

id – 應用程式根元素的 ID
js[n] – 路徑到 JavaScript 封裝
css[n] – 路徑到樣式表
（文件根據 js/css 副檔名自動檢測）

就這樣。
當應用程式更新時，您必須設置新的短代碼連結。
如果您想要更多有關此外掛的資訊，您可以訪問我的部落格中的在 WordPress 文章中嵌入 React 應用程式文章。

1.0.1

發布日期 – 2019 年 1 月 18 日

為了新的 React 建置相容性而插入多個腳本。

1.0.0

React 應用程式短代碼。

原文外掛簡介

This is a simple way how to embed react application in to your post. In my blog, a wanted include small application, but typical react app is a single page app, hardly linked in index.html. He needed a simple way to solve it. The result is visible on my blog, for example: Embeding Google Photos album.
How to do it
You need compiled React app hosted on public url. Find filenames after building an application. If you using create-ract-app script, all what you need, find in “static” directory. Assemble file names into a shortcode like this:
[reactapp id="root" js="pathto/static/js/main.000000.js" css="pathto/static/css/main.000000.css"]
[reactapp id="custom_id" "pathto/static/js/main.000000.js" "pathto/static/css/main.000000.css" "pathto/static/css/another.css"]

id – ID of application root element
js[n] – path to Java script bundle
css[n] – path to Stylesheet
(files are detected automaticly by extension js/css)

That’s all.
When application was updated, you must setup new links to shortcode.
If you want to more information about this plugin, you may visit Embedding a React Application to WordPress post post in my blog.
1.0.1
Release Date – 18 January 2019

Multiple script insert for new react build compatibility.

1.0.0

React application shortcode.

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Embed React app」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

最新版本

延伸相關外掛（你可能也想知道）

  • WPGraphQL 》WPGraphQL 是一個免費、開源的 WordPress 外掛，為任何 WordPress 網站提供可延伸的 GraphQL schema 和 API。, 以下是一些有助於你開始使用 WPGraphQL 的連結...。
  • ReactPress – Create React App for WordPress 》ReactPress 讓你可以輕鬆地創建、構建和部署 React 應用程序到現有的 WordPress 網站。使用你的 React 知識為你的 WordPress 客戶創建單頁應用程序。, 只需幾...。
  • Regiondo Booking Widget 》Regiondo 是一款 預約軟體，讓旅遊和活動提供商能夠管理其可用性，集中預訂並在其網站上處理線上付款。, 此外掛可讓您在 WordPress 站點上添加即時預約介面，...。
  • Public Woo Api 》這個外掛允許以不需要身份驗證的方式取得 WooCommerce 的產品、分類、標籤、變異和評論。, 在 Github 上提供支援和請求：https://github.com/mickidum/public...。
  • Frontend View For Headless CMS 》以下是提供的網站外掛摘要：, - 這個外掛將後端 WordPress 文章、頁面、自訂文章類型、分類和分類連結到 Next.js 前端網站。, , ### 問題與答案：, - 誰開...。
  • Embed React Build 》此外掛會讀取你的 ReactJS 建置中的 asset-manifest.json 檔案，並將其包含在 WordPress 中，讓你能夠在任何 WordPress 中執行應用程式。, 使用方法, 你可以...。
  • GoEmbed – Javascript Application Embedded 》綜合 WordPress 與 ReactJS 的技術可以協助開發者輕鬆地創建動態且有互動性的網站，整合兩者能夠大幅提升開發效率和功能性。, , 問題與答案：, , 問題：什麼...。
  • PWACommerce – WooCommerce Mobile Plugin for Progressive Web Apps & Hybrid Mobile Apps 》2020年2月更新：全新且響應式PWACOMMERCE主題即將推出！請關注PWACOMMERCE.COM, PWACommerce是一個行動外掛程式，可協助您將WooCommerce商店轉換為採用React...。
  • NodeifyWP 》NodeifyWP 可讓您使用 PHP 建立同構 JavaScript 應用程式。使用 NodeifyWP，您可以使用 WordPress 管理內容並直接在前端以同構方式輸出內容，而無需像 Expres...。
  • LC Expo Push Notifications 》您是否擁有一個使用 Expo（React Native）應用程式並希望實現推送通知的項目？, 這款外掛程式是以正確的方式輕鬆完成工作的最簡單方法。, 通知排程、表情符號...。
  • I like 》這個 WordPress 外掛名為「I like」，可以幫助您在文章中加入讚和倒讚功能，輕鬆監控哪些文章受到訪客喜愛或不喜愛的程度。當人們拜訪您的部落格並發現文章有...。
  • Books Library 》這是一個針對 Gutenberg 區塊的書籍圖書館外掛程式。可以輕鬆地在後端管理書籍資料，具有一些好用的功能，如評分、價格和篩選。使用 React 設計的前端介面。,...。
  • Piri FAQ AI Assistant 》這個外掛是一個開源的網頁小工具，可以在您的網站上添加一個由 PIRI AI 驅動的常見問題解答 AI 助手。, 它具有靈活性，可以更改機器人的名稱、圖標和整體顏色...。
  • Chart Card 》將端點掛鉤以使用圖表庫顯示資料。, 歸屬, , React Google Charts, 。
  • Bellhop 》這是一款簡單的 WordPress 外掛，可以增加輕量、響應式的服務鈴按鈕，讓訪客可以輕鬆地透過多種方式聯繫前台。。

文章
Filter
Apply Filters
Close
Mastodon