Question

我遇到这样的问题：

my_function {
    wp_register_style('ln_table', plugins_url('css/ln_table.css',__FILE__ ));
    wp_enqueue_style('ln_table');

    $arr = array('This', 'is', 'a', 'big', 'array', '...');

    // My table is big and complex, this only a exemple
    return "
        <table class = 'my-css'>
            <tr>
                <td class = 'style1'>$arr[0]</td>
                <td class = 'style2'>$arr[1]</td>
                <td class = 'style3'>$arr[2]</td>
            </tr>
            <tr>
                <td class = 'style4'>$arr[3]</td>
                <td class = 'style5'>$arr[4]</td>
                <td class = 'style6'>$arr[5]</td>
            </tr>
            </tr>
                ...
                ...
                ...
            </tr>
        </table>
    ";
}

当我调用我的函数时，表出现在css之前，然后我的css类被应用了。页面加载时看起来很糟糕。

我如何首先应用我的css类，然后是我的表？

这是我的表格图片：

非常感谢你，对不起我的英语！

Answer 1

尝试如下使用挂钩。希望它可以帮助。

add_action('init', 'my_function_add_styling');

function my_function_add_styling(){
 wp_register_style('ln_table', plugins_url('css/ln_table.css',__FILE__ ));
 wp_enqueue_style('ln_table');
}

function my_function {
     ob_start();

    $arr = array('This', 'is', 'a', 'big', 'array', '...');

    // My table is big and complex, this only a exemple
   echo "
   <table class = 'my-css'>
   <tr>
     <td class = 'style1'>$arr[0]</td>
     <td class = 'style2'>$arr[1]</td>
     <td class = 'style3'>$arr[2]</td>
  </tr>
  <tr>
    <td class = 'style4'>$arr[3]</td>
    <td class = 'style5'>$arr[4]</td>
    <td class = 'style6'>$arr[5]</td>
 </tr>
</table>
";
  return ob_get_clean();
}

Answer 2

我们已经尝试为您所需的内容构建插件。插件将排队所需的样式表并添加将生成表格的短代码。

/*
Plugin Name: Ln Table
Plugin URI: http://example.com
Description: This will create shortcode that will produce the table with required stylesheet.
Author: Mervan Agency
Version: 1.0
Author URI: http://mervanagency.io
*/

Class LnTable{

    public function __construct(){
        //Enqueuing Stylesheet
        add_action( 'wp_enqueue_scripts', array($this, 'load_stylesheet' ) );

        //Adding Shortcode
        add_shortcode( 'ln-table', array($this, 'table_shortcode') );
    }

    //Callback to enqueue stylesheet
    public function load_stylesheet(){
        wp_register_style('ln_table', plugins_url('css/ln_table.css',__FILE__ ));
        wp_enqueue_style('ln_table');
    }

    //Callback to Add Shortcode
    public function table_shortcode(){
        $arr = array('This', 'is', 'a', 'big', 'array', '...');

        // My table is big and complex, this only a exemple
        ob_start();

        echo "
        <table class = 'my-css'>
            <tr>
                <td class = 'style1'>$arr[0]</td>
                <td class = 'style2'>$arr[1]</td>
                <td class = 'style3'>$arr[2]</td>
            </tr>
            <tr>
                <td class = 'style4'>$arr[3]</td>
                <td class = 'style5'>$arr[4]</td>
                <td class = 'style6'>$arr[5]</td>
            </tr>
        </table>";

        return ob_get_clean();
    }
}

//Initialize Plugin
new LnTable();

在wp-content/plugins/中创建一个文件夹，如下所示

ln_table (folder)
---- ln_table.php (Put the above plugin code in this file)
---- css (folder)
--------ln_table.css

在此之后激活插件并使用短代码[ln-table]，无论您想在哪里显示该表。

希望这能帮到你！

在我的wordpress插件之前加载css

2 个答案: