Hello, I am putting together a themes for wordpress and I have a problem with the call of some news that I have to show on the home, I attach an image of how the structure is and I attach the code of that armed. One of the problems that I have is that every time I update the home where it shows this news they change my place and do not stay fixed, that is, I do not want the news that I highlight to change place. Example site where you can see the example of news which is the end of this section, what I do is that if the news has an image, it will bring me image and title of the post and if It does not have an image that shows me a gray box with the title only centered.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenido-novedades">
<div class="col-xs-12 col-lg-8 sin-padding">
<div class="col-xs-12 col-sm-6 col-lg-6">
<?php
$home_args = array(
'post_type' => 'post',
'meta_key' => 'notas_destacadas_index',
'orderby' => 'meta_value_num',
'order' => 'DESC',
'showposts' => 1,
'offset' => 0,
);
$wp_query_home = new WP_Query( $home_args );
if ($wp_query_home-> have_posts ()) {
while ($wp_query_home-> have_posts ()) {
$wp_query_home-> the_post ();
?>
<div class="frase hover">
<figure class="snip1208">
<a href="<?php the_permalink(); ?>" title="">
<?php if(get_field('nota_con_imagen')): ?>
<div class="image">
<img src="<?php the_field('imagen_de_nota'); ?>" alt="">
</div>
<?php else:
?>
<div class="recuadro">
<p><?php cortarTexto(the_excerpt( ), 100,"") ?></p>
</div>
<?php
endif;
?>
<div class="date">
<span class="day"><?php echo get_the_date('d'); ?></span><span class="month"><?php echo get_the_date('M'); ?></span>
</div>
<?php if(get_field('nota_con_imagen')): ?>
<figcaption>
<h3><?php echo get_the_title(); ?></h3>
</figcaption>
<a href="<?php the_permalink(); ?>"><button type='button' class='boton_ver'>VER VIDEO</button></a>
</a>
</figure>
<?php endif; ?>
</div>
<?php
}
}
wp_reset_query();
?>
</div>
<div class="col-xs-12 col-sm-6 col-lg-6">
<?php
$home_args = array(
'post_type' => 'post',
'meta_key' => 'notas_destacadas_index',
'orderby' => 'meta_value_num',
'order' => 'DESC',
'showposts' => 1,
'offset' => 1,
);
$wp_query_home = new WP_Query( $home_args );
if ($wp_query_home-> have_posts ()) {
while ($wp_query_home-> have_posts ()) {
$wp_query_home-> the_post ();
?>
<div class="frase hover">
<a href="<?php the_permalink(); ?>" title="">
<figure class="snip1208">
<?php if(get_field('nota_con_imagen')): ?>
<div class="image">
<img src="<?php the_field('imagen_de_nota'); ?>" alt="">
</div>
<?php else:
?>
<div class="recuadro">
<p><?php cortarTexto(the_excerpt( ), 100,"") ?></p>
</div>
<?php
endif;
?>
<div class="date">
<span class="day"><?php echo get_the_date('d'); ?></span><span class="month"><?php echo get_the_date('M'); ?></span>
</div>
<?php if(get_field('nota_con_imagen')): ?>
<figcaption>
<h3><?php echo get_the_title(); ?></h3>
</figcaption>
<a href="<?php the_permalink(); ?>"><button type='button' class='boton_ver'>VER VIDEO</button></a>
</figure>
<?php endif; ?>
</a>
</div>
<?php
}
}
wp_reset_query();
?>
</div>
<div class="clearfix"></div>
<div class="mas-novedades">
<div class="col-xs-12 col-sm-6 col-lg-4 pull-left">
<?php
$home_args = array(
'post_type' => 'post',
'meta_key' => 'notas_destacadas_index',
'orderby' => 'meta_value_num',
'order' => 'DESC',
'showposts' => 1,
'offset' => 2,
);
$wp_query_home = new WP_Query( $home_args );
if ($wp_query_home-> have_posts ()) {
while ($wp_query_home-> have_posts ()) {
$wp_query_home-> the_post ();
?>
<!-- POST 2 -->
<figure class="snip1209">
<a href="" title="">
<?php if(get_field('nota_con_imagen')): ?>
<div class="image">
<?php echo get_the_post_thumbnail(); ?>
</div>
<?php else:
?>
<div class="recuadro">
<p><?php cortarTexto(the_excerpt( ), 100,"") ?></p>
</div>
<?php
endif;
?>
<div class="date">
<span class="day"><?php echo get_the_date('d'); ?></span><span class="month"><?php echo get_the_date('M'); ?></span>
</div>
<?php if(get_field('nota_con_imagen')): ?>
<figcaption>
<h3><?php echo get_the_title(); ?></h3>
</figcaption>
<a href="<?php the_permalink(); ?>"></a>
<?php endif; ?>
</a>
</figure>
<?php
}
}
wp_reset_query();
?>
</div>
<div class="col-xs-12 col-sm-6 col-lg-8 pull-right">
<!-- TERCER POST -->
<?php
$home_args = array(
'post_type' => 'post',
'meta_key' => 'notas_destacadas_index',
'orderby' => 'meta_value_num',
'order' => 'DESC',
'showposts' => 1,
'offset' => 3,
);
$wp_query_home = new WP_Query( $home_args );
if ($wp_query_home-> have_posts ()) {
while ($wp_query_home-> have_posts ()) {
$wp_query_home-> the_post ();
?>
<figure class="snip1209">
<a href="" title="">
<?php if(get_field('nota_con_imagen')): ?>
<div class="image">
<?php echo get_the_post_thumbnail(); ?>
</div>
<?php else:
?>
<div class="recuadro">
<p><?php cortarTexto(the_excerpt( ), 100,"") ?></p>
</div>
<?php
endif;
?>
<div class="date">
<span class="day"><?php echo get_the_date('d'); ?></span><span class="month"><?php echo get_the_date('M'); ?></span>
</div>
<?php if(get_field('nota_con_imagen')): ?>
<figcaption>
<h3><?php echo get_the_title(); ?></h3>
</figcaption>
<a href="<?php the_permalink(); ?>"></a>
<?php endif; ?>
</figure>
</a>
<?php
}
}
wp_reset_query();
?>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="columna-solitaria">
<?php
$home_args = array(
'post_type' => 'post',
'meta_key' => 'notas_destacadas_index',
'orderby' => 'meta_value_num',
'order' => 'DESC',
'showposts' => 1,
'offset' => 4,
);
$wp_query_home = new WP_Query( $home_args );
if ($wp_query_home-> have_posts ()) {
while ($wp_query_home-> have_posts ()) {
$wp_query_home-> the_post ();
?>
<!-- POST 3 -->
<figure class="snip1210">
<?php if(get_field('nota_con_imagen')): ?>
<div class="image">
<?php echo get_the_post_thumbnail(); ?>
</div>
<?php else:
?>
<div class="recuadro">
<p><?php cortarTexto(the_excerpt( ), 100,"") ?></p>
</div>
<?php
endif;
?>
<div class="date">
<span class="day"><?php echo get_the_date('d'); ?></span><span class="month"><?php echo get_the_date('M'); ?></span>
</div>
<?php if(get_field('nota_con_imagen')): ?>
<figcaption>
<h3><?php echo get_the_title(); ?></h3>
</figcaption>
<a href="<?php the_permalink(); ?>"></a>
<?php endif; ?>
</figure>
<?php
}
}
wp_reset_query();
?>
<div class="hidden-sm hidden-md mas-noticias">
<a class="btn btn-mas-noticias" href="<?php bloginfo( 'url' ); ?>/novedades" title="">LEER MÁS NOTICIAS</a>
<img class="forma img-responsive" src="<?php echo THEME_IMAGES; ?>/forma-1.png" alt="">
</div>
</div>
</div>
<div class="hidden-lg hidden-xs col-sm-6">
<div class="columna-solitaria">
<!-- POST 1 MOBILE -->
<figure class="snip1210">
<img class="image" src="<?php echo THEME_IMAGES; ?>/vivenciar-hoy.jpg" alt="..."/>
<div class="date"><span class="day">28</span><span class="month">Oct</span></div><img class="icon" src="<?php echo THEME_IMAGES; ?>/svg/video-icono.svg" alt="">
<figcaption>
<h3>Vivenciar hoy un día en mi futuro</h3>
</figcaption>
<a href="#"></a>
</figure>
<div class="mas-noticias">
<a class="btn btn-mas-noticias" href="<?php bloginfo( 'url' ); ?>/novedades" title="">LEER MÁS NOTICIAS</a>
<img class="forma" src="<?php echo THEME_IMAGES; ?>/forma-1.png" alt="">
</div>
</div>
</div>
</div>
<!-- para esto uso un wp_query -->
'post', 'meta_key' => 'notas_destacadas_index', 'orderby' => 'meta_value_num', 'order' => 'DESC', 'showposts' => 1, 'offset' => 0, ); $wp_query_home = new WP_Query( $home_args );
if ($wp_query_home-> have_posts ()) {
while ($wp_query_home-> have_posts ()) {
$wp_query_home-> the_post ();
?>
The problem that I used for each news box:
<?php
$home_args = array(
'post_type' => 'post',
'meta_key' => 'notas_destacadas_index',
'orderby' => 'meta_value_num',
'order' => 'DESC',
'showposts' => 1,
'offset' => 0,
);
$wp_query_home = new WP_Query( $home_args );
if ($wp_query_home-> have_posts ()) {
while ($wp_query_home-> have_posts ()) {
$wp_query_home-> the_post ();
?>
I do not know if it is well implemented and is the cause that every time I update the news is changed, on the other hand they told me that I could use an accountant. but I do not know how to implement it.