sidebar.php 新着情報 & 人気記事

functions.php

register_nav_menu('pickupnav', 'おすすめ記事');

------

sidebar.php

 

<style>
/* サイドバー 新着 */
.mymenu h2 {margin-top: 0; margin-bottom: 10px; border-bottom: 2px solid #dddddd; color:#666666; font-size:14px;}
.mymenu ul {margin:0; padding: 0; list-style: none;}
.mymenu li a{display: block; padding: 10px 5px; color:#000000; font-size: 14px; text-decoration: none;}
.mymenu li a:hover{background-color: #eeeeee; opacity: 0.4;}

/* サムネイル画像 メニュー */
.mymenu-thumb li a {padding: 5px 0;border-bottom: dotted 1px #dddddd; color:#2288bb;}
.mymenu-thumb li a:after{content: ""; display: block; clear: both;}
.mymenu-thumb li .thumb{float: left; width: 60px; height: 60px; background-size: cover; background-position: 50% 50%;}
.mymenu-thumb li .text{float: none; width: auto; margin-left: 75px;}
.mymenu-thumb li span{display: block; color:#666666; font-size: 12px;}

.mymenu-large li a{position: relative; margin-bottom: 10px; padding: 0;}
.mymenu-large li a:hover{opacity: 0.8;}
.mymenu-large li .thumb{width: 100%; height: 130px; background-size: cover; background-position: 50% 50%;}

.mymenu-large li .text {position: absolute;bottom: 0; left: 0; width: 100%; padding: 5px 10px; background-color: rgba(0,0,0,0.5);
color:#ffffff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
</style>

<?php
$location_name = 'pickupnav';
$locations = get_nav_locations();
$myposts = wp_get_nav_menu_items($locations[$location_name]);
if($myposts) : ?>
<aside class="mymenu mymenu-large">
<h2>おすすめ記事</h2>

<ul>
<?php foreach($myposts as $post) : if($post->object == 'post'): $post = get_post($post->object_id); setup_postdata($post); ?>
<li><a href="<?php the_permalink(); ?>">
<div class="thumb" style="background-image: url<?php echo mythumb('medium'); ?>"></div>
<div class="text">
<?php the_title(); ?>
<!-- カテゴリー名追加 -->
<?php if(has_category()): ?>
<?php $postcat=get_the_category(); ?>
<span><?php echo $postcat[0]->name; ?></span>
</div>
</a></li>
<?php endif; endforeach; ?>
</ul>
</aside>
<?php wp_reset_postdata(); endif; ?>

 

<?php
$myposts = get_posts(array(
'post_type' => 'post',
'post_per_page' => '5'
));
?>
<?php if($my_posts): ?>
<aside class="mymenu mymenu-thumb">
<h2>新着記事</h2>

<ul>
<?php foreach($myposts as $post) : setup_postdata($post); ?>
<li><a href="<?php the_permalink(); ?>">
<div class="thumb" style="background-image: url<?php echo mythumb('thumbnail'); ?>"></div>
<div class="text">
<?php the_title(); ?>
<!-- カテゴリー名追加 -->
<?php if(has_category()): ?>
<?php $postcat=get_the_category(); ?>
<span><?php echo $postcat[0]->name; ?></span>
</div>
</a></li>
<?php endforeach; ?>
</ul>
</aside>
<?php wp_reset_postdata(); endif; ?>