この投稿を先頭に固定表示を取得してその記事だけを表示する方法
先日、カテゴリ指定でPRといった記事だけを取得すればいいかな～と思っていたら、カテゴリなどは使わずに選定した記事を表示したいといった依頼を受けた。
これをは困ったぞ？と思い、タグでは？なんてことも思ったけど、当然カテゴリでだめならタグもよろしくない訳で、そうなってくるとカスタムフィールドでなにがしかといったことも考えたけど、そんな方法より手っ取り早い方法を思いついた。
それがこの投稿を先頭に固定表示の存在。
最近TwitterやFacebookでもこうしたピン止め表示は普及しているけどWordPressにこれがあるのを忘れていた。
単にこの投稿を先頭に固定表示だけでいいわけではなく、今回はそれをスライド表示したいといったことでした。
ただ、スライダーってすでにあまりPR効果もないしない方がいいくらいの機能なのであまり動かないけど動くようにするというミッションも。
スライダーについては時間が出来てから。
あとから気づいたけどCodexにそんな記述もあるので参照してな。
[blogcard url=https://wpdocs.osdn.jp/%E5%85%88%E9%A0%AD%E5%9B%BA%E5%AE%9A%E8%A1%A8%E7%A4%BA%E3%81%AE%E6%8A%95%E7%A8%BF]
このあたりを参考にして固定記事のみをまず取得して表示順とか並び、投稿タイプ、公開状態などを取得？
‘ignore_sticky_posts’ => 1
これは固定ページが存在しているかをチェックしてなければなにも表示しない、0にするとスルーされるみたい。
今回は固定表示を取得してそれだけを表示する方法を
<?php
// 先頭固定表示用の大きな投稿スタイル（ランダム表示）
$limit_count = 1;
$sticky = get_option( 'sticky_posts' );
$paged = (int) get_query_var('paged');
$args = array(
'posts_per_page' => $limit_count,
'paged' => $paged,
'post__in' => $sticky,
'orderby' => 'rand',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'ignore_sticky_posts' => 1
); ?>
<?php if (!is_paged() && isset($sticky[0])) : ?>
<div class="slider container" itemtype="https://schema.org/CreativeWork" itemscope="itemscope">
<div class="slider-for">
<?php $the_query = new WP_Query($args); if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="sp-slide">
<a href="<?php the_permalink(); ?>" rel="bookmark">
<?php if( get_the_post_thumbnail() ) { ?>
<?php the_post_thumbnail('spi-slider'); ?>
<?php } else{ ?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/placeholder.jpg" alt="noimage" width="545" height="342" />
<?php } // get_the_post_thumbnail ?>
</a>
<div class="entry-meta">
<span class="cat-links">
<?php $category = get_the_category(); echo $category[0]->cat_name; ?>
</span>
<h2 class="entry-title" itemprop="headline"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php if(mb_strlen($post->post_title)>62) { $title= mb_substr($post->post_title,0,62); echo $title . "…"; } else { echo $post->post_title; } ?></a></h2>
</div>
</div>
<?php endwhile; endif; ?>
</div>対応としてはこんな感じ
はじめの先頭固定表示用の大きな投稿スタイル（ランダム表示）と書いてある部分でクエリーに固定表示のみに限定
<?php
// 先頭固定表示用の大きな投稿スタイル（ランダム表示）
$limit_count = 1;
$sticky = get_option( 'sticky_posts' );
$paged = (int) get_query_var('paged');
$args = array(
'posts_per_page' => $limit_count,
'paged' => $paged,
'post__in' => $sticky,
'orderby' => 'rand',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'ignore_sticky_posts' => 1
); ?>get_option( ‘sticky_posts’ );
それがこの部分だね。
後は投稿にそれを放り込んで呼び出してあげるだけ。
一工夫でランダム表示も入れた。
本当はここをメインで多きめのスライドにして遷移させようかなと思ったけど、必要ないと言われたのでこうした対応に落ち着きました。
一回に表示する数を$limit_count = 1;で1つに限定しているのでスライドするほどコンテンツがないと言うね。
ちなみにスライダーはそのしたのHTML部分をみればわかる人にはわかるはずのslickを使っています。
便利だし、あとは一覧の上部で表示していたので、2ページ目とかには表示しないかつ、固定表示のみって限定をしておいた。
<?php if (!is_paged() && isset($sticky[0])) : ?>
ここね。
これで、限定されてページ送りしたときに2ページ目などには表示されなくなります。
つまり消したいときの処理として分岐をつけたわけです。
もっとスムーズな書き方もあるかもだけど、結構タイトルの文字数を限定していたりCSSで
.slider.container {
display: flex;
flex-wrap: nowrap;
}
.slider .slider-for {/* ここの指定は2カラムにしてあるので左側の対応 */
width: 70%;
z-index: 1;
position: relative;
}
.slider .sp-slide a img:hover {/* ホバー時のエフェクト */
box-shadow: 0 0 10px #eaeaea;
-webkit-transform: scale3d(1.1,1.1,1);
-moz-transform: scale3d(1.1,1.1,1) rotate(.02deg);
-ms-transform: scale3d(1.1,1.1,1) rotate(.02deg);
transform: scale3d(1.1,1.1,1) rotate(.02deg);
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
}
.slider .sp-slide img {
max-width: 100%;
}
.slider .sp-slide .entry-meta {
max-width: 526px;
position: absolute;
pointer-events: none;
z-index: 1;
width: 100%;
bottom: 0;
padding: 10px;
background: linear-gradient(rgba(51,51,51,0),rgba(51,51,51,.48)) fixed;
}
span.cat-links {
background: #01b901;
color: #fff;
padding: 5px 8px 5px 5px;
font-size: 11px;
}
.slider .sp-slide h2.entry-title {
line-height: 1;
}
.slider .sp-slide .entry-meta h2.entry-title a {
color: #fff;
font-size: 1rem;
}
て名感じでslickのCSSも読み込んでいるのでそれも書いちゃったかな？
概ねこれでデザインも出来ていると思う。
画面の上にタイトルのせってというベーシックなあしらいなので、モダンな感じにはなっている。
あとはホバー時のエフェクトを足しているので画像が大きくなります。
スライダーってあまり使わなくなったけど、パララックスと組み合わせたり自動で動かなくていいから上下にスライド出来るエリアを作ってといった要望はあるのでそうした時につかるテクニックとしてのスライドはいいのかも。
