WordPress主题制作进阶#3创建一个WordPress主题

创建WordPress主题

1、修改修改style.css
2、引用样式表
3、修改index.php文件

修改头文件
修改标题栏
修改导航菜单nav

4、后台增加页面

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="index.html"><?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');