开发 Wordpress-Plugin：将 .js 加载到 head 和 HTML-Snippet 作为短代码时出现问题

Question

我被要求为我目前参与的项目开发一个 Wordpress 插件，因为我通常从事图形和 UX 设计 (CSS3)。我不太熟悉为 WP 开发插件，尽管我对 PHP 有一些了解。我有以下代码：

<?php
/**
* Plugin Name: ExpButton Wordpress Plugin
* Plugin URI: https://url.de
* Description: Ein Generator des Expbuttons
* Version: 0.1
* Author: Wilko Meyer
* Author URI: http://url.com
**/

/**
* Loading js into header
**/

function add_async($url)
{
    if (strpos($url, '#asyncload')===false)
        return $url;
    else if (is_admin())
        return str_replace('#asyncload', '', $url);
    else
        return str_replace('#asyncload', '', $url)."' async='async";
}
add_filter('clean_url', 'add_async', 11, 1);


function expertbuttonjs()
{
    // Loading the JS
    wp_register_script( 'custom-script', plugins_url( 'https://www.expert-button.de/js.js#asyncload', __FILE__ ), array( 'jquery', 'jquery-ui-core' ), '20120208', true );
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_with_the_lot' );

/**
*Creating Shortcode
**/

add_shortcode( 'shortcode', 'expbutton' );

function expbutton( $atts ) {

        /* Turn on buffering */
        ob_start(); ?>

        <div style="overflow:hidden;font-size:9px;height:auto;width:auto;text-align:center;margin:auto;" id="expertbuttonbg"><a target="_bl$

        <?php
    /* Get the buffered content into a var */
        $sc = ob_get_contents();

/**
*Expbutton to Shortcode
**/

add_shortcode( 'shortcode', 'expertbutton' );

function expertbutton( $atts ) {

        ob_start(); ?>

        <div style="overflow:hidden;font-size:9px;height:auto;width:auto;text-align:center;margin:auto;" id="expertbuttonbg"><a target="_bl$

        <?php

        $sc = ob_get_contents();

        ob_end_clean();

        /* Return the content as usual */
        return $sc;

}
?>

这个插件的目的是将 js.js 作为异步加载到页面中，并从 /* Turn on buffering */ 部分下面的 HTML 代码创建一个短代码，可以是在 wordpress 网站上使用。

目前代码没有将 js 加载到 header 中，应该创建的短代码也不起作用，我不知道为什么。希望有人可以帮助我解决这个问题并提供一些线索。

为什么插件不起作用？

提前致谢。

Answer 1

我做了一些重要的小改动。您按钮的 html 代码不完整（所以我试着猜测）。您的 javascript 文件的名称在我看来非常奇怪和不寻常...

<?php
/**
* Plugin Name: ExpButton Wordpress Plugin
* Plugin URI: https://url.de
* Description: Ein Generator des Expbuttons
* Version: 0.1
* Author: Wilko Meyer
* Author URI: http://url.com
**/

/**
* Loading js into header
**/

function add_async($url)
{
    if ( strpos($url, '#asyncload') === false )
        return $url;
    else if ( is_admin() )
        return str_replace('#asyncload', '', $url);
    else
        return str_replace('#asyncload', '', $url)."' async='async";
}
add_filter('clean_url', 'add_async', 11, 1);

我已更正 wp_register_script() 函数中的 url 和 add_action() 函数中的问题：您的 javascript 文件必须在您的插件中根文件夹（我的意思是不在子文件夹中）。另外你的 JS 文件名在我看来很奇怪 （通常它的文件以 .js 扩展名而不是 .js#asyncload）:

function expertbuttonjs()
{
    // Loading the JS 
    wp_register_script( 'custom-script', plugins_url('/js.js#asyncload', __FILE__ ), array( 'jquery', 'jquery-ui-core' ), '20120208', true );
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'expertbuttonjs' );

不要对短代码函数使用 shortcode 名称。您的按钮代码在您的代码中不完整。此外，短代码或函数的名称不能重复两次：

/*
 * expbutton Shortcodes
 */

add_shortcode( 'expbutton', 'expbutton' );
function expbutton( $atts ) {

        /* Turn on buffering */
        ob_start(); ?>

        <div style="overflow:hidden;font-size:9px;height:auto;width:auto;text-align:center;margin:auto;" id="expertbuttonbg"><a target="_blank" href="'.$sc.'">Text Button</a><div>

        <?php
    /* Get the buffered content into a var */
        $sc = ob_get_contents();

/*
 *  expertbutton Shortcode
 */

add_shortcode( 'expertbutton', 'expertbutton' );
function expertbutton( $atts ) {

        ob_start(); ?>

        <div style="overflow:hidden;font-size:9px;height:auto;width:auto;text-align:center;margin:auto;" id="expertbuttonbg"><a target="_blank" href="'.$sc.'">Text Button</a><div>

        <?php

        $sc = ob_get_contents();

        ob_end_clean();

        /* Return the content as usual */
        return $sc;

}
?>

现在应该可以了。

开发 Wordpress-Plugin：将 .js 加载到 head 和 HTML-Snippet 作为短代码时出现问题

Developing Wordpress-Plugin: Problems with loading .js into head and HTML-Snippet as a Shortcode

php

ajax

wordpress

jquery

shortcode