WordPress 页面，如何上传动态 HTML 页面答案

【问题标题】：WordPress Pages, How to Upload Dynamic HTML PagesWordPress 页面，如何上传动态 HTML 页面
【发布时间】：2013-05-14 23:40:38
【问题描述】：

好的，所以我刚刚开始编程，到目前为止还有一个多月。我从 Javascript 开始。目前，我的目标是让一个小型 Web 应用程序在线（而不是像我现在那样只用浏览器打开本地文件）。我有自己的域名、托管服务，并使用 Wordpress 写博客。

我在 Wordpress 上阅读了 codex.wordpress.org/Pages，这似乎表明我可以在我的 Wordpress 上包含其他网页。不幸的是，无论是其他文章还是其他文章，都没有让我更接近我的目标。

所以这里有一些关于我和我的工作的具体背景：

Here 是我的 Web 应用程序的 git。这是一个动态测验。
Dreamhost 是我的网络托管服务，也是我购买域名的地方。
我的 wordpress 网站是 www.briandavishall.com

我对下一步应该做什么感到困惑，我真的不知道从哪里开始。我希望能得到一些关于我应该做什么、为实现目标需要学习什么以及任何资源建议（如果存在）的指导。

编辑：这是我第一次尝试失败时所做的。

1.在header.php文件的<head>处添加如下代码。

<?php wp_enqueue_script( "DynamicQuizJS" , plugins_url( ~/Documents/Coding/DynamicQuiz/DynamicQuizJS.js);); ?>

2.在我编写 HTML 脚本的页面的<head> 中链接/写了这个。如您所见here，没有任何反应，没有动态测验：

<script type="text/javascript" src="DynamicQuizJS.js"></script>

3.我仍然不确定如何处理 CSS 文件。我希望它是一个单独的文件，我将 html 脚本链接到该文件，而不是修补我希望博客的其余部分遵循的现有 CSS。我还没有花足够的时间弄清楚这一点，现在正在这样做。即将更新

更新 2

令人尴尬的是，我仍然无法实现我的目标。我听从了戴夫的建议。我将两行代码添加到我正在使用的主题（2012 主题）中，并带有指向我计算机上正确本地地址的链接。我还在我的 html 代码中使用了相同的链接，这些链接是通过文本编辑器（而不是可视化编辑器）添加到 wordpress 页面的。更多详细信息请参见下面的 cmetsl

【问题讨论】：

标签： javascript wordpress

【解决方案1】：

不是 100% 确定您要完成什么，但如果我理解正确，您想将您的自定义应用添加到您的 wordpress 博客中，对吗？

嗯，它有 3 个部分。

创建标记 - HTML。只需在 Wordpress 中添加一个新页面/帖子并将您的 HTML 标记添加到编辑器中：确保切换到“文本”，而不是默认的“视觉”
导入您的 CSS - 这就像使用 wordpress 中的样式编辑器一样简单： Appearance>Editor>Style.css 或者你可以把你的 css 放到根目录，也就是主题文件夹，然后 style.css
Javascript：添加 Javascript 也同样简单。您可以将 JS 文件的标签包含到主题的 header.php 文件中。如果您对此有疑问，请阅读以下帖子： http://codex.wordpress.org/Using_Javascript

更新：

我认为你把这件事弄得太复杂了。

HTML：

您的 html 被插入到 Wordpress 文本编辑器中（在 wordpress 中，在您希望显示测验的博客页面/帖子下） - 使选项卡位于“文本”而不是“视觉”上。

CSS 和 JS：

您可以在 header.php 文件中链接 CSS 和 JS 文件，而不是将 CSS 添加到 Style.css 文件中

这里是第二十二个主题的 header.php 文件：你可以为你的主题 header.php 文件做 sam.. 在结束的 head 标签上方查看我的代码

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>

/*The Only part I added:Below*/
/************Just add your files here below******************/
<link href="yourstylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="yourJSfile.js"></script>

</head>

只要确保您的文件路径正确...

【讨论】：

这就是我要找的东西，但我必须承认我仍然遇到了麻烦。目前只显示html，JS脚本和CSS没有链接。
你把你的 JS/CSS 放在哪里了？你的 CSS 应该放在 style.css 文件中。它可以在主题文件夹中找到（您使用的是什么主题？），或者您可以在外观>编辑器下找到它。将您的 CSS 代码放在工作表的最底部。你的 JS 可以放在主题文件夹的 header.php 文件中。它将位于主题文件夹的根目录中。我看到您没有使用 jQuery，因此无需将 JS 包装在 jQuery 标记中...只需将脚本标记放入 header.php 的内，更好的是，页脚。 php 的主题。
戴夫，你乐于助人！我在上面的编辑中留下了我所做的更新。我想我最大的问题是，我使用什么语法将 CSS/JS 放入 style.css 文件/header.php 文件中？以及如何在我的 html 脚本代码中调用它。
尴尬的是，我仍然无法实现我的目标。我遵循了建议的建议。我将两行代码添加到我正在使用的主题（2012 主题）中，并带有指向我计算机上正确本地地址的链接。我还在我的 html 代码中使用了相同的链接，这些链接是通过文本编辑器（而不是可视化编辑器）添加到 wordpress 页面的。创建的页面是 here 。也许你可以看看我写的确切代码。在这个git repository
问题已解决。在链接之前需要在服务器上托管 js 文件。我正在链接到本地地址。