雨過天晴

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

2016.06.04

アイキャッチ!

img from: ふわふわ。り

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

手順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 bloginfo( 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
に変更してください。

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