17713433920 info@mac163.com
wordpress动态
Wordpress主题剖析简介
WordPress主题剖析简介

前一段时间，我们向您介绍了从HTML创建WordPress主题的概念。我们将本教程分为两个部分，今天我们将充实这两个教程，因此，可以将本帖子视为本系列文章中的第三篇。我的目标是分解WordPress主题，让您清楚了解它（主题）的工作方式。

这篇文章假定您具有HTML和CSS的使用知识。我将继续声明拥有HTML和CSS技能是设计WordPress主题的前提条件。还有一件事，这篇文章将避免大词和困难的概念，因为它很容易理解，所以准备好玩耍和学习。

HTML入门

每个HTML网页使用<div>标记分为不同的部分。例如，您可以将网站的正文（<body>）分为几个部分，例如导航，标题，主要内容，侧边栏和页脚。

将网页分为几部分后，您可以使用CSS随意排序（或安排）这些部分。这个过程称为样式，它涉及添加其他样式元素，例如颜色，大小，边框，特殊效果等。这就是CSS的功能，顺带一提，它是层叠样式表的简称。当您将HTM1和CSS文件放在一起并放入几个图像时，您最终将获得一个完整的网站。

WordPress主题的变化不是很大。正如我们在如何从HTML创建WordPress主题的第1部分中所看到的，WordPress主题被拆分为不同的文件。如果此时您无法发现相似之处，请允许我解释。

静态HTML网页使用<div>标记（或表格，如果您真的很老的话）划分为多个部分（我们在前面称为部分）。另一方面，将WordPress主题分为不同的php文件，然后使用模板标签将它们放回一起。

因此，不是将所有正文元素（页眉，主要内容，边栏，页脚等）都放在一个文件中（静态HTML就是这种情况），而是每个正文元素（在WordPress主题中）都保存在单独的文件中。

因此，标题将位于header.php中，侧边栏将在sidebar.php中找到主页，主要内容将位于index.php或single.php（如果是帖子）或page.php（如果是页面） ）。页脚部分将位于footer.php中，依此类推。

你在追踪吗？查看下图：

Html WordPressstructure
Html WordPressstructure

从上面的插图中，<？php get_header（）; ？>，<？php get_sidebar（）; ？>和<？php get_header（）; ？>称为模板标签。他们的工作是从主题目录中依次提取header.php，sidebar.php和footer.php，并在index.php中显示内容，从而完成网页。

不要让.php扩展名吓到您，php文件中的内容只是您熟悉的HTML代码。例如，您的header.php可以包含典型的HTML列表导航。同样，您可以将典型的HTML代码放在footer.php，sidebar.php和index.php中。

您也可以在您的index.php（或您喜欢的任何地方）中放置loop.php函数以显示您的博客文章，但我应该放慢脚步，回到WordPress主题的剖析。我在第二部分中提到了如何从HTML创建WordPress主题的循环。将来我们将讨论它（循环）和其他功能。

继续…

WordPress的基本主题至少包括四个模板文件：

  1. index.php
  2. header.php
  3. sidebar.php
  4. footer.php

让我们看一下这些神奇 文件中包含的内容：

Index.php模板文件

这是主文件，没有该主文件，您将没有有效的WordPress主题。这是您访问WordPress网站时加载的第一个（或默认）文件。认为它等同于index.html。

WordPress主题中的典型index.php如下所示：

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

您可以在<？php get_header（）;之间添加循环。/>和<？php get_sidebar（）; ？>在主页（index.php）上显示博客文章，如下所示：

<?php get_header(); ?>
<div class="content">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<div class="post-header">
	<div class="date"><?php the_time( 'M j y' ); ?></div>
	<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
	<div class="author"><?php the_author(); ?></div>
	</div><!--end post header-->
	<div class="entry clear">
	<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
	<?php the_content(); ?>
	<?php edit_post_link(); ?>
	<?php wp_link_pages(); ?>
	</div><!--end entry-->
	<div class="post-footer">
	<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
	</div><!--end post footer-->
	</div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
	<div class="navigation index">
	<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
	<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
	</div><!--end navigation-->
<?php else : ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Header.php模板文件

该模板文件包含您的标题代码，导航和HTML标题代码。基本上，header.php将您想要显示的所有内容存储在网站顶部。您知道，诸如网站标题之类的东西。

您还可以在header.php中链接到CSS样式表。这是header.php的基本示例：

<html>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>
<body>
<div class="header">
<p>This is header section. Put your logo and other details here.</p>
</div>

Sidebar.php模板文件

Sidebar.php包含需要在边栏上显示的所有内容。侧栏包含其他菜单，小部件，类别，社交媒体图标，自定义内容，HTML代码（例如广告）等。

Sidebar.php可以包含纯HTML标记或php函数调用，具体取决于您的需求。因此，基本的sidebar.php可能如下所示：

<div class="sidebar">

Put your custom content or HTML code here.

</div>

Footer.php模板文件

您认为footer.php有什么用？您可以在这里放置版权信息，其他菜单，链接，社交媒体图标-任何您想要的！您想看看基本的footer.php是什么样子吗？这里：

<footer class="footer">

Put your footer content here including php function calls (to fetch different template files e.g. search.php) if need be.

</footer>

</body>

</html>

注意footer.php中的</ body>和</ html>结束标记吗？您能猜出为什么必须将它们包含在footer.php中吗？同样，您能猜出为什么<html>和<body>开头标记包含在header.php中吗？让我们知道您在本文末尾的评论部分中的猜测guess

我们上面刚刚介绍的四个模板文件构成了一个非常基本的WordPress主题。还有许多其他模板文件；对于您在WordPress主题上看到的每个元素，都有一个模板文件，包括注释，搜索结果和404错误页面，仅举几例。

要完全了解WordPress主题的结构，您需要熟悉不同的模板文件。您可以在WordPress浏览所有可用的模板图块。

然后，我们有了模板标签，WordPress使用该标签从主题目录中获取模板文件。您可以了解有关模板标签及其在WordPress中扮演的角色的更多信息。

摘要

WordPress主题包含以下解剖元素：

  • 模板文件，例如index.php，header.php，search.php，category.php等
  • 模板标签，例如<？php get_header（）; ？>，<？php get_sidebar（）; ？>等
  • 的CSS
  • 图像和其他媒体文件
  • JavaScript文件

以下是概述WordPress主题的示意图：

Wordpress主题的示意图
WordPress主题的示意图

想继续学习吗？在WordPress Codex中查阅详细的主题解剖指南。

结论

您在网络上看到的每个WordPress主题都使用相同的解剖结构（甚至是我们流行的Total WordPress主题），您可以对其进行自定义以满足您的需求。一旦您掌握了WordPress主题开发的基础知识，就可以对WordPress主题进行任何操作。

微信二维码

微信扫描二维码联系我们！
我们在微信上24小时期待你的声音
提供外贸路由器设备产品,轻松翻墙,解答：WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建等！

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！

随机推荐

回到顶部