[教程]小伟教你写自己的WordPress主题-第一章:内容

  • 2017-08-11
  • 468
  • 2
  • 0

前言



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

 ps:由于转义问题,空格自动变成%20,出现%20的地方自行替换为空格,如有不适,请前往原作者网站。


首先来到WordPress的主题文件夹目录(路径:wp-content/themes);

然后在themes目录下新建一个文件夹,名字随便叫什么都可以,小伟起名newpy;

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

 

用vim命令在style.css写入下面的内容后,保存,然后到后台主题下你就可以看见名字啦;

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

*/

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

开始内容


这个文件也就是头部,并且影响到你的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%20bloginfo('stylesheet_url')?>">

</head>

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

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

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

输出内容


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

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

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

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

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

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

<?php endif; ?>

再次刷新页面查看当前内容,现在博客标题与文章内容已经输出,并且带上了a标签,此时点蓝色链接跳转是没有内容的。(补一点,“WAYLEE-WP演示站点”也要添加↓用来进行点文章后还能点回去首页

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

此时的index.php内容为:

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

<?php the_content(); ?>

结束


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

 


ps:实验用演示站点:py.waylee.net 账号waylee 密码123456

ps:版权信息 作者:月宅酱 链接:http://ikmoe.com/5066.html

第二章:

[教程]小伟教你写WordPress主题-第二章:美化

评论

  • findlisa回复
    WebView 4 WebView 4 Android 7.0 Android 7.0

    站长统计用什么插件

    • Waylee回复
      Google Chrome 61 Google Chrome 61 Windows 10 Windows 10

      cnzz啦。

发表评论