Share
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..
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:
Desde su directorio de instalación de WordPress, navegue por 'wp-content / themes' y cree una nueva carpeta. Nómbrelo como desee (estoy usando 'WordPress Times'). A continuación, crea 5 nuevos archivos:
Este es el diseño básico que vamos a buscar:
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.
Abre tu header.php archivo, e inserte lo siguiente:
><?php bloginfo('name'); ?> <?php wp_title('-'); ?> 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 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é a continuación:
?> )
"title ="">
- #commenting "title =" Ver comentarios ">
3.1 - Apertura
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 $ más
Este código nos permite incluir solo parte de cada publicación hasta donde el autor ha incluido el <--more--> etiqueta: 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?
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:
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
"title ="">
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 usando la sección "Campos personalizados" de WordPress al escribir una publicación. Simplemente establece la 'clave' en miniatura Luego inserte el enlace a la imagen:
El código esencialmente dice "Tome los datos del campo personalizado de la publicación llamado 'miniatura' y péguelos 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 el título() recupera el titulo. Bastante simple, eh?
- Fecha y hora - Aquí, obtenemos la hora en que se hizo la publicación, en el formato de: l, F j, Y G: 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
- #commenting "title =" Ver comentarios ">
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..
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:
"title ="">
- #commenting "title =" Ver comentarios ">
4.1 - El Loop
- showposts = '. $ latest_num.' - Le dice al bucle que solo muestre la cantidad 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 están en la categoría 'Rompiendo' para no duplicar ninguna publicación; y también para ignorar las 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 'contenido' sección de cada publicación, y también la imagen de la publicación recibe la clase de 'postimg-s' en lugar. Esto nos permitirá requerir solo una imagen en miniatura, que luego ajustaremos en 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:
4.3 - Footer.php
En este archivo, simplemente cierre las etiquetas #contenedor, cuerpo y html:
En este momento, si has creado algunas publicaciones, tu diseño debería tener este aspecto:
Bastante feo, eh? Bueno no por mucho mas tiempo.
Abre tu style.css archivar y pegar en el siguiente código:
/ * -------------------------------------------------- ------------------------ Nombre del tema: WordPress Times URI del tema: http://www.vivawp.com/ Descripción: Un tutorial para NETTUTS.com por Dan Harper Versión: 1.00 Autor: Dan Harper URI del autor: http://danharper.me ------------------------------ ------------------------------------------ * /
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 quieras.
A continuación se muestra todo el código CSS utilizado para diseñar el documento. Esta documentado abajo.
* margen: 0; relleno: 0; cuerpo fondo-color: # faf9f5; color: # 3d3d3d; tamaño de letra: 75%; Familia tipográfica: "Helvetica Neue", Helvetica, Arial, sans-serif; #container width: 940px; margen: 15px auto; h1, h2, h3, h4, h5, h6 font-family: Georgia, "Times New Roman", Times, serif; / * TIPOGRAFÍA CSS DE BLUEPRINT * / h1, h2, h3, h4, h5, font-weight: normal; color: # 111; h1 font-size: 3em; 0.5em; h2 tamaño fuente: 2em; margen inferior: 0.75em; h3 tamaño fuente: 1.5em; altura de línea: 1; margen inferior: 1em; h4 tamaño fuente: 1.2em ; line-height: 1.25; margin-bottom: 1.25em; height: 1.25em; h5 font-size: 1em; font-weight: negrita; margin-bottom: 1.5em; h6 font-size: 1em; font-weight: negrita; h1 img, h2 img, h3 img, h4 img, h5 img, h6 img margen: 0; p margen: 0 0 1.5em; li ul, li ol margen: 0 1.5 em; ul, ol margin: 0 1.5em 1.5em 1.5em; / * / BLUEPRINT CSS TYPOGRAPHY * / h1 # header margin-bottom: 20px; #content width: 600px; flotador izquierdo; .breaking, .recent padding: 10px; frontera: 1px sólido # 3d3d3d; margen inferior: 15px; .postimg float: derecha; ancho: 200px; altura: 200px; parte inferior de relleno: 10px; .postimg-s float: derecha; ancho: 50px; altura: 50px; parte inferior de relleno: 10px; .breaking h2 font-size: 2.5em; línea-altura: 1em; margen inferior: 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; tamaño de letra: 0.9em; / * POST META * / .postmeta margen: -10px; relleno: 4px; color de fondo: # dedbd1; Limpia los dos; .postmeta p margen: 0; relleno-izquierda: 6px; transformación de texto: mayúsculas; font-weight: negrita; .postmeta span.comm font-weight: normal; .postmeta a: link, .postmeta a: visitó color: # 3d3d3d; texto-decoración: ninguno; .postmeta a: hover, .postmeta a: active text-decoration: underline; #sidebar ancho: 300px; margen izquierdo: 620px;
La página ahora se verá así. Mucho mas limpio!
Felicidades Ha creado con éxito los conceptos básicos para la portada 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 mantenerse por delante de 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..
Accentsconagua
?> )
