假設您正在使用LoginPress並考慮是否可以添加Vanta.js動畫效果作為背景。答案是肯定的！
Vanta.js 是一個 JS 庫，它通過添加幾行代碼來添加動畫網站背景。它可以幫助您創建吸引使用者的動態且引人入勝的視覺體驗。
使用LoginPress時添加 Vanta.Js 作為背景動畫
LoginPress 是一個功能強大的 WordPress 外掛程式，可讓您輕鬆自定義和增強網站的登錄頁面。
提升LoginPress登錄頁面的一種方法是使用Vanta.js添加令人驚歎的背景動畫。通過將Vanta.js集成到LoginPress登錄頁面中，您可以創建動態且引人入勝的視覺體驗。
按照以下步驟將 Vanta.js 背景動畫添加到您的 LoginPress 登錄頁面。
第1步。前往 Vanta.JS 網站
首先，轉到Vanta.JS的官方網站。
第2步。選擇效果
接下來，向下滾動一點。在這裡，您會發現美麗的效果。選擇您要添加到網站的那個。
注意：在這裡，我們選擇 地球效果.
第 3 步。自訂效果
選擇效果后，您將自動向上滾動以查看它。
您可以在螢幕右側看到一個框。從這裡，您可以自定義效果。
第 3 步。複製第1個和第2個腳本的URL
完成自定義效果后，就可以為您準備好代碼了。
為此，請按兩下第一個腳本連結並複製其URL以替換 Vanta CDN URL。
注意：請參閱第 8 點之後的代碼。
點選第二個連結文稿連結並複製 URL 以取代 Vanta-effect CDN URL。
注意：請參閱第 10 點之後的代碼。
第 4 步。在 Assets > JS 中創建新檔
接下來，您需要在 assets > js 中創建一個名為 vanta-script.js 的新檔。
現在，複製此檔中該框的第三個腳本。
只需將代碼粘貼到「vanta-script.js」檔中即可。
注意： 將此 JS 檔中的選擇器“#Your-Element-Selector”更改為“body.login”。
文稿將如下所示：
VANTA.GLOBE({
el: "body.login",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.0,
minWidth: 200.0,
});第 5 步。將代碼粘貼到主題的函數 .php 檔中
將文件相應地放置到確切位置后，將以下代碼添加到網站主題的函數 .php 檔並保存。
注意：建議使用子主題而不是父主題來編輯函數.php檔。更新主題時，可能會丟失修改後的代碼。它可能會對您的網站造成一些不利影響。
為此，請轉到 WordPress 管理儀錶板的左側邊欄，導航到外觀，然後按兩下主題文件編輯器選項。
在下一個螢幕上，按下右側的主題功能。向下滾動到 functions.php 檔的底部並添加代碼。
這是給你的代碼：
add_action( 'login_head', 'prefix_vanta_login_header' );
/**
* Custom login header to add the custom scripts for the login page.
*
* @return void
*/
function prefix_vanta_login_header() {
//wp_enqueue_script( 'vanta', 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js', array(), '1.0.0', true );
//wp_enqueue_script( 'vanta-globe', 'https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js', array(), '1.0.0', true );
//wp_register_script( 'prefix-animated-vanta', get_template_directory_uri() . '/assets/js/vanta-script.js', array( 'vanta', 'vanta-globe' ), '1.0.0', true );
wp_enqueue_script( 'prefix-animated-vanta' );
}
添加鉤子后，按兩下螢幕底部的「更新檔」按鈕以保存更改。
轉到您的登錄頁面，瞧！您有一個使用Vanta.Js作為使用LoginPress創建的登錄頁面的動畫背景。
