Construye una sección de publicaciones destacadas para WordPress

() translation by (you can also view the original English article)

WordPress es impresionante. ¡Aún más sorprendente es el hecho de que se puede personalizar para potenciar cualquier tipo de sitio que te guste! Aquí, aprenderemos cómo crear una sección destacada y de "publicaciones más recientes", que es un "imprescindible" para todos los buenos temas de Noticias / Revistas. También repasaremos el uso de los 'Campos personalizados' a su máximo potencial.

Introducción

Este tutorial cubre el proceso de creación de la página de índice de una revista / tema de noticias para WordPress. Las principales características de esta página serán:

Publicaciones destacadas.
Últimas publicaciones.
Uso de variables de PHP para una fácil personalización de lo anterior para los usuarios de su tema que no están familiarizados con PHP / WordPress.
Recuperar una imagen de publicación de la sección "Campos personalizados" de una publicación.

Paso 1 - Preparación

Desde su directorio de instalación de WordPress, navegue por ‘wp-content / themes’ y cree una nueva carpeta. Dígalo como desee (estoy usando 'WordPress Times'). A continuación, crea 5 nuevos archivos:

index.php
header.php
footer.php
style.css

Este es el diseño básico que buscaremos:

Así que un documento de 940px, con dos secciones:
Contenido a 600px y barra lateral a 300px, dejando un margen de 40px entre los dos.

Paso 2 - Encabezado

Abra su archivo header.php e inserte lo siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
  <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<meta name="description" content="<?php bloginfo('description'); ?>" />
	<meta name="keywords" content="<?php bloginfo('name'); ?>" />
	<meta name="author" content="<?php bloginfo('name'); ?>" />
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection" />
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<title><?php bloginfo('name'); ?> <?php wp_title('-'); ?></title>
    <?php wp_head(); ?>
</head>
<body>
<div class="container">
    	<h1 id="header"><?php bloginfo('name'); ?></h1>

Ejecutando esto, primero definimos el DOCType como XHTML 1.0 Transitional. En la sección de encabezado, luego establecemos todas las etiquetas meta, hojas de estilo y títulos de páginas para recuperar de WordPress; e incluimos nuestros 3 archivos de JavaScript.
Finalmente, abrimos una división de "contenedor" e insertamos el nombre de nuestro blog como título de encabezado.

Paso 3 - 'Noticias de última hora' Mensajes

Incluiremos un número de publicaciones definido por el usuario en la categoría "Noticias de última hora" en la parte superior de nuestra página. Abra index.php y escriba lo siguiente, no se preocupe, lo explicaré todo a continuación:

<?php get_header(); ?>
<div id="content">

<?php global $more;
$more = 0; ?>

<?php

/* ID of your 'Breaking News' Category */
$breaking_cat = "83"; 

/* How many posts from above category to display? Default = 3 */
$breaking_num = "3"; 

/* Number of recent posts to display under the Breaking News */
$latest_num = "4";
 
/* IDs of any cats you dont want to include in Recent posts.
Start each ID with a 'minus' symbol Seperate by a comma.
EG: $latest_ignore = "7,-6,-8,-1";
Posts from the 'Breaking' category are automatically excluded. */
$latest_ignore = "-1"; 
?>

	<!-- Show x Posts from Breaking News -->
	<?php query_posts('showposts='.$breaking_num.'&cat='.$breaking_cat.''); 
	  while (have_posts()) : the_post();
	?>

    <div class="breaking">

    	<img src="<?php echo get_post_meta($post->ID, 'thumbnail',true) ?>" alt="Post Image" class="postimg" />
    	<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
    	<p class="datetime"><?php the_time('l, F j, Y G:i'); ?></p>
    	<?php the_content('Continue...'); ?>
    	<div class="postmeta">
            <p><?php the_category(', '); ?> - <a href="<?php the_permalink() ?>#commenting" title="View Comments">
	    <span class="comm"><?php comments_number('0 Comments','1 Comment','% Comments'); ?></span></a></p>
        </div><!--/postmeta-->
        
    </div><!--/breaking-->

    <?php endwhile; ?>

3.1 - Apertura

1	<?php get_header(); ?>
2	<div id="content">

La primera línea es una función simple de PHP de WordPress para incluir primero nuestro archivo header.php. Debajo de eso, abrimos nuestro div ‘Contenido’ para envolver todas las publicaciones juntas. He incluido un comentario HTML al cierre de cada etiqueta div que indica qué div se está cerrando. Le recomiendo que comience a hacer esto en sus propios proyectos si aún no lo ha hecho, ya que ayuda a mantener su código lo más organizado posible.

3.2 - La etiqueta $more

1	<?php global $more;
2	$more = 0; ?>

Este código nos permite incluir solo parte de cada publicación hasta donde el autor ha incluido la etiqueta <--more-->: esto impide que todo el texto de las publicaciones largas se muestre en la página de inicio.

3.3 - ID de categoría

$breaking_cat = "83"; 
$breaking_num = "3"; 

$latest_num = "4"; 
$latest_ignore = "-1";

Con el fin de facilitar la personalización del tema, incluimos cualquier opción aquí. Cada línea se comenta a más. Hacemos esto para que si otra persona usa su tema, en lugar de tener que rastrear todo su código para encontrar dónde colocar sus identificadores de categoría, todos sean fácilmente accesibles en la parte superior del archivo. A lo largo de este tutorial, usaremos estas variables en el bucle de WordPress.

3.4 - ¿Tenemos publicaciones?

1	<?php query_posts('showposts='.$breaking_num.'&cat='.$breaking_cat.'');
2	while (have_posts()) : the_post();
3	?>

Esta es una variación del bucle de WordPress que genera nuestras publicaciones de la base de datos. Como puede ver, estamos usando las dos primeras variables de la sección anterior. Las variables se sustituyen con la cadena asociada a ellas. Por ejemplo, utilizando el código predeterminado, la línea se convertirá automáticamente en:

1	query_posts('showposts=3&cat=83')

Luego, la segunda línea dice: si tenemos las publicaciones, insértelas en la página en el formato que se describe a continuación.

3.5 - Publicar contenido

<img src="<?php echo get_post_meta($post->ID, 'thumbnail',true) ?>" alt="Post Image" class="postimg" />

<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

<p class="datetime"><?php the_time('l, F j, Y G:i'); ?></p>

<?php the_content('Continue...'); ?>

Esto no es tan aterrador como parece, confía en mí.

Imagen: en la vista previa de nuestra página de inicio, verás que cada publicación tiene su propia imagen. Esto se incluye en la sección "Campos personalizados" de WordPress al escribir una publicación. Simplemente configure la "tecla" en miniatura y luego inserte el enlace a la imagen:

El código básicamente dice "Toma los datos del campo personalizado de la publicación llamado‘ miniatura "y pégalos en una etiqueta img".
Título: Esto inserta el título de nuestra publicación como un enlace entre las etiquetas h2. the_permalink () obtiene el enlace de la publicación, y the_title () recupera el título. Bastante simple, ¿eh?
Fecha y hora: aquí obtenemos la hora en que se realizó la publicación, en el formato de: l, F j, YG: i, o en inglés: día, fecha, año (por ejemplo, sábado 2 de agosto de 2008 14: 27).
Contenido: recupera el contenido de la publicación hasta el (gracias al código que incluimos anteriormente). "Continuar ..." es el texto que se muestra al final de la publicación. Personaliza esto como quieras.

3.6 - Post Meta

<div class="postmeta">

<p><?php the_category(', '); ?> - <a href="<?php the_permalink() ?>#commenting" title="View Comments">

<span class="comm"><?php comments_number('0 Comments','1 Comment','% Comments'); ?></span></a></p>

</div>

Esto recupera la (s) categoría (es) de la cual es la publicación. Si hay más de uno, estarán separados por comas. Se recupera un enlace a la sección de comentarios y la cantidad de comentarios en el artículo.

1	</div> <!-- /breaking -->
2	<?php endwhile; ?>

Esto simplemente cierra el "div.breaking" en el que estaba nuestra publicación; y luego cierra el bucle una vez hecho.

Paso 4 - Últimas Publicaciones

Debajo de nuestras tres publicaciones de "Noticias de última hora", incluiremos un número especificado por el usuario de las últimas publicaciones, mientras ignoramos cualquier publicación de la categoría "Rompiendo", y cualquiera de las otras categorías especificadas por el usuario que ignoraremos. Agregaremos lo siguiente al final de nuestro código actual:

<!-- Show x Latest Posts -->
<?php query_posts('showposts='.$latest_num.'&cat=-'.$breaking_cat.','.$latest_ignore.''); ?>
<?php while (have_posts()) : the_post(); ?>


<div class="recent">

    <img src="<?php echo get_post_meta($post->ID, 'thumbnail',true) ?>" alt="Post Image" class="postimg-s" />
    <h3><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
    <p class="datetime"><?php the_time('l, F j, Y G:i'); ?></p>
    <div class="postmeta">
        <p><?php the_category(', '); ?> - <a href="<?php the_permalink() ?>#commenting" title="View Comments">
	<span class="comm"><?php comments_number('0 Comments','1 Comment','% Comments'); ?></span></a></p>
    </div>

</div>


<?php endwhile; ?>

4.1 - El Loop

showposts = '. $ latest_num.' - Le dice al bucle que solo muestre el número de publicaciones recientes que el usuario ha especificado en la variable ‘$ latest_num’.
cat = - '. $ breaking_cat.', '. $ latest_ignore.' - Esto le indica al bucle que ignore (observe el símbolo "menos" que requerimos que el usuario use en las variables) las publicaciones que se encuentran en la categoría "Rompiendo" para no duplicar ninguna publicación; y también para ignorar publicaciones de cualquiera de las categorías que el usuario especifica en la variable ‘$ latest_ignore’.

El resto se explica por sí mismo y es lo mismo que la función Noticias de última hora. Algunas diferencias son la falta de la sección de "contenido" de cada publicación, y también la imagen de la publicación recibe la clase de "postimg-s" en su lugar. Esto nos permitirá requerir solo una imagen en miniatura, que luego reduciremos el tamaño de nuestro CSS de 200x200 a 50x50.

4.2 - Cerrar la página

Para finalizar la página actual, necesitamos cerrar el contenido div # e incluir nuestro pie de página:

1	</div><!--/content-->
2	<?php get_footer(); ?>

4.3 - Footer.php

En este archivo, simplemente cierre las etiquetas #contenedor, cuerpo y html:

1	</div><!--/container-->
2	</body>
3	</html>

Paso 5 - Estilo CSS

En este momento, si has creado algunas publicaciones, tu diseño debería tener este aspecto:

Bastante feo, eh? Bueno, no por mucho tiempo.

5.1 - Necesidades

Abre tu archivo style.css y pégalo en el siguiente código:

1	/*------------------------------------------------------------------------
2	Theme Name: WordPress Times
3	Theme URI: http://www.vivawp.com/
4	Description: A tutorial for NETTUTS.com by Dan Harper
5	Version: 1.00
6	Author: Dan Harper
7	Author URI: http://danharper.me
8	------------------------------------------------------------------------*/

Esto se requiere en la parte superior de este archivo, ya que le brinda al Administrador de temas en WordPress cierta información sobre su tema. Rellena las secciones que desees.

5.2 - Estilo

A continuación se muestra todo el código CSS utilizado para diseñar el documento. Está documentado a continuación.

* {margin:0;padding:0;}

body {
background-color: #faf9f5;
color: #3d3d3d;
font-size:75%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#container {
width: 940px;
margin: 15px auto;
}

h1, h2, h3, h4, h5, h6 {
font-family: Georgia, "Times New Roman", Times, serif;
}

/* BLUEPRINT CSS TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;height:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.5em;}
li ul, li ol {margin:0 1.5em;}
ul, ol {margin:0 1.5em 1.5em 1.5em;}
/* /BLUEPRINT CSS TYPOGRAPHY */

h1#header {
margin-bottom: 20px;
}

#content {
width: 600px;
float: left;
}

.breaking, .recent {
padding: 10px;
border: 1px solid #3d3d3d;
margin-bottom: 15px;
}

.postimg {
float: right;
width: 200px;
height: 200px;
padding-bottom: 10px;
}

.postimg-s {
float: right;
width: 50px;
height: 50px;
padding-bottom: 10px;
}

.breaking h2 {
font-size: 2.5em;
line-height: 1em;
margin-bottom: 0px;
}

    .breaking h2 a, .recent h3 a {
    text-decoration: none;
    color: #3d3d3d;
    }
    
    .breaking h2 a:hover, .recent h3 a:hover {
    text-decoration: underline;
    }

p.datetime {
font-style: italic;
font-size: 0.9em;
}

/* POST META */
.postmeta {
margin: -10px;
padding: 4px;
background-color: #dedbd1;
clear: both;
}

    .postmeta p {
    margin: 0;
    padding-left: 6px;
    text-transform: uppercase;
    font-weight: bold;
    }
    
    .postmeta span.comm {
    font-weight: normal;
    }
    
    .postmeta a:link, .postmeta a:visited {
    color: #3d3d3d;
    text-decoration: none;
    }
    
    .postmeta a:hover, .postmeta a:active {
    text-decoration: underline;
    }

#sidebar {
width: 300px;
margin-left: 620px;
}

5.3 - Examinar el CSS

* - Elimina márgenes no deseados y rellenos de todos los elementos que los navegadores se insertan.
cuerpo - Diseño de página básico de colores y fuentes.
#container - Establece el ancho de la página a 940px. Margen de 15px en la parte superior e inferior, y lo centra en la ventana.
h1, h2, h3, h4, h5, h6 - Encabezando fuentes a Georgia, Times New Roman, Times o cualquier fuente serif.
Entre las etiquetas de comentarios de Blueprint: estilo tipográfico básico de Blueprint CSS Framework. Ahorra un montón de problemas al hacer que el texto se vea bien.

h1 # header: agrega un poco de separación del nombre del blog y del resto del documento.
#contenido: todo nuestro contenido está envuelto en 600px a la izquierda. El espacio restante se puede utilizar como una barra lateral.
.breaking, .recent - Incluye las publicaciones de última hora y de última hora en una caja con un relleno de 10px. Brecha de 15px entre cada una.
.postimg - Formatea la imagen de la publicación para romper artículos. Tamaño de imagen limitado a 200px y flotado a la derecha.
.postimg-s - Igual que el anterior, pero para los últimos artículos y la imagen se redimensiona a 50px.
.breaking h2 - Hace que el título de Rompiendo artículos sea más pequeño, sin margen inferior.
.breaking h2 a, .recent h3 a - Estilo básico para títulos de artículos, ocultando el estilo de enlace predeterminado.
.breaking h2 a: hover, .recent h3 a: hover - Agrega un subrayado al enlace del título cuando se desplaza sobre este para mostrarle al usuario que es en realidad un enlace.
p.datetime: cadena de fecha y hora para artículos ligeramente más pequeños y en cursiva.

.postmeta: crea un cuadro para incluir los detalles del Meta del post (categorías y comentarios). el margen -10px asegura que llena la totalidad de la casilla de mensajes.
.postmeta p - El texto en postmeta div se hace en mayúsculas y en negrita.
.postmeta span.comm: elimina el estilo en negrita del texto "x Comentarios".
.postmeta a - Estilo de enlace para eliminar el color predeterminado del enlace.
.postmeta a: hover - Agrega subrayado a los enlaces en el hover.

#sidebar: crea un área para una barra lateral en el lado derecho de la página.

La página ahora se verá así. ¡Mucho más limpio!

Conclusión

Felicidades Ha creado con éxito los conceptos básicos de la página principal de un tema de noticias para WordPress, completo con un área de publicación destacada, un elemento imprescindible cuando se trata de temas de noticias. También puede adelantarse a la competencia con sus sencillas opciones de personalización utilizando las variables de PHP.

Esté atento al lanzamiento de vivaWP, una nueva familia de temas Premium WordPress que se lanzará a mediados de agosto. Nuestro primer tema, CocoaNews, comparte algunos de los códigos básicos que se muestran en este tutorial.