如何在Wordpress中创建一个简单的自定义短代码?

I created a folder in the /wp-content/plugins directory called customshortcode. The add_shortcode command should link the shortcode with the function.

In /wp-content/plugins/customshorcode/ I created 2 files: main.php and test.php

Contents of main php is:

<?php require_once('../../../wp-includes/shortcodes.php'); ?>

<?php function custom_shortcode_func() {
  include_once('test.php');
}

add_shortcode('customshortcode','custom_shortcode_func');

?>

And test.php simply displays a division block:

<style>.testdiv{border:1px solid black; width:300px; heigh:300px;}</style>

<div class="testdiv"></div>

I first run the /wp-content/plugins/customshorcode/main.php file to see no errors and simple white screen. I assumed the short-code should be saved.

But when I enter [customshortcode] in the page, I don't get the division displayed, instead the text [customshortcode] instead.

I think I somehow need to link the page type to the plugin or something like that. Could you help me out?

In /wp-content/plugins/customshorcode/main.php

<?php
/*
* Plugin Name: Custom Short Code
* Description: Create your WordPress shortcode.
* Version: 1.0
* Author: samuelj90@gmail.com 
*/

// Example 1 : WP Shortcode to display form on any page or post.
function custom_shortcode_func() {
?>
<style>.testdiv{border:1px solid black; width:300px; heigh:300px;}</style>

<div class="testdiv"></div>
<?php
}
add_shortcode('customshortcode','custom_shortcode_func');

?>

Then enable the plugin

Custom Short Code