Como crear un tema de WordPress, sesión 3

Publicado el 16 febrero 2010 por dach

Un tema es un conjunto de archivos de PHP, imágenes y CSS contenidos en una carpeta, esta carpeta esta a dentro de /wp_content/themes/ y tiene el nombre del tema. WordPress viene con dos temas instalados classic y default.

El tema se compone de dos partes, del diseño y del contenido que genera wordpress, por lo tanto el contenido y el diseño son distintos.

Para que trabajen juntos es necesario colocar el código de wordpress, en sitios específicos dentro del diseño. Por esta razón un tema esta dividido en diferentes archivos.

Si vemos dentro del tema default ó classic veremos que hay varios archivos, estos archivos son necesarios para que un tema funciones correctamente, aunque se puede crear un tema con solo index.php y style.css, pero no es conveniente, el tema seria demasiado inestable y si quisieras instalar algún plugin no seria compatible.

Los archivos principales que componen el tema son.

index.php
footer.php
header.php
sidebar.php
single.php
comments.php
archive.php
search.php
404.php
page.php
functions.php
style.css
screenshot.jpg (es la imagen previa del tema)
/images (la carpeta que contiene todas las imágenes del diseño del tema)
Sigue leyendo →

Publicado en CSS, wordpress | Etiquetado , , | 3 comentarios

Crear un tema de wordpress en un minuto

Publicado el 9 febrero 2010 por dach

Hay varias herramientas que te permite hacer temas de wordpress y una de ellas es Elastic un pluging que te permite crear temas de wordpress (hasta en un minuto) sin tener que salir del area de administracion.

Visto en el blog de Miguel Chang

Publicado en wordpress | Etiquetado , | 2 comentarios

Como crear un tema de WordPress, sesión 2

Publicado el 9 febrero 2010 por dach

Ahora que ya tenemos nuestro diseño. Empecemos con la siguiente sesión.

Este diseño es para un tema de WordPress en esta sesión veremos únicamente el diseño del tema, el tema se llamara SimpleCH. Empezaremos haciendo nuestro diseño en html, después le pondremos un mejor aspecto con imágenes y también añadiremos nuestra plantilla de css.

Es momento de abrir nuestro editor de html y el primer archivo que crearemos es el index.html

Lo primero que debemos escribir es el DOCTYPE en nuestro caso usaremos el XHTML 1.0 estricto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Después de esto insertamos el código de XHML indicando su namespace asociado y el metadato para definir la codificación de caracteres del documento.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>SimpleCH</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
</body>
</html>

Una de las cosas me gusta de Geany es que tiene varias plantillas para el documento que deseas usar y en la plantilla de html te inserta todo el modelo del archivo xhtml y por lo tanto,no tengo que estar recordando el DOCTYPE y su namespace.

Otra cosa que debemos de agregar en nuestro archivo index.html es el enlace de nuestra hoja de estilo CSS dentro de la etiqueta <head> </head>

<head>
	<title>SimpleCH</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" href="style.css"  type="text/css" />
</head>

Nuestro archivo de style.css debería tener una estructura o modelo más o menos así.
Sigue leyendo →

Publicado en CSS, Diseño, Gimp, Recursos, wordpress | Etiquetado , , | 3 comentarios

Sitios que te ayudaran a elegir la tiografia para tu css

Publicado el 9 febrero 2010 por dach

Cuando diseñas una pagina web una de las interrogantes que te debes de hacer es ¿Que tipo grafia voy a usar? Alguna idea ¿no? bueno para fortuna de muchos (como yo que no me se decidir) existen varias herramientas web que nos ayudan a escoger la tipografía a usar,

cssTypeset

csstypeset es una herramienta web que permite crear el código CSS de un texto.

typeTester

typetester

Es un sitio que te ayuda a analizar tamaños, espacios em blanco, sangrías, colores y demás detalles.

csstxt


Es una herramienta web que ilustra las diferentes maneras que puede editar su estilo de tipografia.

Publicado en CSS, Recursos | Etiquetado | Deja un comentario