Cómo Maquetar para WordPress

¿Cómo maquetar para WordPress?
by miguel manchego | posted in: Diseño, Wordpress| 0

No es complicado hacer una plantilla para WordPress, es mucho más facil que Joomla y muy pero muy
flexible, primero debemos descargar una plantilla sin estilos en blanco y modificar el nombre
¿Dónde consigo una plantilla en blanco?

Hay muchas pero yo les recomiendo ESTA
¿Cómo defino nombre y autor?

Buscamos style.css y al inicio aparecen los detalles del nombre, autor, pagina web, etc
¿Y ahora qué?
Ahora debemos saber para que sirve cada archivo de una plantilla básica:
 comments.php Aqui va el formulario de comentarios y se muestra la lista de comentarios por cada

post
 footer.php Aqui va el pie de página, la informacion de copyright, etc
 functions.php Si queremos agregar menus, espacios para widgets, paginadores, etc este es el
archivo clave
 header.php Aqui va todo el encabezado
 index.php Aqui va la primera página (luego les explico como definir la página de inicio)
 page.php Aqui definimos como se verán las páginas (OJO podemos crear plantillas de pagina
personalizadas por ejemplo una para el home)
 sidebar.php Aqui se definde el menu de la derecha o izquierda, se define un area para widgets
 single.php Esta es la estructura de un post
Esas son las más básicas pero suelen haber otras más como:
 archive.php Se define la lista de posts antiguos

 archives.php Suele ser un template de pagina para asignarlo a una y usarla como archivo
/obviamente va ligado al anterior)
¿Por dónde empezamos a maquetar?

Preocupemonos por maquetar solo 3 cosas el encabezado, el contenedor y el footer (pie de página), no
maquetemos aún ningún contenido. Para maquetarlo debemos usar sólo los archivos header.php,
footer.php y no nos metemos con single.php, page.php ni ningun otro ya que el inicio y cierre de los div
contenedores debe estar en header y footer.
Una vez maquetado veremos que WordPress por defecto nos muestra una lista de post recientes y eso
para un sitio web no sirve de mucho debemos crear una plantilla de página que sirva como homepage o
página de inicio, para ello duplicamos page.php y le ponemos el nombre de homepage.php (o el nombre
que se nos ocurra) y luego al inicio escribimos
1

Podemos fijar el nombre de template que se nos ocurra siempre que no este repetido, luego en
WordPress buscamos page/new page o editamos una página ya creada y le asignamos la plantilla que
hemos creado
Para que sea el homepage vamos a settings/reading y fijamos como primera página la que hemos creado
Luego podemos ir defieniendo los menus pero eso lo dejo para una segunda parte
Cómo crear una plantilla de página
personalizada
Crear un plantilla de página personalizada no podría ser más sencillo.
Crear un documento php en blanco, a continuación, agregue el siguiente
código:
< ?php
/*
Template Name: nombre plantilla
*/
?>
Para que el archivo es reconocidos como una plantilla de página
personalizada, debes comenzar con la cadena “Template Name:” en un
comentario. Después de que usted puede agregar otra información,
como:
<?php
/*
* Template Name: Mi pagina personalizada
* Description: Plantilla de pagina personalizado 1.
*/
?>
// aqui va el resto del codigo....
Despues puedes añadir todos los codigos php y html de wordpress

(inluido el “Loop”) que necesitas en este página en particular. Por
ejemplo:
<?php
/*
* Template Name: Mi pagina personalizada
* Description: Plantilla de pagina personalizado 1.
*/
?>
<?php get_header(); ?>
<div class="main-content">
<div class="container">
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>

Archivos de un tema de WordPress
Tal y como veremos, WordPress funciona por módulos, así por ejemplo para insertar
el footer en una página habremos de llamar al archivo footer.php, en caso que
exista. Y lo mismo con el header y la barra lateral del tema. Asi, un tema de
WordPress puede estar formado por muchos archivos, pero para que un tema de
WordPress funcione, sólo necesitará dos archivos: index.php y style.css. Está
claro que con sólo estos dos archivos tendremos un tema muy básico y de ir por
casa, pero a final de cuentas, será considerado por WordPress un tema válido si estos
dos archivos están bien configurados.
Con esto estamos también diciendo que para que un tema de WordPress sea
reconocido por WordPress deberá incluir sí o sí estos dos archivos index.php y
style.css. Con que falte la hoja de estilos o el archivo index.php WordPress no
reconocerá la carpeta mitema como un tema de WordPress.
Aquí vamos a desarrollar un tema más completo que nos sirva de base para
otros proyectos. Y raramente crearemos un tema de WordPress que no contenga
una cabecera, un footer y una barra lateral, por no decir un buscador interno.
Tampoco vamos aquí a desarrollar un tema complejo con Custom Post Types y
funciones avanzadas, pero sí que queremos tener lo necesario para crear un tema
decente con el que poder desarrollar proyectos más complejos.
Así, vamos a desarrollar un tema con la mayoría de archivos y carpetas que utilizo
para este tema de CreativaSfera, y serán los siguientes:
 /images. Carpeta con las imágenes del tema.

 /js. Carpeta con los archivos de JavaScript
 style.css. Hoja de estilos del tema. Obligatoria para que el tema
funcione.
 index.php. Obligatorio para que el tema funcione. Por defecto será la
página principal.
 screenshot.png. Muestra la imagen en miniatura que se verá en el
panel de adminsitración en Apariencia > Temas.
 favicon.ico. La imagen que se verá en el navegador y al guardar el
marcador.
 header.php. Módulo que contiene la cabecera del tema.
 sidebar.php. La barra lateral del tema. Nota: Si queremos más de
una barra lateral, se habrán de configurar de modo manual.
 footer.php. Módulo que contiene el pie de página del tema.
 single.php. Este archivo indica cómo se ve una entrada de blog.
 category.php. Muestra cómo se ve la página de resultados de una
categoría.
 tag.php. Muestra cómo se ve la página de resultados de una
etiqueta.
 search.php. Muestra cómo se ve la página de resultados de
búsqueda.
 template.php. Plantilla de página que a título de ejemplo llamaremos
template.
 functions.php. Archivo con las funciones de nuestro tema de

WordPress.
Como comentaba, en esta plantilla utilizaremos prácticamente los mismos archivos

que en los del tema de esta web, para que veas que no es tan complejo como de
entrada pueda parecer. A partir de aquí entrarán temas como diseño, capacidad de
crear un buen código HTML y CSS, etc, pero lo que es el tema de WordPress en sí
que vamos a desarrollar será muy parecido al de esta web. Si yo puedo, ¡tú también!
Y como todos hemos empezado alguna vez de cero y visto lo difícil que es encontrar
buenos tutoriales de cómo crear un tema de WordPress desde cero en castellano,
aquí tienes uno bien completo que te permitirá crear una web parecida a esta.<
Para no perdernos en la inmensidad y hacer fácil lo supuestamente difícil, vamos a

aplicar la técnica del divide y vencerás. Cuando empecé a desarrollar mi primer
tema de WordPress me sentí un poco abrumada por la de funciones que recoge el
Codex de WordPress, por lo que descubrí que lo mejor era ir paso a paso, sin dejarse
abrumar por tanta información. Así que iremos paso a paso y crearemos nuestro
primer tema de WordPress desde cero.
Paso 1: Creamos el archivo style.css
El primer paso va a consistir en crear dentro de la carpeta mitema el archivo
style.css. Te recomiendo utilizar un buen editor de textos para desarrollo web, en
mi caso concreto utilizo Sublime Text 2, pero puedes utilizar cualquier otro.
Dentro del archivo style.css, en la parte superior deberemos incluir esta

información:
1 /*
2 Theme Name: Mitema
3 Theme URI: http://www.mitema.com
4 Description: Mi primer tema de WP.
5 Author: Tu nombre
6 Author URI: http://www.tunombre.com
7 Version: 1.0
8 */
Fíjate que este fragmento de texto está comentado con /* ... */. Todos los datos
que ponemos aquí van a aparecer junto al tema en Apariencia > Temas. En el caso
del tema de CreativaSfera, estos son los datos que tengo:
1 /*
2 Theme Name: CreativaSfera
3 Theme URI: http://www.esandra.com
Description: Web de CreativaSfera. Todos los derechos

4
reservados.
5 Author: Sandra Guerrero Sanmarti

6 Author URI: http://sandra.esandra.com
7 Version: 4.0
8 */
En mi caso en descripción aparece “Todos los derechos reservados” ya que es un

tema desarrollado en exclusiva para esta web y que no puede ser distribuido sin mi
permiso.
A conitnuación, si vamos a utilizar HTML5, es conveniente insertar normalize.css.

Lo podemos importar o bien incrustar aquí. Puedes descargarte aquí una copia de
normalize.css.
A partir de aquí, podemos ya crear nuestro propio código de CSS.
Paso 2: Imágenes y JavaScript

Este tema lo vamos a desarrollar con HTML5, por lo que para su correcto
funcionamiento en todos los navegadores vamos a necesitar Modernizr, y en caso
que hagamos una web responsive, también necesitaremos respond.js. Modernizr es
una librería de JavaScript que detecta las capacidades de HTML5 y CSS3 del
navegador. Respond es un polyfill que sirve para que Internet Explorer sepa
interpretar los media queries de CSS3.
Así, crearemos las carpetas images y js dentro de la carpeta mitema, y en js

pondremos una copia de Modernizr y Respond.
Ten en cuenta que el screenshot.png y el favicon.ico se han de ubicar en la raíz

del tema y no dentro de la carpeta images.
Paso 3: creamos la cabecera del tema

El archivo header.php contiene la cabecera de nuestro tema. Es aquí donde
pondremos nuestro logo, menú principal y aquello que aparezca en la parte superior
de nuestro tema. Veamos el código de header.php:
01 <!DOCTYPE html>
02 <html <?php language_attributes(); ?>>
03
04 <head>
05 <meta charset= <?php bloginfo( 'charset' ); ?>">
06 <title><?php wp_title(); ?></title>
07

07
08 <?php wp_footer(); ?>
09 </body>
10 </html>
Fíjate que wrapper engloba tanto el header como el footer, si queremos un header o
un footer que se extienda toda la pantalla como es en el tema de CreativaSfera,
deberemos mover las posiciones de los div que abren y cierran wrapper.
Aquí aparece la función wp_footer, que al igual que pasaba con wp_header, no
debemos olvidarla. Estas funciones son lo que se llaman hooks y son necesarias para
que funcionen los plugins que instalemos.
En el caso de wp_footer va a ser además necesaria si queremos ver la barra de

administración de WordPress. Lo comento más que nada porque no serás el primero
que se vuelve loco buscando el por qué no aparece la barra de administración hasta
que descubre que es porque no ha llamado a este hook de WordPress.
Paso 6: creamos la página principal

Como ya he comentado, en este tutorial la página principal se va a corresponder a
los contenidos de index.php. Así, creamos este archivo tal y como indico a
continuación.
El archivo index.php
01 <?php get_header(); ?>
02
03
04 <section id="main">
05
06
07
08 </section> 

09
10 <?php get_sidebar()?>
11
12
13 <?php get_footer(); ?>
Fíjate en estas tres funciones:

get_header();
get_sidebar();
get_footer();
Deben ir siempre entre las etiquetas , o en otro caso no funcionará. Para que lo
entiendas, lo que hace get_header() es insertar los contenidos del archivo
header.php en el lugar donde se encuentra esta función. Lo mismo pasa con
get_sidebar() para los contenidos de sidebar.php y get_footer() para los
contenidos de footer.php. Es lo que comentaba de que WordPress funciona por
módulos.
Paso 6. El loop de WordPress

La potencia de WordPress reside en el loop. ¿Qué es el loop? Significa bucle en
inglés y lo que hace es mostrar las entradas de la instalación de WordPress de la
forma en que nosotros lo programemos. Es gracias al loop de WordPress que
podemos ver un listado de entradas
A continuación te muestro el código del loop que utilizo aquí en CreativaSfera:
<?php if (have_posts()) : while (have_posts()) :

01
the_post(); ?>
02
<h2><a href="<?php the_permalink(); ?>"><?php
03
the_title(); ?></a></h2>
<small>Publicado el <?php the_time('j/m/Y') ?> por

04
<?php the_author_posts_link() ? </small>
05 <?php the_excerpt(); ?>
06
07
08 <?php endwhile; else: ?>
09 <p><?php _e('No hay entradas .'); ?></p>
10 <?php endif; ?>
Vayamos paso a paso. En la primera línea tenemos:
<?php if(have_posts()) : ?><?php while(have_posts()) :

1
the_post(); ?>
Lo que aquí le estamos diciendo a WordPress es que mire si hay alguna entrada
disponible, esto lo hacemos con if(have_posts()). Fíjate en el if, significa que
sólo ejecute el resto si esta condición se cumple, esto es, que exista algún post. Lo
siguiente que le decimos es que mientras haya entradas, esto es,
while(have_posts()), que seleccione cada uno de los posts: the_post().
Una vez ha seleccionado el post, lo siguiente es que le vamos a indicar cómo ha de

mostrar los contenidos del post.
Así pues, ahora mostraremos el título de la entrada con una enlace a la misma:
<h3 class="title"><a href="<?php the_permalink() ?>"

rel="bookmark" title="Enlace permanente a <?php
1
the_title_attribute(); ?>"><?php the_title();
?></a></h3>
La función the_permalink() se encarga de encontrar el enlace permanente a la
entrada, para que podamos ir a la misma. Y la función the_title() mostrará en
pantalla el título de la entrada.
Si queremos que debajo del título se vean datos como la fecha de publicación, la
categoría, el autor, etc., se lo tendremos que especificar a continuación:

1
<?php the_author_posts_link() ?></small>
La función the_time() muestra la fecha de publicación y en el paréntesis podemos

definir el formato de la fecha entre comillas. Con la función
the_author_posts_link() estamos mostrando el nombre del autor con un enlace a
su página de autor.
Si queremos mostrar las etiquetas, lo haremos con la función the_tags(), y si lo

quisiéramos hacer es mostrar la categoría de la entrada, utilizaríamos la función
the_category().
Seguidamente, con la función the_excerpt() mostraremos el resumen de la entrada.

Si no hemos creado un resumen, se mostrará la primera parte de la entrada.
Para cerrar el loop, llamamos este código:
3 <?php endif; ?>
En el caso que no hayan entradas, se mostrará el mensaje de “No hay entradas”.
Paso 7. Añadir thumbnails al loop

Si queremos añadir thumbnails al loop como sucede en este blog, lo que haremos es
lo siguiente: vamos al archivo functions.php y añadimos este código:
1 <?php
2 //Habilitar thumbnails
3 add_theme_support('post-thumbnails');
4 set_post_thumbnail_size(150, 150, true);
5 ?>
Con este código hemos habilitado los thumbnials o imágenes destacadas de nuestras
entradas y hemos establecido un tamaño para las mismas de 150 por 150 píxeles.
Una vez hecho esto, modificaremos nuestro loop como sigue:

01
the_post(); ?>
02

03

04
<?php the_author_posts_link() ?> </small>
05 <div class="thumbnail">
06 <?php
07 if ( has_post_thumbnail() ) {
08 the_post_thumbnail();
09 }
10 ?>
11 </div>

13
16 <?php endif; ?>
Fíjate que hemos añadido:
1 <?php
4 }
5 ?>
if ( has_post_thumbnail() ) significa que compruebe si la entrada en cuestión

tiene una imagen destacada asignada y en caso afirmativo, le decimos que la muestre
con the_post_thumbnail();.
A partir de aquí, si queremos que el extracto quede en línea con la imagen

destacada, lo haremos a través del CSS.
Con esto ya hemos creado nuestra página principal, con su cabecera, zona de
contenidos con las últimas entradas, barra lateral y pie de página. Para añadir una
paginación de las entradas, te recomiendo este post sobre cómo crear la paginación
de las entradas en WordPress. Aunque esté en inglés, como es sólo código es fácil
de entender. En cualquier caso, si descargas los archivos de este tema, viene ya
incluida la paginación tal y como la muestra este post y que utilizo aquí en eSandra
(no hace falta reinventar la rueda).
Paso 8. Crear un campo de búsqueda

Vimos ya cómo crear un campo de búsqueda en WordPress. Lo vamos a adaptar
ahora a nuestro tema.
El archivo search.php
02
04 <h2>Resultados de la búsqueda</h2>

05
the_post(); ?>
06

07

08
<?php the_author_posts_link() ?> </small>
09 <div class="thumbnail">
10 <?php
13 }
14 ?>
15 </div>
17
18 <?php endwhile; ?>

19 <?php if (function_exists("pagination")) {
20 pagination($additional_loop->max_num_pages);
21 } ?>
22 <?php else: ?>
<div class="entry"><?php _e('Lo sentimos, no hay

23
resultados con este término de búsqueda.'); ?></div>
24 <?php endif; ?>
25
27
29
Fíjate que se parece mucho a index.php. Esta página es la que va a mostrar los
resultados de una búsqueda en cuestión. Así, vamos a necesitar crear un buscador.
Vamos al archivo sidebar.php y justo antes de la función que habilita la zona de
widgets en el sidebar, incluimos este código:
<form method="get" id="searchform" action="<?php

1
bloginfo('url'); ?>/">
<input type="text" placeholder="Buscar…" value="<?php

2
the_search_query(); ?>" name="s" id="s" />
<button type="submit" class="icon-only"

3
id="searchsubmit"></button>
4 </form>
Con esto tenemos un campo de búsqueda en nuestra barra lateral. Para que se
visualice como queremos, simplemente hará falta crear el código CSS necesario.
Paso 9.Configurar la página que muestra la entrada

La página del post es aquella donde vamos a ver la entrada en cuestión. Vamos a
poder definir cómo se ve, incluir o no comentarios, etc.
El archivo single.php
02
04 <article id="single">
<?php if(have_posts()) : ?><?php while(have_posts()) :

05
the_post(); ?>
06
<h2><a href="<?php the_permalink() ?>" rel="bookmark"

title="Enlace permanente a <?php
07
the_title_attribute(); ?>"><?php the_title(); ?>.
</a></h2>
<small> Publicado por <?php the_author_posts_link() ?>

08 el <?php the_time('j/m/Y') ?>. Categoría: <?php
the_category(', '); ?> </small><br>
09
10 <div class="post">
11
12 <?php the_content(); ?>

13
14 </div>
15
16
17 <?php endwhile; ?>
18
19 <?php endif; ?>
20
21 </article> 
22
25
Este código es el mismo que utilizo en CreativaSfera, con lo que es fácil de entender
con todo lo que hemos explicado ya. Faltaría añadir el poder poner comentarios en
cadena y las entradas relacionadas. En el loop utilizamos the_excerpt() para
mostrar el extracto de la entrada, mientras que aquí utilizamos la función
the_content() para que se muestre el contenido de la entrada.
Mostrar las entradas relacionadas en single.php
Para mostrar las entradas relacionadas, añadiremos este código justo después de
mostrar el contenidos de la entrada:
01 <?php
02 $tags = wp_get_post_tags($post->ID);
03 if ($tags) {
04 $tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] =

05
$individual_tag->term_id;
06 $args=array(
07 'tag__in' => $tag_ids,
08 'post__not_in' => array($post->ID),
'showposts'=>5, // Number of related posts that will

09
be shown.
10 'caller_get_posts'=>1
11 );
12 $my_query = new wp_query($args);
13 if( $my_query->have_posts() ) {
14 echo '<h3>Artículos relacionados</h3><ul>';
15 while ($my_query->have_posts()) {
16 $my_query->the_post();
17 ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark"

18 title="Permanent Link to <?php the_title_attribute();
?>"><?php the_title(); ?></a></li>
19 <?php
20 }
21 echo '</ul>';
22 }
23 wp_reset_query();
24 }
25 ?>
Explicar este código excede el abasto de este post, simplemente decir que muestra
las entradas relacionadas en base a las etiquetas de las entradas.
Habilitar y mostrar los comentarios
En una entrada va a ser necesario que podamos comentar y ver los comentarios de
los otros.
Para permitir los comentarios encadenados, añadiremos este código a nuestro

archivo functions.php:
1 // Permitir comentarios encadenados
2 function enable_threaded_comments(){
if (is_singular() AND comments_open() AND

3
(get_option('thread_comments') == 1)) {
4 wp_enqueue_script('comment-reply');
5 }
6 }
7 add_action('get_header', 'enable_threaded_comments');
Y en single.php justo antes de la línea que contiene el endwhile añadiremos:

1 <div class="comentarios">
2 <?php comments_template(); ?>
3 </div>
Es el CSS lo que visualmente nos va a permitir que se vean los comentarios

encadenados, aquí el CSS que utilizo para los comentarios en CreativaSfera:
01 .commentlist li {
02 list-style: none !important;
03 }
04
05
06 .comment-body {
07 padding: 15px;
08 }
09
10 .comment-author {
11 margin-top: 5px;
12 }
13
14 .reply, .commentmetadata {
15 font-size: 0.9em;
16 }
17
18
19 .depth-1, .depth-2, .depth-3, .depth-4 {
20 border: 1px solid #eaeaea;
21 border-radius: 4px;
22 }
23
24 .depth-1, .depth-3 {
25 background-color: #fafafa;
26 }
27
28 .depth-2, .depth-4 {
29 background-color: #fff;
30 }
31
32 .comment-author-eSandra {
33 border: 3px solid #eaeaea;
34 border-left:3px solid #fbc356;
35 }
36
37 .depth-1 {
38 margin: 20px 0;
39 }
40 /* Respuesta a comentarios*/
41
42
43 .depth-2 {
44 margin:2% 5% !important;
45 }
46
47 .depth-3 {
48 margin: 2% 7% !important;
49 }
50
51
52 .depth-4 {
53 margin:2% 5% 4% 10% !important;
54 }0
55 1
56 +
57 #comment, #author, #email {
58 border-radius: 4px;
59 border:2px solid #ccc;
60 }
Con todo esto, ya tenemos la página de la entrada como la de CreativaSfera.
Paso 10. Crear una nueva plantilla

Para crear nuestras propias plantillas y poderlas seleccionar desde el panel de
administración de WordPress cuando creemos o editemos una página, simplemente
hemos de añadir en la parte superior este código:
1 <?php
2 /*Template Name: Nombre_de_la_plantilla */
3 ?>
A partir de aquí, le daremos el formato que queramos.
Paso 11: Página de categorías y etiquetas

Las páginas de category.php y etiquetas.php son prácticamente iguales.
Simplemente añadiremos antes del loop:
01 <?php $post = $posts[0]; ?>
02 <?php if (is_category()) { ?>
03 <?php } elseif( is_tag() ) { ?>
<h2>Etiqueta &amp;#8216;<?php
04
single_tag_title(); ?>&amp;#8217;</h2>
05 <?php } elseif (is_day()) { ?>
06 <h2>Archivo para <?php the_time('F jS Y'); ?>:</h2>

<?php } elseif (is_month()) { ?><h2>Archivo para <?php
07
the_time('F, Y'); ?>:</h2>
08 <?php } elseif (is_year()) { ?>
09 <h2>Archivo para <?php the_time('Y'); ?>:</h2>
10 <?php /} elseif (is_author()) { ?>
11 <h2>Archivo del autor </h2>
<?php } elseif (isset($_GET['paged'])

12 &amp;&amp; !empty($_GET['paged'])) {
?>
13 <h2>Archivos del blog</h2>
14 <?php } ?>
Haremos lo mismo si queremos crear una página con nuestros archivos.

Cómo Maquetar para WordPress

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Cómo Maquetar para WordPress

Enviado por

Direitos autorais:

Formatos disponíveis

¿Cómo maquetar para WordPress?

by miguel manchego | posted in: Diseño, Wordpress| 0

¿Dónde consigo una plantilla en blanco?

¿Cómo defino nombre y autor?

 comments.php Aqui va el formulario de comentarios y se muestra la lista de comentarios por cada

 archive.php Se define la lista de posts antiguos

¿Por dónde empezamos a maquetar?

1

Despues puedes añadir todos los codigos php y html de wordpress

<?php get_sidebar(); ?>

<?php get_footer(); ?>

 /images. Carpeta con las imágenes del tema.

 functions.php. Archivo con las funciones de nuestro tema de

Como comentaba, en esta plantilla utilizaremos prácticamente los mismos archivos

Para no perdernos en la inmensidad y hacer fácil lo supuestamente difícil, vamos a

Dentro del archivo style.css, en la parte superior deberemos incluir esta

2 Theme Name: Mitema

3 Theme URI: http://www.mitema.com

4 Description: Mi primer tema de WP.

6 Author URI: http://www.tunombre.com

2 Theme Name: CreativaSfera

3 Theme URI: http://www.esandra.com

Description: Web de CreativaSfera. Todos los derechos

5 Author: Sandra Guerrero Sanmarti

En mi caso en descripción aparece “Todos los derechos reservados” ya que es un

A conitnuación, si vamos a utilizar HTML5, es conveniente insertar normalize.css.

A partir de aquí, podemos ya crear nuestro propio código de CSS.

Paso 2: Imágenes y JavaScript

Así, crearemos las carpetas images y js dentro de la carpeta mitema, y en js

Ten en cuenta que el screenshot.png y el favicon.ico se han de ubicar en la raíz

Paso 3: creamos la cabecera del tema

02 <html <?php language_attributes(); ?>>

05 <meta charset= <?php bloginfo( 'charset' ); ?>">

06 <title><?php wp_title(); ?></title>

<!-- Definir viewport para dispositivos web móviles --

<meta name="viewport" content="width=device-width,

<link rel="shortcut icon" href="<?php echo

<link rel="stylesheet" media="all" href="<?php

<link rel="pingback" href="<?php bloginfo(

16 <?php wp_head(); ?>

<h1><a href="<?php echo get_option('home'); ?>"><?php

<?php wp_nav_menu( array('menu' => 'Main', 'container'

En el caso de estar diseñando un tema responsive, especificaremos el viewport. Para

link rel="shortcut icon" href="<?php echo

Otro modo de acceder a mitema será:

<script src="<?php bloginfo('stylesheet_directory');

Aquí hemos accedido al directorio de mitema con

Quizás aquí te estés preguntando por que incluir el body en header.php y no en

<h1><a href="<?php echo get_option('home'); ?>"><?php

Insertar el menú de navegación

Fíjate que en la etiqueta header hemos escrito esta línea:

<?php wp_nav_menu( array('menu' => 'Main', 'container'

02 // Registro del menú de WordPress

09 'main' => 'Main'

A partir de aquí, simplemente habremos de ir a Apariencia > Menús y crear nuestro

Si quieres crear un menú de navegación complejo, que sea responsive, incluya

Paso 4: creamos la barra lateral

06 'name' => 'Main Sidebar',

07 'before_widget' => '<hr>',

08 'after_widget' => '',

09 'before_title' => '<h3>',

10 'after_title' => '</h3>',

4 <?php endif; ?>

<p>&amp;copy; <?php bloginfo('name'); ?>,