Title: Opening Block Author: Isamu Takeda Published: 2024 年 4 月 29 日 Last modified: 2025 年 4 月 27 日 --- 搜尋外掛 ![](https://ps.w.org/opening-block/assets/banner-772x250.png?rev=3078375) ![](https://ps.w.org/opening-block/assets/icon-128x128.png?rev=3078375) # Opening Block 由 [Isamu Takeda](https://profiles.wordpress.org/itmaroon/) 開發 [下載](https://downloads.wordpress.org/plugin/opening-block.1.1.0.zip) * [詳細資料](https://tw.wordpress.org/plugins/opening-block/#description) * [使用者評論](https://tw.wordpress.org/plugins/opening-block/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/opening-block/#installation) * [開發資訊](https://tw.wordpress.org/plugins/opening-block/#developers) [技術支援](https://wordpress.org/support/plugin/opening-block/) ## 外掛說明 * This is a block that displays an opening animation when a website opens. There are three types of animations, divided into three blocks, and you can select your favorite animation. * All blocks have a feature that allows viewers to choose not to display animations again. However, to use this feature, the [BLOCK COLLECTIONS plugin](https://ja.wordpress.org/plugins/block-collections/) must be installed and enabled. If you download the zip file and install the plugin from the WordPress management screen, it will function as a plugin. When you install this plugin, the following three blocks will be registered, and you can use them in the block editor or site editor (confirmed to work with WordPress 6.4.3). Below is an overview of the functions of each block. 1. Logo Anime Converts a string to an SVG file and creates an animation that traces its surroundings. The string can be set freely. There are two fonts to choose from: EduVICWANTBeginner and Roboto. 2.Tea Time Produces an animation that plays the set character string as a caption. The string can be set freely. The caption rises like steam from the cup and disappears. The length of this animation is adjustable. 3.Welcome We will create an animation in which a pen draws the word “Welcome”. In this version, the string is fixed to“ Welcome”. You can select the ending animation from the following five options. 1. Vertical slide 2. Horizontal slide 3. Vertical opening 4. Lateral opening 5. Circular expansion The opening animation will be created by combining these animations with the animations of each block. Please see the screenshot to see what the specific animation looks like. In each block, there is a checkbox located at the bottom right of the screen that allows the viewer to choose not to display the animation next time. This checkbox is always displayed while the animation is running, but it disappears after the animation ends and appears when the user moves the mouse cursor to the bottom right of the screen. ### Related Links * [Github](https://github.com/itmaroon/opening-block) * [source code](https://github.com/itmaroon/opening-block/tree/master/src) * [block-class-package:GitHub](https://github.com/itmaroon/block-class-package) * [block-class-package:Packagist](https://packagist.org/packages/itmar/block-class-package) * [itmar-block-packages:npm](https://www.npmjs.com/package/itmar-block-packages) * [itmar-block-packages:GitHub](https://github.com/itmaroon/itmar-block-packages) ### Arbitrary section 1. Logo Anime Block uses a plugin called opentype.js to generate the path of the svg file from the font type. The source code and terms of use are posted [here](https://www.npmjs.com/package/opentype.js). 2. All blocks has a switch function that prevents the opening animation from being displayed, but for this to work the [BLOCK COLLECTIONS plugin](https://ja.wordpress.org/plugins/block-collections/) must be installed and enabled. 3. The blocks provided by this plugin can be placed one block per web page. Even if you try to place multiple blocks, an error message will appear and you will not be able to place them. However, it is possible to place it on web pages other than the top page, so multiple blocks can be placed on the entire website. 4. PHP class management is now done using Composer. [GitHub](https://github.com/itmaroon/block-class-package) [Packagist](https://packagist.org/packages/itmar/block-class-package) 5. I decided to make functions and components common to other plugins into npm packages, and install and use them from npm. [npm](https://www.npmjs.com/package/itmar-block-packages) [GitHub](https://github.com/itmaroon/itmar-block-packages) ## 螢幕擷圖 * [[ * Draw the logo and the ending will slide horizontally. * [[ * An animation where the letters rise like steam from a teacup, and the ending slides vertically. * [[ * The ending is an animation in which the pen draws letters, and the circle expands to change the screen. * [[ * The ending opens vertically with an animation that draws the logo. * [[ * The ending opens horizontally with an animation that draws the logo. * [[ * A block icon registered by the plugin. Divided into design group. ## 適用於區塊編輯器 這個外掛提供 3 個可供 Gutenberg/區塊編輯器使用的區塊。 * Logo Anime * WelCome * Tea Time ## 安裝方式 1. From the WP admin panel, click “Plugins” -> “Add new”. 2. In the browser input box, type “Opening Block”. 3. Select the “Opening Block” plugin and click “Install”. 4. Activate the plugin. OR… 1. Download the plugin from this page. 2. Save the .zip file to a location on your computer. 3. Open the WP admin panel, and click “Plugins” -> “Add new”. 4. Click “upload”.. then browse to the .zip file downloaded from this page. 5. Click “Install”.. and then “Activate plugin”. ## 使用者評論 這個外掛目前沒有任何使用者評論。 ## 參與者及開發者 以下人員參與了開源軟體〈Opening Block〉的開發相關工作。 參與者 * [ Isamu Takeda ](https://profiles.wordpress.org/itmaroon/) [將〈Opening Block〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/opening-block) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/opening-block/)、 查看 [SVN 存放庫](https://plugins.svn.wordpress.org/opening-block/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/opening-block/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/opening-block/)。 ## 變更記錄 #### 1.1.0 * Regarding the method of loading composer components, a mechanism has been introduced that does not conflict with other plugins. Accordingly, the composer components have been updated. * Operation check with WordPress 6.8 #### 1.0.2 * Fixed a bug that caused an error when rendering started before the page was loaded. #### 1.0.1 * Operation check with WordPress 6.7 * Set z-index:150 to the root style of the block and compare it with the z-index of other blocks so that it is displayed in front of blocks with a lower value. * Fixed a bug that prevented multiple Opening Blocks from being set on the same page from working properly. * Fixed a bug that some translation functions did not work. #### 1.0.0 * Release ## 中繼資料 * 版本 **1.1.0** * 最後更新 **1 年前** * 啟用安裝數 **少於 10 次** * WordPress 版本需求 ** 6.4 或更新版本 ** * 已測試相容的 WordPress 版本 **6.8.5** * PHP 版本需求 ** 8.1.22 或更新版本 ** * 語言 * [English (US)](https://wordpress.org/plugins/opening-block/) * 標籤: * [animation](https://tw.wordpress.org/plugins/tags/animation/)[block](https://tw.wordpress.org/plugins/tags/block/) [custom](https://tw.wordpress.org/plugins/tags/custom/)[gutenberg](https://tw.wordpress.org/plugins/tags/gutenberg/) [opening](https://tw.wordpress.org/plugins/tags/opening/) * [進階檢視](https://tw.wordpress.org/plugins/opening-block/advanced/) ## 評分 這個項目尚無任何評論記錄。 [Your review](https://wordpress.org/support/plugin/opening-block/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/opening-block/reviews/) ## 參與者 * [ Isamu Takeda ](https://profiles.wordpress.org/itmaroon/) ## 技術支援 使用者可在技術支援論壇提出意見反應或使用問題。 [檢視技術支援論壇](https://wordpress.org/support/plugin/opening-block/)