イラストを担当させていただいた書籍の発売に合わせて、サイトをリニューアルしました。以下メモがてら。
- ロジカ+フィジカ Illustrator Logi's Official Website.
初めてWordPressテーマを子テーマでなく、いちから自分で作ってみました。
キモは、Lightbox系スクリプトのColorboxを使ったモーダルウィンドウと、それを前提にしたサイト構成（WordPressテーマの設計）です。
- Colorbox
- http://www.jacklmoore.com/colorbox/
Worksリストの正体（トップページ、Worksページ）
Jetpackのカスタムコンテンツタイプ「ポートフォリオプロジェクト」です。
モーダルウィンドウに表示する内容は、記事本文にHTMLで書いてラッパーのdivで囲い、CSSでdisplay: noneしたものが正体です。
ラッパーdiv直下のdivには、スラッグ名（ex. some-name-as-slug）をid属性として指定しています。
WPテーマ（サイトトップのfront-page.php、Worksページの個別テーマ）ではget_posts()に'post_type'=>'jetpack-portfolio'を指定して記事を取得、アイキャッチ画像（無い時は1番目の添付画像）を取得してサムネイルを出力、リンク先は<a href="#<?php echo $post->post_name; ?>">としてスラッグ名（ex. some-name-as-slug）が出力されるように。
で、JavaScriptでclass指定でイベント追加、リンクがクリックされたら記事本文をColorboxのHTMLインライン（Content Type inline）でモーダルウィンドウ表示させてます。
HTML（本文の例）
<div class="display-none">
<div class="inline_content1" id="some-name-as-slug">
<img src="http://xxx.xxx/wp-content/uploads/image.jpg" />
<dl>
<dt><strong>タイトル</strong></dt>
<dt>著者名</dt>
<dd>刊行元<br /><a href="http://xxx.xxx/">http://xxx.xxx/</a></dd>
<dd>
<p>紹介文</p>
</dd>
</dl>
<ul>
<li><a href="http://xxx.xxx/entry-link/">イラストを見る</a></li>
<li class="close"><a href='#' onclick="$.colorbox.close(); return false;">閉じる</a></li>
</ul>
</div>
</div>
PHP & HTML（テーマファイル）
<?php
$args = array( 'posts_per_page'=>2, 'offset'=>0, 'post_type'=>'jetpack-portfolio' );
$myposts = get_posts( $args );
foreach ( $myposts as $post ) :setup_postdata( $post );
$eyecatch_img = get_post_thumbnail_id( $post->ID);
$image = (!empty($eyecatch_img)) ? wp_get_attachment_image_src($eyecatch_img, 'thumbnail') : null;
?>
<li><a href="#<?php echo $post->post_name; ?>" class="colorbox-link1" title="<?php the_title(); ?>"><?php if ( has_post_thumbnail() ) { echo get_the_post_thumbnail($post->ID, 'thumbnail'); } else {
$imgargs = array( 'post_type' => 'attachment', 'post_mime_type' => 'image', 'post_parent' => $post->ID, 'numberposts' => 1);
$myimg = get_children($imgargs);
if ( empty($myimg ) ) {
echo '<span>Image Not Found.</span>';
} else {
$image = wp_get_attachment_image_src(key($myimg), 'thumbnail');
echo '<img src="' . $image[0] . '" />';
}
} ?></a>
<?php the_content(); ?></li>
<?php endforeach;
wp_reset_postdata();
?>
jQuery(document).ready(function() {
if($('.colorbox-link1')[0]) $('.colorbox-link1').colorbox({inline:true, width:"75%", speed:'200'});
});
「ポートフォリオプロジェクト」の本文HTMLは、ひな形をTinyMCE Templateというプラグインを使って保存してます。
Galleryリストの正体（トップページ、Galleryページ）
こちらはカスタムコンテンツタイプではなく、通常投稿です。タグ「Gallery」を付けたもののみ抽出して表示してます。
タグクラウドを使ってないので、タグはこの為にのみ使っています。
PHP & HTML
<?php
$args = array( 'posts_per_page'=>5, 'offset'=>0, 'tag'=>'gallery' );
$myposts = get_posts( $args );
foreach ( $myposts as $post ) :setup_postdata( $post );
if (strstr($post->post_name, '%')) { $id = $post->ID; }
else { $id = $post->post_name; }
$imgargs = array( 'post_type' => 'attachment', 'post_mime_type' => 'image', 'post_parent' => $post->ID, 'numberposts' => 1);
$myimg = get_children($imgargs);
$image = (!empty($eyecatch_img)) ? wp_get_attachment_image_src($eyecatch_img, 'thumbnail') : null;
?>
<li><a href="#<?php echo $id; ?>" class="colorbox-link2" title="<?php the_title(); ?>">
<?php
if (strstr($image[0], 'emptiness')) { unset($image); }
if (empty($image[0])) {
$image = wp_get_attachment_image_src(key($myimg), 'thumbnail');
}
echo '<img src="' . $image[0] . '" />'; } ?></a>
<div class="display-none">
<div class="inline_content2" id="<?php echo $id; ?>"><?php
if ( empty($myimg ) ) {
echo '<span>Image Not Found.</span>';
} else {
$image = (!empty($eyecatch_img)) ? wp_get_attachment_image_src($eyecatch_img, 'full') : null;
if (strstr($image[0], 'emptiness')) { unset($image); }
if (empty($image[0])) {
$image = wp_get_attachment_image_src(key($myimg), 'full');
}
echo '<img src="' . $image[0] . '" class="gallery-image" />';
} ?>
<dl class="infomation infomation-others">
<dt><strong><?php the_title(); ?></strong></dt>
<dd class="excerpt"><p><?php echo mb_substr(get_the_excerpt(), 0, 125); ?></p></dd>
</dl>
<ul>
<li class="more"><a href="<?php the_permalink() ?>">続きを読む</a></li>
<li class="close"><a href='#' onclick="$.colorbox.close(); return false;">閉じる</a></li>
</ul>
</div>
</div>
</li>
<?php endforeach;
wp_reset_postdata();?>
jQuery(document).ready(function() {
if($('.colorbox-link2')[0]) $('.colorbox-link2').colorbox({inline:true, width:"44%", speed:'200'});
});
モーダルウィンドウ内では抜粋のみ表示、「続きを読む」で個別投稿ページへリンクしてます。
まずは画像をメインに気軽に見てもらい、そこから記事全文を読みたくなるように誘導するUI設計で、自分ではとても気に入っています。
Blog記事での画像ポップアップ
Colorboxの画像（Content Type photo）表示です。
WorksやGalleryと違うのは、投稿本文内のHTMLでclass指定は行わず、画像リンクにjQueryのaddClass()でclassを追加しています。
記事本文（class「entry-content」）内のp要素直下のa要素で、かつhref属性のURLに自サイトのドメインを含む場合のみです
（でないと他サイトへのバナーリンクとかにも適用されてしまうので……）。
ついでに、Colorboxのcloseボタンが気に入らないので、閉じるリンクも追加させてます。
jQuery(document).ready(function() {
if($('.entry-content p>a[href]')[0]) GalleryLink();
});
function GalleryLink() {
var lines = $('.entry-content p').children();
for(var i=0; i < lines.length; i++) {
var line = lines.eq(i);
if (!$('.entry-content p>a[href]').attr('href').match('logica-physica.info')) { return false; };
if (!$(line).html().match('<img src')) { continue; }
$(line).addClass('gallery-link');
$('#cboxContent').append('<ul><li class="close"><a href=\'#\' onclick="$.colorbox.close(); return false;">閉じる</a></li></ul>');
$('.gallery-link').colorbox({rel:'.gallery-link', retinaImage:true, retinaUrl:true, maxWidth:'90%',maxHeight:'90%',speed:'200'});
}
}
