javascript - 将 html 和 js 添加到 wordpress

Question

有人可以告诉我如何/在哪里包含自定义 javascript 和 HTML 代码来实现(例如)像这样的东西( https://codepen.io/steveg3003/pen/ALXbYN )在我的网站..例如，我希望我网站上的标题看起来像那样并具有那种效果。我很熟悉通过添加自定义 CSS 来编辑我的子主题，但我从来没有遇到过必须添加 HTML 和 js 代码的情况。所以我有点困惑我应该如何以及在哪里做，我尝试过但失败了。我正在使用 Oceanwp 和 Elementor 顺便说一句。谢谢!

Answer 1

您可以通过创建自定义插件来做到这一点。一开始可能听起来很复杂，但实际上并非如此。文档非常清晰且有用: Wordpress Codex

给出此问题的完整答案或为您撰写答案将花费很长时间。但作为开始尝试，在您的插件目录中创建一个文件夹并在其中创建一个 .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 文件，并创建一个可在任何站点上使用的短代码) .

您实际上可以在相应的位置从您的 fiddle 中复制 js、css 和 html，应该不错。请确保您没有复制 body 等的样式，并使用您自己的前缀，这样您就不会破坏现有的样式或插件。

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