CoComina– Web design and Programing –

<?php register_nav_menus( array( 'menu-categorise' => 'カテゴリーリスト'
	)
);
?>

<?php
    $menu_name = 'menu-categorise';
    if(($locations = get_nav_menu_locations()) && isset($locations[$menu_name])){
		echo '
<ul id="categorise">';
		$menu       = wp_get_nav_menu_object($locations[$menu_name]);
		$menu_items = wp_get_nav_menu_items($menu->term_id);
		foreach((array)$menu_items as $key => $menu_item){
	    		$title = $menu_item->title; // カテゴリー名
			$url   = $menu_item->url;   // カテゴリーURL
			$slug = explode('/', $url); // カテゴリーURLを / 区切りで分割してスラッグを取得
			if($count == 1){
				$firstSlug  = $slug[5]; // 最初のカテゴリーのスラッグを取得
			}

			echo '
<li><a data-cat="'.$slug[5].'" href="'.$url.'">'.$title.'</a></li>

';
		}
		echo '</ul>

';
    }

    // 取得した最初のカテゴリーのスラッグを使い記事を出力しておく。
    $catSlug = get_category_by_slug($firstSlug);
    $catID   = $catSlug->cat_ID;
    $catName = $catSlug->cat_name;

    $args = array(
         'category'       => $catID // カテゴリーのID指定して絞り込み
        ,'posts_per_page' => 4 // 4件表示
    );
    $myPosts = get_posts($args);
    foreach($myPosts as $post){
        setup_postdata($post);
        echo '
<div id="article_outer">';
        echo '
<div class="article_inner">';
        echo '<a href="'.get_the_permalink().'">';
        echo '
<h3>記事のタイトル「'.get_the_title().'」</h3>

';
        echo '

カテゴリー：'.$catName.'

';
        echo '</a>';
        echo '</div>

';
        echo '</div>

';
    }
    wp_reset_postdata();
?>

<!-- Categorise -->

<ul id="categorise">

<li><a data-cat="music" href="http://example.com/category/music">音 楽</a></li>


<li><a data-cat="movie" href="http://example.com/category/movie">映 画</a></li>

</ul>

<!-- Article -->

<div id="article_outer">

<div class="article_inner">
		<a href="http://example.com/category/music/1">

<h3>記事のタイトル「35xxxv」</h3>



カテゴリー：音 楽

		</a>
	</div>

</div>

var $ajaxUrl = location.href+'wp-admin/admin-ajax.php', // WordPressでAjaxを使うときの送り先
	$catList = $('.cat_list'),
	$catSlug;

$catList.on('click', function(){
	$catSlug = $(this).data('cat'); // data-cat属性の値を取得

	$.ajax({
		type:'POST',
		url:$ajaxURL,
		cache:false,
		timeout:3000,
		data: {
			'action':'my_ajax_action', // 処理を行う関数名
			'slug':$catSlug // カテゴリースラッグを変数として渡す
		},
	}).then({
		function(response){
			// scusessの時の処理
		},
		function(response){
			// errorの時の処理
		}
	});
});