1） 我应该在哪个位置添加codepen html代码？
如果您使用child theme, 例如，您可以复制父主题header.php 文件到您的子主题目录，并在之后向该文件添加所需的html<head>.
如果你正在开发你自己的主题，那么把标记放在任何你想放的地方。
或者您也可以添加带有动作挂钩的标记（例如。wp_footer 或主题特定的动作挂钩（如果可用）。这可以添加到您的主题functions.php 文件或acustom plugin file. 沿着这些路线，
add_action( \'wp_footer\', \'prefix_my_preloader\' ); // or other suitable template hook
function prefix_my_preloader() {
?>
<div id="cooking">
<!-- rest of the markup -->
</div>
<?php
}
2）我应该在哪个位置添加给定的CSS？
样式可以添加到（子）主题的styles.css 文件、Customizer的附加css部分（如果可用，但可能不是最佳选项），或位于（子）主题或自定义插件目录中的自定义css文件。记住include the styles 如果您使用的是自定义css文件。
3） 我应该在哪个位置添加所需的JS以使其像这里一样工作
脚本可以添加到（子）主题的scripts.js 文件或位于（子）主题或自定义插件目录中的自定义js文件。记住include the scripts 如果您使用的是自定义js文件。
P.S您还可以使用操作挂钩添加带有自定义函数的样式和脚本，如接受的答案中所述Add CSS animation as Preloader to WordPress. 然后将这些函数添加到（子）主题functions.php 或自定义插件文件。
