GOUTEN.NET

デザイナー・GOUTENの生態を観察するブログ

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

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

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

フロントページのスライドギャラリー実装

さて次はフロントページのスライドギャラリーに画像をアップして表示させるまでを実装します。
スライドギャラリー自体はjQueryのresponsiveslides.jsを使用しています。

今回のテーマでは、スライドギャラリーの画像をギャラリー専用の投稿タイプを作成し、それぞれの個別投稿のアイキャッチで1枚ずつ登録していく方式です。

アイキャッチの有効化

アイキャッチはデフォルトの機能ですが、functions.phpでアイキャッチを有効化するタグを追加しないと使用出来ません。

add_theme_support( 'post-thumbnails' );

上記のタグを記述することにより、アイキャッチを使用できるようにします。

wckobe2013-post-thumbnail

アイキャッチ(投稿サムネイル)の有効化についてはCodex日本語版の「投稿サムネイル」を参照してください。

投稿サムネイル – WordPress Codex 日本語版

また、アイキャッチで出力する画像のデフォルトサイズも指定可能ですので、下記のタグも追加します。

set_post_thumbnail_size(190,130,true);

これでアイキャッチを出力する際にデフォルトで190px×130pxで切り抜かれる仕様になります。

さらにアイキャッチやカスタムフィールドで登録した画像を出力する際のサイズの指定をする記述を追加します。

add_image_size('index_slide',1026,342,true);

これにより、「index_slideというサイズ名で出力する時、1026px×342pxの大きさに切り抜かれて表示される」という設定になります。

add_image_size()のパラメータに関して、詳しくはCodex(英語版)の「Function Reference/add image size」を参照してください。

Function Reference/add image size « WordPress Codex

投稿タイプの追加

functions.phpにregister_post_type()を使用して新たに投稿タイプを追加します。

function topslide_custom_post_type()
{
	$labels = array(
		'name' => 'ギャラリー',
		'singular_name' => 'ギャラリー',
		'add_new' => 'ギャラリーを追加',
		'add_new_item' => '新しいギャラリーを追加',
		'edit_item' => 'ギャラリーを編集',
		'new_item' => '新しいギャラリー',
		'view_item' => 'ギャラリーを表示',
		'search_items' => 'ギャラリーを探す',
		'not_found' => 'ギャラリーはありません',
		'not_found_in_trash' =>'ゴミ箱にギャラリーはありません',
		'parent_item_colon' => ''
	);
		$args = array(
		'labels' => $labels,
		'public' => true,
		'query_var' => true,
		'supports' => array('title','thumbnail','revisions')
	);
	register_post_type('gallery',$args);
}
add_action('init', 'topslide_custom_post_type');

カスタム投稿タイプについてはCodex日本語版の「投稿タイプ」を参照してください。

投稿タイプ – WordPress Codex 日本語版

register post type()のパラメータと引数についてはCodex日本語版の「関数リファレンス/register post type」に書いてあります。

関数リファレンス/register post type – WordPress Codex 日本語版

これで管理画面に登録した投稿タイプがメニューとして追加されます。

wckobe2013-custom-post-type

また、カスタム投稿タイプの作成はプラグインで対応することも可能です。

WordPress › Custom Post Type UI « WordPress Plugins
WordPress › Types – Custom Fields and Custom Post Types Management « WordPress Plugins

アイキャッチ画像をスライドギャラリーに出力

カスタム投稿タイプで登録した個別記事のアイキャッチ画像をスライドギャラリーに出力します。
今回のスライドギャラリーはフロントページにあるので、get_posts()を使い、該当部分を以下のような記述に置き換えます。

<?php if (is_front_page()) : ?>
<div class="slides">
	<ul class="rslides">
		<?php $slides = get_posts('post_type=gallery&numberposts=3'); foreach($slides as $post) : setup_postdata($post); ?>
		<li><?php the_post_thumbnail('index_slide');?></li>
		<?php endforeach; ?>
	</ul>
</div>
<?php endif; ?>

1行目・9行目

条件分岐タグを使ってフロントページのみ出力します。
もっとコーディングの効率化を目指すならこのスライドギャラリーはfront-page.phpに含めたほうがいいですね。開催前日に気づきましたが時すでに遅しでしたorz

4行目・6行目

get_postsで投稿のデータを取得し、$slidesに格納します。
今回の場合は「投稿タイプがgalleryである」「投稿の最大出力数が3件」という条件です。
そして$slidesに格納したデータをforeachで回します。

初心者のかたはquery_posts()を使いがちですが、なるべく使わないようにします。
なぜquery_posts()を使わないのかは以下の記事が参考になります。

query_postsとget_postsの違い | notnil creation weblog

使いどころが大事。

5行目

the_post_thumbnail()タグでアイキャッチ画像を出力します。

<?php the_post_thumbnail('index_slide');?>

このとき、パラメータにfuncitons.phpで指定したindex_slodeを挿入することで、functions.phpに書いた設定「1026px×342pxの大きさに切り抜かれて表示される」が適用されます。

このような場合、アップロードする画像は指定したサイズか、同じ比率の指定したサイズ以上の大きさの画像が好ましいですね。

<div class="slides">
	<ul class="rslides">
		<li><img width="1026" height="342" src="アイキャッチに登録した画像パスその1" class="attachment-index_slide wp-post-image" alt="DH170" /></li>
		<li><img width="1026" height="342" src="アイキャッチに登録した画像パスその2" class="attachment-index_slide wp-post-image" alt="DH180" /></li>
		<li><img width="1026" height="342" src="アイキャッチに登録した画像パスその3" class="attachment-index_slide wp-post-image" alt="DH172" /></li>
	</ul>
</div>

これでスライドギャラリー用の画像の出力が完了です。

おまけのプラグイン

じつはこのスライドギャラリー機能、プラグインでも実装できます。
個人的にこれいいな、と思ったのは「Meteor Slider」というプラグインです。

プラグインサイト:Meteor Slides | Josh Leuze
公式リポジトリ:WordPress › Meteor Slides « WordPress Plugins

と、プラグインを使ってもいいのですが、今回はあえて自分でカスタム投稿タイプを追加しての実装としました。
場合によっては抜粋を表示させたりとイレギュラーな表示のさせ方をする場合に、自分で設定したほうが柔軟に対応できるのと、投稿タイプ名を自分で決めることができるというのがその理由です。
でも楽するのもいいと思いますよ?

同じ事ができるプラグインがあるんだってさー

通常WordPressの投稿は、投稿した順(日付順)に出力されます。
今回の画像ギャラリーもそうですが、普通の投稿の時も記事の順序の入れ替したいですよね。

え、したくないですか?
僕はしたいです。

直感的な操作で投稿順序を入れ替えるために「Intuitive Custom Post Order」というプラグインを使用します。
適用すると画像のような感じで投稿順序を入れ替えることができます。

wckobe2013-Intuitive-before

wckobe2013-Intuitive-after

フロントページ以外に適用する機能の実装

ヘッダーとコンテンツとの境界線をつける

フロントページ以外はヘッダーとコンテンツの境目となるようにスタイルを当てているため条件分岐タグでクラス属性を追加する記述をします。

<div class="main-container <?php if (!is_front_page()) echo 'contents-main-container'; ?>">

通常の条件分岐タグの頭に「!」をつけることで「その条件以外」の場合の条件分岐になります。

<div class="main-container contents-main-container">

これでフロントページ以外にヘッダーとコンテンツの境目をつけることができました。

wckobe2013-header-line

パンくずリストの実装

フロントページに以外ではパンくずリストも出力します。

今回はパンくずリストを実装ために「Breadcrumb NavXT」プラグインを使用しました。

WordPress › Breadcrumb NavXT « WordPress Plugins

「Breadcrumb NavXT」の設定はデフォルトのままで、パンくずリストの出力タグを、フロントページ以外に出力させるよう条件分岐タグも含めて記述します。

<?php if (!is_front_page()) : ?>
<?php if(function_exists('bcn_display')) {
	bcn_display();
} ?>
<?php endif; ?>
<a title="サイトタイトル" href="http://wckobe.kikiii.net" class="site-home">home</a> &gt; 現在のページ 

これでパンくずリストの実装が完了しました。

wckobe2013-bread-list

サイドバーのコンテンツ

サイドバーに表示するコンテンツを表示するためのタグを記述します。

informationカテゴリーの記事リストを表示

get_posts()でinformationカテゴリーの取得・表示をします。

<aside class="topic">
	<div class="atopic information">
		<h3>Information</h3>
		<ul>
			<?php
				$info = get_posts('category_name=information&numberposts=3');
				foreach($info as $post) : setup_postdata($post);
			?>
			<li>
				<time><?php the_time("Y.n.j"); ?></time>
				<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
			</li>
			<?php endforeach; ?>
		</ul>
	</div>
</aside>

3行目

informartionカテゴリーのみのコンテンツなのでベタ書きです。

5行目から8行目・13行目

get_postsで投稿の情報を取得して、カテゴリースラッグがinformationであることと表示件数が3件以内であることを指定して、$infoに格納します。
格納した$infoの情報に基づいて、foreachでまわします。

10行目

the_time()で日時の出力をします。
同じ日付で複数投稿がある場合に、日付出力を1つにしたい時にはthe_date()を使用します。

日付の指定方法はPHPの記法に基づいていますので、PHPのマニュアルを参考に設定してください。

PHP: date – Manual

11行目

the_permalink()タグで個別記事へのパーマリンクを、the_title()タグで各記事のタイトルを出力します。

これでinformationカテゴリの記事リストをサイドバーに表示できるようになりました。

なお、サイドバーもフロントページのみ読み込むのですが、フロントページ以外のテンプレートでget_sidebar()タグを記述しなければ読み込みはしませんので、条件分岐タグは必要ありません。

フロントページのコンテンツ

フロントページに表示するコンテンツを表示するためのタグを記述します。

worksカテゴリーの記事リストを表示

get_posts()でworksカテゴリーの記事を取得・一覧を表示をします。

<article class="index">
	<div class="works_topic">
		<h3>Works</h3>
		<?php $works = get_posts('category_name=works&numberposts=3');
		foreach($works as $post) : setup_postdata($post); ?>
		<section class="category-works">
			<a href="<?php the_permalink(); ?>">
				<?php if(has_post_thumbnail()): ?>
				<?php the_post_thumbnail(); ?>
				<?php else: ?>
				<img src="<?php echo get_template_directory_uri(); ?>/images/noimage.png" />
				<?php endif; ?>
			</a>
			<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2><time><?php the_time("Y.n.j"); ?></time>
		</section>
		<?php endforeach; ?>
	</div>
</article>

ほとんどの記述はサイドバーでinformationカテゴリーを出力したときと同様ですので、記述の違う部分だけをピックアップして説明します。

8行目から12行目

the_post_thumbnail()で投稿に設定したアイキャッチ画像を出力します。
パラメータを挿入していないので、出力されるサイズはfunction.phpで設定した190px×130pxになります。

また、アイキャッチが登録されているかいないかを判別して、ない場合はダミーの画像を出力するようにhas_post_thumbnail()を使った条件分岐タグを記述します。

これでworksカテゴリーの記事リストをフロントページに表示できるようになりました。

1 2 3 4 5 6 7 8 9 10

TO PAGE TOP