时间戳

首页 > 解决方案 > 我有一个 previuos 简单的 HTML 页面，其中包含链接到 js 文件的脚本，用于 AI 测试。如何链接或导入到我在自己的电脑上测试的 wordpress 网站

javascript - 我有一个 previuos 简单的 HTML 页面，其中包含链接到 js 文件的脚本，用于 AI 测试。如何链接或导入到我在自己的电脑上测试的 wordpress 网站

问题描述

下面是简单的 HTML 代码，取自 tensorflow 示例。我在自己的电脑上创建了一个 wordpress 网站，仅供测试，我想将页面或页面内容添加到网站。两种方式：第一种，首选，尝试将HTML代码和js文件（其中包含tensorflow命令，与主题无关）集成到wordpress页面中。HTML没问题，但我找不到链接js文件的方法。我试过修改function.php，使用wp_enqueue_script，但我不明白js文件的存储位置，以及指定的路径。如果它在预览中工作，那么当我公开页面时它就不起作用。还有其他一些没有成功的方法。第二种方法是链接旧的html页面，但是我应该在哪里插入html文件和js文件？

谢谢你的帮助，我真的卡住了。

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"> </script>
<script src="webcam.js"></script>
<script src="rps-dataset.js"></script>
</head>
<body>
    <div>
        <div>
            <video autoplay playsinline muted id="wc" width="224" height="224"></video>
        </div>
    </div>
    <button type="button" id="0" onclick="handleButton(this)" >Rock</button>
    <button type="button" id="1" onclick="handleButton(this)" >Paper</button>
    <button type="button" id="2" onclick="handleButton(this)" >Scissors</button>
    <div id="rocksamples">Rock Samples:</div>
    <div id="papersamples">Paper Samples:</div>
    <div id="scissorssamples">Scissors Samples:</div>
    <button type="button" id="train" onclick="doTraining()" >Train Network</button>
    <div id="dummy">Once training is complete, click 'Start Predicting' to see predictions, and 'Stop Predicting' to end</div>
    <button type="button" id="startPredicting" onclick="startPredicting()" >Start Predicting</button>
    <button type="button" id="stopPredicting" onclick="stopPredicting()" >Stop Predicting</button>
    <div id="prediction"></div>
</body>

<script src="index.js"></script>
</html>

标签： javascripthtmlwordpressimportinclude

解决方案

我想最好的方法是创建一个自定义页面模板。

您使用的是自定义主题还是 wordpress 主题存储库中的主题？我问的是后者会经常更新并覆盖自定义选项，如您的functions.php中的那些。在这种情况下，您可能会创建一个子主题。

请参阅此描述：创建子主题

然后，您可以通过在主题/子主题文件夹中创建一个新文件（如
“page-tmpl-tensor.php”）来创建自定义页面模板。

它的内容实际上非常接近您的 html 代码，但它需要一些 wordpress 特定的功能/变量才能工作

<?php 
/* 
   Template name: tensorflow 
   Template Post Type: post, page
*/ 
$theme_url = get_template_directory_uri();
?> 
<html>
<head>
<link rel="stylesheet" href="<?php echo $theme_url; ?>/tensor.css">
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"> </script>
<script src="<?php echo $theme_url; ?>/webcam.js"></script>
<script src="<?php echo $theme_url; ?>/rps-dataset.js"></script>
</head>
<body>
    <div>
        <div>
            <video autoplay playsinline muted id="wc" width="224" height="224"></video>
        </div>
    </div>
    <button type="button" id="0" onclick="handleButton(this)" >Rock</button>
    <button type="button" id="1" onclick="handleButton(this)" >Paper</button>
    <button type="button" id="2" onclick="handleButton(this)" >Scissors</button>
    <div id="rocksamples">Rock Samples:</div>
    <div id="papersamples">Paper Samples:</div>
    <div id="scissorssamples">Scissors Samples:</div>
    <button type="button" id="train" onclick="doTraining()" >Train Network</button>
    <div id="dummy">Once training is complete, click 'Start Predicting' to see predictions, and 'Stop Predicting' to end</div>
    <button type="button" id="startPredicting" onclick="startPredicting()" >Start Predicting</button>
    <button type="button" id="stopPredicting" onclick="stopPredicting()" >Stop Predicting</button>
    <div id="prediction"></div>
</body>

<?php wp_footer(); ?>
<script src="<?php echo $theme_url; ?>/index.js"></script>
</html>
<!-- tensorflow -->

您现在可以在 wordpress 管理区域中创建一个新页面，并且应该会在页面模板下拉列表中看到您的模板“tensorflow”。

您还可以用这些行替换正文内容以动态检索内容：

    <?php 
    setup_postdata($post->ID);  
    echo get_the_content(); 
    ?>

现在您可以在页面的内容字段中粘贴和编辑您的正文 html。在这种情况下，请确保以 html/text 模式粘贴 html。

推荐阅读