新建Header.php文件

1.在主题下创建一个名为Header.php的文件

2.打开你的Index.php文件,剪切<header> 标签或<nav>标签的段落,这取决于你的html结构。在我们的主题中,请将以下代码复制

<html lang="en" class='no-js'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!--for mobile ready-->	
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="apple-touch-icon" sizes="57x57" href="images/pngs/apple-touch-icon-57x57.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="images/pngs/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="images/pngs/apple-touch-icon-114x114.png"/>

<meta name="description" content="Description of content that contains top keyword phrases"></meta>
<meta name="keywords" content="Key words and phrases, comma separated, not directly used in content - google ignores this tag but used in other engines as a fall back"></meta>

<title>Open Source Online Magazine</title>

<!--//style sheets-->
<link media="all" rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />

<!--//javascripts-->
<script src="js/modernizr.custom.20796.js"></script>

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<link media="all" rel="stylesheet" type="text/css" href="css/style-ie.css" />
<![endif]-->

<?php wp_head(); ?>
</head>
<body <?php body_class($class); ?>>
<div id="container">
<header class="">
<hgroup class="screen-reader-text">
	<h1>OpenSource</h1>
    <h2>Online Magazine</h2>

    <p><em>Using Open Source for work and play</em></p>
    </hgroup>
</header>

<nav id="mainNav" class="grd-vt-tertiary shdw-centered">
	<h2 class="screen-reader-text">Main Navigation:</h2>
		<ul class="sfTab">
			<li class="current_page_item"><a href="#">The Zine</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Resources</a></li>
			<li><a href="#">Contact</a></li>
</ul>
</nav><!--//top_navlist-->

 

3.复制上述代码至Header.php文件,然后在Index.php文件中使用模板标签

<?php get_header(); ?> 调用Header部分

4.保存php文件与Index.php文件后刷新。你的页面将会是相同的。

 

实际上我们删除了Index.php文件中的<header> 标签。同时粘贴至新的Header.php文件。使用以下代码:

header.php: <?php get_header(); ?>
专业网站开发网页设计公司

深度阅读:

WordPress主题制作开发实战教程4.1- 站点设置,固定链接设置 在本章节中,我们将带领大家去学习WordPress主题的站点设置,固定链接设置 站点设置 有时我们需要将我们网站的一些基本信息在网站上显示出来,比如网站标题,网站介绍,邮箱地址等,让人更加的了解这个网站,所以我们需要添加站点设置功能。在后台设置网站信息,在前台页面显示则需要在想显示的页面...
wordpress主题制作开发实战教程3.7 – 在模板文件中分解代码 目前我们的主题已经步入循环,现在需要将主题分解至各个模板文件,以确保主题所有部分的编辑可用。这里有一个好的规则建议:首先,避免重复的标记其次,懂得标记独一无二的代码标签,使其仅仅出现在特殊的页面,比如首页 Header.php、Footer.php、...
wordpress主题制作开发实战教程3.1(1)- 主题基础 在本章节中,我们将学习到WordPress的一些主题基础主题基础主要有:1.WordPress的模块文件知识2.模板文件工作流程以及优先级3.主题里的基本循环  主题基础 Wordpress主题包含了许多文件,其中有模板页面。模板页面是层级结构,...
如何处理wordpress中JavaScript文件冲突问题 在编写WordPress主题中,如果第三方提供的HTML/JS/CSS文章中,包含了很多.js文件,在引入这些JavaScript文件过程中会这样那样的错误,比如什么“$ is not a function”之类的,这时候可以通过以下方式来一一排查。 1.正确在functi...
如何在filezilla的ftp中找到域名所对应的WordPress网站程序目录 WP花园作为上海专业的WordPress开发公司,已经为很多客户开发了WordPress互联网项目,我们的高速云服务器上会有很多不同的客户站点项目,这时候作为项目管理者,如果想了解具体某个项目放在服务器的什么地方,应该如何找到呢?【举个例子】我们的某个金融客户www.abc.com的...
wordpress的网站设置与插件及主题之间的联系 许多wordpress站长在开发网站的初期会使用多个主题并来回切换,选择其中较好的风格样式锁定主题。但在网站设计开发过程中,突然反悔,临时想换一个主题进行开发,这样的情况并不少见。但一个wordpress站点只能使用一种主题。如果随意切换其他主题是否站点中的设置和数据就都消失了呢,答案是并不尽然。那...
wordpress主题制作开发实战教程3.9 – 新建Sidebar.php文件 新建Sidebar.php文件 这里将会涉及小工具区域,具体的步骤将在之后描述。1.在主题模板中创建一个php文件2.打开你的Index.php文件,剪切你的sidebar文件,该文件通常位于标签下方。在我们的主题中,请将以下代码复制。
wordpress主题制作开发实战教程3.10 – 新建Footer.php文件 新建Header.php文件 我们使用与sidebar和header相同的步骤创建footer的页面模板1.在主题模板中创建一个Footer.php文件2.打开你的Index.php文件,剪切你的footer文件,该文件通常位于
标签中至

One thought on “wordpress主题制作开发实战教程3.8 – 新建Header.php文件

  1. Pingback: 九江靠谱的WordPress网站建设公司或团队 – The expert blog 1136

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.