Ultimas entradas WordPress en tu Web

Escrito por: Xabi Tobias Categoría: HTML

  • Visitas32
  • 68Comentarios
SHARE!
entradaswordpress

Ultimas entradas WordPress en tu Web

Hace poco que empecé a trabajar con WordPress para la realización de este blog. Cada día que pasa me doy cuenta del potencial que tiene y la gran comunidad que tiene detrás y que realiza plugins realmente maravillosos.

El ultimo paso que hemos dado desde Zinovax es integrar en nuestra web un panel donde mostramos las últimas entradas que vamos publicando en este blog.

Cuando lo realicé recabé información de distintas fuentes y al final conseguí mi objetivo. Mi intención es facilitaros el trabajo y que encontréis aquí todo lo necesario para llevar esta tarea a cabo.

Llamada y número de posts a mostrar

Vamos a dar por hecho que tienes el blog colgando de tu dominio principal. Es decir www.tudominio.es/blog.

<?php
require_once($_SERVER [ ‘DOCUMENT_ROOT’].’/blog/wp-config.php’);
php query_posts(‘showposts=2’);
?>

En la primera linea incluimos la llamada al fichero wp-config.php donde recogeremos datos de nuestro blog.

En la segunda linea pasamos el parámetro “showposts” donde indicamos el número de entradas que queremos mostrar en el panel.

Contenido del panel

Aquí esta todo el contenido del panel. En mi caso he dividido cada parte de la entrada en distintos divs para gestionar mediante CSS donde y como quiero que se vea cada apartado.

<div id=”blognot”>

<?php while (have_posts()) : the_post(); ?>

<div id=”titulo”>
<a href=”<?php the_permalink(); ?>”>
<?php the_title(); ?>
</a>
</div>

<div id=”imagen”>
<?php the_post_thumbnail(array( 85,85 )); ?>
</div>

<div id=”contenido”>
<?php
$textoLargo= get_the_excerpt();
$permalink = get_permalink($post->ID);
$textoCorto=limitar_palabras($textoLargo, 55,’&#91;…&#93;&nbsp;&nbsp;<a href=” ‘. $permalink . ‘ ” title=”Ir al art&iacute;culo”>M&aacute;s&raquo;</a>’ );
echo ‘<p>’ . $textoCorto . ‘</p>’;
?>
</div>

<?php endwhile; ?>

</div>

Pasamos a definir por partes el código,

Aquí mostramos el titulo del post. Con la funcion”the_title()” y gracias a “the_permalink()” al pinchar nos llevará a la entrada en concreto.

<div id=”titulo”>
<a href=”<?php the_permalink(); ?>”>
<?php the_title(); ?>
</a>
</div>

Aquí pintamos la imagen principal que hayamos definido para el post. En la llamada pasamos un parámetro “array(85,85)” donde indicamos en pixels el ancho y el alto que queremos que ocupe dicha imagen.

<div id=”imagen”>
<?php the_post_thumbnail(array( 85,85 )); ?>
</div>

En este punto introducimos el comienzo de nuestro post. Para decidir el número de caracteres que vamos a mostrar tenemos que utilizar una función que llamaremos “limitar_palabras”. Entre todos los parámetros que le pasamos, solo debemos modificar el segundo valor, en nuestro caso 55, que es el que indica el número de caracteres.

<div id=”contenido”>
<?php
$textoLargo= get_the_excerpt();
$permalink = get_permalink($post->ID);
$textoCorto=limitar_palabras($textoLargo, 55,’&#91;…&#93;&nbsp;&nbsp;<a href=” ‘. $permalink . ‘ ” title=”Ir al art&iacute;culo”>M&aacute;s&raquo;</a>’ );
echo ‘<p>’ . $textoCorto . ‘</p>’;
?>
</div>

La función “limitar_palabras” la tenemos que incluir dentro del fichero functions.php que se encuentra en la carpeta wp-content/themes/”el theme que estemos usando”. Editamos el fichero y al final del mismo colocamos el siguiente código.

function limitar_palabras( $str, $num, $append_str=” ) {
$palabras = preg_split( ‘/[s]+/’, $str, -1, PREG_SPLIT_OFFSET_CAPTURE );
if( isset($palabras[$num][1]) ){
$str = substr( $str, 0, $palabras[$num][1] ) . $append_str;
}
unset( $palabras, $num );
return trim( $str );
}

Hoja de estilos CSS

Aquí os adjunto la hoja de estilos que yo he utilizado para este proceso. Es muy sencilla pero le da un toque ordenado y elegante a este panel.

#blognot {
max-width:310px;
width:310px;
margin:0px 50px 50px 50px;
padding: 10px;
background-color: #fff;
}

#ultimos {
margin:50px 50px 0px 50px;
font-size: 1.2em;
font-family: ‘Myriadlight’, sans-serif;
color: #fff;
background-color: #5486c1;
width: 310px;
padding: 10px;
font-weight:bold;
}

#titulo a {
font-size: 1.05em;
font-family: ‘Myriadlight’, sans-serif;
color: #000;
text-decoration: none;
margin-top: 10px;
font-weight:bold;
}

#imagen {
float:left;
margin-right: 10px;
max-width: 85px;
height: auto;
}

#contenido {
margin-top:-15px;
font-size: 0.9em;
max-width:310px;
width:310px;
text-align: justify;
font-family: ‘Myriadlight’, sans-serif;
}

!El resultado¡

 Post WordPress

El resultado lo podéis ver en nuestra web de  Zinovax.

Espero que este post os ayude a realizar esta tarea y no dudéis en preguntar cualquier duda que os surja, estaré encantado de ayudaros.