Necesito ayuda para armar una Query en wordpress, resulta que tengo una pagina de software que habla sobre cursos, dicha Pagina tiene una sección que traería los post de los cursos que se dictan. Estos mismo se muestran como en una especie de filtrado (no se como se lo denomina a la funcionalidad) y muestra los que estan activos como las marcas de los cursos disponibles, cuando hablo de marcas me refiero a los títulos que dicen radan, alpacham, edgecam etc. Estos títulos serian taxonomías de otro post que se llama producto, osea que no serian taxonomias de cursos. Lo que necesito es hacer través de una Query y poder traer los titulos de las taxonomias que tengo en otro post llamado Producto y poder relacionarlos entre si con el post Cursos. Adjunto la maqueta de como muestro los cursos sitio donde muestro los cursos activos y la pagina de marcas relacionadas a estos mismos cursos
El armado del filtrador que uso para los cursos es el siguiente:
$(window).load(function() {
var $container = $('#content')
// initialize Isotope
$container.isotope({
// options...
resizable: false, // disable normal resizing
// set columnWidth to a percentage of container width
masonry: {
columnWidth: $container.width() / 4
}
});
// update columnWidth on window resize
$(window).smartresize(function() {
$container.isotope({
// update columnWidth to a percentage of container width
masonry: {
columnWidth: $container.width() / 4
}
});
});
});
//MASONRY
$(document).ready(function() {
var $container = $('#content');
$container.imagesLoaded(function() {
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
});
//FILTER
$('#filter a').click(function() {
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
$('#filter a').click(function(event) {
$('a.selected').removeClass('selected');
var $this = $(this);
$this.addClass('selected');
var selector = $this.attr('data-filter');
$container.isotope({
filter: selector
});
return false;
});
});
//ROLL ON HOVER
$(function() {
$(".roll").css("opacity", "0");
$(".roll").hover(function() {
$(this).stop().animate({
opacity: .8
}, "slow");
},
function() {
$(this).stop().animate({
opacity: 0
}, "slow");
});
});
#content {
max-width: 1170px;
z-index: 0;
overflow: hidden;
margin-left: -4px;
}
#filter ul {
margin-left: 0px;
}
#filter ul li {
list-style: none;
float: left;
margin-right: 10px;
margin-bottom: 40px;
display: initial;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
font-size: 14px;
}
#filter ul li a {
color: #444;
margin-bottom: 23px;
background: #ebebeb;
padding: 10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
border-radius: 2px;
text-transform: uppercase;
font-weight: 500;
}
#filter ul li a:hover {
opacity: 0.8;
}
#filter ul li .selected {
background: #e7402f !Important;
color: #fff;
}
/* MASONRY */
.inneritem {
border: 1px solid #ebebeb;
padding: 15px;
}
.bp-height {
min-height: 120px;
}
.boxportfolio4 {
float: left;
width: 22.90%;
display: inline-block;
margin-bottom: 20px;
position: relative;
z-index: 0;
margin-left: 20px;
}
.boxportfolio3 {
float: left;
display: inline-block;
margin-bottom: 20px;
position: relative;
z-index: 0;
width: 31.23%;
margin-left: 20px;
}
.boxportfolio2 {
float: left;
margin-left: 20px;
width: 47.50%;
display: inline-block;
margin-bottom: 20px;
position: relative;
z-index: 0;
}
.boxportfolio1 {
float: left;
margin-left: 20px;
width: 95%;
display: inline-block;
margin-bottom: 10px;
position: relative;
z-index: 0;
padding: 0px;
}
.prod-imagecontainer {
width: 25%;
float: left;
}
.prod-infocontainer {
width: 75%;
float: left;
}
/* .roll { THIS WAS MOVED TO skin-teal.css } MANTA */
.boxcontainer {
border: 1px solid #ededed;
border-bottom: double medium #ececec;
background: #fff;
font-size: 13px;
text-align: left;
/* manta - column to list porfolio */
transition: border 500ms ease-out;
-webkit-transition: border 500ms ease-out;
-moz-transition: border 500ms ease-out;
-o-transition: border 500ms ease-out;
position: relative;
overflow: hidden;
display: block;
clear: both;
}
.boxcontainer:hover {
border-bottom: double medium #eaeaea;
}
.boxcontainer p {
margin-bottom: 10px;
color: #666;
padding: 0px 10px;
/*width: 70%;*/
position: relative;
font-size: 12px;
line-height: 1.4em;
}
.boxcontainer h1 {
font-size: 13px;
line-height: 1;
padding-left: 10px;
padding-right: 10px;
margin-top: 15px;
/*width: 70%;*/
}
.boxcontainer h1 a {
padding-bottom: 10px;
border-bottom: 1px solid #ebebeb;
display: block;
color: #666;
line-height: 20px;
text-transform: uppercase;
}
.boxcontainer img {
width: 100%;
/* manta - column to list porfolio */
/*float:left;*/
/*position:relative;
max-width: 100%;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<section class="container">
<div class="col-md-8 animated fadeInLeft notransition">
<h2 class="smalltitle"><span>Nuestros Cursos</span></h2>
<div class="row">
<div class="col-md-12 text-center">
<div id="filter" class="animated fadeInDown bottomspace10">
<ul>
<li><a href="#" data-filter="*" class="selected"><i class="icon icon-reorder"></i> Ver Todos</a></li>
<li><a href="#" data-filter=".activo" title="¡Fechas Definidas!"><i class="icon icon-th"></i> Cursos Activos</a></li>
<li>Líneas:</li>
<li><a href="#" data-filter=".Alphacam"><i class="icon icon-th"></i> Alphacam</a></li>
<li><a href="#" data-filter=".Radan"><i class="icon icon-th"></i> Radan</a></li>
<li><a href="#" data-filter=".Edgecam"><i class="icon icon-th"></i> Edgecam</a></li>
</ul>
</div>
</div>
</div>
<!-- END filtering menu -->
<div id="content">
<!-- box lista-->
<div class="boxportfolio1 bp-height item Radan ">
<div class="boxcontainer">
<div class="prod-imagecontainer"><img src="http://www.camconnection.com/static/media/pics/2d-01.jpg" alt="Radraft 2D CAD Essential"></div>
<div class="roll">
<div class="wrapcaption">
<a href="8"><i class="icon-arrow-right captionicons"></i></a>
</div>
</div>
<div class="prod-infocontainer">
<h1><a href="vero-alphacam-router.html">Radraft 2D CAD Essential</a></h1>
<p>Este curso de un día en nuestro centro de entrenamiento está diseñado para proveerle de los conocimientos para el dibujo bidimensional en Radraft.</p>
</div>
</div>
</div>
<!-- /box lista -->
<!-- box lista-->
<div class="boxportfolio1 bp-height item Radan ">
<div class="boxcontainer">
<div class="prod-imagecontainer"><img src="http://www.camconnection.com/static/media/pics/2d-01.jpg" alt="Radraft 2D CAD Advanced"></div>
<div class="roll">
<div class="wrapcaption">
<a href="9/index.html"><i class="icon-arrow-right captionicons"></i></a>
</div>
</div>
<div class="prod-infocontainer">
<h1><a href="vero-alphacam-router.html">Radraft 2D CAD Advanced</a></h1>
<p>Este curso de un día en nuestro centro de entrenamiento esta diseñado para aprender a utilizar herramientas avanzadas de sistema Radraft.</p>
</div>
</div>
</div>
<!-- /box lista -->
<!-- box lista-->
<div class="boxportfolio1 bp-height item Radan ">
<div class="boxcontainer">
<div class="prod-imagecontainer"><img src="http://www.camconnection.com/static/media/pics/2d-01.jpg" alt="Radan 3D"></div>
<div class="roll">
<div class="wrapcaption">
<a href="10/index.html"><i class="icon-arrow-right captionicons"></i></a>
</div>
</div>
<div class="prod-infocontainer">
<h1><a href="vero-alphacam-router.html">Radan 3D</a></h1>
<p>Training de tres días diseñado para proveer un conocimiento práctico del software Radan 3D. Este curso se lleva a cabo en nuestras oficinas de capacitación.</p>
</div>
</div>
</div>
<!-- /box lista -->
</div>
<!-- MASONRY ITEMS END -->
</div>
</section>