logiblo

ロジのめもちょうです。本サイトはこちら→https://logica-physica.info/

サイトリニューアルしたメモ

イラストを担当させていただいた書籍の発売に合わせて、サイトをリニューアルしました。以下メモがてら。

ロジカ+フィジカ Illustrator Logi's Official Website.

初めてWordPressテーマを子テーマでなく、いちから自分で作ってみました。
キモは、LightboxスクリプトColorboxを使ったモーダルウィンドウと、それを前提にしたサイト構成(WordPressテーマの設計)です。

Colorbox
http://www.jacklmoore.com/colorbox/

Worksリストの正体(トップページ、Worksページ)

f:id:logi:20141014191130p:plain

Jetpackのカスタムコンテンツタイプ「ポートフォリオプロジェクト」です。
モーダルウィンドウに表示する内容は、記事本文にHTMLで書いてラッパーのdivで囲い、CSSdisplay: 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();
?>

JavaScript

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 );
	/*英文スラッグ指定がない投稿(スラッグが日本語タイトルをUTF-8エンコードしたものになっている)
	があったので、スラッグに%が含まれるかで判別して、その場合投稿IDをHTMLのid属性に指定する*/
	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();?>

JavaScript

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指定は行わず、画像リンクにjQueryaddClass()でclassを追加しています。
記事本文(class「entry-content」)内のp要素直下のa要素で、かつhref属性のURLに自サイトのドメインを含む場合のみです
(でないと他サイトへのバナーリンクとかにも適用されてしまうので……)。

ついでに、Colorboxのcloseボタンが気に入らないので、閉じるリンクも追加させてます。

JavaScript

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'});
	}
}
ショコラの罠と蜜の誘惑 (ノーチェ)

ショコラの罠と蜜の誘惑 (ノーチェ)