> WordPress开发手册 > 顶部、底部模版调用

顶部、底部模版调用


知识点

get_header 页面头部(header.PHP)
get_footer 页面底部(footer.php)

功能实现

在/wp-content/themes/shouce下新建header.php内容如下:

<!doctype HTML>
<head>
<meta Http-equiv="Content-Type"
	content="text/html; charset=<?php echo get_bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
	type="text/css" />
	<?php wp_head(); ?>
</head>
<body>

在/wp-content/themes/shouce下新建footer.php内容如下:

<div class="c">
	<div class="footer">
		<p>
			版权所有 <a href="<? bloginfo('url'); ?>"><? bloginfo('name'); ?></a>
		</p>
	</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

修改/wp-content/themes/shouce/index.php如下:

<?php get_header(); ?>
<div id="header">
	<div id="headerimg">
		<h1>
			<a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a>
		</h1>
		<div class="description"><?php bloginfo('description'); ?></div>
	</div>
</div>
<div class="c">
	<div id="left-box">
		<div id="home-loop">
		<?php
		if (have_posts ()) {
			while ( have_posts () ) {

				// 获取下一篇文章的信息,并且将信息存入全局变量 $post 中
				the_post ();
				?>
					<div class="post-item">
				<div class="post-title">
					<h2>
						<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
					</h2>
				</div>
				<div class="post-content"><?php the_content(); ?></div>
				<div class="post-meta">
								类别:<?php the_category(','); ?><span>|</span>
								作者:<?php the_author(); ?><span>|</span>
								时间:<?php the_time( 'Y-m-d' ); ?>
								<?php edit_post_link('修改', ' <span>|</span> ', '' ); ?>
						</div>
			</div>
					<?php
			}
		} else {
			echo '没有日志可以显示';
		}
		?>
	</div>
		<div class="posts_nav_link">
			<?php posts_nav_link(); ?>
		</div>
	</div>
	<?php get_sidebar(); ?>
	</div>
<?php get_footer(); ?>

效果图:

顶部、底部模版调用