Question

有人可以指出我如何/在何处包含自定义JavaScript和HTML代码以在我的网站上实现（例如） https://codepen.io/steveg3003/pen/ALXbYN 之类的东西。例如，我希望我的网站上的标题看起来像这样，并具有这种效果。我熟悉通过添加自定义CSS来编辑子主题的方法，但是我从来没有遇到过必须同时添加HTML和js代码的情况。.因此，我有点困惑如何以及在何处执行该操作，但我尝试了但失败了。我正在使用Oceanwp和Elementor btw。谢谢！

Answer 1

您可以通过创建自定义插件来实现。一开始可能听起来很复杂，但实际上并非如此。文档非常清楚并且很有帮助： Wordpress Codex

为这个问题提供完整的答案或为您编写答案会花费很长时间。但作为一个开始的起点，请在您的plugins目录中创建一个文件夹，并在其中创建一个包含以下内容的.php文件

    <?php

    // This is needed so Wordpress can read/find the plugin
    /*
    Plugin Name: XY
    Description: Something
    Version: 0.01
    Author: Author
    Author URI: https://stackoverflow.com
    */

    // If this file is called directly, abort (security stuff)
    if ( ! defined( 'WPINC' ) ) {
        die;
    }


    // Load scripts and stylesheets
    function enqueue_load_xy() {
         wp_enqueue_style( 'load-some-style', plugins_url( '/css/some_style.css', __FILE__ ) );
         wp_enqueue_script('load-some-script', plugins_url( '/js/some_script.js'));
    }
    add_action( 'wp_enqueue_scripts', 'enqueue_load_xy' );


    // Create a shortcode that can be used on any site with [your_shortcode]
    function function_name()
    {

        $function_name_output .= '

        HTML and output goes here

            ';

    return $function_name_output;

    }
    add_shortcode( 'your_shortcode', 'function_name' );

阅读了一些法典后，您将了解到这一点（基本上是从插件的css子目录中加载样式表，并从插件的js子目录中加载.js文件，并创建要在任何站点上使用的简码）

您实际上可以在相应的地方从小提琴中复制js，css和html，这应该很好。但是请确保不要复制body等的样式，并使用自己的前缀，以免破坏现有的样式或插件。

还要确保在本地或其他Wordpress测试安装上对其进行测试，因为插件中的错误代码会迅速导致每个人都能看到的错误。

将HTML和JS添加到Wordpress

1 个答案: