WordPress主题开发各常规页面代码示范-老蒋玩运营

我们在开发WordPress主题的时候，各个页面的命名和内容的调用都是要统一的。在前面，老蒋有对于命名规则整理。在这里，我们再整理各个页面的调用代码规范。

1、必备文件和主题说明

index.php：主页
style.css：样式
screenshot.png：主题图

这三个文件是必须的，而且在index.php要加上说明文件。

/**
 * Theme Name:        Fabled Sunset
 * Theme URI:         https://example.com/fabled-sunset
 * Description:       Custom theme description...
 * Version:           1.0.0
 * Author:            Your Name
 * Author URI:        https://example.com
 * Tags:              block-patterns, full-site-editing
 * Text Domain:       fabled-sunset
 * Domain Path:       /assets/lang
 * Tested up to:      6.4
 * Requires at least: 6.2
 * Requires PHP:      7.4
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */

2、头部模版header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1.0" />
	<link rel="profile" href="http://gmpg.org/xfn/11" />
	<?php wp_head(); ?>	
</head>

<body <?php body_class(); ?>>
<header id="branding" role="banner">
	<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
	<nav id="primary-nav" role="navigation">
		<h1>导航</h1>
		<ul>
		<?php
			wp_nav_menu( array(
				'depth' => 1,
				'container' => false,
				'menu' => false,
				'menu_class' => false,
				'theme_location' => 'primary_nav',
				'items_wrap' => '%3$s',
			) );
		?>
		</ul>
	</nav>
	<div class="search-container">
		<?php get_search_form(); ?>
	</div>
</header>
		
<div id="wrapper">

3、页脚模版 footer.php

</div><!-- wrapper end -->	
<footer id="colophon" role="contentinfo">
	Copyright &copy; 2016
	<?php 
		$tyear = (int) current_time('Y');
		if($tyear > 2016)
			echo ' - ' . $tyear;
	?>
	<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
	<?php 
		if ( get_option( 'zh_cn_l10n_icp_num' ) )
			echo ' <a class="icp" href="http://www.miibeian.gov.cn" rel="nofollow" target="_blank">' . get_option( 'zh_cn_l10n_icp_num' ) . '</a>';
	?>	
	<?php wp_footer(); ?>
</footer>
</body>
</html>

4、侧边栏模版 sidebar.php

<?php if ( is_active_sidebar( 'sidebar-1' )  ) : ?>
	<aside id="secondary" role="complementary">
		<?php dynamic_sidebar( 'sidebar-1' ); ?>
	</aside>
<?php endif; ?>

5、首页模版 index.php

<?php get_header(); ?>
	<?php if( have_posts() ) : ?>
<?php while( have_posts() ) : the_post(); ?>
	<article class="entry">
		<h1><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title_attribute(); ?></a></h1>
		<footer class="post-meta">
			<time datetime="<?php the_time( 'c' ); ?>" pubdate><?php the_time( 'Y-m-d' ); ?></time>
			<?php if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) : ?>
				<span class="comments-links">评论(<?php comments_popup_link( '0', '1', '%' ); ?>)</span>
			<?php endif; ?>
		</footer>
		<p class="excerpt"><?php echo mb_strimwidth(wp_strip_all_tags($post->post_content, true), 0, 200, '...' ); ?></p>
	</article>
	<?php endwhile; ?>
	<?php le_paging_nav(); ?>
	<?php wp_reset_query(); ?>
<?php endif; ?>
	<?php get_sidebar(); ?>
<?php get_footer(); ?>

6、归档页面模版 archive.php

<?php get_header(); ?>
	<section id="main" role="main">
		<header class="archive-title">
			<?php
				the_archive_title( '<h1 class="title">', '</h1>' );
				the_archive_description();
			?>
		</header>
		
		<?php get_template_part( 'main', '' ); ?>
	</section>
	<?php get_sidebar(); ?>
<?php get_footer(); ?>

这里我们也可以将循环中心部分单独main.php

<?php if( have_posts() ) : ?>
<?php while( have_posts() ) : the_post(); ?>
	<article class="entry">
		<h1><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title_attribute(); ?></a></h1>
		<footer class="post-meta">
			<time datetime="<?php the_time( 'c' ); ?>" pubdate><?php the_time( 'Y-m-d' ); ?></time>
			<?php if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) : ?>
				<span class="comments-links">评论(<?php comments_popup_link( '0', '1', '%' ); ?>)</span>
			<?php endif; ?>
		</footer>
		<p class="excerpt"><?php echo mb_strimwidth(wp_strip_all_tags($post->post_content, true), 0, 200, '...' ); ?></p>
	</article>
	<?php endwhile; ?>
	<?php le_paging_nav(); ?>
	<?php wp_reset_query(); ?>
<?php endif; ?>

7、搜索结果 search.php

<?php get_header(); ?>
	<section id="main" role="main">
		<h1 class="title"><?php printf( '关键词“%s”的搜索结果', get_search_query() ); ?></h1>
	<?php if ( have_posts() ) : ?>
		<?php get_template_part( 'main', '' ); ?>
	<?php else : ?>
		<div class="search-error content">
			<p><?php printf('很遗憾，未找到与关键词“%s”相关的内容，可能是本站还没有这方面的内容或是您输入的关键词不够准确，您可以尝试使用新的关键词重新搜索：', esc_html($s, 1) ); ?></p>
			<?php get_search_form(); ?>
		</div>
	<?php endif; ?>
	</section>
    <?php get_sidebar(); ?>		
<?php get_footer(); ?>

8、单页模版 page.php

<?php get_header(); ?>
	<div id="main" role="main">
	<?php while ( have_posts() ) : the_post(); ?>
		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<h1 class="title"><?php the_title(); ?></h1>
			<div class="page-content content">
				<?php the_content(); ?>
			</div>
		</article>
		<?php comments_template(); ?>
	<?php endwhile; ?>
	</div>
    <?php get_sidebar(); ?>		
<?php get_footer(); ?>

9、文章页面 single.php

<?php get_header(); ?>
	<div id="main" role="main">
	<?php while (have_posts()) : the_post(); ?>
		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<header>
				<h1><?php the_title_attribute(); ?></h1>
				<div class="post-meta">
					<time datetime="<?php the_time( 'c' ); ?>" pubdate><?php the_time( 'Y-m-d' ); ?></time>
					<?php if ( get_option( 'users_can_register' ) ) : ?>
						<span class="author-links">作者：<?php the_author_posts_link(); ?></span>
					<?php endif; ?>
					<span class="cat-links">分类：<?php the_category( ' ', '' ); ?></span>
					<?php the_tags( '<span class="tag-links">标签：', ', ', '</span>' ); ?>
					<?php if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) : ?>
						<span class="comments-links">评论(<?php comments_popup_link( '0', '1', '%' ); ?>)</span>
					<?php endif; ?>
				</div>
			</header>
			<div class="post-content content">
				<?php the_content(); ?>
			</div>
		</article>
		
		<nav id="post-navigation" role="navigation">
			<h1>文章导航</h1>
			<div class="nav-links">
				<?php previous_post_link('<span class="previous-article">上一篇：%link</span>', '%title', true); ?>
				<?php next_post_link('<span class="next-article">下一篇：%link</span>', '%title', true); ?>
			</div>
		</nav>
		<?php comments_template(); ?>
	<?php endwhile; ?>
	</div>
	<?php get_sidebar(); ?>
<?php get_footer(); ?>

10、404页面模版 404.php

<?php get_header(); ?>
	<div id="main">
		<h1>404 . Not Found</h1>
		<p>没有看到你要找的内容</p>
		<p><a class="primary-button" href="<?php bloginfo( 'url' ); ?>" rel="home">返回首页</a></p>
	</div>
	<?php get_sidebar(); ?>
<?php get_footer(); ?>

11、功能页面 functions.php

如果需要增强功能的，将功能代码丢到 functions.php中。

不过，新的WordPress主题模版格式采用这样的：

<!DOCTYPE html>
<html lang="en-US">
<head>
	<title>Post Title</title>
	<!-- Scripts, styles, and meta here. -->
</head>

<body class="post-template single single-post">
	<div class="wp-site-blocks">
		<header class="wp-block-template-part">
			<!-- Header blocks here. -->
		</header>
		<main class="wp-block-group is-layout-flow wp-block-group-is-layout-flow">
			<!-- Nested blocks here. -->
		</main>
		<footer class="wp-block-template-part">
			<!-- Footer blocks here. -->
		</footer>
	</div>
</body>
</html>

采用静态模块化的调用。

parts/
footer.html
header.html
patterns/
example.php
styles/
example.json
templates/
404.html
archive.html
index.html (required)
singular.html
README.txt
functions.php
screenshot.png
style.css (required)
theme.json

然后这样的调用。

投上你的一票

未经允许不得转载：老蒋玩运营 » WordPress主题开发各常规页面代码示范

WordPress主题开发各常规页面代码示范

相关推荐

站内搜索

最新文章

热门标签

特别推荐