I have a previuos easy HTML page with script linked to js files, for an AI test. How to link or to import to a wordpress site I'm testing on my own pc
Question
Below the easy HTML code, taken from a tensorflow example. I have created on my own pc a wordpress site, just for test, and I would like to add the page or the contents of the page to the web site. Two ways: the first one, the preferred, try to integrate the HTML code and js file ( which mantain tensorflow commands, not related with themes) into a wordpress page. No problem for the HTML but I can not find the way to link the js file. I have tried modifying function.php, using wp_enqueue_script, but I don't understand where to store the js file according, and the path to specify. If it work in preview, it does'nt work when I public the page. Also some other methods with no success. The second way is linking the old html page, but where I should insert the html file and the js file?
Thanks for your help, I'm really stuck.
<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>
1 answers
solution1
0 2021-10-29 17:25:15
I guess the best approach would be to create a custom page template.
Are you using a custom theme or a theme from the wordpress theme repository? I'm asking as the latter will frequently be updated and override customized option like those in your functions.php. In this case you might create a child theme.
See this description: Create Child Themes
You can then create a custom page template by creating a new file like
"page-tmpl-tensor.php" in your theme/child theme folder.
Its content is actually pretty close to your html code but it needs some wordpress specific funtions/variables to work
<?php /* Template name: tensorflow */
$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 -->
You can now create a new page in the wordpress admin area and should see your template "tensorflow" listed in the page template dropdown.
You might also replace the body content with thes lines to retrieve the content dynamically:
<?php
setup_postdata($post->ID);
echo get_the_content();
?>
Now you could paste and edit your body html in the page's content field. In this case make sure you paste the html in html/text mode.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.