前言介紹
- 這款 WordPress 外掛「haxtheweb」是 2020-05-20 上架。
- 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
- 上一次更新是 2020-06-01，距離現在已有 1798 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 4.9 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.0 以上。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
btopro |
外掛標籤
editor | haxtheweb | classic editor | disable gutenberg |
內容簡介
這是這個外掛的簡要說明，不超過150個字符。這裡不包含標記。
haxtheweb
將 HAX 塊編輯器引入 ClassicPress 和 WordPress。 HAX 是 Headless Authoring Experience 的縮寫，意思是它是一個與使用它的 CMS 斷開連接的塊編輯器。 HAX 通過使用網絡組件標準來識別可以編輯的塊。 HAX 以專家終端用戶可以書寫的方式提供編輯功能，但不需要修改代碼！代碼是以 webcomponents 的語義方式編寫的，這樣專家和開發人員就可以隨時跳入修改。
第三方依賴
雖然您可以在本地托管資產，但 HAX 編輯器默認會利用賓夕法尼亞州 Web 組件 CDN。
您可以在「設置 -> 撰寫」頁面上進行修改。 有關此服務的其他詳情：
- 賓夕法尼亞州 CDN 域 https://cdn.webcomponents.psu.edu/ 由 Amazon CloudFront 提供
- 您可以在此處 https://webcomponents.psu.edu/ 瀏覽通過 CDN 公開的資產，使用 StorybookJS
- 大學遵循的隱私策略：https://policy.psu.edu/policies/ad53
- HAX 和 WebComponents 的來源是可配置的，您可以更改它以利用自己的（詳細信息如下）
依賴項
如果使用WordPress，您需要取得 Classic Editor 插件
ClassicPress 沒有此依賴項
請確保您的永久鏈接設置為漂亮的鏈接，否則對 JSON 調用加載數據的調用將失敗 https://stackoverflow.com/questions/44204307/rest-api-init-event-not-fired
用法
這會提供您開始所需的依賴項。
1. 下載此外掛並將其放置在 wp-content/plugins/haxtheweb
2.如果使用 WordPress，您還需要 Classic Editor 插件；然後您必須啟用它作為默認編輯器（wp-admin/options-writing.php）
3.啟用插件（wp-admin/plugins.php）
4.確保設置 -> 永久鏈接設置為「文章名稱」
5.轉到「設置 -> 撰寫」並向下滾動以更改您的設置
6.編輯或創建新頁面/帖子
7.享受 HAX 的編輯功能
配置
HAX 將選項添加到撰寫設置頁面（wp-admin/options-writing.php），以允許進一步的集成和自定義，儘管默認設置可用於快速啟動。
使用注意事項
默認情況下，使用 CDN 提供 HAX 和其 WebComponents 所需的 Javascript。 我們會推薦您在使用 HAX 進行生產時，查看本地建構程序（如下所述）或利用一個更快的 CDN。
在「尋找」區域中連接其他「應用程式」
要連接到 YouTube、Flickr 和 Vimeo 等熱門服務，您需要 API 金鑰。 您可以找到有關如何獲取這些金鑰以及將其放在「撰寫設置」（wp-admin/options-writing.php）頁面上的詳細信息。
前端開發人員
如果需要，您可以從源代碼構建 HAX。 HAX 默認使用 CDN，這將有效地指向此目錄或其某些變種 https://github.com/elmsln/HAXcms/tree/master/build。
如果您希望從源代碼構建所有內容，您可以使用以下命令：
原文外掛簡介
Here is a short description of the plugin. This should be no more than 150 characters. No markup here.
haxtheweb
Bringing the HAX block editor to ClassicPress & WordPress. HAX is short for headless authoring experience, meaning that it is a block editor that is disconnected from the CMS its used in. HAX recognizes editable blocks by using the web component standard. HAX provides editing capabilities in a way that attempts to write clean HTML markup the same way an expert end-user could, but without ever touching code! The code is writen in a way that experts and developers can jump in and modify as needed given the semantic nature of webcomponents!
3rd party dependencies
While you can host assets locally, the HAX editor defaults to leveraging the Penn State Web components CDN.
You can modify this on the Settings -> Writing page. Additional details on this service:
– Penn State CDN domain https://cdn.webcomponents.psu.edu/ is served from Amazon CloudFront
– You can view assets that are exposed via CDN here https://webcomponents.psu.edu/ in StorybookJS
– Privacy polcies the university adheres to: https://policy.psu.edu/policies/ad53
– The source of HAX and your web components is configurable and you can change it to leverage your own (details below)
Dependencies
If using WordPress, you’ll need to get the Classic Editor plugin
ClassicPress does not have this dependency
Make sure that your Permalink settings are for pretty links or calls to load data via JSON will fail https://stackoverflow.com/questions/44204307/rest-api-init-event-not-fired
Usage
This should give you the dependencies you need to get going.
1. Download this plugin and place it in wp-content/plugins/haxtheweb
2. If using WordPress you’ll also need the Classic Editor plugin; and then you’ll have to enable it as the default editor (wp-admin/options-writing.php)
3. Enable the Plugins (wp-admin/plugins.php)
4. Make sure Settings -> Permalinks is set to “Post name”
5. Go to Settings -> Writing and scroll down to change your settings
6. Go to edit or create a new page / post
7. Enjoy HAX’ing the web
Configuration
HAX adds options to the Writing Settings page (wp-admin/options-writing.php) to allow for further integrations and customizations though the default settings are fine to get up and started with.
Note on usage
The default is to serve the Javascript required for HAX and its web components from a CDN. We default to a Penn State mirror of the required assets so you can get up and running quickly. We recommend that if you choose to go into production with HAX, that you look at doing a build routine locally (outlined below) or leveraging one of the faster CDNs available.
Hooking up additional “apps” in the “Find” area
To connect to popular services like YouTube, Flickr, and Vimeo you’ll need an API key. You can find details on how to get these keys as well as where to put them on the Writing Settings (wp-admin/options-writing.php) page.
Front end Developers
You may build HAX from source if needed. HAX defaults to use CDNs which will effectively point to
this directory or some mutation of it — https://github.com/elmsln/HAXcms/tree/master/build
If you want to build everything from source, your welcome to use yarn / npm to do so though our
build routine effectively will end in the same net result. If you want to do custom build routines
such as rollup or webpack and not use our prebuilt copies / split build approaches, then your welcome
to check the box related to not loading front end assets in the settings page in order to tailor
the build to your specific needs.
Getting dependencies
You need polymer cli (not polymer but the CLI library) in order to interface with web components in your site. Get polymer cli installed prior to usage of this (and (yarn)[https://yarnpkg.com/lang/en/docs/install/#mac-stable] / an npm client of some kind)
bash
$ yarn global add polymer-cli
Perform this on your computer locally, this doesn’t have to be installed on your server.
Usage
Find CopyThisStuff directory in /wp-content/plugins/haxtheweb.
create a /wp-content/haxtheweb directory
copy the files from CopyThisStuff into /wp-content/haxtheweb
Then run the following (from the directory you copied it over to) in order to get dependencies:
bash
$ yarn install
Now run polymer build and you’ll have files in build/ which contain everything you’ll need to get wired up to web components in your site. Modifying build.js or package.json can be used in order to get new elements and have them be implemented.
Shouldn’t I put web components in my theme?
We don’t think so. While it may seem counter intuitive, the theme layer should be effectively implementing what the site is saying is available. If you think of standard HTML tags are being part of this (p, div, a, etc) then it makes a bit more sense. You don’t want functional HTML components to ONLY be supplied if your theme is there, you want your theme to implement and leverage the components.
New to web components?
We built our own tooling to take the guess work out of creating, publishing and testing web components for HAX and other projects. We highly recommend you use this tooling though it’s not required:
– https://open-wc.org – great, simple tooling and open community resource
– https://github.com/elmsln/wcfactory – Build your own web component library
– https://github.com/elmsln/lrnwebcomponents – Our invoking of this tooling to see what a filled out repo looks like
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「haxtheweb」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Classic Editor 》Classic Editor 是由 WordPress 團隊維護的官方外掛程式，可還原之前（也就是「經典」）的 WordPress 編輯器和「編輯文章」畫面，使使用者可以使用延伸這個畫...。
Advanced Editor Tools 》高級編輯工具（以前稱為 TinyMCE Advanced）引入了一個「經典段落」區塊，供區塊編輯器（Gutenberg）使用。, 如果您還沒有準備好切換到區塊編輯器，或者有插...。
Disable Gutenberg 》此外掛可禁用新的 Gutenberg 編輯器 (也稱為區塊編輯器)，並以經典編輯器取代它。你可以完全禁用 Gutenberg，或從文章、頁面、角色、文章類型和主題模板中有...。
Classic Editor + 》, 符合 GDPR 規範：不收集任何使用者資料, , 這個免費的「Classic Editor +」外掛程式針對不想使用 WordPress 5.0 引入的 WP Block Editor（Gutenberg）的所...。
No Gutenberg – Disable Gutenberg Blocks Editor and FSE Global Styles 》WordPress 5.x 內建了一個名為 Gutenberg 的新區塊編輯器。隨著 5.9 版本的推出，全站編輯（Full Site Editing，FSE）的全局樣式被加入，每個頁面都會載入大...。
Enlighter – Customizable Syntax Highlighter 》Enlighter 是一款免費且易於使用的 WordPress 語法高亮工具。其語法高亮效果是由 EnlighterJS javascript 函式庫所提供，能呈現出漂亮的程式碼外觀。, 您可以...。
Classic Editor and Classic Widgets 》這個免費的 Classic Editor & Classic Widgets 外掛可幫助您輕鬆地完全停用 Gutenberg 編輯器，並啟用 Classic Editor 和 Classic Widgets。, Classic Ed...。
Enable Classic Editor & Widgets 》這是一個非常輕量化的經典編輯器外掛程式，僅佔用 3KB。隨著 WordPress 5.x 的推出，我們也迎來了一個全新的區塊編輯器─Gutenberg。由於相容性及易用性的考量...。
Remove Gutenberg 》您是否已升級 WordPress，但卻卡在新的編輯器上？別擔心，只要安裝Remove Gutenberg外掛程式，就可以使用經典編輯器。此外，閱讀設定中還有一個功能，可以啟...。
Web Fonts Loader – Google Fonts Manager 》這個 WordPress 外掛將熱門的 Google 字型載入到你的網站中，你可以將這些字型應用到整個網站，或是分別應用在每個頁面或文章中。, 當你安裝並啟用外掛後，你...。
Quicktags for WP 》這個簡單的外掛程式為 WordPress 的 HTML 編輯器增加有用的按鈕。, 目前它可以新增以下按鈕：, h1、h2、h3、h4、h5、hr、nbsp、mox, mox 按鈕可以新增一個漂...。
DivUp Content 》注意：此外掛原本是為了解決將傳統編輯器內容分割成 div，使用簡短代碼的問題。於 2022 年 9 月 27 日，我測試了此外掛與 Gutenberg 的相容性，因為 div 在 G...。
Guten Free Options 》是否想要根據自身需要使用或不使用新的區塊編輯器（Gutenberg）？, Guten Free Options 可以讓您完全控制文章何時需要使用傳統編輯器或區塊編輯器，使您平滑...。
TCD Classic Editor 》總結：該外掛讓你可以在經典編輯器中新增自訂的快速標籤，同時使用了第三方服務 Google Maps API 來嵌入地圖。, , 問題與答案：, 1. 這個 WordPress 外掛的功...。
WP Disable Block Editor 》這個外掛可以讓您停用 WordPress 區塊編輯器並啟用經典編輯器以及原始的「編輯文章」畫面（包括 TinyMCE、元箱等等）。, , 停用區塊編輯器，啟用舊版編輯器。...。