时间:2024-03-16
一个WordPress主题必须包含以下3个文件:
index.php:主页模板
style.css:样式表
screenshot.png:主题效果图,大小为1200×900像素
其中,style.css的头部需要添加一段类似如下的注释:
/* Theme Name: 背字根主题 Theme URI: https://www.tiezhushuo.com/307.html Author: 背字根 Author URI: https://www.tiezhushuo.com/ Description: 基于HTML5与CSS3设计,一款简洁的响应式主题 Version: 1.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Tags: two-columns */
Theme URI为主题发布页面地址,这里我填写了本文章的地址。
一个简单的两栏布局博客主题通常需要以下模板文件:
header.php:头部模板
footer.php:页脚模板
sidebar.php:侧边栏模板
index.php:主页模板
archive.php:归档页面模板
page.php:单页面模板
single.php:文章页面模板
search.php:搜索结果页模板
404.php:404页面模板
如果需要添加自定义函数或增加额外的功能,还需要用到functions.php
更多模板文件介绍请阅读:WordPress模板文件用法详细介绍
在开始制作模板前,你还需要先了解WordPress主循环
一个简单的头部模板header.php代码如下:
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1.0" /> <link rel="profile" href="http://gmpg.org/xfn/11" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header id="branding" role="banner"> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <nav id="primary-nav" role="navigation"> <h1>导航</h1> <ul> <?php wp_nav_menu( array( 'depth' => 1, 'container' => false, 'menu' => false, 'menu_class' => false, 'theme_location' => 'primary_nav', 'items_wrap' => '%3$s', ) ); ?> </ul> </nav> <div class="search-container"> <?php get_search_form(); ?> </div> </header> <div id="wrapper">
这里并没有直接在header.php中引入css和js,因为使用wp_enqueue_style和wp_enqueue_script加载CSS和JS更好。
至于title标签,可以在主题functions.php文件中使用add_theme_support函数来加载,相应的代码会在后面的functions.php模板中给出。
示例中用wp_nav_menu函数加载了名为primary_nav的自定义菜单,这个菜单是在functions.php中注册的,相应的代码会在后面的functions.php中给出。
由于网站主体内容都包裹在#wrapper里边,所以我把这个开始标签写在header.php中,避免在每个模板中重复书写。
为了示范搜索表单的加载方法,这里我在头部模板中用get_search_form()函数加载了搜索表单。
wp_head()是为插件准备的,一些插件需要用到这个钩子。当然,在这个示例主题中也需要用到这个钩子,functions.php中加载的title、css、js都在这个位置输出。
页脚模板比较简单,输出一些版权信息即可。
</div><!-- wrapper end --> <footer id="colophon" role="contentinfo"> Copyright © 2016 <?php $tyear = (int) current_time('Y'); if($tyear > 2016) echo ' - ' . $tyear; ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a> <?php if ( get_option( 'zh_cn_l10n_icp_num' ) ) echo ' <a class="icp" href="http://www.miibeian.gov.cn" rel="nofollow" target="_blank">' . get_option( 'zh_cn_l10n_icp_num' ) . '</a>'; ?> <?php wp_footer(); ?> </footer> </body> </html>
首先关闭header中的wrapper标签,然后是一段我自己写的输出版权日期的代码,current_time()函数用来获取当前时间,get_option( ‘zh_cn_l10n_icp_num’ )获取后台设置的备案号。
wp_footer()是为插件准备的,一些插件需要用到这个钩子。
考虑到首页、归档页面、搜索结果页输出文章列表的代码都是一样的,所以我把这段代码放到loop.php中,这个文件的名称是我随便起的。
<?php if( have_posts() ) : ?> <?php while( have_posts() ) : the_post(); ?> <article class="entry"> <h1><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title_attribute(); ?></a></h1> <footer class="post-meta"> <time datetime="<?php the_time( 'c' ); ?>" pubdate><?php the_time( 'Y-m-d' ); ?></time> <?php if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) : ?> <span class="comments-links">评论(<?php comments_popup_link( '0', '1', '%' ); ?>)</span> <?php endif; ?> </footer> <p class="excerpt"><?php echo mb_strimwidth(wp_strip_all_tags($post->post_content, true), 0, 200, '...' ); ?></p> </article> <?php endwhile; ?> <?php bzg_paging_nav(); ?> <?php wp_reset_query(); ?> <?php endif; ?>
这段代码在首页输出最新文章列表,在分类页输出当前分类最新文章列表,在标签页输出当前标签最新文章列表,在搜索结果页输出包含搜索关键词的结果列表,输出的数量由后台阅读设置中博客页面至多显示决定。
以上示例中,我用wp_strip_all_tags函数过滤了HTML标签,用mb_strimwidth函数截断内容,限制在200个字符。
注意:我用bzg_paging_nav()函数实现翻页功能,这个函数是自己写的,在本文章中并没有给出bzg_paging_nav()函数的代码,请前往:WordPress不用插件翻页导航代码
我们在functions.php中注册一个侧边栏,这样就可以在后台的小工具中将需要的模块拖到侧边栏。
下面是sidebar.php中的代码,注册侧边栏的代码在后面会给出
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?> <aside id="secondary" role="complementary"> <?php dynamic_sidebar( 'sidebar-1' ); ?> </aside> <?php endif; ?>
由于我把最新文章列表的代码写到了loop.php中,主页模板的代码就简洁多了。
<?php get_header(); ?> <div id="main" role="main"> <?php get_template_part( 'loop', '' ); ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
可以看出主页模板只是加载了头部模板、loop.php、侧边栏模板和页脚模板
由于我们只是要制作简单的博客主题,因此分类、标签、日期归档页面都使用一致的版式,共用archive.php模板
<?php get_header(); ?> <section id="main" role="main"> <header class="archive-title"> <?php the_archive_title( '<h1 class="title">', '</h1>' ); the_archive_description(); ?> </header> <?php get_template_part( 'loop', '' ); ?> </section> <?php get_sidebar(); ?> <?php get_footer(); ?>
同样的,归档页面模板加载了头部模板、loop.php、侧边栏模板和页脚模板,同时输出了分类/标签标题和描述。
搜索结果页的展现形式与归档页面基本相同,只是在没有找到搜索结果时需要返回错误提示。
<?php get_header(); ?> <section id="main" role="main"> <h1 class="title"><?php printf( '关键词“%s”的搜索结果', get_search_query() ); ?></h1> <?php if ( have_posts() ) : ?> <?php get_template_part( 'loop', '' ); ?> <?php else : ?> <div class="search-error content"> <p><?php printf('很遗憾,未找到与关键词“%s”相关的内容,可能是本站还没有这方面的内容或是您输入的关键词不够准确,您可以尝试使用新的关键词重新搜索:', esc_html($s, 1) ); ?></p> <?php get_search_form(); ?> </div> <?php endif; ?> </section> <?php get_sidebar(); ?> <?php get_footer(); ?>
在搜索结果页模板中我们仍然加载了loop.php,至此大家也看到了WordPress模板重用的好处。
单页面模板比较简单,只需要加载头部模板、侧边栏模板、页脚模板,以及输出内容就可以了。
<?php get_header(); ?> <div id="main" role="main"> <?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h1 class="title"><?php the_title(); ?></h1> <div class="page-content content"> <?php the_content(); ?> </div> </article> <?php comments_template(); ?> <?php endwhile; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
示例中the_content()函数是用来输出页面的内容,comments_template()函数用来加载评论模板。
与单页面模板比较,文章页模板稍复杂一些,这个复杂程度与你需要输出的内容成正比。
<?php get_header(); ?> <div id="main" role="main"> <?php while (have_posts()) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header> <h1><?php the_title_attribute(); ?></h1> <div class="post-meta"> <time datetime="<?php the_time( 'c' ); ?>" pubdate><?php the_time( 'Y-m-d' ); ?></time> <?php if ( get_option( 'users_can_register' ) ) : ?> <span class="author-links">作者:<?php the_author_posts_link(); ?></span> <?php endif; ?> <span class="cat-links">分类:<?php the_category( ' ', '' ); ?></span> <?php the_tags( '<span class="tag-links">标签:', ', ', '</span>' ); ?> <?php if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) : ?> <span class="comments-links">评论(<?php comments_popup_link( '0', '1', '%' ); ?>)</span> <?php endif; ?> </div> </header> <div class="post-content content"> <?php the_content(); ?> </div> </article> <nav id="post-navigation" role="navigation"> <h1>文章导航</h1> <div class="nav-links"> <?php previous_post_link('<span class="previous-article">上一篇:%link</span>', '%title', true); ?> <?php next_post_link('<span class="next-article">下一篇:%link</span>', '%title', true); ?> </div> </nav> <?php comments_template(); ?> <?php endwhile; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
除了输出文章内容,我们还输出了上一篇、下一篇文章链接,文章发表日期、所属分类、所属标签等元数据。
404页面模板非常简单,写一些提示性内容就可以了。
<?php get_header(); ?> <div id="main"> <h1>404 . Not Found</h1> <h2>您所访问的页面不在地球上...</h2> <p>没有发现您要找的页面,经专家仔细研究结果如下:</p> <p>1、资源不存在</p> <p>2、资源不存在</p> <p>3、资源不存在</p> <p><a class="primary-button" href="<?php bloginfo( 'url' ); ?>" rel="home">返回首页</a></p> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
当然,我们一如既往的加载了头部模板、侧边栏模板和页脚模板。
前面一些模板需要在functions.php中添加一些功能,这里一一列出:
<?php //Title标签 add_theme_support( 'title-tag' ); //加载style.css function bzg_scripts() { wp_enqueue_style( 'bzg-style', get_stylesheet_uri() ); } add_action( 'wp_enqueue_scripts', 'bzg_scripts' ); //自定义菜单 register_nav_menus( array( 'primary_nav' => '主导航', ) ); //注册侧边栏 function bzg_widgets_init() { register_sidebar( array( 'name' => '侧边栏', 'id' => 'sidebar-1', 'description' => '请将需要的模块拖放到这里', 'before_widget' => '<section id="%1$s" class="widget %2$s">', 'after_widget' => '</section>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); } add_action( 'widgets_init', 'bzg_widgets_init' ); ?>
至此,一个简单的博客主题就制作好了,剩下的就是用CSS来美化你的页面。
Copyright © 2019-2024 19.org.cn