SummArg | Cursos y recursos para webmasters

Clase 3: ¡Comenzamos a maquetar!

En la clase anterior estuvimos observando como se compone cada plantilla de WordPress, así que en vez de maquetar nuestra página de inicio en una sola página como si fuera un HTML común, arrancaremos utilizando 4 archivos PHP y la plantilla de estilos CSS por separado.

Dentro de nuestro directorio /wp-content/themes/, creamos un directorio llamado /themetaller/. Dentro de /themetaller/ colocaremos un subdirectorio /scripts/, que en principio estará vacío, y otro llamado /images/ en donde colocamos las imágenes recortadas en la clase anterior.

Creamos los siguientes archivos en nuestro directorio /themetaller/: index.php, footer.php, header.php, sidebar.php y style.css.

Y respetando la división de establecimos la clase pasada, comenzamos a crear el código del header.php. Vamos a agregar en el encabezado, entre etiquetas <head> el siguiente código:

<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title>
	<?php if ( is_home() ) { ?><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?><?php } ?>
	<?php if ( is_author() ) { ?><?php bloginfo('name'); ?> | Archivo por autor<?php } ?>
	<?php if ( is_single() ) { ?><?php wp_title(''); ?> | <?php wp_title(''); ?><?php } ?>
	<?php if ( is_page() ) { ?><?php bloginfo('name'); ?> | <?php wp_title(''); ?><?php } ?>
	<?php if ( is_category() ) { ?><?php bloginfo('name'); ?> | Archivo por Categoria | <?php single_cat_title(); ?><?php } ?>
	<?php if ( is_month() ) { ?><?php bloginfo('name'); ?> | Archivo por Mes | <?php the_time('F'); ?><?php } ?>
	<?php if ( is_search() ) { ?><?php bloginfo('name'); ?> | Resultados<?php } ?>
	<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php bloginfo('name'); ?> | Archivo por Tag | <?php  single_tag_title("", true); } } ?>
</title>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>

El código para el encabezado contiene información sobre el DOCTYPE, HTML, los meta, el charset, se vincula la plantilla de estilos, se indican los links de los feeds y del pingback, se colocan varios condicionales para el title (dependiendo de la sección que se visualiza, mostrará un título diferente) y finalmente la función wp_head(), que es la función que utiliza la plataforma para cargar scripts desde plugins y otra información adicional.

Ahora si, maquetamos lo que vimos en la imagen de la clase pasada:

El código HTML será el siguiente:

<body>
<div id="content-wrapper">
	<div id="header">
		<div id="logo">
			<img src="http://localhost/wp-content/themes/themetaller/images/logo.png" />
		</div><!-- end of logo -->
		<ul id="menu-top">
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
			<li><a href="#">Link 4</a></li>
		</ul>
		<ul id="menu">
			<li><a href="#">Inicio</a></li>
			<li><a href="#">Página estática</a></li>
			<li><a href="#">Categoría</a></li>
			<li><a href="#">Contáctenos</a></li>
		</ul>
	</div> <!-- end of logo -->

Para esta primera etapa no utilizaremos funciones WordPress, por lo que la ruta al logo es una ruta absoluta y los links de nuestros menús totalmente inventados, a modo de relleno para que nuestro primer trabajo posea algo de contenido y podamos ver la forma que toma. Para las imágenes de relleno utilizaremos el servicio de lorempixum.com, que nos permite tomar imágenes al azar indicando en el link el tamaño de las mismas.

El index.php comprendía esta sección:

Al inicio de nuestro archivo vamos a “llamar” al header.php utilizando la función get_header(), y al final del mismo debemos insertar el archivo sidebar.php (con get_sidebar() ) y el archivo footer.php (con get_footer() ).

<?php get_header(); ?>
<div id="nivoslider">
<img src="http://lorempixum.com/g/920/310" />
</div><!-- end of nivoslider -->
<div id="featured">
	<div class="item">
		<h3>Quiere saber mas?</h3>
		<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
	</div><!-- end of item" -->
		<div class="item">
		<h3>Quiere saber mas?</h3>
		<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
	</div><!-- end of item" -->
		<div class="item">
		<h3>Quiere saber mas?</h3>
		<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
	</div><!-- end of item" -->
</div><!-- end of featured -->
<div class="news">
	<img src="http://lorempixum.com/g/290/130" />
	<h2>Un post que se destaca...</h2>
	<p>Sed pharetra risus eu nisi molestie aliquet. Donec ipsum eros, sodales ut convallis ac, posuere vitae orci. <a href="#">Leer más</a></p>
</div>
<div class="news">
	<img src="http://lorempixum.com/g/290/130" />
	<h2>Un post que se destaca...</h2>
	<p>Sed pharetra risus eu nisi molestie aliquet. Donec ipsum eros, sodales ut convallis ac, posuere vitae orci. <a href="#">Leer más</a></p>
</div>
<?php get_sidebar(); get_footer(); ?>

El código de sidebar.php:

<div id="sidebar">
<h3>Ultimas noticias</h3>
<ul>
	<li>Una noticia en la sidebar<br />Por admin</li>
	<li>Una noticia en la sidebar<br />Por admin</li>
	<li>Una noticia en la sidebar<br />Por admin</li>
	<li>Una noticia en la sidebar<br />Por admin</li>
</ul>
</div><!-- end of sidebar -->

Y el de footer.php, que llevará la función wp_footer(), similar a wp_header().

<div id="footer">
	<ul class="social">
		<li><a href="#"><img src="http://localhost/wp-content/themes/themetaller/images/skype.png" /></a></li>
		<li><a href="#"><img src="http://localhost/wp-content/themes/themetaller/images/facebook.png" /></a></li>
		<li><a href="#"><img src="http://localhost/wp-content/themes/themetaller/images/twitter.png" /></a></li>
		<li><a href="#"><img src="http://localhost/wp-content/themes/themetaller/images/rss.png" /></a></li>
	</ul>
</div><!-- end of footer -->
</div><!-- end of content-wrapper -->
<?php wp_footer(); ?>
</body>
</html>

Hasta aquí el resultado será una página con datos sin nada de estilo. Vale aclarar que todos los <div> que abrimos, llevan su correspondiente </div> de cierre con un comentario: <!– end of nombre-div –>. Esta práctica nos ayuda a tener mayor control sobre nuestras etiquetas, puesto que un sitio web puede volverse realmente complejo a medida que añadimos elementos. Cuantos mas comentarios tengamos, mas facil será para nosotros luego encontrar errores cuando surjan. Además recomendamos en todo momento hacer uso de la indentación, separando los bloques de código según corresponda.

Si colocamos themeTaller como el theme por defecto de nuestro WordPress en localhost ya deberíamos ver todos los datos e imágenes, uno debajo del otro. Para que realmente tome forma tenemos que añadir el estilo, al cual debemos colocarle los datos del theme y un reset de estilo.

/*Theme Name: themeTaller
Theme URI: www.summarg.com
Author: Nekko
Description: themeTaller
*/
/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Ahora si, procedemos a colocar el color de fondo de la página <body>, establecer las dimensiones, el color de fondo y los bordes redondeados de content-wrapper. Para este punto indicamos que nos ayudamos con aplicaciones online como css3generator.com para generar el código CSS3 correspondiente a cada motor de navegador.

body {
background-color: #2d435a;
font-family: arial, sans serif;
font-size:12px;
}
#content-wrapper {
width:960px;
margin: 10px auto;
background-color:white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
overflow:hidden;
display:block;
}

Escribimos el código para los elementos del header:

#header {
padding: 5px 20px;
}
#logo img {
float:left;
width: 261px;
height: 53px;
padding: 10px 0;
}
ul#menu-top {
height:25px;
width:220px;
margin-top:0;
float:right;
}
ul#menu-top li a {
list-style-type:none;
text-decoration:none;
float:left;
color: #7ec5ff;
font-weight:bold;
padding: 7px 10px;
}
ul#menu-top li a:hover {
text-decoration:none;
background-color: #7ec5ff;
color:#fff;
font-weight:bold;
padding: 7px 10px;
}
ul#menu {
float:left;
width: 920px;
margin: 0 auto;
height:30px;
background-image: url(images/menu_bg.png);
background-repeat: repeat-x;
background-color: #7ec5ff;
}
ul#menu li a{
float:left;
list-style-type:none;
text-decoration:none;
color:#fff;
font-weight:bold;
padding: 10px 20px;
border-left: 1px solid white;
}
ul#menu li a:hover {
text-decoration:none;
background-color: 8ed6ff;
color: #f4f4f4;
padding: 10px 20px;
}

Vayan visualizando el sitio para confirmar que cada paso esté dado en la dirección correcta. Ahora procedemos a dar estilo al espacio del slider, los bloques de productos-servicios destacados y de las noticias.

#nivoslider {
float:left;
margin: 10px 20px;
width: 920px;
height: 310px;
}
#featured {
float:left;
width: 918px;
height: 100px;
margin: 0 20px;
border: 1px solid #7b7b7b;
border-right:none;
background-image: url(images/destacado_bg.png);
background-repeat: repeat-x;
background-color: #dedddd;
}
.item {
width: 295px;
padding: 5px;
height: 90px;
overflow:hidden;
border-right: 1px solid #7b7b7b;
float:left;
}
.item h3 {
font-family: arial, sans serif;
font-weight:bold;
font-size: 16px;
line-height:30px;
color: #7b7b7b;
text-align:center;
}
.item p {
font-family: arial, sans serif;
font-weight:bold;
font-size: 12px;
line-height:20px;
color: #7b7b7b;
text-align:center;
}

Aquí hacemos un pequeño alto para introducir una aclaración. Si ustedes visualizan el theme hasta aquí, verán que la tipografía ya no se ve igual que en nuestro PSD, en donde utilizamos la fuente Myriad Pro. Vale aclarar que en clases futuras podemos introducir fuentes mucho más elegantes utilizando cufón o bien utilizar el servicio de fuentes de Google y @font-face. Seguimos con el estilo de la sección de noticias.

.news {
width: 293px;
padding: 20px 0 10px 20px;
float:left;
}
.news  h2 {
font-family: arial, sans serif;
font-size: 22px;
margin-top:10px;
color: #7b7b7b;
}
.news p {
font-family: arial, sans serif;
font-size: 12px;
line-height:18px;
color: #7b7b7b;
}

Pasamos a dar estilo a los elementos de la sidebar.

#sidebar {
width: 293px;
padding: 20px 20px 10px 0px;
float:right;
}
#sidebar h3 {
font-family: arial, sans serif;
font-size: 18px;
margin-bottom:10px;
color: #7b7b7b;
}
#sidebar ul {
list-style-type:none;
}
#sidebar ul li {
padding: 5px 10px;
border-bottom: 1px solid #7b7b7b;
color: #7b7b7b;
}

Y finalmente el estilo del footer.

#footer {
float:left;
background: #e6e6e6;
width: 920px;
padding: 20px;
height:100px;
}
ul.social {
list-style-type:none;
float:right;
width:150px;
}
ul.social li{
float:left;
}

Para ir viendo la evolución del trabajo instalamos un WordPress en SummArg en www.summarg.com/demos/themetaller. Les dejamos los archivos del ejercicio de hoy aquí ThemeTaller clase 3 (2498)

Sientanse libres de plantear cualquier duda o comentarnos cómo lo harían ustedes tanto aquí como en nuestro foro. Nos vemos en la próxima clase!

Volver al temario del taller

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: En la clase anterior estuvimos observando como se compone cada plantilla de WordPress, así que en vez de maquetar nuestra página de inicio en una sola página como si fuera un HTML común, arrancaremos utilizando 4 archivos PHP…..

  2. Espero sigas con las clases, ya que he diseñado cosas en CSS, y entiendo cual es la idea para maquetar en WordPress, pero a veces me pierdo, de antemao muchas gracias por tu aporte.

  3. Frank

    Acabo de encontrar este tutorial que creo que es el más reciente.
    Por ahí había leído que al último wordpress no se podría editar el theme o que habría que pagar para hacerlo. Espero que no sea cierto, seguiré éste con mucha atención.

    GRACIAS

  4. Nekko

    A cualquier WordPress descargado desde wordpress.org le podés modificar todo. Al que no podés tocarle muchas cosas es al servicio de wordpress.com. Saludos Frank!

  5. sergio

    Excelente! muchas gracias por compartir!

  6. Empiezo hoy a seguir tu blog y el taller de temas WordPress. He leido poco del tema, pero ya me parece de lo más interesante que he encontrado.

    Ánimo!

  7. Muchas gracias por este curso.
    Yo se css y html pero me falta php y aprender el codex y funciones de wordpress..
    esto es bastante estudio pero tus tutoriales me están ayudando mucho y son 100% entendibles por cualquiera.

    Los mejores tutoriales que hay ahora mismo en la web.

    Espero que sigas explicando tan bién.

    muchas gracias por tu trabajo.

  8. hace mucho no me daba una vuela por summarg y hoy me encuentro gratamente sorprendido por este excelente tutorial que estas desarrollando. Realmente te felicito chechu, lo voy a seguir a full. !!!

  9. Nekko

    Muchas gracias, data!!! Cualquier duda o sugerencia, ya sabés como ubicarme. Gracias por la buena onda che!

  10. Gracias Nekko por tu ayuda, yo tambien como algunos me pierdo un poco aqui con la maquetación pero entiendo la idea, y sera cuestión de que practique mas css.

  11. Nekko

    Gracias Antonio! Respecto de la maquetación si me comentan que es lo que les resulta dificultoso de entender puede hacer una clase orientada a ese tema. Dejenme sus comentarios/preguntas al mail o registrense en el foro y tratamos de armar algo!

  12. José Quilón

    Hola Nekko, te quiero comentar un duda que tengo, no se me ven los acentos bien me sale un caracter extraño en su lugar no se si es a mi solo o es un tema que comentaras mas adelante, me pasa en las opciones del menu, saludos y gracias de antemano.
    Posdata:
    Enhorabuena por el tutorial es muy interseante.

  13. gracias nekko… me ayudates un resto.. no entendia muy bien esto, gracias de verdad.

  14. fugitivonet

    muy bueno el trabajo, estoy esperando el resto de clases 😀

  15. Junior

    todo muy bien, pero porque no explicas la parte de paginas, por lo que veo el tutorial solo explica como diseñar la pagina principal (aquella donde aparecen las entrada); pero en el caso que quiera una pagina wordpress con 3 o mas paginas ejm(about,contacto,etc). Como lo resuelves cuando lo empaquetas todo para ser usado como template?

  16. A mí me pasa lo mismo que a José Quilón, porque los acentos se me ven con un signo raro, es decir, directamente no se ven los acentos.

  17. Nekko

    En esta instancia del curso, si quieren colocar un texto con acentos deben utilizar el código correspondiente. POr ejemplo:
    Código se escribirá: C& oacute;digo (sin espacio).
    http://ascii.cl/htmlcodes.htm

  18. Muchas gracias! Ya pude poner acentos sin problemas.
    Saludos

  19. Hola, tengo un problema que no puedo resolver, como puedo hacer para que el #content-wrapper este pegado a la parte superior, es decir que no halla ningun espacio. Gracias de ante mano!

  20. Nekko

    En el CSS a #content-wrapper cambiale el valor de margin: 0px auto;

  21. hola que tal? tengo un problema no puedo visualizar, el logo ni ninguna de las imagenes de las redes sociales que recortamos, en una parte del tutorial, me estoy volviendo loco como se soluciona. desde ya muchas gracias, saludos Bacter

  22. Nekko

    Hola Bacter, descargate el ejercicio para comparar su estructura con lo que vos fuiste logrando. Quizás tenés mal la ruta de los archivos, quizás equivocaste el nombre de la carpeta?

  23. Muchas gracias! sé maquetar y programar pero no sabía montar un wordpress desde cero. Muy interesante, sigo con las siguientes clases.

  24. Ricardo

    Saludos y muchas gracias por el tutorial, yo tengo una duda hasta este paso, no he podido visualizar los logotipos ni los de redes sociales (logo.png, facebook.png, twitter.png etc…), chequé en mis archivos php tuvieran la ruta correcta y si la tienen, que podrá estar pasando??

    Inlcusive en una liga que pones para ir viendo la evolución del proyecto tampoco aparecen, es normal hasta este paso que no se vean los logos?
    Nuevamente un saludo y muchas gracias por la contribución

  25. Hola Nekko.

    Primero te felicito por este tutorial. Está muy bien explicado, pero sabes, no logro visualizar mi menú en linea. Me aparece vertical. Sabes que podrá ser? Miré los archivos de la clase. Cambié las rutas y nada.. Ojalá puedas ayudarme. Gracias y un saludo.

  26. La informacion que compartes esta muy interesante lo de pasas PSD a WORDPRESS para aquellos con interes en avanzar en este tipo de Trabajo , aunque a mi parecer seria MEJOR pasar primero todo el PSD a HTML y luego realizar los enganches a WORDPRESS , debido a que muchos no manejan HTML o CSS.

    Thank YOu

  27. Pancho

    Hola Nekko, a mi me pasa igual que a Carla, no consigo ver las imágenes, sólo las de lorempixum, y tampoco carga el footer. Por cierto muy agradecido por este estupendo tutorial.

  28. Nekko, sin duda, éste es el tutorial para aprender a crear un tema de wordpress desde cero, más clarificador y útil que he encontrado. He pasado meses leyendo, y todos los sistemas de archivos de diferentes temas de wordpress que he descargado para intentar analizarlos, me parecían completa y absolutamente ininteligibles, todo mezcladísimo y disperso, no lograba orientarme, pero al final encontré este tutorial. Muchísimas gracias, me has mostrado la luz al final del oscuro tunel de entrada al mundo de wordpress. Ahora, toca un duro trabajo hasta que logre maquetar mi tema en wordpress.

    Imagino, por preguntarte algo, que el ejemplo de documento creado en este tutorial, puede ser perfectamente realizado con cualquier tipo de “!DOCTYPE”, y que determinadas etiquetas “” podrán ser cambiadas fácilmente por las nuevas etiquetas de HTML5. ¿Qué opinas como lo ves?

    Un saludo y muchísimas gracias de nuevo.

  29. Nekko yo lo he solucionado así: <img src="/images/logo.png” alt=”” />

  30. Mi problema principal es ver como afectaria al posicionamiento web haciendo una migracion a wordpress de una pagina estatica. En principio, por lo que veo no habria problemas

  31. por que no se ven los Widgets?, podrías por favor decirnos como permitirlos?

  32. Borja

    muchas gracias Nekko por el tutorial! Tengo una duda, como coloco el themeTaller como el theme por defecto de WordPress en localhost? en ese paso me he perdido. Gracias y un saludo!

  33. VanDerHagen

    esta buenísimo el tutorial

  34. Hasta el momento estoy emocionado porque he ido haciendo paso a paso lo que estoy leyendo y si me esta dando resultados. Gracias por tan buen aporte.

  35. eusebio

    Cuando quiero visualizar o mostrar en pantalla me sale el siguiente error podrias ayudarme.

    Fatal error: Call to undefined function get_header() in C:\wamp\www\wordpress\wp-content\themes\themetaller\index.php on line 1

    Por sierto muchas felicidades el tutorial esta muy bien.

    saludos

  36. Javier

    Genial tutorial, enhorabuena. Juntar HTML, CSS y WordPress es lo que necesito para desarrollar mi página de servicios profesionales, juntarla con un blog, introducir un plugin de comercio e. y sin tener ni idea de PHP, creo que las funciones que me interesan me van quedando claras.

  37. Buen tutorial, felicitaciones.. Esperando los otros..Saludes

  38. maria del c

    ya hice esta clase hasta este paso pero no me sale nada en mi wordpress local que hice mal

  39. […] la clase 3 hablamos un poco sobre el código básico que debe ir en el archivo header.php, el cual incluye […]

  40. […] Clase 3: ¡Comenzamos a maquetar! […]

  41. […] Clase 3: ¡Comenzamos a maquetar! […]

  42. marta

    Hola,
    no sé si este tutorial sigue activo, lo estoy siguiendo ya que ningún tema de wordpress que he visto se adapta a lo que quiero, por ello me he decidido a hacerlo yo misma. Estoy siguiendo este tutorial y me he atascado.

    Lo que me ocurre es que no coge bien la referencia a las imagenes, ni al estilo css. Después de unas cuentas vueltas y pruebas me he descargado la solución, lo pongo en mi servidor y tampoco me coge las referencias…
    ¿Podría ser cosa del servidor local? mi servidor es un appserv y mi estructura de carpetas es la siguiente: C:\AppServ\www\wordpress\wp-content\themes\themeTaller

    no se como soluciarlo, ¿alguna pista?

    Gracias!

  43. Fernando

    Hola, yo también estaba desquiciado como Alvarobueno bregando con un aluvión de manuales y tutoriales a cuál más inconexo y atropellado. Hasta que encontré este curso, claro y didáctico.
    Sin embargo me pasa lo mismo que a Marta, no me aparecen las imágenes.

    He diseñado varias webs, algunas plagadas de fotos, o sea que no suelo cometer pifias con las rutas. Pero, aunque he revisado las rutas buscando un error en los enlaces, nada. Las he pasado a directas (images/logo.png por ejemplo), que deberían funcionar, y tampoco. Poner alt=”” como alguien sugería no me ha servido.

    Los archivos de la solución TAMPOCO me muestran las imágenes. ¿Dónde está el fallo? Gracias, un saludo.

  44. Hola. Solucionando el error de las imagenes que no se despliegan…

    En la dirección que proporciona Nekko para las imagenes () le hace falta agregar la carpeta /wordpress/, justo después de la carpeta /localhost/. Saludos

  45. ariel rojas

    Hola!
    Me estás ayudando muchísimo MUCHAS GRACIAS.
    Una pregunta.
    No consigo que el tema pille los estilos pongo aqui:<link rel="stylesheet" type="text/css" href="” media=”screen” /> en la parte de stylesheet_url mi ruta hacia donde esta la hoja de estilos pero nada, que puede ser?

  46. ariel

    No coge los estilos!!

  47. Spencer

    Para probar el theme abran navegador con la direccion localhost/wordpress
    vayan a:
    * Escritorio
    * Apariencia
    * Temas
    * Del lado derecho les debe aparecer su “themetaller” si tienen los archivos en sus respectivos Xampp o Wamp C:\wamp\www\wordpress\wp-content\themes\themetaller

    *Le dan Activar theme y
    *Visitar el sitio y les abrira su tema

    Saludos

Dejar un comentario