投稿

WordPress主题制作基础教程

• • 运维日志 • 8 views

一个WordPress主题必须包含以下3个文件：

  • index.php：主页模板
  • style.css：样式表
  • screenshot.png：主题效果图，大小为1200×900像素

其中，style.css的头部需要添加一段类似如下的注释：

/*
Theme Name: 背字根主题
Theme URI: https://www.beizigen.com/post/wordpress-theme-development-basic-tutorial/
Author: 背字根
Author URI: https://www.beizigen.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示例

一个简单的头部模板header.php代码如下：


<html >

	<meta charset="" />
	
	
		


<body >

这里并没有直接在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都在这个位置输出。

页脚模板footer.php示例

页脚模板比较简单，输出一些版权信息即可。

首先关闭header中的wrapper标签，然后是一段我自己写的输出版权日期的代码，current_time()函数用来获取当前时间，get_option( ‘zh_cn_l10n_icp_num’ )获取后台设置的备案号。

wp_footer()是为插件准备的，一些插件需要用到这个钩子。

文章列表模板loop.php示例

考虑到首页、归档页面、搜索结果页输出文章列表的代码都是一样的，所以我把这段代码放到loop.php中，这个文件的名称是我随便起的。



	

		
<a href="" rel="bookmark">

		

			<time datetime="" pubdate>
			
				评论()
			
		

		
post_content, true), 0, 200, '...' ); ?>

这段代码在首页输出最新文章列表，在分类页输出当前分类最新文章列表，在标签页输出当前标签最新文章列表，在搜索结果页输出包含搜索关键词的结果列表，输出的数量由后台阅读设置中博客页面至多显示决定。

以上示例中，我用wp_strip_all_tags函数过滤了HTML标签，用mb_strimwidth函数截断内容，限制在200个字符。

注意：我用bzg_paging_nav()函数实现翻页功能，这个函数是自己写的，在本文章中并没有给出bzg_paging_nav()函数的代码，请前往：WordPress不用插件翻页导航代码

侧边栏模板sidebar.php示例

我们在functions.php中注册一个侧边栏，这样就可以在后台的小工具中将需要的模块拖到侧边栏。

下面是sidebar.php中的代码，注册侧边栏的代码在后面会给出

主页模板index.php示例

由于我把最新文章列表的代码写到了loop.php中，主页模板的代码就简洁多了。

可以看出主页模板只是加载了头部模板、loop.php、侧边栏模板和页脚模板

归档页面模板archive.php示例

由于我们只是要制作简单的博客主题，因此分类、标签、日期归档页面都使用一致的版式，共用archive.php模板


	

		

			<?php
				the_archive_title( '
', '
' );
				the_archive_description();
			?>

同样的，归档页面模板加载了头部模板、loop.php、侧边栏模板和页脚模板，同时输出了分类/标签标题和描述。

搜索结果页模板search.php示例

搜索结果页的展现形式与归档页面基本相同，只是在没有找到搜索结果时需要返回错误提示。

在搜索结果页模板中我们仍然加载了loop.php，至此大家也看到了WordPress模板重用的好处。

单页面模板page.php示例

单页面模板比较简单，只需要加载头部模板、侧边栏模板、页脚模板，以及输出内容就可以了。


	

	
		<article id="post-" >

示例中the_content()函数是用来输出页面的内容，comments_template()函数用来加载评论模板。

文章页模板single.php示例

与单页面模板比较，文章页模板稍复杂一些，这个复杂程度与你需要输出的内容成正比。


	

	
		<article id="post-" >
			

				

				

					<time datetime="" pubdate>
					
						作者：
					
					分类：
					<?php the_tags( '标签：', ', ', '' ); ?>
					
						评论()

除了输出文章内容，我们还输出了上一篇、下一篇文章链接，文章发表日期、所属分类、所属标签等元数据。

404页面模板404.php示例

404页面模板非常简单，写一些提示性内容就可以了。


	

		
404 . Not Found

		
您所访问的页面不在地球上...

		
没有发现您要找的页面，经专家仔细研究结果如下：

		
1、资源不存在

		
2、资源不存在

		
3、资源不存在

		
<a class="primary-button" href="" rel="home">返回首页

当然，我们一如既往的加载了头部模板、侧边栏模板和页脚模板。

函数文件functions.php

前面一些模板需要在functions.php中添加一些功能，这里一一列出：

 '主导航',
	)
);
//注册侧边栏
function bzg_widgets_init() {
	register_sidebar( array(
		'name'          => '侧边栏',
		'id'            => 'sidebar-1',
		'description'   => '请将需要的模块拖放到这里',
		'before_widget' => '
',
		'after_widget'  => '
',
		'before_title'  => '
',
		'after_title'   => '
',
	) );
}
add_action( 'widgets_init', 'bzg_widgets_init' );
?>

至此，一个简单的博客主题就制作好了，剩下的就是用CSS来美化你的页面。

原创文章，作者：，如若转载，请注明出处：https://ce.771633.xyz/1492.html

Like (0)
0 0
Previous 2025年3月8日
Next 2025年3月8日

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注