17713433920 info@mac163.com
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开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
Mac163网站建设,需要帮助点击我!
  • 17713433920
  • 在线客户
  • 联系邮箱
  • 扫一扫,加好友

关闭搜索
购物车
回到顶部