Como Mostrar Tus Mas Recientes Publicaciones De WordPress En Una Pagina Estacionaria

wordpress150x150Esta es la primera publicación, que tiene como objetivo hacer un tutorial. Estos días e estado trabajando en el código de “HTML” haciendo cambios a la visualización del sitio para que sea mas presentable. El primer problema que tuve es el siguiente:

Esta sitio web esta compuesto de paginas estacionarias. Cuando instale WordPress mi blog quedo en otro directorio. Yo quiero que la pagina principal tenga las mas recientes publicaciones que esta en el blog. Para esto tuve que hacer un poco de investigación y buscar en el Internet como hacerlo. De ahí pensé que esto podría ayudarle alguien que también este aventurando con WordPress y paginas web.

Condiciones

Para que este tutorial trabaje tienes que tener WordPress instalado y funcionando. También que el servidor donde estas alojando tu sitio web soporte PHP. Creo que tienes conocimiento básico de PHP, XHTML y un poco de CSS. Para poder editar el código vas a necesitar un editor de texto. Si no tienes un editor recomiendo que uses Notepad ++ el cual lo puedes descargar aquí.

Comencemos

Para empezar tienes que abrir el expediente en el que deseas poner las actualizaciones de WordPress. Para este ejemplo voy a utilizar el expediente de inicio de mi pagina web (index.php). El código básico de esta pagina es así:

?Descargar download.txt
1
2
3
4
5
6
7
8
9
10
11
 <!DOCTYPE html>
	<html>
		<head>
			<title>Inicio</title>
			<meta charset="utf-8">
		</head>
		<body>
			<h1>Este es mi primer titulo</h1>
			<p>Este es mi primer párrafo</p>
		</body>
	</html>

Vamos agregar el siguiente código en la etiqueta head (comienza en la linea 3), este código le dice al servidor que incluya la pagina wp_blog-header.php. Es importante que esta linea sea agregada o no podremos ver las publicaciones recientes.

?Descargar download.txt
1
<?php require('Tudirectorio/wp-blog-header.php');?>


Nota: “Tudirectorio” seria el directorio donde tienes instalados WordPress en este ejemplo seria blog/wp-blog-header.php.

Después de poner el código nuestra pagina se mirara de la siguiente manera:

?Descargar download.txt
1
2
3
4
5
6
7
8
9
10
11
12
 <!DOCTYPE html>
	<html>
		<head>
			<title>Inicio</title>
			<?php require('blog/wp-blog-header.php');?>
			<meta charset="utf-8">
		</head>
		<body>
			<h1>Este es mi primer titulo</h1>
			<p>Este es mi primer párrafo</p>
		</body>
	</html>

Hora en el área que deseas poner las mas recientes actualizaciones insertar lo siguiente:

?Descargar download.txt
1
2
3
4
5
6
7
8
9
10
11
<?php 
	$args = array( 'numberposts' => 6, 'post_status'=>"publish",'post_type'=>"post",'orderby'=>"post_date");
	$postslist = get_posts( $args );
 
	foreach ($postslist as $post) : setup_postdata($post); ?>
	<div class="events">
			<h2><strong><?php the_date(); ?></strong></h2>
			<p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
			<?php the_content(); ?></p> 
	</div>
<?php endforeach; ?>

La linea numero 2 manifiesta las selecciones de cuantas publicaciones deseas mostrar, el estado de la publicación y el orden en el que quieres mostrarlos.

Linea numero 3 tomamos las publicaciones y les asignamos a un variable llamado $postlists.

De la linea 5 a la 11 le indicamos cuales publicaciones tomar. Después ponemos cada actualización en un div. También se a incluido la fecha de la publicación y el contenido.

En mi ejemplo este código fue puesto en la etiqueta body que seria donde esta el contenido de nuestra pagina. Ahora nuestra pagina se mira algo así:

?Descargar download.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 <!DOCTYPE html>
	<html>
		<head>
			<title>Inicio</title>
			<?php require('blog/wp-blog-header.php');?>
			<meta charset="utf-8">
		</head>
		<body>
			<h1>Este es mi primer titulo</h1>
			<p>Este es mi primer párrafo</p>
			<?php 
				$args = array( 'numberposts' => 6, 'post_status'=>"publish",'post_type'=>"post",'orderby'=>"post_date");
				$postslist = get_posts( $args );
 
				foreach ($postslist as $post) : setup_postdata($post); ?>
					<div class="events">
						<h2><strong><?php the_date(); ?></strong></h2>
						<p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
						<?php the_content(); ?></p> 
					</div>
			<?php endforeach; ?>
		</body>
	</html>

El siguiente código se agrega en expediente donde se encuentran los controles de visualización CSS (en este ejemplo seria el expediente styles.css). Con este código le ordenamos al servidor que pongan margenes a 10px y el paddin de arriba a 3px (los espacios entre publicaciones).

?Descargar download.txt
1
2
3
4
5
6
7
8
	.events 
	{
		margin: 10px 0;
	}
	.events p
	{
		padding-top: 3px;
	}

Espero que esta publicación sea de su agrado, si te gusto dejárnoslo saber dejándonos un comentario. Nos vemos para la próxima.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*