De HTML a WordPress – Theme WordPress part.3
(28 votos)
Herramientas:DreamWeaver, PHP, HTML, Css, Wordpress
Dificultad:Intermedia
Duración Estimada:30-60 min
Tercera parte:
En esta última parte del tutorial trabajaremos con la barra lateral o sidebar, agregaremos soporte para widget y crearemos los widget específicos para esta web.
En este tutorial trataremos los siguientes temas:
- Registrar posición de los widget para el sidebar
- Utilizar campos personalizados de wordpress.
- Crear el widget próximos conciertos utilizando campos personalizados
- Crear Widget últimos vídeos
- Crear formulario de contacto con el plugins contactform
Registrar posición de los widget para el sidebar
En estos momentos nuestra plantilla wordpress no tiene areas definida para la utilización de widget, si entras al panel de administración –> Apariencia –> Widget, notaras que la plantilla efectivamente no tiene soporte para widget por que no tenemos ninguna área definida para este fin.
Para definir el arrea de widget, que en nuestro caso solo será el sidebar agregaremos la función que utiliza wordpress para este fin (register_sidebar()) en el archivo functions.php, copiamos el siguiente código en este archivo y más adelante explicaré cada parte del código.
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'Right Sidebar',//Titulo del área de widget, aparece en el panel de Administración.
'before_widget' => '<div id="%1$s" class="widget %2$s">', // div que estará antes del widget
'after_widget' => '</div>', // cierre del div anterior
'before_title' => '<h3 class="widget-title">', //Lo que envolverá al titulo del widget
'after_title' => '</h3>',
));
}
name– nombre de la barra lateral (este nombre se visualiza en el panel de administración áreas de wiget).Descripción– Texto descriptivo de la ubicación de la barra lateral. Se muestra en la pantalla de gestión de widgets.(Opcional)before_widget– HTML para colocar antes de cada widgetafter_widget- HTML para colocar después de cada widget utilizaremosbefore_title– HTML para colocar antes de cada títuloafter_title– HTML para colocar después de cada título
Con esto ya tenemos soporte para widget en nuestra plantilla, solo nos queda hacer la llamada desde nuestra plantilla en el lugar que queremos aparezcan los widget agregados en esta área de widget.
Para ello abriremos el archivo sidebar.php y borraremos todo su contenido y agregaremos la siguiente línea de código.
<!-- #sidebar -->
<aside id="sidebar" role="complementary">
if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('Right Sidebar') ) ?>>
</aside>
<!-- Final #sidebar -->
Con la función dynamic_sidebar() en este caso llamamos el sidebar registrado en el archivo funtion.php, como parámetro tenemos la opción de pesarle o bien el nombre o el ID que utilizamos para registrar el área de widget que queremos llamar.
Con esto ya tenemos activa nuestra área de widget y lista para agregar los widget necesario para este ejemplo que estamos desarrollando en la serie de tutoriales.
Aunque agregaremos código directamente en el archivo sidebar.php, también podemos agregar widget desde el gestor de widget de wordpress, estos widget quedarán siempre por encima de los que agreguemos directamente en el archivo sidebar.php.
Aunque con esto nos sirva no quiere decir que sean todas las opciones que nos brinda wordpress para trabajar con los widget, he utilizado la forma más sencilla de utilizar los widget en una plantilla, pero esto tiene una infinidad de opciones las cuales no tocare en este tutorial, si quieren ampliar su información sobre las distintas opciones que puedes utilizar en este tema de los widget y las zonas de widget te recomiendo pasar por el codex de wordpress que esto esta bastante documentado y seguro te servirá de ayuda los temas tratados allí.
Temas recomendados leer:
dynamic sidebar:para agregar widget dinámica mente y código estáticoregister sidebar:para registrar área de widget para tu plantillaregister sidebars:para crear múltiples sidebar o areas de widget.is dynamic sidebar:Tag condicional que revisa si hay widget activos en el actual sidebar, con esto puedes mostrar un contenido por defecto si no existen widget activos.
Ya puedes hacer una prueba y agregar algún widget en el sedebar y comprobar que se visualiza correctamente.
Utilizar campos personalizados de wordpress.
Los campos personalizados también conocidos como custom fields, son meta datos que se pueden agregar tanto a los artículos como a las páginas de wordpress.
Por ponerles un ejemplo el titulo, la fecha, categoría y los tags de un post son campos generales de una entrada en wordpress, de esta misma forma podemos utilizar los campos personalizados para agregar información adicional a un artículo, se pueden utilizar tanto en los artículos como en cualquier otra parte de nuestra plantilla, solo hay que utilizar la llamada adecuada para obtener esos datos.
En nuestro caso utilizaremos campos personalizados para crear los widget para nuestro sidebar, primero creando el widget próximos conciertos, este widget será bastante sencillo, solo necesitamos 3 datos que son: Nombre del artista, Fecha y lugar del concierto, estos tres datos se le agregaran a cada articulo que pertenezca a la categoría conciertos, y desde nuestro sidebar llamaremos esos datos los cuales sustituiremos por los datos estáticos del html del widget, ya no los mareo más creo que con un ejemplo se entenderá mejor, empecemos!!!
Lo primero es crear la categoría en la que agregaremos los artículos referentes a los conciertos, en esta categoría agregaremos los artículos de los concierto y a estos artículos agregaremos los campos personalizados.
En cada articulo que agreguemos en esa categoría debemos agregar 3 campos personalizados, el área dedicada a este fin esta ubicada justo debajo del editor de artículos, desde aquí agregaremos los tres datos: Artista, Fecha, Donde, y a cada campo agregarle un valor que será lo que utilizaremos en el widget.
Como muestra la imagen anterior debes agregar cada campo personalizado lo que nos daría como resultado lo siguiente.
Para mostrar estos campos personalizados solo debemos utilizar la función get_post_meta() dentro del bucle de wordpress, puede utilizar el siguiente código para hacer esa llamada desde el lugar de tu plantilla donde quieras mostrar el campo personalizado.
<?php $Fecha = get_post_meta($post->ID, 'Fecha',true); echo $Fecha ?>
Ya teniendo claro el uso de los campos personalizados en wordpress abordaremos la creación del widget especifico para esta web.
Antes de empezar quiero aclarar algo, esta no es la forma de crear widget para wordpress, wordpress cuenta con un API para este fin, en este tutorial no crearemos un widget utilizando esta información sino que agregaremos el código directamente en el archivo en el que queremos mostrar esta información en forma de widget, esta no es la forma más profesional de hacerlo pero para este tutorial creo que es suficiente ya que la creación de widget es un tema bastante extenso que no tocaré en el tutorial.
Crear el widget próximos conciertos utilizando campos personalizados
Teniendo los campos personalizados en cada artículo que agreguemos en la categoríaconciertos solo debemos llamar esos datos desde el archivo sidebar.php, para poder extraer estos datos debemos utilizar la función get_post_meta()
Hasta este punto nuestro sidebar.php solo tiene el siguiente código.
<!-- #sidebar -->
<aside id="sidebar" role="complementary">
<?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('Right Sidebar') ) ?>
<!-- CÓDIGO A MOSTRAR -->
</aside>
<!-- Final #sidebar -->
Dentro de la etiqueta aside pegaremos el siguiente código, este mostrará los datos que nos interesan para formar el widget, pegaré el código completo y explicaré cada línea para que sirve.
<!-- Widget Proximos conciertos -->
<h3>Proximos Conciertos</h3>
<ul>
<?php query_posts("cat=10&posts_per_page=5");while (have_posts()) : the_post();?>
<li>
<a href="<?php the_permalink();?>"><?php $Artista = get_post_meta($post->ID, 'Artista',true); echo $Artista ?></a>
<p><?php $Fecha = get_post_meta($post->ID, 'Fecha',true); echo $Fecha ?></p>
<p><?php $Donde = get_post_meta($post->ID, 'Donde',true); echo $Donde ?></p>
</li>
<?php endwhile; ?>
</ul>
<!-- Final Widget Proximos conciertos -->
<?php query_posts("cat=10&posts_per_page=5");while (have_posts()) : the_post();?>
Primero utilizamos el loop personalizado de wordpress con la función query_posts pasando como parámetro a esta función la categoría y el numero de post a mostrar.
<li> <a href="<?php the_permalink();?>"><?php $Artista = get_post_meta($post->ID, 'Artista',true); echo $Artista ?></a> <p><?php $Fecha = get_post_meta($post->ID, 'Fecha',true); echo $Fecha ?></p> <p><?php $Donde = get_post_meta($post->ID, 'Donde',true); echo $Donde ?></p> </li>
Dentro de la lista desordenada llamamos como aprendimos anteriormente los datos que nos dan los campos personalizados, este contenido será el que se repetirá con el loop de wordpress, este sencillo código nos dará el siguiente resultado.
En la imagen anterior se muestra el resultado final, como de una forma fácil obtenemos los datos de los campos personalizados en nuestra plantilla, esta es una técnica no muy profesional para realizar widget pero es algo que te puede evitar muchos dolores de cabeza.
Crear widget últimos videos
Este widget no lo trataré en este tutorial, es un plugins especifico para para esta plantilla por lo que creo que no a muchos le interesará, de todas formas pueden hacerlo con campos personalizados tomando como referencia el widget anterior.
La idea que tenia era agregar un campo personalizados a los artículos agregados en la categoría vídeos musicales, y en ese campo personalizado agregar una captura del vídeo que publico en ese post, con ese campo personalizado y el titulo de la entrada crear un listado de los artículos de esa categoría solo sacando en la lista la imagen del campo personalizado y el titulo de la entrada, no creo que sea muy complicado hacerlo teniendo ya un ejemplo como el que creamos anteriormente.
Si alguien tiene interés de agregar esta funcionalidad a su web o a esta plantilla que deje su comentario y lo crearé, en estos momentos no lo veo necesario por lo que obviaré este paso.
Crear formulario de contacto con el plugins contact form 7
Pasaremos a la creación del formulario de contacto con el plugin contact form 7, este es un plugins con el que puedes crear formularios de contacto fabulosos de una forma extremadamente fácil, en nuestro caso es un formulario sencillo, pero este plugin te brinda un sin número de opciones para formularios avanzados creado desde el panel de administración.
Para iniciar esta parte lo primero que aremos es instalar el plugins en nuestro wordpresss, tiene la opción de hacerlo de dos forma:
1-. Descargar del plugin y subir vía FTP a la carpeta wp-content/plugins.
2-. Instalar el plugins desde el gestor de plugins de wordpress
Después de instalar el plugins tomando la opción que más te guste solo debes activarlo y podemos empezar con la configuración de formulario de contacto para la web.
Después de activar el plugins se activa un nuevo apartado en la barra de menú de wordpress llamado contacto, generalmente al final, accedemos a ella y encontramos el apartado de configuración del formulario,editaremos ese formulario que encontramos creado por defecto, editaremos su nombre y borraremos el código que trae el formulario para crear el nuestro.
En la parte derecha podemos encontrar un listado de opciones en el que aparecen todos los tipos de entrada de datos para los formularios,en nuestro caso solo necesitamos 1 campos de textos, 1 campo de email, un área te texto y un botón submit, empezamos la configuración del formulario.
Campo de texto Nombre
Seleccionamos de la lista desplegable la opción campo de texto y agregamos la configuración que muestra en la imagen.
Cada campo de que utilicemos lo utilizaremos envuelto de la <p>
Campo de email
Seleccionamos en la lista desplegable la opción campo de email, y configuramos sus opciones como muestro en la imagen de abajo, siempre tengan presente que esto lo explico teniendo en cuenta las necesidades de la plantilla, siempre pueden cambiar lo que deseen.
Campo área de texto
De la lita desplegable seleccionamos la opción Área de texto, y lo configuramos como en la imagen siguiente.
Botón de enviar (submit)
Para general el botón de envío del formulario utilizaremos la opción botón de enviar de la lista desplegable y lo configuramos como muestro a continuación.
El código completo que hemos generado será el siguiente:
<p>1</p> <p>[email* email id:form-email watermark "Email"]</p> <p>[textarea* mensaje x8 id:form-mensage watermark "Mensaje"]</p> <p>[submit id:form-enviar "Enviar"]</p>
Con esto ya tenemos nuestro formulario generado y ya podemos utilizarlo en cualquier parte de nuestra plantilla o cualquier parte de una página o pos, este formulario, solo debemos utilizar el código identificador del formulario que hemos creado.
Este código solo funciona si lo utilizas en una página o parte de un post, en nuestro caso no nos sirve ya que lo agregaremos directamente en el código del archivo sidebar.php, para que funcione debemos pegar este código en formato php y ayudarnos de la funcion <php do_shortcode(); ?>, de esta forma.
<?php echo do_shortcode('Aquí El identificador del formulario'); ?>
El código completo que debemos pegar en el sidebar.php justo debajo del wiget anterior es el siguiente.
<!-- Widget Contáctenos -->
<div class="widget" id="contact">
<h3>Contáctenos</h3>
<?php echo do_shortcode('Identificador del formulario'); ?>
</div>
<!-- Final Widget Contáctenos -->
Al agregar este código en el sidebar.php debemos tener el formulario ya funcionando,nos quedará algo como en la siguiente imagen.
Como pueden notar el formulario no está tomando los estilos css aplicado en tutoriales anteriores, para solucionarlo solo debemos arreglar un error que surge, el error es que cuando aplicamos las reglas css para dar estilos al formulario utilizamos un ID (#wiget-contact) este ID lo sustituiremos por la ID (##wpcf7-f76-t1-o1)del DIV que envuelve a la etiqueta <fotm>
Con esto ya nuestro formulario debería tomar los estilos que tenemos en nuestro archivo style.css, si visualizamos el formulario quedaría como muestro en la siguiente imagen.
Con esto ya tenemos configurado nuestro formulario de contacto para la web, solo quedaría configurar la forma en que llegan los mensajes a nuestro correo, esto se configura en el panel de configuración del formulario en el segundo cuadro debajo del que utilizamos para generar nuestro formulario.
Como pueden notar en la imagen anterior se puede configurar la forma en que llegan los mensajes a nuestro correo, utilizando los ID de los distintos campos de formularios que utilizamos.
También tenemos la opción de agregar código HTMLa cuerpo del mensaje, con esta opción podemos resaltar parte del mensaje o algún titulo para diferenciar las distintas partes del mensaje que nos llega.
Con esto ya queda configurado nuestro formulario de contacto.
Datos de la descarga
Dejare para descargar la plantilla ya terminada, esta completamente desarrollada por mi, le he agregado algunas funcionalidades que no tocamos en este tutorial, entre las cuales puedo destacar el uso de un panel de configuración para la plantilla en el cual puede configurar lo siguiente:
- Activar o desactivar el slider de imágenes.
- Seleccionar la categoría que mostrara las imágenes en el slider
- Seleccionar la cantidad de imágenes a mostrar en el slider
- Subir su propio logo
- Activar o desactivar el botón mas vídeos
- Activar o desactivar la caja de búsqueda de la parte superior
- Excluir categorías de la página principal de la web
Plantilla para página de contacto
- Sidebar exclusivo para la página de contacto
- Introducir el email donde quiere recibir lo mensajes.
- Agregar información adicional de contacto (email,teléfono,dirección, etc.)
- Agregar url de las principales redes sociales
Capturas del panel de configuración
Todas estas opciones configurables de una forma muy simple, esta es la forma en la que un desarrollador debe entregar una plantilla a un cliente para que este no tenga que meter mano dentro del código de la web, si no que solo tenga que rellenar algunos campos y obtener resultados.
Conclusión
Antes que nada pedir disculpas por la larga espera para concluir el tutorial, dar también las gracias a todos los usuarios que dejan sus comentarios, que sepan que sus comentarios me llenan de gratitud al ver que con mi tutorial muchos han aprendido algo nuevo.
En este tutorial ademas de seguir las pautas que me marcaba el diseño de la plantilla he tratado de utilizar algunas técnicas muy útiles para el desarrollo en wordpress, con este tutorial debes de ser capaz de crear una plantilla simple para tu blog.
La plantilla desarrollada en este tutorial(De HTML a WordPress) la he creado yo de forma avanzada agregándole un panel de configuración propio, con este panel de configuración podemos mostrar y ocultar algunas partes de la web, o activar y desactivar otras, dejare la plantilla para descargar y cuando la instalen podran ver las opciones que he agregado, lo más lógico seria que creara un articulo hablando de la configuración de la plantilla pero no voy hacerle esperar mas si quieren ver la plantilla solo descarguela y miren la opciones que tiene.
Un saludo muy grande a todos y esperen otro interesantes tutoriales que tengo en marcha.
Twitter: @jordano_p
Loading ...
Esta bueno tu blog, sigue así.
Gracias por el tutorial. Estoy siguiendo tus pasos pero cambiando un poco el diseño..ya te contaré. Saludos
Hola! Este tutorial es GENIAAAALLL!!!!
Cuando subis las otras partes?
Abrazo!!
En unos días lo publico, ya tengo el theme terminado, solo tengo que redactar el articulo.
Suscríbanse al RSS para que les avise de su publicación.
Copado!! Ya me suscribí al RSS
Abrazo!
Gracias por el tutorial, bien explicado y cuidando el detalle que es lo que marca las diferencias.
Muy agradecido.
PD: Ahora sólo he de encontrar el tiempo para poder ponerlo en práctica.
Me alegra que les guste, este es el primero de muchos que pretendo publicar desde que tenga un tiempo libre.
Muy bueno el tutorial.
Muchas Gracias, enhorabuena por tu web.
Suerte!
En la parte en que se explica cómo introducir el “register_nav_menu()” en functions.php, hay un fallo en el código a copiar.
En el código sale ésta parte, que dará fallo en el compilador (si se está usando Dreamweaver):
=>
Simplemente hay que sustituirlo por
=>
como en la imagen que sale justo debajo.
¡Sigo probando, felicidades al autor!
Acabo de escribir un comentario. El codificador html de la página me ha escrito los caracteres, pero quería decir ( ” = & g t ; ” ) donde sale el primer =>.
Tomen los caracteres juntos, sin los espacios que hay entre ellos
Gracias por el detalle no me di cuenta de eso. Arreglado…
Otro detalle. En la parte de inclusión de datos del Metadatos, las partes del código y de la imagen inferior señalando qué se cambia por qué estan al revés.
La parte que hay que incluir para sustituir la de html es la de php.
Esta es la parte que hay que SUSTITUIR, NO LA QUE SE QUEDA FINALMENTE:
Jun 30th, 2010
Categoría:Notícias Musciales
Autor: JordanoPolanco
Todo arreglado Muth, muchas gracias por las correcciones.
Empezando a leer la parte de HTML a WP lo e buscado por mucho tiempo espero entender todo bien si no, espero que puedas resolver algunas dudas =D. Espero que para cuando termine el 1 y 2 ya se encuentre la 3ra parte. Gracias de nuevo por el aporte!!!
Sin ningún problema trataré de ayudarte en cualquier duda que te pueda surgir.
Para cuando planeas subir la tercera parte Jordano????
Gracias por todo.
Lo tengo terminado en localhost, no he tenido tiempo de publicarlo, cuando saque un rato libre lo publicaré. lo siento mucho tardar tanto.
No solo haces el tutorial, si no que explicas el porqué de las cosas (algo que no veo en un tutorial desde hace mucho tiempo)
¿Te casas conmigo?
Hago de esta forma los tutoriales por que me acurdo a mis inicios, siempre que buscaba un tutorial lo encontraba pero siempre te dejaban a medias, o siempres explicaban el ejemplo más simple de las cosas.
yo trato de dejar todo claro y el camino más directo sin importar si es más difícil o más fácil.
y otras cosa, no, no me caso.
Hola a todos¡¡¡ Jordano-P ¿Aún estás operativo????
INCREIBLE TUTORIAL! … felicitaciones!!… he aprendido mas aquí que mirando vídeo tutoriales en youtube, en mi trabajo me piden que aprenda esto y yo la verdad de mirar tantos tutoriales termine un tanto perdido, ¿Cuando lanzaras la tercera parte?.
Muy bueno todo el tutorial, haber si algún día lo suben en PDF para descargarlo.
Gracias
@Cesar, La tercera parte ya la tengo lista, solo espero a tener un tiempo libre para publicarlo, además esta terminando la plantilla para dejarla online para que puedan verla funcionando.
Dejare la plantilla para descargar, he agregado muchas funcionalidades que en el tutorial no he tocado, la más destacada es que agregue un panel de control desde donde se podrá configurar muchas partes desde la web, tales como: el slider, el sidebar, el logo, la caja de búsqueda entre otras novedades.
@CristianXP44, Más adelante mirare eso, es una buena opción.
te soy sincero, medio e visto el tutorial, y me parece genial y practico, tengo unas webs html que queria pasar a wordpress… y ahora practicare con ellas! sigue adelante y esperare con ansias la ultima parte!
Hola! disculpa… estoy siguiendo tu tutorial que la verdad me parece excelente pero me atore en la parte de “Agregar script de forma selectiva en el head de wordpress” lo que pasa es que agrego el código en el archivo “functions.php” y al recargar la pagina todo ese codigo me aparece en la parte de arriba espero me puedas ayudar de antemano muchas gracias.
Saludos!
Esa parte suele dar problemas cuando no agregas ese código, debes verificar muy bien dónde lo colocas.
Siempre recomiendo que se organice el archivo function.php eliminando lo que no se este utilizando en tu plantilla para tener el código bien organizado y evitar esto que te esta pasando.
Seguramente es un error de alguna llave.
Hola Jordano TUS TUTOS SON LOS MEJORES DE LA WEB!! es genial como abarcas el proceso total desde photoshop, no sabia casi nada de wordpress y ahora gracias a tus tutos me le mido a lo que salga!!! jeje.
Ni en español ni en ingles he visto algo tan completo en la web acerca de wordpress.
por favor dinos una fecha aproximada de cuando subes la ultima parte de esta excelente serie, te sigo en twitter @elvismartinrozo felicitaciones y ojala sigas con este proyecto tan profesional.
SALUDOS DESDE BOGOTA!!!!
El tuto es ya terminado hace como un mes, lo que sucede es que estoy sacando tiempo para terminar la plantilla con panel de administración incluido con una gran variedad de opciones, liberaré la plantilla terminada para que puedan ver el código completo y funcionando.
Ahora estoy de vacaciones a miles de kilómetros de mi casa y mi portátil, cuando llegue a casa (17/julio) ya esa semana publicare la ultima parte del tutorial.
Por cierto muchísimas gracias por sus comentarios.
Tu tutorial es excelente!, pero solo me pierdo en una parte
, el codigo del slider no me funciona, hago todos los pasos pero no me resulta, alguien me puede ayudar porfavor ? 
…
Que error tienes?
Muy buen tutorial!
una pregunta ¿hay una tercera parte o es hasta aqui el tuto? lo otro q cuando puse el script para la imagen destacada no me aparece la opcion en el panel de administracion de wp, pero tampoco me da error en el codigo.
muchas gracias de antemano!!
la opción de imagen destacada te aparece en el panel que aparece cuando agregas una imagen, Fíjate bien.
ya inserte una imagen pero no resulta no se que podra ser
Si pudiera ver que es lo que estas asiendo seria más fácil decirte cual es el error.
Hola @jordano_p
Vengo siguiendo tus tutos desde hace meses!!!…
Y me gustaría saber cuando publicaras el último que falta para poder completar la plantilla que estoy haciendo basándome en tus enseñanzas xDDD
La verdad no quisiera seguir otro tutorial pues empece con el tuyo y me parece genial y me gustaría seguirlo hasta el último detalle ^^
Espero lo publiques pronto para así también terminar el mio xDDD
Un saludo y gracias por el esfuerzo ^^
Acabo de publicar la ultima parte hoy mismo
Hola excelente tuto ! de a poco lo estoy viendo
alguna idea de como poner para q las entradas en la main page solo se vea la imagen destacada y el titulo? algo como un tema de galeria pero solo el main page, el contenido del post normal
Sí, es más fácil de lo que te imaginas, puedes hacerlo creando una plantilla personalizada para la home Page, y con el loop de wordpress solo extraer las imágenes y el titulo.
Si no sabes crear plantillas personalizadas me dices y creo un tutorial, de como crear una plantilla personalizada para la Home Page de la web.
Sii porfavor crea un tutorial que no encuentro por ningun lado como hacerlo.
Sos el mejor!!!
Mil gracias
Hola, ante todo excelente tutorial, recien me inicio en la creación de theme en WordPress, esta perfecto, bien explicado, me gustaria y te lo agradeceria de corazón que expliques los siguientes pasos de como haz hecho para que el logo, el slider, el contacto, en fin lo que quedo pendiente y en el que dejas en tu demo online como lo haz realizado.
Aparte de eso, veo que en la demostración no funciona la paginación del home, el plugin me funciona de maravilla cuando hago un filtro en las categorias, etc pero lo unico en que no me sale es en el home siempre cuando le dos en la pagina 2 me vuelve a cargar el 1, vi en tu demo y también tienes el mismo error, agradeceria me ayudes, gracias y muchos exitos, estare al pendiente de tu respuesta!!!
Tienes razón tengo que revisar eso, aprovechare para agregar la paginación sin necesidad de pluguins.
Lo del tutorial sobre el index con las imágenes los estoy mirando y lo creare en el transcurso de la semana, tratare de crear una página personalizada que tenga un listado con las imágenes de los post.
Muchas gracias!!! Otra cosa más, me acabo de dar cuenta que tampoco esta agarrando las fechas de los posts en el Home, solo se muesta la fecha del primer post, eso a que se debe?
@Javier si, no me di cuenta, eso podemos solucionarlo cambiando esta función:
//Por esta <?php the_time('F j, Y');?>Le pasamos como parámetros la configuración deseada.
Esto pasa por que la función
the_date()como puedes comprobar aquí solo devuelve la fecha de el primer post, al contrario de la funciónthe_date().Otra vez gracias por avisarme de los errores.
hola
sabes no me funciona el slider y cuando abro la consola java de chrome me aparece como si los archivos javascript q uno llama no los carga
por que sera?
Si no te funciona el slider de imágenes y dices que no estan cargando los script, puede que tu theme no tenga el gancho wp_head ya que utilizo este gancho junto a una función en el archivo function.php para cargar esos archivos js para el slider y jQueri, revisa si tienes en el head de tu theme el gancho y si lo tienes prueba colocar los script directamente en el head de la web.
Hola, he seguido el tut y todo perfecto salvo el slider, que no consigo que me funcione. me aparece todo perfecto, pero la imagen no cambia, ni dándole a los botones para que pase a la siguiente
Hola, amigo muy bueno tú tutorial… la idea es qué si podría usar, CS3 ya qué no tengo CS4 espero tú respuestas… SALUDOS
Claro que si no importa la versión de strong>photoshop para crear el theme de wordpress
una consulta… un amigo me paso una web (muy buena) en html, y queremos ver si la podemos pasar a WordPress… el problema esque esta hecha con tablas, y el css es un dolor de cabeza… alguna idea que me puedas dar?
Pues si esta hecha con tablas lo mejor es limpiar ese código, poco a poco ir modificando la estructura ya sea con DIV o utilizando etiquetas de HTML5 (HEADER , NAV, SECTION, etc.)
Es lo que yo aria, no es recomendables crear una web completa con tablas, ya esos tiempos pasaron.
Excelente tutorial!!! Gracias por tu aporte, me ha servido muxo!!!
De nada amigo, compartan el tutorial y la web con sus amigo, de esa forma me ayudan y le ayudan a otros a aprender. @Saludos
Hola Jordano, bien explicado y completo tu tutorial, y lo he ido siguiendo, pero no he podido descargar la plantilla. Me aparece el siguiente mensaje: “¡La ruta de descarga no es válida!”
Gracias por tu tiempo en este tema de WordPress.
Ya esta resuelto amigo, me di cuenta el otro día pero se me paso areglarlo, Gracias por avisar.
Hola amigo tengo un problema y es este tengo toda mi plantilla echa pero el problema es que cuando va de la pagina 1 a la 2 me sigue saliendo lo mismo que podra ser eso ?
Bueno te cuento que logre resolver el problema pero ahora tengo la duda de por que no sale la barra de administracion el el sitio por que como podras ver no sale :S
La barra de administración para activarse hace una llamada a la función wp_footer(), no recuerdo si la agregue en la plantilla, si no esta agregada agrégala y seguro que aparece la barra de administración.
Muchiiisimas gracias, excelente explicación. Lo necesitaba como agua de mayo.
super agradecido hare una prueba de inmediato llevo tiempo buscando como llevar mi pagina web a WP
Saludos desde Mexicali
hola tengo un problema pues e estado haciendo plantillas y pues la gente a querido comprarmelas pero el problema es que cada ves que se las doy les da errores o les parece todo en blanco o no les funciona algo pero lo raro es que a mi si me andan que podria ser el problema??
pueden ser muchas cosas amigo, te mencionare algunas a tener en cuenta:
ahh bueno usa una imagen destacada dentro del post y en los inicios bueno tengo u na duda digamos que quiero excluir una categoría al inicio como hago eso?
Si te refieres a excluir una categoría a un theme que vas a vender, eso ya son palabras mayores, no puedes vender un theme donde el cliente deba entrar en el código para excluir una categoría y hacer que el theme funcione.
En estos casos lo normal sería agregar un panel de control, y desde un desplegable que el usuario pueda elegir la categoría que quiere excluir.
si no te refieres a eso para excluir una categoría del index o cualquier otra página debes utilizar la función query_por(cat=-3) pasándole como parámetro la categoría que queremos excluir.
Para más info sobre esto mira este tema en wordpress.org
gracias man por contestar tan rapido bueno ahora no estoy vendiéndolas pero me an ofrecido comprármelas pero ahora tengo una duda mas es que estoy haciendo una de peliculas y digamos que quiero que en el index aparescan por categorias separadas osea una parte que diga accion y se muestren unos cuantos accion despues otro que diga acentura y otros cuantos pero por separado se puede?
Utilizando las consultas personalizadas en wordpres claro que puedes mostrar los artículos como quieras.
pongo esto pero no me funciona corrigemelo si esta mal porfas T.T
bien amigo tengo otro error y es este por ejemplo entro a un tema cualquiera que seria este miweb. com/ted/ y cuando subo el buscador pasa que busca asi miweb. com/ted/?s=hola# y deveria ser miweb .com/?s=hola# que hago
me parecio fantastico tu tutorial ahora mismo estoy creando mi propio tema pero tengo una gran duda sobre la creacion de menus, ya que mi menu principal esta formado por sprites en css y no logro que se muestre. espero puedas ayudarme ya me estoy volviendo loco.
No importa que este utilizando Sprite para crear tu menú, fíjate en la parte que ice el menú, yo también cree el menú con sprite, ten muy pendiente la posición de la imagen, utiliza firebug o cualquier herramienta de inspección de código y varia el css en vivo para que veas donde va quedando la imagen para cada estado.
Hola jordano
sabes al momento de cargar el sitio el slider de imagenes no me funciona y lo q alcanzo a ver en la consola java de chrome es esto:
Uncaught TypeError: Object [object Object] has no method ‘tinycarousel’
al copiar el codigo de chrome queda asi:
$(document).ready(function() var pager = true; var oSlider = $('#slider-wrapper'); if(oSlider.length > 0) { oSlider.tinycarousel( Uncaught TypeError: Object [object Object] has no method 'tinycarousel' { pager: true, //paginación interval: true, //Auto Play duration: 300 //retardo de pase de imagen }); } });si me pudieras ayudar por favor y gracias de antemano
Revisa en tu código fuente si se esta cargando correctamente la librería de tiny carousel, el error dice que no esta ese metodo.
Buenas tardes,
increible tutorial, lo segui al pie de la letra y la verdad que esta muy bien, pero tengo algunas dudas, las cuales se que es por algun error cometido por mi.
Creé un sitio web con html, y lo pase a wordpress ( siguiendo al pie de la letras tus instrucciones), antes de pasarlo a mi host, lo fui probando con mi localhost. Cuando lo hice en el local, parece que casi todo me funcionaba, pero al pasarlo al host, no me cargaba nada, ni las tipografias, ni color de fondo, ni nada de nada.
El otro problema que vi es al cargar las fotografias, ya que estas no se cargan bien ( ni en el local ni en el host).
He mirado y remirado todo y parece que lo he echo bien.
Que crees que podria ser?
Muchas gracias
@joseCo – El error de que no carga los estilos puede ser, la ruta de la hoja de estilo, recuerda que para cargar la hoja de estilo utilizamos la función
Si creas un theme en local cuando subes la carpeta la host, todo debe funcionar igual, solo revisa estos detalles, y no muevas ni renombre carpetas cuando ya la subas al host.
No entiendo a que te refieres cuando dices carga de fotografías.
Con lo de las fotografias ( o imagenes) me vengo a referir, que me salen los vinculos rotos. ( no he cambiado de sitio las cosas)
He probado lo que me has comentado y continua igual.
Gracias igualmente
Si tienes la plantilla instalada online puedes poner aquí la url y lo miro.
Al fin pude solucionar lo de la hoja de estilo… pero las imagenes aun se me resisten.
http://pruebasvipe.herobo.com/
Madre mia, al fin solucione todo. Se ve que era una mala instalación del wordpress.
Muchas gracias por todo.
Informo:
En el enlace a la ” Segunda parte” el enlace lleva a la tercer.
Hay que editar la URL terminandola en un 2, pequeños detalles.
Respecto al manual solo valoro tu paciencia y se ve que te has comido la cabeza para escribir todo pero merece muchisimo la pena, jamas vi nada tan explicado, incluso para mi web he mirado consejos tuyos, lo explicas asombrosamente bien, de veras..
Enhorabuena.
Como consejo tambien decirte que si pusieras un par de tags mas como Categorias o Popular post en widgets seria quizas mas generico pero entiendo el trabajo y realmente cualquiera que halla leido todo el post lo entiende a la primera.
Saludos.
Muchas gracias por avisar sobre esos detalles, se agradece.
Respecto a lo que dices de los módulos del sidebar, lo he creado de esta forma solo para seguir el ejemplo para este tutorial,
es algo genérico, sabes que se pueden agregar cientos de cosas.
Y sí me rompí la cabeza con este tutorial lo termine solo por que me sentí comprometido por que vi que muchos estaban siguiéndolo y
me anime a terminarlo.
Tendras algunos mas en los siguientes dias, a todos los alumnos que tengo de programacion web les diré que se pasen por aqui ante cualquier duda, si no puedo estar yo, en tu web estaran muy bien
De veras se agradece el compromiso y esperemos que esté esta informacion aqui por mucho tiempo, es dificil encontrar ayudas asi, y tutoriales tan claros y precisos ni te cuento.
Cordiales saludos !
Se te agradece, soy estudiante y se lo mucho que puede servir un buen tutorial.
Saludos.
Una cosilla mas jordano, pero algo util que le ha fallado hoy a un chico y me ha costado encontrarlo, pero lo posteo para futuros visitantes con el mismo problema (espero que lo lean aqui abajo)
El problema surge en el siguiente codigo:
<?php query_posts('&cat=-9'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>..que imposibilita la paginacion, y esto afecta a que si no hay un archivo search.php, category.php, etc… la web deja de ser “tan dinamica”, solo trabaja el index.php como timeline de los post, no muestra categorias, busquedas, tags, etc..
El problema es con el query_posts(), que nos repite constantemente los resultados.
Por lo que se, esto debe ser nuevo, antes no me pasaba y bueno, fue quitar o cambiar la orden y se solucionó, y buscando explicaciones me encontre lo siguiente:
http://www.anieto2k.com/2008/08/13/query_posts-y-el-problema-de-la-paginacion/
El problema es que con el slider funcionaria si asi estuviera configurado pero para otros usuarios, deberian borrarlo, o en el mejor de los casos leer el codex, pero bueno ahi queda la solucion.
Solo con borrar la siguiente linea el index.php paginara:
query_posts('&cat=-9');Otra vez gracias @davidmore93, Este problema me lo reportaron ya hace tiempo lo solucione en local y se me olvido actualizar el tutorial y la Demo, en el post de anieto2k explica perfectamente la solución, simplemente agrear a la consulta la variable page para informarle a la consulta si existe paginación o no.
El código final para los que esten creando el theme con panel de control es este:
<?php $exclude_cat = of_get_option('exclude_cat', 'no entry'); if (have_posts()) : $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=$exclude_cat&paged=$paged"); while (have_posts()) : the_post(); ?>Para los que no esten utilizando panel de control:
<?php //Agregar las ID de las categorías que quieren excluir de la home if (have_posts()) : $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=ID de las categorias a excluir de la home&paged=$paged"); while (have_posts()) : the_post(); ?>Como has dicho con solo borrar esta línea funciona:
query_posts('&cat=-9');Pero si quieres evitar que alguna categoría aparezca en la portada de la web, es mejor no borrar esta línea y agregar esta tal como el código que deje antes.
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=$exclude_cat&paged=$paged");Funciona cuando actualizo a wordpress 3.5 ?
Acabo de actualizar la plantilla de ejemplo y sí, no afecta en nada la versión 3.5 de wordpress al código del tutorial, sigue funcionando perfectamente.
Hola Jordano.
En primer lugar felicitarte por el fantástico trabajo que has hecho con este tutorial, creo que nos has salvado la vida a muchos.
Simplemente quería añadir un matiz por si le ha pasado a más gente como yo. He seguido todos los pasos meticulosamente y al finalizar no me funcionaba el slider (descargando e instalando el theme finalizado tampoco) y tras indagar un poco descubrí que la solución era muy sencilla. Resulta que cuando haces la llamada en el tuto a la categoría “Anuncios” le asignas el ID=9, cuando en mi caso el ID es 7, cambiando este parámetro ya me funciona el slider a la perfección. Para cualquier otro que le pase puede saber el ID de la categoría entrando en ella desde el panel de administración y mirándola en la barra de navegación.
De nuevo un millón de gracias.
Gracias Santi Po, ya le ha pasado a varias personas y le he dicho esto del ID de la categoría.
En el theme final que dejo para descargar, esta categoría a de seleccionarse desde el panel de control de la plantilla.
Hola de nuevo Jordano.
Estoy siguiendo tu tutorial para adaptarlo a una plantilla que estoy haciendo, puedes verla aquí (sólo está el index):
http://pilatesriazor.tk/
Mi problema es el siguiente: Puedes ver en la plantilla el slider de imágenes, hecho con “Cycle” y puesto en el head de index.php (o de header.php). Pues bien, cuando trato de poner el script en el archivo functions.php en base a cómo lo explicas en el tutorial, éste deja de funcionar y sólo aparece la primera imagen, desapareciendo también los botones de navegación, mientras que si lo mantengo en el head de index.php funciona a la perfección. Te dejo el código:
functions.php:
//Scripts JQuery
function wd_load_script(){
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’,'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’);
wp_register_script(‘cycle’,get_template_directory_uri() . ‘/js/jquery.cycle.all.js’,'jquery’);
wp_register_script(‘custom’,get_template_directory_uri() . ‘/js/custom.js’,'jquery’);
wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘cycle’);
wp_enqueue_script(‘custom’);
}
add_action(‘wp_enqueue_scripts’,'wd_load_script’);
index.php:
$(document).ready(function()
{
$(‘#slider-wrapper’)
.before(”)
.cycle({
fx: ‘scrollHorz’,
speed: 1000,
timeout: 3000,
pager: ‘#nav_slider’
});
});
Muchas gracias de antemano y de nuevo enhorabuena por el tutorial.
Saludos.
¿Conseguiste solucionarlo compañero?
Ok. Muchas gracias.
Pondré en la web mi consulta. De todos modos debo hacerte la observación que estoy usando tu mismo theme, y según entiendo, tu theme ¿”ya” venía con la función widget incorporada?
Saludos,
Héctor
Quizás leíste mal, la función BODY_CLASS(); no tiene nada que ver con el menú apariencia, esta función simplemente agrega la clase en el body.
El menú apariencia por defecto solo aparece el editor, para que aparezca widget y menú, debe tener soporte para estas funciones en tu theme actual.
Cualquier otra duda en la web, de esta forma le sirve a otros.
Un saludo.
Hola Jordano:
Antes que nada, muchas gracias por haber subido tu excelente tutorial sobre “de HTML a WordPress”. Sin embargo, tengo un problema que no sé cómo solucionar. En la !a parte en el punto FUNCION BODY_CLASS(); dices que en el panel ADMINISTRACION -> APARIENCIA aparecen estas tres etiquetas: TEMA – WIDGETS – EDITOR. Bien, ahí está mi problema: sólo me aparecen dos etiquetas: TEMAS y EDITOR. ¿Dónde estará el error que impide la presencia de la etiqueta WIDGETS?
Gracias de antemano y saludos,
Héctor
Esto que te sucede es un poco extraño, la el menú widget entra en wordpress por defecto, incluso en un theme que solo tenga entre sus archivos solo el style.css y el index.php.
debe de salirte sin tener que agregar código.
Buenas tardes e seguido todo el tutorial y me a parecido extremadamente bueno, hay algunas dudas que e ido resolviendo, pero hay una que todavía no logro resolver y es de donde salio el identificador “wpcf7-f76-t1-o1″ que utilizaste para el estilo css de formulario de contacto de widget, me podrias indicar en donde puedo tomar este dato ya que si lo pongo en mi hoja de estilos no muestra los cambios.
Que tal @kadoshgt, los selectores que utilice para aplicar estilos al formulario, son los generados por el plugins contact Form 7.
Cuando instales el plugins crea tu formulario y lo pones en el sidebar, luego revisas el código fuente y tomas los selectores que te saldrán y lo sustituyes en la hoja de estilos.
Gracias por responder tan pronto, te comento que tengo ya instalado contact form7 incluso ya tengo el formulario y lo que hice fue poner lo mismo “wpcf7-f76-t1-o1″ solo que me di cuenta que el formulario que cree tenia un numero y lo sustituí por el “f76″ y todo funciono muy bien y una ves más muchas gracias este tutorial me a sido de mucha ayuda, por cierto en donde esta el sito que estoy creando es http://www.corporacionresuena.com y ya voy dejándolo como quiero aunque todavía me falta muchas cosas más, GRACIAS NUEVAMENTE GRACIAS
Te esta quedando muy bien el sitio web, felicitaciones, me agrada saber que este tuto ayuda a otras personas. Saludos.
Buenas jordano_p, te quería hacer otras consulta, e intentado ponerle la paginacion a la pagina principal pero no e podido ya intente incluso al ver que no pude instale un plugins para esto y no me funciono, también estaba viendo que para el tema que hice no puedo hacer que funcionen varios plugins como por ejemplo el poner botones de facebook o twiter en cada post, que puedo hacer
Hola, para solucionar el problema de la paginación, en comentarios anteriores hablamos de que hay que modificar el código y utilizar este en el loop de la página principal.
<?php //Agregar las ID de las categorías que quieren excluir de la home <?php if (have_posts()) : $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=ID de las categorias a excluir de la home&paged=$paged"); while (have_posts()) : the_post(); ?>Para el problema de que algunos plugins no funcional tienes que revisar los ganchos o hooks, wp_head() en el hader.php y wp_footer en el footer.php.
Estos ganchos lo utilizan los desarrolladores para arrancar iniciar los plugins, revisa esto y si no lo tienes pues agrégalo en el código de cada archivo.
Espero te sirva, un saludo.
Hola… mira tengo una pagina html con frames, como todos sabemos esos frames llaman a otras paginas html..
pero al querer hacer eso en wordpress.. como llamo a las otras paginas? donde tengo que subir los archivos o que?
Gracias
Hola, te agradezco mucho el tutorial; esta excelente y muy bien explicado; estoy haciendo mi primer paso de un sitio HTML a WP.
Quiero hacerte una pregunta, ya que el sitio que quiero convertir en su primera pagina es un slider de fotografias a pantalla completa y sobre eso está el menu en la parte superior, pero la idea mia era cargar los contenidos de las paginas en una ventana tipo modal y ya que es una pagina iniformativa no es la idea hacer comentarios en ella.
para lograr eso debo solamenet quitar el codigo que muestra comentarios y el formulario?
gracias,
Lo que puedes hacer es crear una plantilla personalizada para la página principal y agregar y eliminar el código que te haga falta.
Lo de lo comentarios siempre recomiendo dejar el código y activar o desactivar por el panel de administración.
si un día te piden comentarios lo solucionas con un clic.
holas y donde le pego este codigo: ID (#wiget-contact)
El ID lo sustituye en la hoja de estilo por el ID q genera el plugins contact form, para q se visualice correctamente.
ok muchas gracias ya lo solusione y felicidades excelente tutorial otra cosita me gustaria saber si tienes algun tutorial para crear widgets con API muchas gracias y muchos exitos
eres un dios! muchas gracias!todo muy bien explicado y con los archivos bases, mas facil, si te llegas a atorar con algun paso lo buscas y listo!
pepe saludos de pepe desde MALLORCA si me lees me gustaría compartir tema API wordpress.
Gracias Pepe.
Hola siguiendo el tutorial en el paso de los menús con la plantilla que ando adaptando que es esta … http://www.templateaccess.com/demos/responsive/html/vooveo/ el menú lateral está formado por este código:
Lo que sucede es que activo el Menú principal en functions.php va correcto aparece menú en wordpress administrador. Pero aun sin poner nada ni tener ningún botón activado ya me sale el código así …
..
Veo que me queda mucho he visto http://codex.wordpress.org/Function_Reference/wp_nav_menu y bueno voy sacando información pero al estar en inglés me satura. ¿Saben algúna manera de profundizar mas en este tema?
Quizás este configurado para que aparezca eso hasta que tu cree un menú en esa posición.
Don Jordano no me aceptes los comentarios, no se como pegar html en el comentario igualmente gracias por su fabuloso trabajo me está sirviendo mucho.
Ya funciona el tema estaba en el wp_nav_menu() donde pone menu_class yo ponía class buuuf
‘MenuPrincipal’,
‘container’ => ‘false’,
‘menu_class’ => ‘menusm’,
));
?>
y por que no puse bien el html anterior en el comentario por que lo puse entre
lo que sale no es lo que yo colgué pero bueno. Gracias. Sigo trabajando.Para agregar HTML en los comentarios utiliza
[/html]