一、模板的文件组成

1.1.最重要的三个文件

1.1.1.style.css

里面首行要写好主题的相关信息!

/*
Theme Name: Twenty Fifteen
Theme URI: https://wordpress.org/themes/twentyfifteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, two-columns, left-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentyfifteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

1.1.2.index.php

这个文件是网站的索引入口文件。如果没有其他页面文件,就显示这个文件的内容

1.1.3.screenshot

安装主题时的封面图

二、主题默认页面模板配置

css文件夹:存放css文件

js文件夹: 存放js文件

images文件夹:存放图片文件

inc文件夹:一般为自定义函数文件

genericons文件夹:存放字体文件

template-parts文件夹:为了代码简洁,作者把一些代码(可能重复用到的)分开放到了此文件夹下

style.css 样式表文件

index.php 主页文件

header.php 网页头部文件

footer.php 网页底部文件

sidebar.php 网页侧边栏文件

single.php 日志单页文件

single-[post-type]日志不同文章类型单页文件

page.php 页面文件

page-[slug].php 别名页面文件

page-[id].php  id页面文件

archvie.php 分类和日期存档页文件

searchform.php 搜索表单文件

search.php 搜索页面文件

comments.php 留言区域文件(包括留言列表和留言框)

Readme.txt是模板阅读指南文件。

404.php 404错误页面文件

tag.php标签页文件

author.php作者页面文件

author-[author-nicname].php指定姓名作者页面文件

author-[author-id].php指定身份ID作者文件

category分类页文件

category-[slug].php别名分类页文件

category-[id].php ID分类页文件

rtl.css:关于字体的一些样式

screenshot.php:主题缩略图,在后台显示;

[custom-temlate].php:自定义静态页面;

tag.php标签页面

tag-[slug].php别名标签页面

tag-[id].php  ID标签页面

taxonomy.php  其他分类

taxonomy-[tax].php   例:taxonomy-music.php

taxonomy-[tax]-[term].php 例:taxonomy-musice-andy.php

[mime-type].php mime类型文件

attachment.php 附件文件页面

三、开发模板之前需要做什么准备工作

3.1.搭建好的wordpress网站

可以是本地的(推荐),也可以是上线的网站

3.2.代码编辑器

建议用sublime或vscode或webstorm,用来编辑代码

3.3.谷歌浏览器或火弧浏览器

用来显示wp网站的网页结果

3.4.常用的wp标签文档

.开发常用功能基本上就用这些标签,所以把它记录下来会更有效地开发文档

四、开发常用的wp标签文档

4.1.开发首页


1.调用头部文件
<?php get_header(); ?>
2.调用底部文件
<?php get_footer(); ?>
3.调用侧边栏文件
<?php get_sidebar(); ?>
}

4.2.头部文件header.php

4.2.1.制作头部文件header.php常用的代码

1.style.css文件/图片路径
<?php bloginfo( 'stylesheet_url' ); ?>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" >
2.模板在网站中存在的绝对路径
<?php bloginfo( 'template_directory' ); ?>
<script src="<?php bloginfo( 'template_directory' ); ?>/js/index.js"></script>
3.编码格式
<?php bloginfo( 'charset' ); ?>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
4.页面标题
<title>
<?php if ( is_home() ) {
bloginfo('name'); 
echo " - "; bloginfo('description');
} elseif ( is_category() ) {
single_cat_title(); 
echo " - "; bloginfo('name');
} elseif (is_single() || is_page() ) {
single_post_title();
} elseif (is_search() ) {
echo "搜索结果"; 
echo " - "; bloginfo('name');
} elseif (is_404() ) {
echo '页面未找到!';
} else {
wp_title('',true);
} ?>
</title>
5.页面关键词或描述
<?php
if (is_home() || is_page()) {
$description = "";//填写首页描述信息
$keywords = "";//填写首页关键词信息,不填留空
}
elseif (is_single()) {
$description1 = get_post_meta($post->ID, "description", true);
$description2 = mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 200, "…");

// 填写自定义字段description时显示自定义字段的内容,否则使用文章内容前200字作为描述
$description = $description1 ? $description1 : $description2;

// 填写自定义字段keywords时显示自定义字段的内容,否则使用文章tags作为关键词
$keywords = get_post_meta($post->ID, "keywords", true);
if($keywords == '') {
$tags = wp_get_post_tags($post->ID);
foreach ($tags as $tag ) {
$keywords = $keywords . $tag->name . ", ";
}
$keywords = rtrim($keywords, ', ');
}
}
elseif (is_category()) {
$description = category_description();
$keywords = single_cat_title('', false);
}
elseif (is_tag()){
$description = tag_description();
$keywords = single_tag_title('', false);
}
$description = trim(strip_tags($description));
$keywords = trim(strip_tags($keywords));
?>
<meta name="description" content="<?php echo $description; ?>" />
<meta name="keywords" content="<?php echo $keywords; ?>" />
6.插件钩子(执行挂载到上面的所有动作函数)
<?php wp_head(); ?>
7.导航调用代码
wp_nav_menu( array( 'container' => '','menu_class' => '',) );

4.2.2.设置导航菜单的方法链接

wp_nav_menu()

4.2.3.页面判断函数

1.判断是否为首页,并且显示的不是一个静态页面
is_home() 
2.判断是否为首页,包括首页显示的是一个静态页面
is_front_page()
3.是否为搜索页
is_search()
4.是否为404页面
is_404()
5.是否为分类目录页面
is_category()
6.是否为作者归档页面
is_author()
7.是否为按天归档页面
is_day()
8.是否为按月归档页面
is_month()
9.是否为按年归档页面
is_year()
10.是否为标签归档页面
is_tag()
11.是否为文章页面
is_single()
12.是否为页面单页
is_page()
13.是否按日期归档页面,相当于包括is_day()、is_month()、is_year()
is_date()
14.是否为归档页面,相当于包括is_category()、is_author()、is_month()、is_day()、is_year()、is_tag()
is_archive()
15.相当于is_single()||is_page()||is_attachment()
is_singular()

4.2.3.开发header.php需要在主题功能文件functions.php实现的内容

1.去除页面顶部留白
add_filter( 'show_admin_bar', '__return_false' );
2.制作导航菜单的代码:自定义菜单
register_nav_menus(
   array(
      'header-menu' => __( '顶部菜单' ),
      'footer-menu' => __( '底部菜单' ),
   )
);

未完待续

博主联系方式:

  • 微信:34419369
  • QQ: 34419369
  • 公众号:前方录
  • 有什么不懂的地方欢迎联系我,帮到你是我会很开心

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注