WordCamp Kobe 2013「テーマ構築チュートリアル」非ライブ版

この記事は投稿されてから1年以上過ぎています。技術情報の場合は最新の情報の検索をしていただき、正しい情報を習得されることをおすすめします。それを承知のかたはどうぞこの記事をお楽しみください。

2013年6月15日にスペースアルファ三宮で開催されたWordCamp Kobe 2013の「テーマ構築チュートリアル」セッションに僕(@gouten5010)も解説役として登壇をさせていただきました。
今回、復習したいあなたや見逃してしまったあなたのために、セッション内容を大公開しちゃいます!
※今回セッションに使ったテーマをダウンロードできるおまけつき!

シングルページの作成

せっかくパーマリンクを設定してシングルページ(単一記事の投稿ページ)にたどり着けるようにしているわけですから、今度はシングルページのテンプレートのコーディングをするとします。

single.phpの内部記述

このテンプレートはinformationカテゴリーに含まれる記事の表示に使われますが、カテゴリを追加しても使える共通のシングルページのテンプレートとしても使いたいため、single.phpで作っていきます。

wckobe2013-single

Worksカテゴリーだけ表示する項目数が多く構造的に大幅に異なるため、シングルページ内で条件分岐することで、コンテンツ内容部分の呼び出し方を変更します。

<?php get_header(); ?>

<article class="pages">
	<div class="contents">

	<?php $cat = get_the_category(); $cat = $cat&#91;0&#93;; {
	echo "<h2>".$cat->cat_name."</h2>";
	} ?> 

	<?php
		if (in_category('works')) :
		get_template_part('content-single-works');
		else:
	?>

	<?php
	if (have_posts()) : 
	while (have_posts()) :
	the_post();
	?>
	<section class="posts_detail">
		<h1><?php the_title(); ?></h1>
		<time><?php the_time("Y.n.j"); ?></time>
		<?php the_content(); ?>
	</section>
	<?php endwhile; endif; ?>

	<?php endif; ?>

	</div> 
</article>

<?php $args = array(
	'before'           => '<p>',
	'after'            => '</p>',
	'link_before'      => '<span>',
	'link_after'       => '</span>',
	'next_or_number'   => 'next',
	'nextpagelink'     => __('Next page'),
	'previouspagelink' => __('Previous page'),
	'pagelink'         => '%',
	'more_file'        => '',
	'echo'             => 1 );
?> 
<?php wp_link_pages($args); ?>

<?php get_footer(); ?>

6行目から8行目

アーカイブページと同じくカテゴリー名を取得して表示します。
今回は条件分岐タグは必要ありません。

10行目から14行目・28行目

条件分岐タグを使用してカテゴリースラッグがworksの場合、別のコンテンツの表示用タグが書かれている「content-single-works.php」をget_template_part()タグで読みこんで表示するようにしています。
それ以外の場合はelse以下を表示します。

16行目から26行目

特に変わったところはありませんので、通常のループを使用します。

33行目から45行目

ベージ分割をした場合のページナビゲーションをwp_link_pages()タグで表示します。

wp_link_pages()タグのパラメータはCodex日本語版の「テンプレートタグ/wp link pages」を参照してください。

テンプレートタグ/wp link pages – WordPress Codex 日本語版

この記事に付いているナビゲーションも同じ機能を使用しています。
記事が長い場合に分割して表示することで、見る人にストレスを与えないように配慮することが大切です。
ページ分割機能とか初めて使ったわ…

記事内に挿入するメディアの制御

今回のセッションでは実際にやりませんでしたが、記事内に画像や動画の埋め込みタグを入れたりすることがあるかと思います。
メディアのアップロードで挿入した画像や動画、またショートコードで埋め込まれた動画等の出力をする際に自動的にコンテンツ幅に合わせるために、function.phpに$content_widthタグを記述します。

if ( ! isset( $content_width ) )
	$content_width = 1026;

$content_widthについてはCodex英語版の「Content Width」を参照してください。
また、@miya0001さんが素敵な記事を書いてくださっていますので、そちらがとてもわかり易いです。

Content Width « WordPress Codex
WordPressテーマのfunctions.phpでは$content_widthを定義するべし | firegoby

1 2 3 4 5 6 7 8 9 10