これで理解できる！ WordPress ベーステーマ

主に学習用、確認用に使えるようにと、WordPress ベーステーマを作成してみました。

基本的なテンプレートしか用意していないので、実用性は低いのですが、世の中のテーマを見て理解したり、ちょっとした修正コードを埋め込んで動作確認をしたいときに、こういったベーステーマがあると便利です。時間があるときに、ちょこちょこと機能追加をしていこうと考えています。

404.php
404.php はページが見つからない時に使われるテンプレートです。

<?php get_header(); ?>
  <article>
    <header">
      <h1>404</h1>
    </header>
    <div class="entry-content">
      <p>not found.</p>
      <?php get_search_form(); ?>
    </div><!-- .entry-content -->
  </article>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

category.php
category.php はカテゴリページ用テンプレートです。

<?php get_header(); ?>
<?php if (have_posts()) {
  while (have_posts()) {
    the_post();
?>
  <?php the_ID(); ?> … <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br />
<?php
  } /* endwhile */
} /* endif */
?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

footer.php
footer.php はフッター用のテンプレートです。get_footerで呼び出せます。

</div><!-- #content -->
<footer>
  <div>
    <a href="<?php echo esc_url('http://wordpress.org/'); ?>"><?php printf('Powered by WordPress'); ?></a>
  </div>
</footer>
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>

functions.php
ここでは、functions.php にテーマでウィジット対応のサイドバーを使えるように記述をしています。

<?php
if ( function_exists('register_sidebar') ) {
    register_sidebar();
}
?>

header.php
header.php は、ヘッダー部分用テンプレートで、get_headerで呼び出せます。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>" />
  <meta name="viewport" content="width=device-width" />
  <title><?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title>
  <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
  <?php wp_head(); ?>
</head>
<body>
<div id="page">
  <header id="banner">
  </header>
  <div id="content">

index.php
index.php はメインページ用のテンプレートです。

<?php get_header(); ?>
 
<!-- 記事一覧 -->
<section>
<h1>記事一覧</h1>
<?php while ( have_posts() ) { the_post(); ?>
  <article>
    <?php get_template_part( 'loop', 'simple' ); ?>
  </article>
<?php } ?>
</section>
 
<!-- カテゴリ一覧 -->
<section>
<h1>カテゴリ一覧</h1>
<ul>
    <?php wp_list_categories('orderby=name&title_li='); ?>
</ul>
</section>
 
<!-- ページ一覧 -->
<section>
<h1>ページ一覧</h1>
<ul>
    <?php wp_list_pages('sort_column=menu_order&title_li='); ?>
</ul>
</section>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

license.txt
license.txt はライセンスを記載したテキストファイルです。

License: The Open Software License 3.0
License URI: http://www.opensource.org/licenses/OSL-3.0

loop-simple.php
loop-simple.php は、繰り返し用に他のテンプレートから呼び出して使うテンプレートです。get_template_partを使って呼び出します。

<?php the_ID(); ?> … <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br />

page.php
page.php は固定ページ用のテンプレートです。

<?php get_header(); ?>
<div id="content-page">
<?php while ( have_posts() ) {
   the_post();
?>
 <?php the_ID(); ?> … <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br />
<?php } /* endwhile */ ?>
</div><!-- #content-page -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

sidebar.php
sidebar.php はサイドバー用のテンプレートです。get_sidebarで呼び出せます。

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) { ?>
 <li id="about">
  <h2>About</h2>
  <p>simple blog</p>
 </li>
 <li id="license">
  <h2>License</h2>
  <ul>
   <li><a href="http://www.opensource.org/licenses/OSL-3.0">The Open Software License 3.0</a></li>
  </ul>
 </li>
<?php } /* endif */ ?>
</ul>

single.php
single.php は単一記事用のテンプレートです。

<?php get_header(); ?>
<?php while ( have_posts() ) {
  the_post(); ?>
  <nav>
    <span class="nav-previous"><?php previous_post_link('%link', '&lt;'); ?></span>
    <span class="nav-next"><?php next_post_link('%link', '&gt;'); ?></span>
  </nav>
  <?php the_ID(); ?> … <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br />
  <?php the_content(); ?>
<?php } /* endwhile */ ?>
<?php get_footer(); ?>

style.css
style.cssでは、ブラウザのデフォルト設定をリセットして、ボーダーをすべての要素につけています。
これにより、どの要素に対して、どのようにCSSが適用されているかがわかるようになります。

@charset "utf-8";
/*
Theme Name: Simple
Theme URI: https://www.hiro345.net/blogs/hiro345/
Description: シンプルなテーマ。
Author: hiro345
Version: 1.0
License: The Open Software License 3.0
License URI: http://www.opensource.org/licenses/OSL-3.0
*/
 
/* reset */
 * {
 margin: 0;
 padding: 0;
 font-size: 100%;
 border: 1px solid #ccc;
}