Contenido

Cronicas de la creación de un theme (IV)

5 Feb

+ 27

Indice

Bueno, ya tenemos creado el esqueleto de nuestra web, con un poco de imaginación y aplicando las pautas que pensamos en los pasos anteriores, conseguiremos montar un diseño a nuestro gusto, solo nos falta un par de remates como el colocar dentro de las secciones de la web el contenido que deseemos.

Vamos a coger el theme por defecto y vamos a colocarlo en nuestra estructura (va a quedar muy feo mientras no pongamos colores ni imagenes, pero nos servirá para tener montada la base).

Ficheros:

  • header.php
  • index.php
  • footer.php
  • sidebar.php

Por ahora vamos a montar estos ficheros, con los datos que tenemos.

header.php

En el fichero header.php colocaremos lo referente a la cabecera, y asi tendremos el código separado de forma que a la hora de realizar modificaciones tendremos el código más separado y facil de entender.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head profile="http://gmpg.org/xfn/11"> 
<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'); ?>" /> <!-- leave this for 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> 
<body> 
    <div id="page"> 
        <div id="header"> 
        <h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1> 
        <div class="description"><?php bloginfo('description'); ?></div> 
    </div> 
<hr /> 

Esto podría ser un ejemplo claro de un header.php, en el cual hacemos las llamadas necesarias a los meta,el charset, y demás tags del head. Tambien hay que destacar la llamada a la funcion bloginfo, funcion implementada por WordPress que devuelven una serie de datos dependiendo de nuestro busqueda. En nuestro caso montaremos un sistema que nos linkara al pusar sobre el nombre de nuestro blog al index del blog. Además mostraremos debajo la descripción que tenemos en configurada para nuestro blog.

index.php

Fichero más importante del theme, es el más importante por que es el que se lanza al cargar la página y se encarga de llamar a los demás componentes de theme. Este fichero además de ser el que muestra la portada de nuestro blog puede ser montado de tal forma que el mismo sirva para mostrar entradas concretas prescindiendo del single.php.

 
<?php get_header(); ?> 
<?php get_sidebar(); ?> 
    <div id="content" class="narrowcolumn"> 
    <?php if (have_posts()) : ?> 
        
        <?php while (have_posts()) : the_post(); ?> 
                
            <div class="post" id="post-<?php the_ID(); ?>"> 
                <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2> 
                <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>               
                <div class="entry"> 
                    <?php the_content('Read the rest of this entry &raquo;'); ?> 
                </div>       
                <p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p> 
            </div>   
        <?php endwhile; ?> 
        <div class="navigation"> 
            <div class="alignleft"><?php next_posts_link('&laquo; Previous Entries') ?></div> 
            <div class="alignright"><?php previous_posts_link('Next Entries &raquo;') ?></div> 
        </div> 
        
    <?php else : ?> 
        <h2 class="center">Not Found</h2> 
        <p class="center">Sorry, but you are looking for something that isn't here.</p> 
        <?php include (TEMPLATEPATH . "/searchform.php"); ?> 
    <?php endif; ?> 
    </div> 
<?php get_footer(); ?> 

De este fichero hay muchas cosas que vale la pena comentar, ya que es la piedra angular del theme.

 
  

<?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>

Estas funciones implementadas en el WordPress, se encargan de llamar las secciones de la web, los nombre son bastantes explicitos asi que no hace falta decir para que siver cada uno, pero ha de quedar claro que ha de seguir un orden lógico ya que no sería correcto usar por el sidebar antes que el header, hay que pensar que el theme al final va a llegar al usuario como un html con todas las secciones en un fichero.

 
  <?php if (have_posts()) : ?> 
    <?php while (have_posts()) : the_post(); ?> 
  

Otra función realmente importante, se encarga de devolvernos el número correcto de posts a mostrar, ella se encarga de mostrar el número de posts que el usuario desea mostrar por página y controla que si llegamos al final de los mensajes muestre solo los que seamos. Incluso evita que salgan los no públicados. De esta forma mostramos posts mientras haya posts, tambien llamado Loop de WordPress.

Una vez dentro de este loop, solo podemos hacer una cosa, mostrar los posts. Y para ello usamos los siguiente tags. 

the_content(‘Read the rest of this entry &raquo;’); nos muestra el contenido del post, el texto que pasamos como parametro es el texto que queremos colocar en lugar del Read More…

Post tags

No voy a entrar en parametros que aceptan todas las funciones, por que en la página de WordPress estan bastante bien comentados (lo único :D).

  • Hola Andrés, sigo tu web desde hace unas semanas y la verdad es que me gusta mucho, y me encanta aprender cosas nuevas sobre wordpress. Estoy empezando con una web (todavia no la publique) y estoy con el theme Regulus, y el caso es que no sé como se cambia la etiqueta que tienes arriba junto con la de «mis themes», «mis plugins» … la que pone página principal, queria cambiarle el nombre y luego añadir alguna mas, ¿me podrías decir donde cambiarle el nombre? muchas gracias.

  • Buenas Collin, muchas gracias por visitarme 😀

    A ver para solucionar eso es muy simple, en el fichero header.php busca la linea (esta por el final)

  • Justo lo que andaba buscando amigo, gracias por la ayuda que nos brindas, me parece muy interesante WordPress y este manual me sera de mucha ayuda para que pueda diseñar un sitio de consolas 🙂

  • Pues ya está, muchas gracias. La verdad es que me resultó difícil encontrarlo porque en el código aparece «» y yo esperaba encontrarme algo como «» que es como luego se muestra en el blog. Yo ahora lo cambié por «Inicio» , lo malo es que me aparece en minúsculas todo, no deja poner mayúsculas, pero bueno 🙂 gracias otra vez, un saludo.

  • Pues ya está, muchas gracias. La verdad es que me resultó difícil encontrarlo porque en el código aparecey yo esperaba encontrarme algo comoque es como luego se muestra en el blog. Yo ahora lo cambié por “Inicio” , lo malo es que me aparece en minúsculas todo, no deja poner mayúsculas, pero bueno 🙂 gracias otra vez, un saludo.

  • Pues ya con ésto creo que puedo empezar a crear uno o dos themes, espero terminarlos pronto y ya te comentaré en cuanto estén disponibles.
    Muchas gracias por toda ésta información, de verdad que me ha servido de mucho.

    Suerte en todos tus proyectos 😉

  • Hola, mira estuve haciendo esto y la verdad es que tengo un problema y es que no me aparencen las tildes no las ñ, ya he checado y segun esto todo va bien, de casualidad no sabras a que de debe?

    Gracias

  • Y como le haria si quisiera hacer un sidebar para el index y otro diferente para los posts?

    Salu2

  • Facil emarts.

    En WordPress tenemos una función para distinguir del index a una entrada en concreto.
    Con is_single() podemos controlar que mostrar cada caso.

    Por ejemplo:

    if (is_single()) {
    ENTRADA
    } else {
    INDEX
    }

    Espero que te haya servido.

  • Felicidades por la información que ofreces. Ese es el espíritu que hace que la Red y el Software libre crezca y crezca.

    Y una preguntilla de novato.

    Estoy comenzando en wordpress y uso el tema dafault. Quiero colocar un jpg como cabecera pero aún indicandolo en en index no me aparece. O cuando lo consigo y le cambio el color de fondo me desaparece mi jpg.

    gracias por anticipado por tu ayuda.

  • #10 ¿Has probado a indicarlo en el fichero header.php?, suele ser el lugar donde incluye la cabecera.

  • Necesito colocar un header diferente, único para el Index, es decir, que el encabezado de la portada sea diferente a los demás.

    Gracias por la orientación que me puedan dar

    Saludos!

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.