index.phpとfunctions.php だけのシンプルなtheme でWordPressの仕組みを理解する

Pocket

2014/03/08 文字化けを直しました。


WordPress のテーマは標準添付されているtwenty-twelveやtwenty-elevenなどがいろいろなテクニックを詰め込んだ複雑なものです。複雑すぎて理解しにくいものと敬遠される方があるかもしれません。
しかし、実は、Wordpress のテーマを作るときに、header.phpやfooter.php は必須ではないのです。
index.phpだけでもサイトとしての最小限の機能は果たします。
ただし、それではウィジットなども使えないので、楽しくありません。
今回はメニューやウィジットを定義するためのfunction.php も使い、WordPressらしいthemeを考えてみました。
かなりシンプルです。WordPressの仕組みの理解や自作のthemeづくりのお役に立てるのではないでしょうか。

コードは下記の通りです。
study-theme

study-themeファイルの構成

study-theme(フォルダ)
           index.php(インデックス兼ほかのほぼ総て)
           function.php(機能の定義)
           style.css(CSSであると同時にthemeの名前等を記述したファイルでもある)
           screenshot.png(theme選択の目安になるスクリーンショットの画像)
           images(フォルダ)
           logo.png(ヘッダに表示するロゴ画像)

index.php

インデックスだけを作ると、ページの表示もポストの表示もインデックスが兼ねます。
header.php もfooter.php も、loop.php も必須ではありません。
まずは、index.php でWordPressの動作を理解してみましょう(エラそうですみません)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- // スタイルシートの設定。bloginfo(stylesheet_url)はテーマのフォルダにあるstyle.cssのURLに置き換えられます。 -->
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

<!-- // WordPressで設定したブログの概要(description)を表示します -->
<meta name="description" content="<?php bloginfo('desc') ?>" />

<!-- // 「blogの名前>記事タイトル」をtitle タグに設定します -->
<title><?php bloginfo('name'); ?><?php wp_title('》', true, 'left'); ?></title>

<!-- // wp-headはプラグインやfunctions.phpがJavasriptやCSSをヘッダ内に読み込むための関数です。多くのプラグインがwp-headを必要とします -->
<?php wp_head(); ?>

</head>
<!-- body_class によって、テーマオプションから背景を変更したり、属性によってCSSによって表示を変更したりできます -->
<body <?php body_class(); ?>>
<div id="wrapper">

<!-- <div id="header"> -->
	<!-- // ブログのURLへのリンク。custom_headerでロゴ画像、高さ、幅 alt 属性としてブログの名前を表示します。デフォルトではheader.png を表示しますが、変更可能です。 -->

	<a href="<?php bloginfo('url'); ?>"><img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php bloginfo('name'); ?>" /></a>

<!-- </div> -->

<div id="top-menu">
<?php wp_nav_menu(); ?>
</div>

<div id="main">
<!-- // メニュー -->

<!-- // ループ開始 -->
	<!-- // もし、記事があるなら、記事があるだけ、記事を表示する -->
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<!-- // permalinkに記事のタイトル名でリンクを張って表示する -->
		<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
		<!-- // 記事本文を表示する -->
		<?php the_content(); ?>
		<!-- // 記事の年月日を表示する -->
		<p>
		<?php the_time('Y.m.d'); ?>更新
		<!-- // (ログイン時のみ)この記事を編集するためのリンク -->
		<?php edit_post_link('[この記事を編集]', '<span style="btn">', '</span>'); ?>
		</p>
	<!-- // 記事がない場合の処理 -->
	 <?php endwhile; else: ?>
		<!-- // 最初の“if”にて表示する投稿があるかどうかをテストしたため、“else”では投稿がない場合に実行します -->
		<!-- // つまり、投稿がなければ以下を表示するのです。 -->
		<p>該当の記事がありませんでした。</p>
	<!-- // if の終わりを宣言 -->
	<?php endif; ?>
<!-- // ループを「完全に」終了 -->
</div>
		<div id="sidebar">
			<!-- // dynamic_sidebar関数は、ウィジットが使えるようにするための関数です。別ファイルであるfunction.phpへの設定が必要なため、念のためifつきで書いています。-->
			<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
			<?php endif; ?>
		</div>

<div id="footer">
	<!-- // blogsetting('name')はブログの名前を表示します -->
	<p>copy right&amp;nbsp; &amp;copy; &amp;nbsp;2013 &amp;nbsp; <?php bloginfo('name'); ?>&amp;nbsp; All Rights Reserved.</p>
	<!-- // wp-footerはプラグインやfunctions.phpがJavasriptをbodyの末尾に読み込むための関数です。多くのプラグインがwp-footerを必要とします -->
	<?php wp_footer(); ?>
</div>

</div>
</body>
</html>

functions.php

「ナビゲーションメニューの追加」と「サイドバーの追加」を宣言しています。
最後に

?>

で閉じていないのは、純粋にPHPだけを書く場合には省略したほうがよいからですって。
ファイルの末尾をもってPHPのコードの終了と解釈されるので、誤作動の懸念が少ないのだとか。
WordPress標準のthemeもそのようになっています。

<?php
//コンテンツサイズを定義します。管理画面の[設定]-[メディア]では、画像のサイズを大中小でそれぞれ設定できます。テーマに$content_widthを定義すると、これらの値を上書きし、画像がはみ出ないようにしてくれます。
if ( ! isset( $content_width ) )
    $content_width = 600;

// ナビゲーションメニューを追加する宣言
// これにより、add_theme_support( 'menus' ) は記述する必要がありません。
register_nav_menus( array( 'primary' => __( 'Primary Navigation' ), ) );

// sidebar(のウィジット)を追加する宣言
register_sidebar(array(
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));

// カスタムヘッダーを追加する宣言
//  幅、高さ、デフォルトの画像、アップロード可能を定義しています
$args = array(
	'flex-width'    => true,
	'width'         => 910,
	'flex-height'    => true,
	'height'        => 80,
	'default-image' => get_template_directory_uri() . '/images/header.png',
	'uploads'       => true,
);
add_theme_support( 'custom-header', $args );

// カスタム背景を追加する宣言
//wp_head関数によってHTML内にCSSがbody.custom-background{ }として生成されることで背景が変更されます。
//header.phpなどに<body class="custom-background">などとするか、body_class()を使って対応させる必要があります。
$args = array(
	'default-color' => '000000',
	'default-image' => get_template_directory_uri() . '/images/background.png',
);
add_theme_support( 'custom-background', $args );

// フィードリンクを使用する宣言
add_theme_support('automatic-feed-links');

style.css

@charset "utf-8";
/*
Theme Name: テーマの学習用
Theme URI: http://biyori.net/
Description: テーマの学習用に作成しました。
1)index.php
2)functions.php
3)style.css
4)screenshot.png,images/logo.png
の4つから出来ています。最小限の構成です。
Version: 1.0
Author: biyori.net
Author URI: http://biyori.net/
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

*{margin:0;padding:0;}

body{
font: 14px/1.4 "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif;
color:#252525;
padding:10px 0;
}

a {color:#09F;text-decoration:none;}
a:hover{color:#FC3;}
a:active, a:focus {outline: 0;}
img {border:0;}
.clear{clear:both;}

/*************
全体 wrapper
*************/
#wrapper{
margin: 0 auto;
padding: 0;
width: 910px;
background:#fff;
}

/*************
/* ヘッダー header
*************/
#header{
background:#333;
height: 80px;

}

#header h1 {
padding: 7px 0 10px;
font-size: 12px;
font-weight: normal;
}

/*************
/* トップナビゲーション top-menu
*************/
#top-menu {
	margin:10px;
}

#top-menu ul{
margin: 15px 0;
height: 43px;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
background:#CCC;
}

#top-menu li{
float:left;
list-style:none;
padding: 0 10px;
border-right: 1px #fff solid;
line-height: 43px;
text-align: center;
font-size: 14px;
background:#ccc;
}

#top-menu  a{
display: block;
height: 43px;
color: #000;
}

/*************
メイン(左側)コンテンツ main
*************/
#main {
float: left;
width: 618px;
padding: 20px 0;
display: inline;
}

#main .bannerM img{
padding-right: 10px;
padding-bottom: 15px;
}
#main .bannerM img.last{padding-right:0;}

#main h2{
margin: 10px;
padding: 0 10px;
line-height: 40px;
font-size: 15px;
font-weight: normal;
color: #333333;
border-bottom: 1px dashed #ccc;
border-top: 1px dashed #ccc;

}

#main h3 {
font-size: 14px;
line-height: 30px;
padding-left: 15px;
padding-bottom: 10px;
margin-top: 20px;
letter-spacing: 0.2em;
color: #333333;
}

#main p {
padding: 15px 15px 15px 20px;
}

#main ul {
padding: 15px 15px 15px 40px;
}

/*************
サイド(右側)コンテンツ sidebar
*************/
#sidebar {
float: right;
width: 265px;
padding: 20px 0;
}

#sidebar p{margin-bottom: 20px;}

#sidebar h3 {
margin-top: 5px;
padding: 0 10px 0 33px;
line-height: 40px;
font-size: 15px;
font-weight: normal;
color: #1196c2;
}

#sidebar ul{
margin-left: 5px;
padding: 10px 0;
}

#sidebar li{
margin: 0 10px 10px 5px;
list-style: none;
border-bottom: 1px dashed #ccc;
}

#sidebar li a{
display: block;
padding-left:15px;
}

#sidebar li a:hover{background-position: 3px 50%;}

/*************
/* フッター footer
*************/
#footer{
clear:both;
padding: 10px;
border-top: 1px solid #eee;
background:#333;
color:#FFF;
}
/***********************************************
ここから下はWordPressの機能のための設定
***********************************************/

/************
カレンダー calendar
************/
#calendar_wrap {
	margin: 10px;
	padding:10px;
}

/************
その他必須の項目
************/
/* リサイズした画像をメインコンテンツエリアに合わせる */
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-container img {
	max-width: 100%; /* 画像の幅が広すぎた場合、強制的に合わせる */
	height: auto; /* アスペクト比を調整するため高さを上書きする */
}
/* 左寄せ */
.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 24px;
	margin-top: 4px;
}

/* 右寄せ */
.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 24px;
	margin-top: 4px;
}
/* 中央寄せ */
.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
/* 画像の下の余白 */
img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: 12px;
}
/* キャプション */
.wp-caption {
	background: #f1f1f1;
	line-height: 18px;
	margin-bottom: 20px;
	max-width: 600px !important; /* 大きすぎる画像によるレイアウト崩れを防ぐ */
	padding: 4px;
	text-align: center;
}
.wp-caption img {
	margin: 5px 5px 0;
}
.wp-caption p.wp-caption-text {
	color: #888;
	font-size: 12px;
	margin: 5px;
}
/* smileyの設定 */
.wp-smiley {
	margin: 0;
}
/* gallaryの設定 */
.gallery {
	margin: 0 auto 18px;
}
.gallery .gallery-item {
	float: left;
	margin-top: 0;
	text-align: center;
	width: 33%;
}
.gallery-columns-2 .gallery-item {
	width: 50%;
}
.gallery-columns-4 .gallery-item {
	width: 25%;
}
.gallery img {
	border: 2px solid #cfcfcf;
}
.gallery-columns-2 .attachment-medium {
	max-width: 92%;
	height: auto;
}
.gallery-columns-4 .attachment-thumbnail {
	max-width: 84%;
	height: auto;
}
.gallery .gallery-caption {
	color: #888;
	font-size: 12px;
	margin: 0 0 12px;
}
.gallery dl {
	margin: 0;
}
.gallery img {
	border: 10px solid #f1f1f1;
}
.gallery br+br {
	display: none;
}
#content .attachment img {/* single attachment images should be centered */
	display: block;
	margin: 0 auto;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です