1、修改修改style.css
现在我们将HTML模板转换为WordPress主题。 我刚刚安装了WordPress，只有默认的几款主题。 我们将转到WordPress文件夹，wp-content，然后在themes文件夹中，找到我们新建的advanced-wptheme文件夹。然后打开其中的style.css文件，在顶部添加以下代码：
/*
Theme Name: Advanced WP
Theme URI: 这里填主题介绍的网址，没有就填你的博客网址吧
Description: 一个高级的WordPress主题
Version: 1.0
Author: 埼玉
Author URI: 你的个人网址
Tags: theme
*/
然后将index.html文件后缀改成.php，再在文件夹内添加一张预览图screenshot.png，最后启动wamp服务器登录到WordPress后台，就可以在外观->主题中看到我们的Advanced WP主题了。
新主题出现
2、引用样式表
我们激活这个主题，然后到前端查看站点，发现它没有加载样式：
启用主题
我们打开刚刚重命名的index.php文件，用以下PHP标签替换样式表的引用链接，
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />
保存代码刷新前端页面，页面就恢复正常了，css样式被加载了。
3、修改index.php文件
现在我们看到的页面都是index.php文件中的静态内容，并不是由WordPress提供的动态态内容。接下来我们来做一些小改动。
我们从index.php文件的顶部开始，向下逐行修改代码：
修改头文件
- 进入html标签，我们将放入language_attributes（）函数
- 使用php bloginfo更新title标签，并插入name参数
- 添加元字符集来放置字符集meta标签，使用bloginfo（）函数并传入charset
- 使用名为viewport的meta标签添加视口函数，让主题适应响应式。
- 输入wp_head（）函数
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />
<?php wp_head(); ?>
</head>
修改标题栏
现在在body标签中，我们需要body_class（）函数。
对于logo或标题，我们将删除静态文本并添加带有name参数的php bloginfo。 接下来，我们使用bloginfo添加标题以使其动态化，然后我们还可以传入'description'。
这个搜索表单过于简单。 我们需要在form标签并添加一些内容。 我们将使用method =“get”更新它，然后使用action，这是它提交的地方，为此，我们将使用esc_url（）函数输入php。 然后我们将传入home _url然后/。 然后，在输入中，我们将添加一个name属性，并将其设置为s。代码如下：
<body <?php body_class(); ?>>
<header>
<div class="container">
<h1>
<a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?> </a>
<small><?php bloginfo('description'); ?></small>
</h1>
<div class="h_right">
<form method="get" action="<?php esc_url(home_url('/')); ?>">
<input type="text" name="s" placeholder="Search...">
</form>
</div>
</div>
</header>
我们保存代码，去前端刷新页面，看看它现在长什么样子
动态获取标题
我们发现标题和介绍变成我们上一章节在后台设置的Simple主题制作，这是因为PHP函数动态获取了后台的数据，另外上方多了一行空白区域，原因是我们还没有wp_footer（）函数，这是管理菜单的位置。 我们接下来会添加它
我们在footer的结束标签下方添加wp_footer函数
</footer>
<?php wp_footer(); ?>
</body>
</html>
回到前端刷新页面会看到管理菜单出现了，我们现在到后台修改一下网站信息，让它显示我们想要的结果，
修改标题和描述
将页面名称都改成中文
中文页面名称
修改导航菜单nav
接下来我们修改导航部分的代码，删除整个ul标签和其内部所有li标签：
- 首先创建一个名为args的变量，然后将一个数组array赋值给args变量，数组只有一个参数，代表菜单的位置
- 将变量args作为参数传递给 wp_nav_menu（）函数
代码如下：
<nav class="nav main-nav">
<div class="container">
<?php $args = array('theme_location' => 'primary');?>
<?php wp_nav_menu($args); ?>
</div>
</nav>
现在到前端刷新页面，看到我们前面修改过的页面名称出现在导航菜单了
导航菜单
我想在我们的functions文件中指定主题中的不同菜单位置，我们有两个菜单。 我们创建一个functions.php文件，并为Theme Support设置一个函数。代码如下：
<?php
// Theme Support
function adv_theme_support(){
// Nav Menus
register_nav_menus(array(
'primary' => __('Primary Menu'),
'footer' => __('Footer Menu')
));
}
add_action('after_setup_theme', 'adv_theme_support');
保存代码后，我们回到站点后台刷新页面，看到外观项下面多了一个菜单子选项，右侧也出现了Primary menu和Footer menu两个显示位置，我们勾选Primary menu复选框
Theme Support
现在我们回到前端页面看看，多出一个首页
导航更新
4、后台增加页面
接下来我们再创建两个子页面，首先为关于页面创建一个叫团队的页面，
新建子页面
之后按照上面同样的操作，为关于页创建另一个子页面FAQ。我们先不把这两个页面添加到导航菜单，稍后几节课中我们会学习如何使用子菜单。
我们现在有了导航栏，标题，搜索框和我们所有的样式。 在下一节中，我们将开始创建我们的主循环来查看博客文章。
网友评论