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="" 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  language_attributes(); ?>>
<head>
    <meta charset="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title> bloginfo('name'); ?></title> 
    <link rel="stylesheet" href="" type="text/css" media="screen, projection" />
     wp_head(); ?> 
</head>

修改标题栏

现在在body标签中,我们需要body_class()函数。
对于logo或标题,我们将删除静态文本并添加带有name参数的php bloginfo。 接下来,我们使用bloginfo添加标题以使其动态化,然后我们还可以传入’description’。
这个搜索表单过于简单。 我们需要在form标签并添加一些内容。 我们将使用method =“get”更新它,然后使用action,这是它提交的地方,为此,我们将使用esc_url()函数输入php。 然后我们将传入home _url然后/。 然后,在输入中,我们将添加一个name属性,并将其设置为s。代码如下:

<body  body_class(); ?>>
    <header>
        <div class="container">
            <h1>
                <a href=""> bloginfo('name'); ?> </a>
                <small> bloginfo('description'); ?></small>
            </h1>
            <div class="h_right">
                <form method="get" action=""> 
                    <input type="text" name="s" placeholder="Search...">
                </form>
            </div>
        </div>
    </header>

我们保存代码,去前端刷新页面,看看它现在长什么样子
动态获取标题
我们发现标题和介绍变成我们上一章节在后台设置的Simple主题制作,这是因为PHP函数动态获取了后台的数据,另外上方多了一行空白区域,原因是我们还没有wp_footer()函数,这是管理菜单的位置。 我们接下来会添加它
我们在footer的结束标签下方添加wp_footer函数

	</footer>
     wp_footer(); ?> 
</body>
</html>

回到前端刷新页面会看到管理菜单出现了,我们现在到后台修改一下网站信息,让它显示我们想要的结果,
修改标题和描述
将页面名称都改成中文
中文页面名称

修改导航菜单nav

接下来我们修改导航部分的代码,删除整个ul标签和其内部所有li标签:

  • 首先创建一个名为args的变量,然后将一个数组array赋值给args变量,数组只有一个参数,代表菜单的位置
  • 变量args作为参数传递给 wp_nav_menu()函数

代码如下:

<nav class="nav main-nav">
	<div class="container">
         $args = array('theme_location' => 'primary');?>
         wp_nav_menu($args); ?> 
    </div>
</nav>

现在到前端刷新页面,看到我们前面修改过的页面名称出现在导航菜单了
导航菜单
我想在我们的functions文件中指定主题中的不同菜单位置,我们有两个菜单。 我们创建一个functions.php文件,并为Theme Support设置一个函数。代码如下:


	// 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 menuFooter menu两个显示位置,我们勾选Primary menu复选框
Theme Support
现在我们回到前端页面看看,多出一个首页
导航更新

4、后台增加页面

接下来我们再创建两个子页面,首先为关于页面创建一个叫团队的页面,
新建子页面
之后按照上面同样的操作,为关于页创建另一个子页面FAQ。我们先不把这两个页面添加到导航菜单,稍后几节课中我们会学习如何使用子菜单。

我们现在有了导航栏,标题,搜索框和我们所有的样式。 在下一节中,我们将开始创建我们的主循环来查看博客文章。

你可能感兴趣的:(WordPress主题进阶)