在页面模板上运行产品筛选器Java脚本

时间：2019-11-08 作者：Webman

我正在尝试在车辆WordPress页面模板上运行以下脚本。页面模板显示产品筛选的结果（品牌、型号、年份、传输等）。产品过滤器使用Javascript。这将替换当前速度太慢的WordPress产品筛选器。

产品显示的页面是www.example。com/车辆

我确实尝试将脚本添加到内容编辑器中，它在页面上正确显示，但由于某些原因，URL不断变化（需要找出这个奇怪的问题）。此外，我认为该脚本不应位于页面内容编辑器或页面模板中，而应位于函数中。php文件。

我不确定函数中应该包含什么代码。php文件以及页面模板调用脚本所需的代码。

非常感谢您的帮助。

<link href="https://example.thirdparty.com/static/css/chunk.css" rel="stylesheet">
<link href="https://example.thirdparty.com/static/css/main.css" rel="stylesheet">

<script src="https://example.thirdparty.com/static/js/runtime-main.js"></script>
<script src="https://example.thirdparty.com/static/js/chunk.js"></script>
<script src="https://example.thirdparty.com/static/js/main.js"></script>

第二部分：

如何在页面模板中调用这种类型的PHP函数？

PHP函数需要在显示产品过滤器结果的页面模板中调用。我们称之为页面。php页面模板。下面是该页面模板的示例代码，底部的内容提到“在此处调用PHP函数my\\u custom\\u enqueue\\u脚本”

<?php
/**
 * Full results page with product filter support to be shared across 
templates.
 *
* @package theme name
*/

?>
<div class="row pagetop">
<div class="small-12 medium-12 columns">
        <header class="page-headermore">
            <h1 class="page-title">
                <?php esc_html_e( \'Vehicles\', \'acme\' ); ?>
            </h1>
            <div class="breadcrumbs" xmlns:v="http://rdf.data- 
vocabulary.org/#">
                <?php
                if ( function_exists( \'bcn_display\' ) ) {
                    bcn_display();
                }
                ?>
            </div>
        </header>
</div>
</div>

<div class="row collapse">

<p>Call the my_custom_enqueue_scripts PHP function within this div.</p>

</div>

1 个回复

最合适的回答,由SO网友:Sally CJ 整理而成

在WordPress中，您应该使用wp_enqueue_script() 加载JavaScript文件，以及wp_enqueue_style() 要加载CSS文件，应使用wp_enqueue_scripts 行动挂钩。此外，主题需要调用wp_head() （英寸header.php) 和wp_footer().

要将脚本仅排在特定页面上，可以使用conditional tag 喜欢is_page() 在你的情况下。

所以这应该是可行的，并且应该放在主题中functions.php 文件：

add_action( \'wp_enqueue_scripts\', \'my_custom_enqueue_scripts\' );
function my_custom_enqueue_scripts() {
    // If the Page slug is \'vehicles\', then we load the files.
    if ( is_page( \'vehicles\' ) ) {
        wp_enqueue_style( \'chunk-styles\', \'https://example.thirdparty.com/static/css/chunk.css\', [], null );
        wp_enqueue_style( \'main-styles\', \'https://example.thirdparty.com/static/css/main.css\', [], null );

        wp_enqueue_script( \'runtime-main\', \'https://example.thirdparty.com/static/js/runtime-main.js\', [], null );
        wp_enqueue_script( \'chunk-js\', \'https://example.thirdparty.com/static/js/chunk.js\', [], null );
        wp_enqueue_script( \'main-js\', \'https://example.thirdparty.com/static/js/main.js\', [], null );
    }
}

更新

以上代码会发生什么：

WordPress检查URL是否满足以下标准页面请求/URLhttps://example.com/vehicles.

如果是这样，WordPress将对上述代码中引用的CSS和JS文件进行排队（即注册和加载）。例如，您可以在文档的head (<head>here</head>):

<link rel="stylesheet" href="https://example.thirdparty.com/static/css/chunk.css" />
... other \'link\'/\'script\'/HTML tags here ...
<script src="https://example.thirdparty.com/static/js/chunk.js"></script>

因此函数(my_custom_enqueue_scripts()) 不需要在源代码/HTML中的任何位置手动调用，因为该函数连接到wp_enqueue_scripts 当WordPress调用/vehicles 页

但如果你必须打印link 和script 中的标记div 如更新的问题所示，那么您可以使用wp_register_style() 具有wp_register_script() 在上述功能中，而不是wp_enqueue_style() 具有wp_enqueue_script(). 因此：

add_action( \'wp_enqueue_scripts\', \'my_custom_enqueue_scripts\' );
function my_custom_enqueue_scripts() {
    // If the Page slug is \'vehicles\', then register the files.
    if ( is_page( \'vehicles\' ) ) {
        wp_register_style( \'chunk-styles\', \'https://example.thirdparty.com/static/css/chunk.css\', [], null );
        wp_register_style( \'main-styles\', \'https://example.thirdparty.com/static/css/main.css\', [ \'chunk-styles\' ], null );

        wp_register_script( \'runtime-main\', \'https://example.thirdparty.com/static/js/runtime-main.js\', [], null );
        wp_register_script( \'chunk-js\', \'https://example.thirdparty.com/static/js/chunk.js\', [ \'runtime-main\' ], null );
        wp_register_script( \'main-js\', \'https://example.thirdparty.com/static/js/main.js\', [ \'chunk-js\' ], null );
    }
}

然后在你的div, 呼叫wp_print_styles() 和wp_print_scripts():

<div class="row collapse">
    <?php
        wp_print_styles( \'main-styles\' ); // also loads chunk-styles
        wp_print_scripts( \'main-js\' );    // also loads chunk-js and runtime-main
    ?>
</div>

更好的做法：加载CSS文件`head`.

是的，你应该，尽管<link> 允许进入body.

add_action( \'wp_enqueue_scripts\', \'my_custom_enqueue_scripts\' );
function my_custom_enqueue_scripts() {
    // If the Page slug is \'vehicles\', then enqueue the CSS and register the JS.
    if ( is_page( \'vehicles\' ) ) {
        wp_enqueue_style( \'chunk-styles\', \'https://example.thirdparty.com/static/css/chunk.css\', [], null );
        wp_enqueue_style( \'main-styles\', \'https://example.thirdparty.com/static/css/main.css\', [ \'chunk-styles\' ], null );

        wp_register_script( \'runtime-main\', \'https://example.thirdparty.com/static/js/runtime-main.js\', [], null );
        wp_register_script( \'chunk-js\', \'https://example.thirdparty.com/static/js/chunk.js\', [ \'runtime-main\' ], null );
        wp_register_script( \'main-js\', \'https://example.thirdparty.com/static/js/main.js\', [ \'chunk-js\' ], null );
    }
}

然后在你的div, 呼叫wp_print_scripts() 仅限：

<div class="row collapse">
    <?php
//      wp_print_styles( \'main-styles\' ); // the files already loaded in \'head\'
        wp_print_scripts( \'main-js\' );    // also loads chunk-js and runtime-main
    ?>
</div>

或使用原始PHP函数并在页脚中加载JS文件

是的，只需设置wp_enqueue_script() 到true 将脚本文件加载到页脚中（打印在之前的某个位置</body> 或者无论你打电话到哪里wp_footer()). E、 g。

wp_enqueue_script( \'chunk-js\', \'https://example.thirdparty.com/static/js/chunk.js\', [], null, true );

小码农CODE

在页面模板上运行产品筛选器Java脚本

更新

更好的做法：加载CSS文件`head`.

或使用原始PHP函数并在页脚中加载JS文件

相关推荐

Use Post ID in functions.php

在页面模板上运行产品筛选器Java脚本

更新

更好的做法：加载CSS文件head.

或使用原始PHP函数并在页脚中加载JS文件

相关推荐

Use Post ID in functions.php

更好的做法：加载CSS文件`head`.