header.php
Ahora vamos a abrir nuestro editor, en lo personal uso Dreamweaver y creamos un nuevo archivo llamado header.php dentro de la carpeta del theme.
Para empezar podremos lo que corresponde a nuestro documento.
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head profile="http://gmpg.org/xfn/11">
En seguida viene lo que sería parte del header de nuestro theme. Donde mandamos a llamar a nuestra CSS, el Feed y lo demás que corresponde a nuestro sitio, el generador que es wordpress etc... si desean agregar javascript's, css , favicon este es el lugar donde deben de hacerlo (generalmente).
-
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
-
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
-
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
-
<!-- 4 stats -->
-
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
-
<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'); ?>" />
-
<?php wp_head(); ?>
-
</head>
Es muy importante que antes de que se cierre el tag de head pongamos lo que es wp_head(); ya que wordpress lo identifica.
Ahora como nuestro header en el site nunca cambiará (al menos en este caso) aprovecharé para ponerlo de una vez en el archivo header.php.
-
<body>
-
<!-- INICIA SITIO -->
-
<div id="wrapper">
-
<!-- INICIA HEADER -->
-
<div id="header">
Hasta aquí hemos puesto lo que corresponde al contenedor de nuestro theme y lo que sería el header, continuaremos con el menú.
-
<!-- INICIA MENU -->
-
<div id="menu">
-
<ul id="menuList">
-
<li class="<?php if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { ?>page_item current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>">
-
<?php _e('Home'); ?>
-
</a></li>
-
<?php wp_list_pages('sort_column=menu_order&depth=-1&title_li='); ?>
-
<li>
-
<?php wp_loginout(); ?>
-
</li>
-
<?php wp_register(); ?>
-
</ul>
-
</div>
-
<!-- TERMINA MENU -->
Primero definimos nuestra lista y todo eso, pero lo interesante viene en el primer item de la lista, ¿qué es todo eso?...
Lo que hicimos en este caso es decir que cuando estemos en home, en los archivos, dentro de un post lo que hará será darle la clase page_item current_page_item al home, esto para que quede simulando el estado activo de la tab.
Después continuamos con wp_list_pages(); los parámetros que ocupamos tienen el siguiente siginificado.
- sort_column=menu_order : Se ordenan dependiendo el orden que tiene en su panel de administración, cuando escriben una página nueva en la parte de la derecha aparece el orden por el que quieren que aparezca dicha página.
- depth=-1 : Esto hará que solo muestre las páginas del nivel superior, quiere decir que no nos mostrará a los "hijos" de ninguna de las páginas.
- title_li= : Esto es para que no nos muestre el título "pages" ó el que deseemos para nuestro listado de páginas, generalmente se añade algo cuando las ponemos en la sidebar.
Seguimos con el título, WordPress nos permite poner una pequeña descripción de nuestro sitio quedaría de la siguiente forma.
-
<h1><a href="<?php echo get_settings('home'); ?>/">
-
<?php bloginfo('name'); ?>
-
</a><span class="description">
-
<?php bloginfo('description'); ?>
-
</span></h1>
-
</div>
-
<!-- TERMINA HEADER -->
el h1 es el header principal de nuestro sitio a este le añadimos un link al home y lo que viene siendo php bloginfo('name'); al instalar WordPress se les pidió que pusieran un nombre para su sitio, aquí es donde lo muestra, lo que sigue es la descripción del mismo, esto lo pueden modificar en sus opciónes generales.
Ahora si salven su archivo ^^.
16 comentarios para Crear un theme para WordPress I
eres fantastico bro!!
gran utilidad la de este tuto!!
ahorita no tengo mucho tiempo, pero yo era de los principales interesados en este tuto, gracias ifx luego lo checho
muy bueno el tutorial amigo!!!
REALMENTE EXELENTE!
yo nose si soy yo el idiota pero porque no aprende a escribir el que hizo esta entrada??
es imposible leerlo..
Chau
No se por que pero no puedo descargarme los archivos.. me dice que la pagina no existe =(
He visto que han cambiado la estructura de los permalink por eso no funcionan los enlaces
http://infectedfx.net/layout-xhtml-css-i/2006/
pon el año despues del nombre del post y funcionan
Muy bueno excelente introducción ahora me podre a practicar….gracias men…..
hola mira quiero aserte una consulta con respecto al index.php, nesesito saver en el siguiente codigo:
como deveria ponerlo, para que enves de que salga las fraces “entradas anteriores” y “sigientes entradas”, salga los nuemeros de las paginas, es desir una navegacion igual a la de gratisjuegos.org, como veras hay solo sale el numero de paginas, espero tu respuesta
¡Muchas gracias!
Tiene serios problemas de redacción este articulo. Aunque de cualquier forma es muy educativo; gracias.
Muchas gracias!
Los enlaces a las partes anteriores estan caidos, podria solucionarlo?? Mil gracias!!
Los archivos no funcionan.
No funcionan los enlaces de:
- Layout XTML & CSS I
- Layout XHTML & CSS II
ARREGLEN LAS ENTRADAS ¬¬