Share
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 ataremos todo junto.
En la parte final de WordPress Week, estamos creando un widget básico personalizado antes de finalizar dando Innovación Un poco de cirugía plástica con un esquema de color alternativo..
Todavía hay varios elementos de texto que aún no hemos diseñado y, por lo tanto, no se ven bien, como las leyendas de las imágenes., blockquote, pre, código y dirección.
Agregue lo siguiente a style.css:
p.wp-caption-text font-size: 0.8em; estilo de letra: cursiva; blockquote font-size: 0.9em; margen: 15px 0 15px 15px; relleno: 0 15px; pre font-family: "Courier New", Courier, monospace; tamaño de letra: 0.9em; margen: 10px 0 20px 0; código background-color: #efefef; color: # 000; font-family: "Courier New", Courier, monospace; tamaño de letra: 1em; margen: 0 3px; relleno: 0 3px; dirección font-size: 0.9em; Familia tipográfica: Georgia, "Times New Roman", Times, serif; altura de la línea: 1.5em; margen inferior: 15px;
Y esto en deepblue.css:
p.wp-caption-text color: # 555; blockquote border-left: 2px solid # e3e8ed;
Vamos a hacer un widget (a continuación) que mostrará las cinco últimas publicaciones del blog, con la primera imagen adjunta para la publicación que se redimensiona y se usa como la imagen de vista previa.
Está diseñado para ser utilizado en el área de widgets de la página de inicio.
El widget es esencialmente un bucle personalizado de WordPress llamado desde una función que lo convierte en un widget.
Dentro de /Cía/ carpeta crea un archivo llamado bloglist-widget.php y comience con lo siguiente:
desde el blog
Todo el bucle se está envolviendo en una nueva función. Entradas recientes del blog() (Puedes nombrarlo como quieras). En las siguientes dos líneas registramos dos objetos como 'globales', esto nos permite acceder a la base de datos de WordPress ($ wpdb) y publicar ($ post) Clases dentro del widget. A continuación incluimos el var.php expediente.
Siguiente:
Un bucle personalizado normal, con la categoría de cartera excluida, limitada a cinco publicaciones y caller_get_posts = 1 es un nuevo parámetro en WP 2.7 que establece el bucle para ignorar las publicaciones antiguas "adheridas".
Ahora se pone interesante:
Accentsconagua
puestos "DONDE post_parent = '". $ post-> ID. "'AND post_type =' attachment 'ORDER BY' post_date 'ASC LIMIT 0,1"; $ post_attachments = $ wpdb-> get_results ("$ queryattach"); if ($ post_attachments) $ image = $ post_attachments [0] -> guid; ?> El código anterior busca en la base de datos para recuperar la URL de la primera imagen adjunta de la publicación actual y la coloca dentro $ imagen. Tenga en cuenta que la imagen debe ser adjunto y no vinculado desde otro lugar.
Vea otra publicación que escribí usando este código en el blog de ThemeForest: "Image Resizing with WordPress".
; ?>/inc/thumb.php? src =<?php echo $image; ?>& w = 50 & h = 50 )
Si se encontró una imagen adjunta, se analiza a través del script TimThumb para que tenga un tamaño de 50x50 px. El título y la fecha de la publicación se muestran también.
El bucle y la función se cierran entonces:
A continuación, el widget se hace compatible con la plantilla envolviéndolo en el $ before_widget y $ after_widget Etiquetas definidas en la plantilla:
Finalmente, el register_sidebar_widget () La función se utiliza para registrar el widget en el panel. 'Publicaciones recientes del blog' será el nombre del widget utilizado dentro del panel de control.
Dentro funciones.php agregue lo siguiente para incluir el nuevo widget en la plantilla:
include (TEMPLATEPATH. "/inc/bloglist-widget.php");
En el Panel, abra Apariencia -> Widgets y suelte las 'Publicaciones recientes del blog' (No debe confundirse con las 'Publicaciones recientes' predeterminadas de WordPress) Widget en el área 'Página inferior inferior':
El estilo es bastante simple. La imagen se hace flotar hacia un lado y se modifica el tamaño y el peso del texto. Añadir esto a style.css:
ul.bloglist margen: 0; ul.bloglist li claro: ambos; tamaño de letra: 1em; línea de altura: 1.3em; estilo de lista: ninguno; margen inferior: 17px; desbordamiento: oculto; ul.bloglist li img border: none; flotador izquierdo; margen derecho: 7px; ul.bloglist li .posttitle, ul.bloglist li .postdate display: block; tamaño de letra: 0.9em; ul.bloglist li .posttitle font-weight: bold; margen superior: 2px; ul.bloglist li .postdate font-size: 0.8em; estilo de letra: cursiva; fuente-peso: normal; ul.bloglist li a: link, ul.bloglist li a: visitó display: block; relleno: 2px; desbordamiento: oculto; ul.bloglist li a: hover, ul.bloglist li a: active, ul.bloglist li a: focus text-decoration: none;
Y agrega un poco de color a los enlaces cuando se desplaza en deepblue.css:
ul.bloglist li a: link, ul.bloglist li a: visitó color: # 333; ul.bloglist li a: hover, ul.bloglist li a: active, ul.bloglist li a: focus background-color: # e3e8ed;
¡Eso es! Como has aprendido, creando un muy El widget básico es tan fácil como envolver un bucle personalizado normal dentro de una función de widget. :)
Me gustaría comenzar pidiendo disculpas por tener que arruinar esta última parte de la serie al tratar los problemas de Internet Explorer; pero es un navegador todavía muy usado y es nuestro deber acomodarnos para las personas malvadas que lo usan..
Trataremos con IE7 primero, y luego con los problemas de IE6 después de.
Dentro de /Cía/ carpeta crea una nueva carpeta llamada / css / Y dentro de ella, dos archivos: ie.css y ie6.css. Estos dos archivos se incluirán en el encabezado de una declaración condicional de IE. Agregue lo siguiente directamente antes de que los archivos jQascript de jQuery se incluyan en el Sección de header.php:
Estas declaraciones condicionales de IE aseguran que la ie.css el archivo solo se incluye en versiones de Internet Explorer inferiores a IE8; y ie6.css También se usa en versiones inferiores a IE7.
El primer problema está en la sección de comentarios, donde IE7 no parece estar tratando con los tamaños de fuente de la misma manera que en otros navegadores, y haciendo que cada comentario en un hilo sea más pequeño que el comentario principal:
Agregue lo siguiente en ie.css para establecer el tamaño de fuente en comentarios en píxeles (a diferencia de los em que se utilizan en la hoja de estilo principal):
.lista de comentarios cite, .commentlist span font-size: 14px; flotador izquierdo; derecho de relleno: 4px; .commentlist p font-size: 13px; línea de altura: 16px; .commentmetadata font-size: 13px; línea de altura: 14px; .commentlist .reply font-size: 13px;
Un problema más: el formulario de búsqueda y los encabezados en la barra lateral han decidido que prefieren una sangría de texto de 15px:
Simplemente suelta lo siguiente para forzarlo de nuevo:
#sidebar ul li * text-indent: -15px; #sidebar ul li ul * text-indent: 0;
Ahora a los problemas de IE6. Lo primero y más obvio es que el fondo de la barra de navegación no funciona, ya que es un PNG transparente:
Hay varias correcciones PNG de IE6 disponibles, usaré DD_belatedPNG. Guarde el archivo .js en el /Cía/ carpeta.
Directamente debajo de sus otras declaraciones condicionales de IE en header.php añadir: (Asegúrese de editar el nombre del archivo .js si el suyo no tiene nombre DD_belatedPNG_0.0.7a-min.js)
Dentro DD_belatedPNG.fix () Pasamos dos discusiones. Estos son simplemente los selectores de CSS de los elementos para aplicar la corrección PNG a.
añadir ie6.css para solucionar algunos problemas con el área de widgets de la página de inicio y hemos terminado:
.extras display: inline; ul.bloglist li a: hover, ul.bloglist li a: active, ul.bloglist li a: focus background: none; cursor: puntero; texto-decoración: subrayado; ul.bloglist li width: 300px; ul.twitter li.twitter-item float: left; ancho: 260px;
Todo nuestro esfuerzo de separar los estilos de color del resto de nuestro CSS fue para facilitar la creación de esquemas de colores alternativos seleccionables desde la página de opciones. En esta sección final de la serie., Innovación va bajo el cuchillo con el espacio rojo esquema:
Dentro de / estilos / carpeta, crea una nueva carpeta llamada / redspace / y adentro, copia en el search.png y bullet.gif archivos de la /azul profundo/ carpeta.
También hacer una copia de deepblue.css como redspace.css.
Guarda las siguientes tres imágenes en el / redspace / carpeta como bg.jpg, trans.png y transred.png respectivamente:
Ahora es tan simple como simplemente intercambiar los códigos de color azul con los rojos en redspace.css:
/ * Estilo rojo de innovación - redspace.css * / body background: url ("redspace / bg.jpg") repeat-x # 140a05 0 top; color: # 333; a: enlace, a: visitó color: # 941919; #head h1 color: #fff; #head h3 color: # c4acaa; #nav background: url ("redspace / trans.png") se repite; borde: 1px sólido # 5b2022; #nav ul li a: link, #nav ul li a: visitó color: # b99e94; #nav ul li.current_page_item a: link, #nav ul li.current_page_item a: visited background: url ("redspace / transred.png") se repite; color: # cdb9b2; #nav ul li a: flotar, #nav ul li a: activo, #nav ul li a: focus color: # cdb9b2; #content background-color: # f9f9f3; borde: 1px sólido # 5b2022; borde superior: ninguno; .work a: link img, .work a: visited img border: 5px solid # f2e9ea; .work a: hover img, .work a: active img, .work a: focus img border: 5px solid # 8d4846; .work a: link, .work a: visitó color: # 333; ul.twitter li.twitter-item background-color: # f6f5ed; borde: 1px sólido # eae9de; .flickr a: enlace img, .flickr a: visitó img border: 3px solid # f2e9ea; .flickr a: hover img, .flickr a: active img, .flick a: focus img border: 3px solid # 8d4846; .blogpost, .worksearch border-bottom: 1px solid # e8e3c8; h2 a: enlace, h2 a: visitó color: # 333; ul.meta li borde izquierdo: 1px sólido # e3e8ed; #sidebar ul li # search form #s background: url ("redspace / search.png") no-repetir a la derecha # f6f6ec; borde: 1px sólido # E8E3C8; #sidebar ul li # formulario de búsqueda #s: focus border: 1px solid # dad4b6; #sidebar ul li ul background-color: # f6f6ec; borde: 1px sólido # E8E3C8; #sidebar ul li ul li estilo de lista: url ("redspace / bullet.gif"); #sidebar ul li a: link, #sidebar ul li a: visitó color: # 333; p.footer color: # 554740; p.footer a: link, p.footer a: visited color: # 554740; borde inferior: 1px punteado; p.footer a: hover border-bottom: 1px solid; texto-decoración: ninguno; / * Lista de comentarios * / .commentlist li .avatar border: 2px solid # f2e9ea; .commentlist cita a: enlace, .commentlist cita a: visitó color: # 333; .commentlist .commentmetadata a: link: first-child, .commentlist .commentmetadata a: visited: first-child color: # 333; .thread-alt background-color: # F6F6EC; .thread-even background-color: # F9F9F3; .depth-1 border: 1px solid # E8E3C8; .even, .alt border-left: 1px solid # E8E3C8; input, textarea background-color: # F6F6EC; borde: 1px sólido # E8E3C8; input: focus, textarea: focus border: 1px solid # dad4b6; p.wp-caption-text color: # 555; blockquote border-left: 2px solid # e3e8ed; ul.bloglist li a: link, ul.bloglist li a: visitó color: # 333; ul.bloglist li a: hover, ul.bloglist li a: active, ul.bloglist li a: focus background-color: # f2e9ea; Desde el Panel, abra la página de opciones de Innovación y seleccione redspace.css desde la opción 'Esquema de color': la página ya ha escaneado el / estilos / carpeta y lista los archivos .css allí.
Pulsa aplicar, y hemos terminado.!
A lo largo de esta serie, ¡ha aprendido una serie de habilidades necesarias para potenciar todo tipo de sitios con el sistema WordPress! La mayoría de los archivos de Innovation se pueden reutilizar en sus nuevos proyectos para ayudar a acelerar su proceso de desarrollo.
Descargue los archivos de origen de esta parte, y hay un esquema de color adicional (más básico) disponible - SoftLight:
¿Necesita ayuda con la innovación? ¿Quieres compartir tus nuevos esquemas de color? Vaya a danharper.me/innovation/ y haga clic en el enlace Foros.
Gracias por leer y realmente espero que haya encontrado útil esta serie.!
- Dan
¿Te gusta WordPress? ¿Necesitar más? He recopilado un resumen rápido de algunos de mis recursos favoritos de WordPress.
Durante el curso del libro, construirá TRES temas de WordPress, un blog, un sitio de portafolio y un sitio general con menús y submenús. Cada tema muestra diferentes aspectos de la temática de WordPress.
Lee mas
Lo preguntaste, y nosotros respondimos! Debido a la gran demanda, estamos lanzando una nueva serie de videos que se ejecutará junto con los screencasts "Diving into PHP". Esperamos que estas dos series, vistas consecutivas, lo conviertan en un diseñador de PHP / WordPress de dinamita..
Serie de visitas
Desarrollo del tema, el códice es clara y bien escrita la documentación. Viniendo de los creadores de WordPress, no puedes equivocarte siguiendo sus instrucciones.
Visita codex
Una serie de videos de screencast sobre Diseño para WordPress. Es una serie de tres partes que abarca la descarga e instalación de WordPress en un servidor hasta un tema completo.
Serie de visitas
Tu recurso visual para todas las cosas WordPress.
Visitar sitio
Le mostraré cómo crear un tema de wordpress desde cero en estas 3 partes de la serie de tutoriales. Cubriré desde Estructuración, diseño en Photoshop, segmentación, codificación en html completamente basado en CSS, y finalmente implementación de wordpress.
Serie de visitas
Obvio, pero si necesita una lectura extra de WordPress, lea los tutoriales anteriores.!
Visitar sitio
Lo mejor de WordPress es que no limita la forma en que se muestra el contenido, sino que proporciona un "marco" de formas para hacerlo. Aún mejor, es posible cambiar la visualización de acuerdo con el contenido.
Visita tutorial
La flexibilidad que ofrece el motor de WordPress es fenomenal: ¡puede publicar cualquier cosa, desde un blog básico hasta un foro, desde un escaparate web hasta un sitio corporativo de CMS! Aquí echamos un vistazo a algunas de las grandes formas en que WordPress se ha utilizado hasta ahora.
Visita el artículo
Echamos un vistazo a cómo un popular tema de WordPress premium aprovecha las funciones avanzadas de WordPress para crear una plantilla que realmente empuja lo que WordPress es capaz de hacer.!
Visita el artículo
WordPress es bien conocido por su increíble colección de complementos gratuitos. Hay una para casi todas las necesidades que pueda imaginar, desde hacer una copia de seguridad de su instalación de WordPress hasta pedir una taza de café o combatir el spam..
Visita el artículo
Este tutorial describirá la implementación de un complemento de Wordpress a partir de cero. El complemento se conectará a una base de datos externa de OSCommerce y mostrará productos aleatorios en su sitio de Wordpress. También implementa una página de configuración para el panel de administración de Wordpress..
Visita tutorial
'WordPress Hacks' cubre el mundo que rodea a WordPress, incluidos los últimos hacks de WordPress, noticias, consejos, trucos y instrucciones del popular software de blogs de código abierto..
Visitar sitio
Un nuevo blog para publicar respuestas a preguntas de WordPress y recetas rápidas pero muy útiles sobre mi plataforma de blogs favorita..
Visitar sitio
El primer paso para el éxito es darse cuenta de que sea cual sea el problema que tenga, es probable que alguien más lo haya tenido antes. Una simple búsqueda en Google le proporcionará una solución para la mayoría de los baches en el camino que encuentra al desarrollar WordPress.
Visitar sitio
