如何在我的 wordpress 主題 (Understrap) 中實現自定義 JS？

Question

我想使用自定義 JS 來幫助我創建一個位於標題正下方的粘性導航欄。 我想要它，以便導航欄滾動到網頁頂部時。 我還希望標題在我滾動到導航欄時消失。 我不知道把我的 js 放在哪里來實現這一點。 我正在使用 wordpress 的 Understrap 主題文件。 https://github.com/understrap/understrap這是主題文件的鏈接，供參考。 如果你去 sass/theme/_theme.scss，我的自定義代碼如下：

body{
font-family: 'Nunito', sans-serif;
}

#wrapper-navbar{
  .top-header-holder{
    background-color:#fff;
    height: 260px;
    overflow: hidden;
    width: 100%;
    
}
#main-nav{
    border-top: 1px solid rgba($color: #194d7e, $alpha: 1.0);
    border-bottom: 1px solid rgba($color: #194d7e, $alpha: 1.0);
    margin-top: 260px;
    padding: 0px;
    top:0;
    z-index: 100;
    position: fixed;
    width: 100%;
    ul{
        flex: 1;
        justify-content: space-between;
        li{
            a{
                font-weight: 500;
                font-size: 24px;
                text-transform: uppercase;
                padding: 1.5em, 0.5em;
            }
            &.current_page_item{
                a{
                    color: #52b848;
                }
            }
        }
    }
}
}


   .home-banner{
   height: 1080px;
   background: #fff;
   background-image: url(../img/homepage1.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: right bottom;
   margin-left: 290px;
   margin-top: -400px;
 }

另外，如果你去 header.php 我已經操作了一些東西如下：

  <?php
  /**
  * The header for our theme
  *
  * Displays all of the <head> section and everything up till <div id="content">
  *
  * @package UnderStrap
  */

 // Exit if accessed directly.
 defined( 'ABSPATH' ) || exit;

$container = get_theme_mod( 'understrap_container_type' );
  ?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- 
 fit=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" 
 rel="stylesheet">
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?> <?php understrap_body_attributes(); ?>>
<?php do_action( 'wp_body_open' ); ?>


<div class="site" id="page">

<!-- ******************* The Navbar Area ******************* -->

<div id="wrapper-navbar">
<div class="top-header-holder"></div>

    <a class="skip-link sr-only sr-only-focusable" href="#content"><?php esc_html_e( 'Skip to content', 'understrap' ); ?></a>
    
    <nav id="main-nav" class="navbar navbar-expand-lg" aria-labelledby="main-nav-label">
    
    
        <h2 id="main-nav-label" class="sr-only">
            <?php esc_html_e( 'Main Navigation', 'understrap' ); ?>
        </h2>
        
        <div class="container">

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- The WordPress Menu goes here -->
            <?php
            wp_nav_menu(
                array(
                    'theme_location'  => 'primary',
                    'container_class' => 'collapse navbar-collapse',
                    'container_id'    => 'navbarNavDropdown',
                    'menu_class'      => 'navbar-nav',
                    'fallback_cb'     => '',
                    'menu_id'         => 'main-menu',
                    'depth'           => 2,
                    'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
                )
            );
            ?>
        <?php if ( 'container' === $container ) : ?>
        </div><!-- .container -->
        <?php endif; ?>

    </nav><!-- .site-navigation -->

</div><!-- #wrapper-navbar end -->

我假設我必須對functions.php 文件夾進行更改，但我不知道如何對其進行格式化。 我以前從未使用過 js。 我很感激這方面的任何幫助。

Answer 1

你有幾個選擇，我認為這是最好的：

創建一個 .js 文件
添加您的腳本並保存 .js 文件
將 .js 文件上傳到 js 文件夾
將您的 js 放入函數文件中
function wpb_adding_scripts() { wp_register_script('yourjs_script', get_template_directory_uri() .'/js/yourjsfile.js', array('jquery'),'1.1', true); wp_enqueue_script('yourjs_script'); }

如何在我的 wordpress 主題 (Understrap) 中實現自定義 JS？

問題描述

1 個解決方案

解決方案1
0 2021-07-21 19:28:58

如何在我的 wordpress 主題 (Understrap) 中實現自定義 JS？

問題描述

1 個解決方案

解決方案1 0 2021-07-21 19:28:58

解決方案1
0 2021-07-21 19:28:58