こんにちは!
Affinger4歴1年目の@nanase_nananaviです(・∀・)
今回はAffinger4のワードプレステーマで、関連記事の下のページ送り「prevとnext」を画像付きで見やすくカスタマイズします。
サムネイル画像を表示させる
まず、テーマの編集から「single-type1.php」を開きます。
間違えても、またやり直せるように元の記述はコピーして保存しておきましょう。
点線部分を変更していきます。
<!--ページナビ--> の以下部分、</aside>の手前までを以下の記述に置き換えます。
<div id="prev_next" class="clearfix"> <?php $prevpost = get_adjacent_post(false, '', true); //前の記事 $nextpost = get_adjacent_post(false, '', false); //次の記事 if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき ?> <?php if ( $prevpost ) { //前の記事が存在しているとき echo '<a href="' . get_permalink($prevpost->ID) . '" title="' . get_the_title($prevpost->ID) . '" id="prev" class="clearfix"> <div id="prev_title">前へ</div> ' . get_the_post_thumbnail($prevpost->ID, array(100,100)) . ' <p>' . get_the_title($prevpost->ID) . '</p></a>'; } else { //前の記事が存在しないとき echo '<div id="prev_no"><a href="' .home_url('/'). '"><div id="prev_next_home"><i class="fa fa-home"></i> </div></a></div>'; } if ( $nextpost ) { //次の記事が存在しているとき echo '<a href="' . get_permalink($nextpost->ID) . '" title="'. get_the_title($nextpost->ID) . '" id="next" class="clearfix"> <div id="next_title">次へ</div> ' . get_the_post_thumbnail($nextpost->ID, array(100,100)) . ' <p>'. get_the_title($nextpost->ID) . '</p></a>'; } else { //次の記事が存在しないとき echo '<div id="next_no"><a href="' .home_url('/'). '"><div id="prev_next_home"><i class="fa fa-home"></i> </div></a></div>'; } ?> <?php } ?> </div>
1番最後の、サイドバー部分↓の記述はそのまま残しておくように気をつけてください。消してしまうと、サイドバーがごっそり消えてしまいます!
追加CSSでデザインを変える
CSSを変更する前は、このように縦並びになっています。
追加CSSに以下の記述を追加して、横並びにします。
参考にさせて頂いたサイト様↓
/*-------------------------------- PREV NEXT ---------------------------------*/ #prev_next{ width:100%; margin: 36px 0 24px; padding:0; display: table; } #prev_next #prev, #prev_next #next{ width: 50%; padding:30px 10px 10px; border-top:#ccc 1px solid; border-bottom:#ccc 1px solid; display: table-cell; position:relative; text-decoration:none; } #prev_next #prev p, #prev_next #next p{ font-size:90%; line-height:1.5; } #prev_next #prev:hover, #prev_next #next:hover{ background-color: rgba(238,238,238,0.7); } #prev_next #prev{ border-right:#ccc 1px solid; } #prev_next #prev_title, #prev_next #next_title{ font-size:90%; top:-1em; position:absolute; border: 1px #ccc solid; background:#fff; text-align: center; padding:3px; color:#666; } #prev_next #next_title{ right:10px; } #prev_next #prev img, #prev_next #next img{ margin:0 auto; } #prev_next #prev_no, #prev_next #next_no{ width: 50%; height:140px; padding:0 10px; display: table-cell; } #prev_next #prev_no{ border-right:#ccc 1px solid; } #prev_next_home{ margin:0 auto; background-color: #f48881; border: solid 9px #fff; width: 100px; height:100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; box-shadow: 0 0 0 3px #f48881; -webkit-box-shadow: 0 0 0 3px #f48881; -moz-box-shadow: 0 0 0 3px #f48881; text-align:center; } #prev_next_home:hover{ background-color: rgba(244,136,129,0.7); } #prev_next_home i{ color:#FFF; margin:10px auto ; font-size:60px; } /*-- ここまで --*/ /*media Queries タブレットサイズ ----------------------------------------------------*/ @media only screen and (max-width: 780px) { } /*media Queries タブレットサイズ ----------------------------------------------------*/ @media only screen and (min-width: 380px) { } /*media Queries PCサイズ ----------------------------------------------------*/ @media only screen and (min-width: 780px) { /*-- ここから --*/ /*-------------------------------------- 768px PREV NEXT --------------------------------------*/ #prev_next #prev, #prev_next #prev::before, #prev_next #prev::after, #prev_next #next, #prev_next #next::before, #prev_next #next::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; } #prev_next #prev_title, #prev_next #next_title{ padding:3px 10px; } #prev_next #next_title{ right:10px; } #prev_next #prev img{ float:left; margin-right:10px } #prev_next #next img{ float:right; margin-left: 10px; } /*-- ここまで --*/ }
以上です!
線が綺麗に挿入され、横並びになりました。
おわりに
Affinger4で編集をする時に、ページナビの変更部分がわかりにくかった為、備忘録として書きました。
Affinger4をお使いの方の参考になれば幸いです。
ではまた〜!