一、模板的文件组成
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.设置导航菜单的方法链接
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
- 公众号:前方录
- 有什么不懂的地方欢迎联系我,帮到你是我会很开心