WordPressテックラボ

WordPressテーマの最小構成テンプレート

2015年12月22日

デザインありきでWordPressを構築する際に使いやすい、必要最小限の構成のテーマを作成しました。
テーマを最初から作る際のひな形として使ってください。

テーマの特徴
  • リセットCSSを読み込んでいる以外はレイアウトのための最低限のスタイル自体も省いている
  • 必要最低限以外の機能は極力削除している
  • Sassに対応している

用意したテンプレートファイルは以下になります。

ファイル名内容
index.phpトップページ用テンプレート
header.phpパーツ:ヘッダー
searchform.phpパーツ:検索フォーム
content.phpパーツ:記事一覧のループ部分
comments.phpパーツ:コメント
sidebar.phpパーツ:サイドバー
footer.phpパーツ:フッター
functions.phpテーマのための関数
screenshot.pngテーマのスクリーンショット
style.cssスタイルシート

テンプレートとしては他に個別の記事ページで使われる single.php 、固定ページで使われる page.php 、アーカイブページで使われる archives.php がありますが、これらは今回のバージョンでは省いています。

良ければ下記からダウンロードしてご利用ください。

index.php

このテンプレートからheader.php、content.php、sidebar.php、footer.phpを読み込んでいます。
header.php、sidebar.php、footer.phpはデフォルトのファイル名なので get_header() のようにファイル名を指定していません。記事一覧のループ部分はデフォルトのファイル名がないため、get_template_part() の第一引数に拡張子を除いたファイル名を指定しています。

<?php
/*
トップページ用テンプレート
*/
get_header(); ?>

		<?php if ( have_posts() ) : ?>

		<!-- entry -->
		<section class="entry-list">
			<?php
			while ( have_posts() ) {
				the_post();
				get_template_part( 'content', get_post_format() );
			}

			// ページナビゲーション
			the_posts_pagination( array(
				'prev_text'          => '< PREV',
				'next_text'          => "NEXT >",
			) );
		?>
		</section>
		<!-- /entry -->

		<?php endif; ?>

	</main>
	<!-- /main -->

	<!-- sidebar -->
<?php get_sidebar(); ?>
	<!-- /sidebar -->

</div>
<!-- /container -->

<?php get_footer(); ?>
header.php

ページヘッダ用のパーツファイルです。

<?php
/*
パーツ:ヘッダ
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title><?php wp_title(); ?></title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="">

	<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.ico">
	<link rel="apple-touch-icon-precomposed" href="/favicon-152.png">

	<meta property="og:title" content="">
	<meta property="og:type" content="">
	<meta property="og:url" content="">
	<meta property="og:image" content="">
	<meta property="og:site_name" content="">
	<meta property="og:description" content="" />
	<meta property="fb:app_id" content="">

	<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

	<link rel="profile" href="http://gmpg.org/xfn/11">
	<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<?php endif; ?>
	<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<div id="container">

	<!-- ページヘッダ -->
	<header id="site-header">
		<!-- ロゴ -->
		<?php if ( is_front_page() && is_home() ) : ?>
		<h1 id="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
		<?php else : ?>
		<p id="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p>
		<?php endif; ?>
		<!-- /ロゴ -->

		<!-- 検索フォーム -->
		<?php get_search_form(); ?>
		<!-- /検索フォーム -->

		<!-- グローバルナビ -->
		<nav>
			<ul class="menu">
				<li><a href="<?php echo home_url('/'); ?>">HOME</a></li>
			</ul>
		</nav>
		<!-- /グローバルナビ -->
	</header>
	<!-- /ページヘッダ -->

	<!-- main -->
	<main id="main">
content.php

記事一覧ループ用のパーツファイルです。

<?php
/*
パーツ:記事一覧のループ部分
*/
?>
<article class="entry" <?php post_class(); ?>>
	<!-- entry-header -->
	<header class="entry-header">
		<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
		<p class="post-meta">
			<span class="post-date"><?php smart_entry_date(); ?></span>
			<span class="link-category"><?php smart_entry_category(); ?></span>
			<span class="link-tag"><?php smart_entry_tag(); ?></span>
			<?php edit_post_link('<span class="edit-link">[編集]</span>'); ?>
		</p>
	</header>
	<!-- /entry-header -->

	<!-- entry-content -->
	<div class="entry-content">
		<?php the_content( "続きを読む" ); ?>
		<?php wp_link_pages(); ?>
	</div>
	<!-- /entry-content -->

	<!-- entry-footer -->
	<footer class="entry-footer">

		<!-- コメントの表示 -->
		<?php comments_template(); ?>

	</footer>
	<!-- /entry-footer -->
</article>
sidebar.php

サイドバー用のパーツファイルです。

<?php
/*
パーツ:サイドバー
*/
?>
<div id="sub">
	<!-- widget-category -->
	<aside class="widget widget-category">
		<h2 class="widget-title">カテゴリ</h2>
		<ul>
		<?php wp_list_categories('title_li=&hide_empty=0&orderby=count&order=asc') ?>
		</ul>
	</aside>
	<!-- /widget-category -->

	<!-- widget-tagcloud -->
	<aside class="widget widget-tagcloud">
		<h2 class="widget-title">タグクラウド</h2>
		<div class="box-tagcloud">
			<?php wp_tag_cloud('smallest=10&largest=10&orderby=count&order=DESC'); ?>
		</div>
	</aside>
	<!-- /widget-tagcloud -->

	<!-- widget-archives -->
	<aside class="widget widget-archives">
		<h2 class="widget-title">アーカイブ</h2>
		<ul>
			<?php wp_get_archives( 'type=monthly' ); ?>
		</ul>
	</aside>
	<!-- /widget-archives -->
</div>
footer.php

フッタ用のパーツファイルです。

<?php
/*
パーツ:フッター
*/
?>
<!-- ページフッタ -->
<footer id="site-footer">
		<p id="copyright" class="wrapper">© rhythmfactory Ltd. All Rights Reserved.</p>
</footer>
<!-- /ページフッタ -->
<?php wp_footer(); ?>
</body>
</html>
searchform.php

検索フォーム用のパーツファイルです。

<?php
/*
パーツ:検索フォーム
*/
?>
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<input type="search" class="search-field" placeholder="検索したいワードを入力してください" value="<?php echo get_search_query(); ?>" name="s" title="検索" />
	<button type="submit" class="search-submit">検索</button>
</form>
comments.php

コメント用のパーツファイルです。

<?php
/*
パーツ:コメント
*/
if ( post_password_required() ) {
	return;
}
?>

<div id="comment">

	<?php if ( have_comments() ) : ?>
		<h3>コメント</h3>
		<?php the_comments_navigation(); ?>

		<ol class="comment-list">
			<?php
				wp_list_comments( array(
					'style'       => 'ol',
				) );
			?>
		</ol>

		<?php the_comments_navigation(); ?>
	<?php endif; ?>

	<?php comment_form(); ?>

</div>
functions.php

テーマ用関数用のファイルです。

<?php
/*
テーマのための関数
*/

// メインコンテンツの横幅
if ( ! isset( $content_width ) ) $content_width = 700;

// フィードのlink要素を自動出力する
add_theme_support( 'automatic-feed-links' );
// 投稿ページにてアイキャッチ画像の欄を表示
add_theme_support( 'post-thumbnails' );
// html5で出力
add_theme_support( 'html5', array(
	'search-form',
	'comment-form',
	'comment-list',
	'gallery',
	'caption',
) );
// 投稿フォーマットのサポート
add_theme_support( 'post-formats', array(
	'aside',	//アサイド
	'gallery',	//ギャラリー
	'image',	//画像
	'link',		//リンク
	'quote',	//引用
	'status',	//ステータス
	'video',	//動画
	'audio',	//音声
	'chat',		//チャット
) );


// TITLE要素用
function my_wp_title($title) {

    if( is_front_page() && is_home() ){
        return get_bloginfo('name');
    } else {
        return $title."|". get_bloginfo('name');
    }
}
add_filter( 'wp_title', 'my_wp_title');

// 日付の出力
function smart_entry_date() {
	// 日付
	printf( '<time class="entry-date published" datetime="%1$s">%2$s</time>',
		esc_attr( get_the_date( ) ),
		get_the_date()
	);
}

// カテゴリの出力
function smart_entry_category($pretag="", $endtag="") {
	$categories_list = get_the_category_list( ', ' );
	if ( $categories_list ) {
		printf( $pretag.'%1$s'.$endtag,
			$categories_list
		);
	}
}

// タグの出力
function smart_entry_tag($pretag="", $endtag="") {
	$tags_list = get_the_tag_list( '', ', ' );
	if ( $tags_list ) {
		printf( $pretag.'%1$s'.$endtag,
			$tags_list
		);
	}
}

構成が確認できる必要最低限のCSS設定のみ行っているだけですが、画面表示は次のようになります。

wordpress_minimum_cap

Comment

  1. CSSは必要最低限しか行っていませんが、スクリーンショットを追加しました。

  2. こちらのテンプレートを利用した時の、
    各ページ スクリーンショットを見たいです。

コメントを残す

メールアドレスが公開されることはありません。

関連記事

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。