几年前,大多数网站都是用 HTML 编写的。虽然 HTML 网站仍然有用且功能齐全,但由于多种原因需要完全更新。其一,它们在智能手机和平板电脑上通常看起来不太好。随着硬件的改进,在这些设备上运行的代码也应该改进。
如今,很大一部分网站均由 WordPress 提供支持,这是一个开源且非常易于使用的平台,适合所有技能组的用户。几乎没有理由不将 HTML 转换为 WordPress。
Bootstrap 是一个用于开发响应式网站的前端网站框架。许多用户在平板电脑和智能手机上浏览,而较旧的 HTML 网站通常无法在这些设备上整齐地显示。在线有多种 Bootstrap HTML 模板。响应式设计元素包括可修改的列宽、堆栈元素(而不是浮动元素)以及根据屏幕尺寸调整元素大小以便正确查看。
将 HTML 模板转换为 WordPress 主题
要使用 Bootstrap 将 HTML 模板转换为 WordPress 主题,请安装 WordPress,下载并激活 Bootstrap。如果您在实时 WordPress 站点上进行测试,您还应该安装主题测试驱动插件。在wp-contentthemes下,为 Bootstrap 创建一个新文件夹。在该文件夹中,创建所有 WordPress 主题所需的以下文件:
- 索引.php
- 样式.css
- header.php
- 页脚.php
- 侧边栏.php
当您将 HTML 转换为 WordPress 时,首先将现有的 index.html 文件中的所有内容复制到上面的 div class =”main” 到 header.php 中。接下来,将 class="sidebar" 标记中的所有内容复制到 sidebar.php。最后,侧边栏标签下方的所有内容都会复制到 footer.php 中。现在您已经完成了index.html 文件。
添加到header.php 的另一个重要标签是wp_head() : <?php wp_head(); ?> 。如果缺少此标签,某些插件可能无法工作。还要向 footer.php 添加相应的wp_footer()调用。
在新的index.php文件中,添加对其他 PHP 文件的调用,将页眉调用放在顶部,侧边栏和页脚调用放在底部。
12345 <?php 获取头( ) ; ?> <?php 获取侧边栏( ) ; ?> <?php 获取页脚( ) ; ?>
接下来,找到 CSS 链接,并将这些调用替换为 WordPress 标签,以链接到网站上每个页面的 Bootstrap CSS。
1 < link href = "<?php bloginfo(" stylesheet_url ' ) ; ? ”>” rel = “样式表” >
使用以下内容修改style.css文件:
123 @导入url ( 'bootstrap/css/bootstrap.css' ) ; @导入url ( 'bootstrap/css/bootstrap-responsive.css' ) ;
其他一些持久函数调用是:
• wp_list_pages()
• get_sidebar()
• the_permalink()
• 标题()
• 时间()
• 评论_模板()
创建 WordPress 主题后,您可以更轻松地自定义和修改页面。您无需转到每个 HTML 页面并进行编辑。 WordPress 网站往往加载速度更快,因为浏览器可能已经下载了 Javascript,因此从缓存中加载。
要将内容导入新的 WordPress 站点,您可以使用HTML Import 2插件。该工具会将格式正确的静态 HTML 目录导入到 WordPress 页面中。
如果您不想使用 Bootstrap,您可以选择将所有格式化代码放在style.css中,因为 Bootstrap 是 CSS 框架。 Bootstrap 允许您对网站进行原型设计,并在激活新主题之前查看它的外观。将 HTML 网站转换为 WordPress 支持的网站还可以使各个级别的优化变得更加容易。这也意味着搜索引擎也可以轻松索引您的网站。
RSS