在wordpress中插入html和javascript

Question

我需要在wordpress中插入html和javascript文件，但是我很难将HTML嵌入到wordpress中。

我做了html文件，javascript和css文件。 如何将此文件插入php？

我已经在寻找解决方案，所以我写了如下图所示的代码： Example 1和Example 2 ，但是我确实是php的初学者，所以它不起作用。

我使用vantage-child主题，并将javascript和css文件放到vantage-child文件夹中。

接下来我该怎么办？

  <script type="text/javascript" src="/calc/common.js"></script> <script type="text/javascript" src="/calc/jquery-1.4.4.min.js"></script> <!-- bin/jquery.slider.min.css --> <link rel="stylesheet" href="/calc/css/jslider.css" type="text/css"> <link rel="stylesheet" href="/calc/css/jslider.blue.css" type="text/css"> <link rel="stylesheet" href="/calc/css/jslider.plastic.css" type="text/css"> <link rel="stylesheet" href="/calc/css/jslider.round.css" type="text/css"> <link rel="stylesheet" href="/calc/css/jslider.round.plastic.css" type="text/css"> <!-- end --> <!-- bin/jquery.slider.min.js --> <script type="text/javascript" src="/calc/js/jshashtable-2.1_src.js"></script> <script type="text/javascript" src="/calc/js/jquery.numberformatter-1.2.3.js"></script> <script type="text/javascript" src="/calc/js/tmpl.js"></script> <script type="text/javascript" src="/calc/js/jquery.dependClass-0.1.js"></script> <script type="text/javascript" src="/calc/js/draggable-0.1.js"></script> <script type="text/javascript" src="/calc/js/jquery.slider.js"></script> <!-- end --> 

Answer 1

您的摘要中有很多误解。

首先，通过wp_enqueue_script和wp_enqueue_style加载JavaScript和CSS

至于标记，取决于您要放置的位置以及主题的编写方式。 我建议检查模板层次结构 。

Answer 2

在子主题名称“ js”和“ css”中创建新文件夹

将所有.js文件'js'和.css文件粘贴到'css'文件夹中

在儿童主题中编辑functions.php

并将这些文件注册在functions.php文件中，如下所示。

// Register Script files

function wp_register_custom_scripts() {

    wp_register_script( 'my-script1', get_template_directory_uri() . '/js/common.js', array(), '1.0.0', true );
    wp_enqueue_script('my-script1');

    wp_register_script( 'my-script2', get_template_directory_uri() . '/js/jquery-1.4.4.min.js', array(), '1.0.0', true );
    wp_enqueue_script('my-script2');

    // bin/jquery.slider.min.js 

    wp_register_script( 'my-script3', get_template_directory_uri() . '/js/query.numberformatter-1.2.3.js', array(), '1.0.0', true );
    wp_enqueue_script('my-script3');

    wp_register_script( 'my-script4', get_template_directory_uri() . '/js/tmpl.js', array(), '1.0.0', true );
    wp_enqueue_script('my-script4');

    wp_register_script( 'my-script5', get_template_directory_uri() . '/js/jquery.dependClass-0.1.js', array(), '1.0.0', true );
    wp_enqueue_script('my-script5');

    wp_register_script( 'my-script6', get_template_directory_uri() . '/js/draggable-0.1.js', array(), '1.0.0', true );
    wp_enqueue_script('my-script6');

    wp_register_script( 'my-script7', get_template_directory_uri() . '/js/jquery.slider.js', array(), '1.0.0', true );
    wp_enqueue_script('my-script7');


}
add_action( 'wp_enqueue_scripts', 'wp_register_custom_scripts' );


// Register Stylesheets

function wp_register_custom_styles() {

wp_register_style( 'slider-style1', get_template_directory_uri() . '/css/jslider.css',false,'1.1','all');
wp_enqueue_style( 'slider-style1' );

wp_register_style( 'slider-style2', get_template_directory_uri() . '/css/jslider.blue.css',false,'1.1','all');
wp_enqueue_style( 'slider-style2' );

wp_register_style( 'slider-style3', get_template_directory_uri() . '/css/jslider.plastic.css',false,'1.1','all');
wp_enqueue_style( 'slider-style3' );

wp_register_style( 'slider-style4', get_template_directory_uri() . '/css/jslider.round.css',false,'1.1','all');
wp_enqueue_style( 'slider-style4' );

wp_register_style( 'slider-style5', get_template_directory_uri() . '/css/jslider.round.plastic.css',false,'1.1','all');
wp_enqueue_style( 'slider-style5' );



}

add_action( 'wp_enqueue_scripts', 'wp_register_custom_styles' );

您可以根据主题的目录结构更改文件路径

您可以设置文件的优先级

如果您在fuctions.php中注册文件，则无需在特定页面上调用函数，它将在全球范围内应用。