雨過天晴

アイキャッチを使ってPixiv風に作品一覧表示

2016.06.04

img from: ふわふわ。り

この記事は2016年6月4日に書かれたものです。古い内容や非推奨要素を含む可能性がありますのでご注意ください。

そういえば「アイキャッチを使えば小説一覧をピクシブ風に出せる……」と思ったので、やってみました。

手順1. 表紙画像としてアイキャッチを設定する。

表紙画像として使用するためのアイキャッチ画像を設定します(class=”cover”)。
下記コードではサイズ120×150。
アイキャッチの設定方法は調べてみてください。

手順2. タイトル、キャプションなどを出す

タイトルは普通に投稿タイトル、キャプションはとりあえずカスタムフィールドを利用して表示させることにします。

手順3. 「シリーズ」「新作」などを斜めリボンで表示

「シリーズ」など左上に斜めの文字入りリボンをかけます。div class="ribbon"という名前のdivを一つ追加することにします。

手順4. 斜めリボンの表示の有無を決める

シリーズじゃないとか、新作じゃないとかでリボンが必要ないこともあるでしょう。
カスタムフィールドに入れたい文言を設定して、そのカスタムフィールドの内容の有無で、表示の有無を決めることにします。

手順5. EPUB版へのリンクも付けたい

EPUB版へのリンクも付けたい!
でもファイルをアップロードした上に、いちいちファイル名を設定するのは無理!
なので自動で出来るように、ファイル名「スラッグ名.epub」へのリンクも表示させます。
(さすがにファイルはアップしなきゃだめです)

CSSでいろいろ設定して、出したいのはこんな感じ。

これをずらずらと並べていきます。

で、こういうふうに出力させたいとき、

<div class="1作分のボックス">

<div class="ribbon">リボン内容カスタムフィールド</div>

<a href="" class="cover"><img src="アイキャッチ画像" /></a>
<div class="タイトル・キャプション等">
<h3><a href="">タイトル</a></h3>
<p class="日付">2016.1.1.</p>
<p class="キャプション">あらすじとかその他説明などのキャプション</p>
<p class="EPUB用リンク"><a href="スラッグ名.epub">epub版はこちら</a></p>
</div>

</div>

こうすると出ます。

<?php $categories = get_categories('orderby=slug&include=カテゴリーID');
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;  foreach($categories as $category) : ?>
<?php query_posts('cat='.$category->cat_ID.'&posts_per_page=6&paged='.$paged); if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="1作分のボックス">

//リボン用のカスタムフィールドが存在するときリボンを表示
<?php $ccc = get_post_meta($post->ID, 'リボン内容カスタムフィールド', true); ?>
<?php if(empty($ccc)): ?>
<!-- カスタムフィールドが無い場合の表示内容(この場合は空) -->
<?php else: ?>
<div class="ribbon"><?php echo post_custom('リボン内容カスタムフィールド');?></div>
<?php endif;?>

<a href="<?php the_permalink() ?>" class="cover"><?php the_post_thumbnail(array(120,150)); ?></a>
<div class="タイトル・キャプション等">
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<p class="日付"><?php the_time('Y.m.d.'); ?></p>
<p class="キャプション"><?php echo post_custom('キャプションカスタムフィールド'); ?></p>
<p class="EPUB用リンク"><a href="<?php echo home_url(); ?>/フォルダ適当に設定/<?php echo get_page($wp_query->post->ID)->post_name; ?>.epub">epub版はこちら</a></p>
</div>

</div>
<?php endwhile; endif; ?><?php wp_reset_query(); ?><?php endforeach; ?>

1ページ当たり6作ずつ表示、になってますが、1ページに全部出すなら
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
を削り、
&paged='.$paged

&nopaging=1
に変更してください。

あとタグ出したいときも適当に変更してくださいね。では。