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

2、引用样式表

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

我们打开刚刚重命名的index.php文件,用以下PHP标签替换样式表的引用链接,

<link rel="stylesheet" href="<?php%20bloginfo('stylesheet_url');%20echo%20'?'%20.%20filemtime(%20get_stylesheet_directory()%20.%20'/style.css');%20?>" 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%20bloginfo('stylesheet_url');%20echo%20'?'%20.%20filemtime(%20get_stylesheet_directory()%20.%20'/style.css');%20?>" 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%20echo%20home_url('/');%20?>"><?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> 

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

将页面名称都改成中文

接下来我们修改导航部分的代码,删除整个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 menuFooter menu两个显示位置,我们勾选Primary menu复选框

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

4、后台增加页面

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

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

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

此文由“快兔兔AI采集器”自动生成,目的为演示采集器效果,若侵权请及时联系删除。

原文链接:https://www.jianshu.com/p/4b1120b082d0

更多内容