WordPress／アイキャッチ付きメニュー | もとまつデザイン事務所

WordPress／アイキャッチ付きメニュー

トップページにアイキャッチ付きのメニューを作る。

functions.phpに

register_nav_menu('メニュー名（スラッグ）', '管理画面上のメニューの表示名');

メニュー設定

WordPressダッシュボード→外観→メニューで設定

トップページのメニューを表示したい位置に

<?php
   $menu_name = 'メニュー名（スラッグ）';
   $locations = get_nav_menu_locations();
   $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
   $menu_items = wp_get_nav_menu_items($menu->term_id);
   if($menu_items):
?>
<ul>
<?php 
  foreach ($menu_items as $menu): 
  $page_id = $menu->object_id;
  $thumbnail_id = get_post_thumbnail_id($page_id);
  $image_attributes = wp_get_attachment_image_src($thumbnail_id); 
  $content = get_page($page_id);
?>
    <li>
        <div class="title"><?php echo $content->post_title; ?></div>
        <img src="<?php echo $image_attributes[0]; ?>" alt="" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>" />
        <a href="<?php echo get_permalink($page_id); ?>">詳しくはこちら</a>
    </li>
<?php endforeach; ?>
</ul>
<?php endif; ?>

追加★アイキャッチ画像をフルサイズにする（ぼけないように）

<a href="<?php the_permalink() ?>">
<div class="job_icon"> 
<?php if (has_post_thumbnail()) {
    the_post_thumbnail('full'); // 登録画像のフルサイズ
} ?>