[教程]月宅教你写自己的WordPress主题-第一章:内容-月宅酱的博客

前言

以下教程为原创教程，写法均为个人习惯而言，代码参考官方文档，当你阅读完月宅长篇章节后，你将能写出属于的一套WordPress主题。该系列教程并不会教授你PHP的含义，与其他函数的介绍，此文为实现一个主题而写。

首先来到WordPress的主题文件夹目录(路径：wp-content\themes)；

然后在themes目录下新建一个文件夹，名字随便叫什么都可以，月宅起名newpy；

图片[1]-[教程]月宅教你写自己的WordPress主题-第一章:内容-月宅酱的博客

接着进去新建这些空文件：style.css、header.php、index.php、footer.php。然后我们先打开style.css。

图片[2]-[教程]月宅教你写自己的WordPress主题-第一章:内容-月宅酱的博客

在style.css写入下面的内容后，保存，然后到后台主题下你就可以看见名字啦；

/*
theme name:这是主题名字
theme url:主题主页url地址
descriptios ：这是一段关于主题的描述
author:作者的名字
author:作者的博客主页
version:1.0 主题的版本

*/

这就是上面这段注释css的主要功能啦，你会发现别人的主题都有缩略图，那么如何有缩略图？

图片[3]-[教程]月宅教你写自己的WordPress主题-第一章:内容-月宅酱的博客

参考官方的图片尺寸，将自己的图片复制到当前根目录，并且重命名为screenshot.png，然后刷新，封面图出现。

图片[4]-[教程]月宅教你写自己的WordPress主题-第一章:内容-月宅酱的博客

开始内容

这个文件也就是头部，并且影响到你的seo，跟着月宅写，不吃亏。打开header.php复制下面的内容。因为并不写主题设置，keywords选项就需要自己去手动填入了。

解释：

<?php bloginfo(“name”) ?>用来输出博客标题；
<?php bloginfo(‘url’);?>用来输出博客的描述
<?php bloginfo(‘stylesheet_url’);?>用于输出当前路径下的css文件路径

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title><?php bloginfo("name") ?></title>
	<meta name="description" content="<?php bloginfo('url');?>"
	<meta name="keywords" content="关键词1,关键词2"/>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url')?>">

</head>

打开index.php输入↓ footer.php输入</body></html>

<?php include("header.php"); ?>
<body>
<?php include("footer.php"); ?>

保存后刷新页面，目前页面还是一片空白，继续写。

图片[5]-[教程]月宅教你写自己的WordPress主题-第一章:内容-月宅酱的博客

输出内容

先去随便写几篇文章。然后继续下面的工作，打开index.php开始写内容，首先月宅要输出我的博客名字，并且赋予大标题。

<h1><?php bloginfo('name'); ?></h1>

此时已经输出了标题、标题到内容这些内容。然后接下来输出文章标题与内容。

图片[6]-[教程]月宅教你写自己的WordPress主题-第一章:内容-月宅酱的博客

但在写之前，需要把刚刚的标题加上一个div并且命名，删除刚刚的h1标签，待会到css设置。

图片[7]-[教程]月宅教你写自己的WordPress主题-第一章:内容-月宅酱的博客

接下来是输出我们的文章，首先写入官方文档的主循环，并加入 <a href=”<?php the_permalink(); ?>”> <?php the_title(); ?></a>

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
	 <a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a>
<?php endwhile; ?>

<?php endif; ?>

再次刷新页面查看当前内容，现在博客标题与文章内容已经输出，并且带上了a标签，此时点蓝色链接跳转是没有内容的。（补一点，本地屁眼也要添加↓用来进行点文章后还能点回去首页

<a href="<?php bloginfo('url'); ?>">

图片[8]-[教程]月宅教你写自己的WordPress主题-第一章:内容-月宅酱的博客

此时的index.php内容为：

图片[9]-[教程]月宅教你写自己的WordPress主题-第一章:内容-月宅酱的博客

接下来输出文章内容

在endwhile的上面一行输入，用来输出文章的内容

<?php the_content(); ?>

图片[10]-[教程]月宅教你写自己的WordPress主题-第一章:内容-月宅酱的博客

结束

以上内容就是本篇文章的全部教程啦，第一章内容篇到此结束。

文章版权归作者所有，未经允许请勿转载。

THE END

网络干货
# WordPress教程

评论共9条

欢迎您留下宝贵的见解！

提交

只看作者

- waylee.net0
  https://www.brosub.ml yesyesxx 为啥我的评论域名变成了这个，名字邮箱也变了。我重新再填写
  7年前回复
- yesyesxx0
  哇。看起来不错。就喜欢这种入门级的文章。希望继续更新下去。我先本地搭建跟着你试试。成功了就转了 :害羞的纱雾: :害羞的纱雾:
  7年前回复
- - 月宅作者0
    能成功的，毕竟是我做一步，写一步的。
    7年前@yesyesxx回复
- 狂放0
  萌新的我什么都不会
  7年前回复
- 无人小站0
  什么都不会的萌新路过 :狂吐口水:
  7年前回复
- - 月宅作者0
    大佬又在说笑话
    7年前@无人小站回复
- 某昴0
  签到成功！签到时间:上午1:32:43每日打卡，生活更精彩哦~
  7年前回复
- 月宅作者0
  签到成功！签到时间:下午9:53:43每日打卡，生活更精彩哦~
  7年前回复