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

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主题了。

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

新主题出现

2、引用样式表

我们激活这个主题,然后到前端查看站点,发现它没有加载样式:

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

启用主题

我们打开刚刚重命名的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> 

我们保存代码,去前端刷新页面,看看它现在长什么样子

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

动态获取标题

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

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

回到前端刷新页面会看到管理菜单出现了,我们现在到后台修改一下网站信息,让它显示我们想要的结果,

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

修改标题和描述

将页面名称都改成中文

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

中文页面名称

修改导航菜单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> 

现在到前端刷新页面,看到我们前面修改过的页面名称出现在导航菜单了

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

导航菜单

我想在我们的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 menuFooter menu两个显示位置,我们勾选Primary menu复选框

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

Theme Support

现在我们回到前端页面看看,多出一个首页

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

导航更新

4、后台增加页面

接下来我们再创建两个子页面,首先为关于页面创建一个叫团队的页面,

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

新建子页面

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

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

点赞