我还将这个脚本标记显示在我的短代码输出中，与短代码返回的html一起显示。我怎么能在我的短代码输出中不显示这个脚本标记。

从不使用echo 短代码中的语句。短代码应该只返回要在前端显示的内容。根据WordPress Codex :

请注意，由shortcode调用的函数不应产生任何类型的输出。短代码函数应返回用于替换短代码的文本。直接生成输出将导致意外的结果。这类似于过滤器函数的行为方式，因为它们不应该在调用中产生预期的副作用，因为您无法控制从何时何地调用它们。

因此，请将代码修改为：

add_shortcode(\'foo\', \'add_player\');

function add_player($atts){

   $css = ".a{color:red;}";

    $o = \'<script>
        var css = "\'.$css\'.";
        var div = document.createElement("div");
        div.innerHTML = "<style>" + css + "</style>";
        document.getElementsByTagName("head")[0].appendChild(div.childNodes[0]);
    </script>\';

   return $o."<div class=\'a\'></div>";

}

add_shortcode(\'foo\', \'add_player\');
function add_player($atts){

   $css = ".a{color:red;}";
   ob_start();
   ?>
    <script>
        var css = "<?php echo $css; ?>";
        var div = document.createElement(\'div\');
        div.innerHTML = "<style>" + css + \'</style>\';
        document.getElementsByTagName(\'head\')[0].appendChild(div.childNodes[0]);
    </script>
   <?php

   $o = ob_get_clean();
   return $o. "<div class=\'a\'></div>";

}