A lo largo de esta serie de seis partes para principiantes a maestros, usaremos las funciones avanzadas de WordPress para crear nuestro propio portafolio y blog, completo con una página de opciones, múltiples estilos y soporte para las nuevas funciones de WordPress 2.7. Hoy estamos creando el diseño de nuestra página de inicio..

También disponible en esta serie:

1. WordPress: Principiante a Master, Parte 1
2. WordPress: Principiante a Master, Parte 2
3. WordPress: Principiante a Master, Parte 3
4. WordPress: Principiante a Master, Parte 4
5. WordPress: Principiante a Master, Parte 5
6. WordPress: Principiante a Master, Parte 6

Saltar a una sección

• Empezando
•   - contorno
• Header.php
•   -
•   - Esquemas de color y hojas de estilo
•   - div # head
•   - div # nav
• Estilo de la cabecera
•   - Estilos generales
•   - Estilo de encabezado
•   - Estilo de navegación
•   - Algun color
• Publicaciones de la cartera
• La página de inicio
•   - Terapia de belleza
• Area Widgetizada
• Pie de página
• Resumen

Empezando

En esta parte, crearemos la portada de nuestro portafolio, utilizaremos nuestra página de opciones y manejaremos campos personalizados en las publicaciones. Antes de comenzar, cree los siguientes archivos y carpetas dentro de / wp-content / themes /innovación/ carpeta que creaste anteriormente:

• /Cía/
  • /cache/
• header.php
• footer.php
• barra lateral.php

También guarde este script TimThumb PHP Image Resizer como pulgar.php dentro de /Cía/ carpeta. TimThumb es un script de cambio de tamaño de imagen PHP "inteligente" por Darren Hoyt.

contorno

A continuación se muestra una descripción general de cómo se verá nuestra página principal:

Nuestro header.php archivo contendrá el #cabeza y #nav secciones - incluyendo las etiquetas de apertura para #envolver, #contenido y .contentwrap.

footer.php entonces contendrá el #pie de página sección, y las etiquetas de cierre para #contenido y la última sección sobre ella (esto podría ser .contentwrap, .extraswrap o #sidebar dependiendo de la página).

los .contentwrap área tendrá los dos últimos mensajes de nuestra categoría de cartera, y .extraswrap Será un área lista para widgets en la que podemos colocar widgets desde el Tablero..

Header.php

En la parte superior de la header.php archivo, incluye el siguiente código.

  >   

Como puede ver, este es principalmente el código que incluiría en la parte superior de cualquier documento xHTML Strict, solo hemos reemplazado algunas secciones con una función de WordPress que generará el código apropiado según el idioma en que se ejecute WordPress

Al final del código está nuestra etiqueta de título que, nuevamente, está usando las funciones de WordPress para obtener el nombre de la página actual y el nombre del sitio.

Esquemas de color y hojas de estilo

A continuación, incluimos nuestros style.css archivo usando el WordPress bloginfo (); función. Es importante usar esta función para incluir la hoja de estilo principal, en lugar de ingresar directamente la ruta del archivo.

Luego está el código para capturar la hoja de estilo de esquema de color correcta seleccionada de las Opciones que creamos en la parte anterior:

La siguiente tabla explica lo que hace el código anterior:

Verificamos si nuestra opción de combinación de colores ($ ts_colourscheme) existe desde la página de opciones, y que se configuró correctamente (es decir, no se dejó como "Elija un esquema de color:"). Si la opción no está configurada correctamente o no existe, se utilizará por defecto el deepblue.css esquema de color; de lo contrario, utilizamos la hoja de estilo que se seleccionó en la página de opciones.

Continuando, incluimos nuestras fuentes RSS y Atom, y abrimos la etiqueta del cuerpo:

#cabeza

El siguiente código es mucho más directo que la sección anterior. Como se muestra en la imagen anterior, utilizaremos más funciones de WordPress para recuperar información de la base de datos de WordPress:

los bloginfo ('nombre'); y bloginfo ('descripción'); Las funciones recuperan la configuración relevante de la página 'Configuración general' en el panel de WordPress:

#nav

Recuperar una lista de páginas de la base de datos también es muy fácil. Usamos el wp_list_pages (); función. Tenga en cuenta que también incluimos una title_li = argumentacion Esto es para evitar que la función cree un elemento de lista adicional llamado 'Navegación:' antes de enumerar las páginas.

También hemos abierto los divs y envoltorios relevantes para la siguiente sección.

Estilo de la cabecera

Si vas a instalar WordPress ahora, se verá algo como esto:

Recuerda que incluiremos cualquier estilo de color en el interior. deepblue.css para que podamos crear fácilmente diferentes combinaciones de colores más tarde. Todo lo demás entrará style.css.

Estilos generales

Lo primero que siempre incluyo en mi hoja de estilo es un restablecimiento del navegador, seguido de algunos estilos básicos para párrafos, listas, encabezados y enlaces..

 * padding: 0; margin: 0; body font-family: Arial, Helvetica, sans-serif;  p font-size: 0.9em; altura de la línea: 1.5em; margen inferior: 10px;  ul, ol margen: 0 0 10px 10px;  li font-size: 0.9em; altura de la línea: 1.5em; list-style-position: interior; margen inferior: 3px;  img border: none;  h1, h2, h3, h4, h5, h6 font-weight: normal;  h3, h4 margen: 15px 0 2px 0;  h4, h5, h6 font-weight: negrita;  a: enlace, a: visitó text-decoration: none;  a: hover, a: active, a: focus text-decoration: underline; esquema: ninguno; 

Esto debería ser muy sencillo para cualquier persona con conocimientos básicos de HTML y CSS. Hemos establecido los márgenes y el relleno para todos los elementos (*) en 0 para anular los estilos predeterminados que cada navegador aplica a una página. Luego incluimos nuevos márgenes, tamaños de fuente y alturas de línea para los elementos principales para aumentar la legibilidad entre ellos..

Estilo de encabezado

A continuación, creamos un poco de un diseño:

#wrap margen: 0 auto; ancho: 980px;  #head margen: 25px 0; desbordamiento: oculto;  #head h1 float: left; margen izquierdo: 20px;  #head h3 font-family: Georgia, "Times New Roman", Times, serif; tamaño de letra: 0.8em; estilo de letra: cursiva; flotar derecho; altura de la línea: 1.7em; text-align: right; margen: 0 20px 0 0; ancho: 500px; 

los #envolver El elemento es el contenedor que contiene todo. Estamos utilizando un ancho de 980px (esto es lo más alto que podemos ir y al mismo tiempo tenemos capacidad para resoluciones de 1024x768). Y hemos utilizado margen: 0 auto; para centrarlo en el navegador.

El título y las frases (h1 y h3 respectivamente) se flotan a ambos lados del contenedor.

#cabeza tiene una propiedad de desbordamiento: oculto; para que sostenga correctamente los elementos flotados. Normalmente, un div no envolverá a ningún niño flotante (como lo hemos hecho aquí). Vea la imagen a continuación como un ejemplo (el amarillo representa el margen asignado a #cabeza):

Estilo de navegación

 #nav border-top-left-radius: 15px; borde superior-derecho-radio: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; borde inferior: ninguno; Limpia los dos; relleno: 0 20px; ancho: 939px; 

Eche un vistazo a las imágenes de vista previa en la parte superior del tutorial, y notará que estamos utilizando esquinas redondeadas en la parte superior de la sección de navegación. En lugar de lograr este efecto a través de un montón de imágenes y etiquetas HTML adicionales, vamos a utilizar el nuevo CSS3 radio del borde propiedad para dar un radio de 15px a ambas esquinas superiores.

Sin embargo, los navegadores actuales todavía no son compatibles con esta propiedad, pero los navegadores basados ​​en Mozilla y Webkit tienen sus propios -moz-border-radius y -webkit-border-radius propiedades que también podemos usar para hacer que las esquinas redondeadas funcionen en Firefox 3, Safari y Chrome. Internet Explorer y Opera simplemente usarán un borde cuadrado hasta que admitan radio del borde.

Nota: el uso de estas propiedades específicas del proveedor en su CSS detendrá la validación de su hoja de estilo. Pero como solo serán estos los que detendrán la validación, a quién le importa?

Continuando, diseñamos los elementos de la lista en la navegación para mostrar en línea (horizontalmente):

 #nav ul margen: 0;  #nav ul li display: inline; tamaño de letra: 1em; línea de altura: 1.3em; margen derecho: 25px;  #nav ul li a: link, #nav ul li a: visitó display: -moz-inline-stack; pantalla: bloque en línea; font-weight: negrita; texto-decoración: ninguno; relleno: 20px 10px;  #nav ul li a: flotar, #nav ul li a: activo, #nav ul li a: foco esquema: ninguno; 

Tenga en cuenta que estamos usando pantalla: -moz-inline-stack; en los enlaces. Esto es solo para Firefox 2 y versiones anteriores, que (por alguna razón) no son compatibles pantalla: bloque en línea; - incluso IE6 lo soporta!
Estamos dando mucho relleno a los enlaces para aumentar el área en la que se puede hacer clic (en lugar de rellenar el li en lugar).

Ahora eche un vistazo a la página en su navegador y debería verse así. Mejor, pero ahora necesita algo de color.!

Algun color

En primer lugar, guarde la siguiente imagen en el / styles / deepblue / carpeta como bg.jpg.

Y esta imagen en la misma carpeta que trans.png (en realidad es una imagen semitransparente oscura de 1px).

Ahora abierto /styles/deepblue.css, y escriba:

 / * Estilo predeterminado de la innovación - deepblue.css * / body background: url ("deepblue / bg.jpg") no se repite # 101010 superior centro fijo; color: # 333;  a: enlace, a: visitó color: # 5c6e80;  #head h1 color: #eee;  #head h3 color: #ddd;  #nav background: url ("deepblue / trans.png") se repite; borde: 1px sólido # 111;  #nav ul li a: link, #nav ul li a: visitó color: #ddd;  #nav ul li.current_page_item a: link, #nav ul li.current_page_item a: visited background: url ("deepblue / trans.png") se repite; color: #eee;  #nav ul li a: flotar, #nav ul li a: activo, #nav ul li a: focus color: #eee; 

Hemos establecido la imagen de fondo grande en el cuerpo (y la hemos arreglado para que no se mueva cuando se desplaza), la imagen transparente se utiliza como fondo para la navegación y también configuramos algunos colores de fuente.
Vista previa, y ahora tendrás algo como:

Publicaciones de la cartera

Antes de crear la parte superior de nuestra página de inicio donde se encuentran nuestros dos últimos artículos de la Cartera, necesitaremos algunas publicaciones para probar. El tema utilizará algunos 'Campos personalizados' para mostrar información adicional para los elementos de la cartera:

• fecha (la fecha en que se completó el trabajo)
• cliente (para quién era el trabajo)
• enlazar (a una versión en vivo de tu trabajo)
• avance (URL de una imagen de ancho de 930px de su trabajo)
• vista previa completa (versión más grande del trabajo, se mostrará en una caja de luz)

Cree una nueva publicación de blog, con el Título siendo el nombre del proyecto (como en la imagen de arriba), e ingrese algo de contenido sobre el trabajo. Ponga la publicación en su categoría 'Portafolio'.

Antes de guardar la publicación, desplácese hasta la sección 'Campos personalizados':

Aquí, ingrese cada uno de los campos personalizados provistos anteriormente. Solo el avance Se requiere campo. Puedes usar las siguientes imágenes para tu avance campo si aún no tiene uno propio (haga clic con el botón derecho y guardar):

Una vez que haya completado los campos, puede publicar la publicación. Repita este proceso hasta que tenga al menos dos publicaciones (preferiblemente más).

La página de inicio

Ahora que tenemos todos los requisitos previos, finalmente podemos codificar la parte principal de la página de inicio. En page-home.php, escriba lo siguiente:

 
Últimos proyectos
  
query_posts (); Es una función de WordPress para obtener publicaciones específicas de la base de datos. Como puede ver en los argumentos de la función (las partes entre paréntesis), le estamos diciendo a WordPress que solo obtenga 2 publicaciones de la categoría Portafolio ($ ts_portfolio_cat está obteniendo la información de la página de opciones que creamos).
 
Con mientras();, Hemos empezado el 'WordPress Loop'. Aquí podemos decirle a WordPress qué parte de cada publicación necesitamos.
 
 $ contador ++; $ preview = get_post_meta ($ post-> ID, 'preview', verdadero); $ date = get_post_meta ($ post-> ID, 'date', true); ?>
 
En la primera línea, hemos agregado uno al contador (lo usaremos en breve). $ contador ++; es mano corta para escribir $ contador = $ contador + 1;
 
Entonces usamos el get_post_meta (); funciones para obtener nuestros campos personalizados 'vista previa' y 'fecha' de la publicación, que se colocan en el $ vista previa y $ fecha variables respectivamente.
 
 ">
 
Arriba hemos creado un div con una trabajo clase para el elemento de la cartera que se mantendrá en. Pero tenga en cuenta que también estamos comprobando que si nuestra $ contador es igual a 2 (lo que significa que este es el segundo elemento de la cartera), agregamos otra clase al div nombrado último. Esta clase será útil cuando estilicemos esta sección..
 
A continuación, mostramos la imagen de vista previa:
 
 
 
Si existe una imagen de vista previa, entonces ... 
 
 ">   
 
los the_permalink (); La función se utiliza para enviar el enlace a la publicación actual..
 
Luego, sacamos la imagen de vista previa. Pero También lo estamos ejecutando a través del redimensionador TimThumb para cambiar el tamaño de la imagen a 450 píxeles de ancho y 210 píxeles de altura (de la imagen de 930 píxeles que realmente es). Note como usamos bloginfo ('template_directory'); para asegurarnos de que WordPress esté revisando en nuestra carpeta de temas (es un equivalente de la TEMPLATEPATH Usamos en la parte anterior de la serie..
 
Ahora solo tenemos que mostrar la línea de texto que va debajo de la imagen (el título y la fecha):
 
 
 ">   ($ fecha)";?> 
 
Esto es relativamente sencillo. Usamos the_permalink (); de nuevo para obtener el enlace para la publicación actual. el título(); Se usa para obtener el título de la publicación actual..
 
Luego verificamos si se ingresó un campo personalizado de 'fecha' (en la $ fecha variable) para este post. Si es así, lo sacamos.