Crear un theme para WordPress I Publicada el Martes 31 de Octubre de 2006 a las 3:54 am por Infected-FX
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 ^^.
Eden
Octubre 31, 2006 a las 6:34 pm
eres fantastico bro!!
gran utilidad la de este tuto!!
HostMx Alon
Octubre 31, 2006 a las 10:44 pm
ahorita no tengo mucho tiempo, pero yo era de los principales interesados en este tuto, gracias ifx luego lo checho :D
lucas
Mayo 24, 2007 a las 1:08 pm
muy bueno el tutorial amigo!!!
lucas
Agosto 2, 2007 a las 10:12 am
REALMENTE EXELENTE!
..::N3r1::..
Noviembre 28, 2007 a las 11:28 am
yo nose si soy yo el idiota pero porque no aprende a escribir el que hizo esta entrada??
es imposible leerlo..
Chau
Motif
Septiembre 17, 2008 a las 10:48 pm
No se por que pero no puedo descargarme los archivos.. me dice que la pagina no existe =(