De HTML a WordPress – Theme WordPress part.3

En esta ultima parte del tutorial trataremos la conversión de la plantilla HTML a wordpress, aprenderemos a llamar los post de la base de datos, utilizar las etiquetas de plantillas, como trabajar con los campos personalizados y ademas a crear un loop personalizado dependiendo de que artículos queremos mostrar.

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

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.

grey De HTML a Wordpress   Theme WordPress part.3

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.

  • 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 widget
  • after_widget - HTML para colocar después de cada widget utilizaremos
  • before_title – HTML para colocar antes de cada título
  • after_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.

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ático
  • register sidebar: para registrar área de widget para tu plantilla
  • register 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.

grey De HTML a Wordpress   Theme WordPress part.3

Como muestra la imagen anterior debes agregar cada campo personalizado lo que nos daría como resultado lo siguiente.

grey De HTML a Wordpress   Theme WordPress part.3

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.

grey De HTML a Wordpress   Theme WordPress part.3

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.

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.

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.

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.

grey De HTML a Wordpress   Theme WordPress part.3

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.

    grey De HTML a Wordpress   Theme WordPress part.3

  2. Instalar el plugins desde el gestor de plugins de wordpress

    grey De HTML a Wordpress   Theme WordPress part.3

    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.

    grey De HTML a Wordpress   Theme WordPress part.3

    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.

grey De HTML a Wordpress   Theme WordPress part.3

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.

grey De HTML a Wordpress   Theme WordPress part.3

Campo área de texto

De la lita desplegable seleccionamos la opción Área de texto, y lo configuramos como en la imagen siguiente.

grey De HTML a Wordpress   Theme WordPress part.3

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.

grey De HTML a Wordpress   Theme WordPress part.3

El código completo que hemos generado será el siguiente:

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.

grey De HTML a Wordpress   Theme WordPress part.3

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.

El código completo que debemos pegar en el sidebar.php justo debajo del wiget anterior es el siguiente.

Al agregar este código en el sidebar.php debemos tener el formulario ya funcionando,nos quedará algo como en la siguiente imagen.

grey De HTML a Wordpress   Theme WordPress part.3

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.

grey De HTML a Wordpress   Theme WordPress part.3

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.

grey De HTML a Wordpress   Theme WordPress part.3

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

  • http://web.tursos.com Josue Ochoa

    Esta bueno tu blog, sigue así. :)

  • Gual

    Gracias por el tutorial. Estoy siguiendo tus pasos pero cambiando un poco el diseño..ya te contaré. Saludos

  • Hernán

    Hola! Este tutorial es GENIAAAALLL!!!!

    Cuando subis las otras partes?

    Abrazo!!

    • jordano_p

      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.

      • Hernán

        Copado!! Ya me suscribí al RSS :)

        Abrazo!

  • http://www.hmm-multimedia.com actodefe

    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.

    • jordano_p

      Me alegra que les guste, este es el primero de muchos que pretendo publicar desde que tenga un tiempo libre.

  • http://elpixelvivo.com el pixel vivo

    Muy bueno el tutorial.

    Muchas Gracias, enhorabuena por tu web.

    Suerte!

  • http://www.lacasadelmago.es Mith

    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!

    • http://www.lacasadelmago.es Mith

      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 ;)

    • jordano_p

      Gracias por el detalle no me di cuenta de eso. Arreglado…

  • http://www.lacasadelmago.es Mith

    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

  • jordano_p

    Todo arreglado Muth, muchas gracias por las correcciones.

  • Mario

    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!!!

    • jordano_p

      Sin ningún problema trataré de ayudarte en cualquier duda que te pueda surgir.

  • Miguel Martelo

    Para cuando planeas subir la tercera parte Jordano????

    Gracias por todo.

    • jordano_p

      Lo tengo terminado en localhost, no he tenido tiempo de publicarlo, cuando saque un rato libre lo publicaré. lo siento mucho tardar tanto.

  • Anon

    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? :D

    • jordano_p

      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. :-D

      • http://twitter.com/PepInca Pep Sánchez C. (@PepInca)

        Hola a todos¡¡¡ Jordano-P ¿Aún estás operativo????

  • Cesar

    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?.

  • CristianXP44

    Muy bueno todo el tutorial, haber si algún día lo suben en PDF para descargarlo.
    Gracias

  • jordano_p

    @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.

  • http://proyectoswebgt.com jjop_215

    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!

  • gustavo

    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!

    • jordano_p

      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.

  • http://saetaweb.com Elvis Martín Rozo

    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!!!!

  • jordano_p

    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.

  • Alex Bascuañn

    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 ? :(…

    • jordano_p

      Que error tienes?

  • Camilo Illanes

    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!!

    • jordano_p

      la opción de imagen destacada te aparece en el panel que aparece cuando agregas una imagen, Fíjate bien.

      • Camilo Illanes

        ya inserte una imagen pero no resulta no se que podra ser

    • jordano_p

      Si pudiera ver que es lo que estas asiendo seria más fácil decirte cual es el error.

  • Micky

    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 ^^

    • jordano_p

      Acabo de publicar la ultima parte hoy mismo

  • Fabri

    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

    • http://twitter.com/Jordano_P Jordano (@Jordano_P)

      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.

      • Fabri

        Sii porfavor crea un tutorial que no encuentro por ningun lado como hacerlo.
        Sos el mejor!!!
        Mil gracias

  • Javier

    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!!!

    • http://twitter.com/Jordano_P Jordano (@Jordano_P)

      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.

      • Javier

        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?

      • http://jordanopolanco.com jordano_p

        @Javier si, no me di cuenta, eso podemos solucionarlo cambiando esta función:

        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ón the_date().

        Otra vez gracias por avisarme de los errores.

  • http://www.facebook.com/kusahio Kmlo Cross

    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?

    • http://jordanopolanco.com jordano_p

      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.

      • http://gravatar.com/miguelginel Mike G

        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

  • http://poderfm.comlu.com/radio/ Anibox143

    Hola, amigo muy bueno tú tutorial… la idea es qué si podría usar, CS3 ya qué no tengo CS4 espero tú respuestas… SALUDOS ;)

    • http://twitter.com/Jordano_P Jordano (@Jordano_P)

      Claro que si no importa la versión de strong>photoshop para crear el theme de wordpress

  • http://www.rocklandgt.blogspot.com jjop215

    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?

  • http://photosbeatriz.wordpress.com jordano_p

    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.

  • http://viricross.wordpress.com viri2004

    Excelente tutorial!!! Gracias por tu aporte, me ha servido muxo!!!

    • http://jordanopolanco.com jordano_p

      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

  • http://gravatar.com/karbo13 karbo13Karbp13

    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.

    • http://jordanopolanco.com jordano_p

      Ya esta resuelto amigo, me di cuenta el otro día pero se me paso areglarlo, Gracias por avisar.

  • http://blognsl.wordpress.com jaimcuev

    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 ?

    • http://blognsl.wordpress.com jaimcuev

      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

      • http://jordanopolanco.com jordano_p

        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.

  • http://gravatar.com/pepfarin pepfarinpep farin

    Muchiiisimas gracias, excelente explicación. Lo necesitaba como agua de mayo.

  • http://www.686studio.com/ 686studio@gmail.com

    super agradecido hare una prueba de inmediato llevo tiempo buscando como llevar mi pagina web a WP
    Saludos desde Mexicali

  • http://twitter.com/Gaminganet Gaminga (@Gaminganet)

    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??

    • http://jordanopolanco.com jordano_p

      pueden ser muchas cosas amigo, te mencionare algunas a tener en cuenta:

      • Si utilizas campos personalizados debes avisar al cliente de su utilización
      • Al igual si utilizas imagen destacadas para los post.
      • si utilizas plugin para el funcionamiento del theme debe o bien avisar de que deben instalarlo o tu mismo agregar los archivos de ese plugins en el theme
      • http://twitter.com/Gaminganet Gaminga (@Gaminganet)

        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?

  • http://jordanopolanco.com jordano_p

    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

    • http://twitter.com/Gaminganet Gaminga (@Gaminganet)

      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?

  • http://jordanopolanco.com jordano_p

    Utilizando las consultas personalizadas en wordpres claro que puedes mostrar los artículos como quieras.

    • http://twitter.com/Gaminganet Gaminga (@Gaminganet)

      pongo esto pero no me funciona corrigemelo si esta mal porfas T.T

  • http://twitter.com/Gaminganet Gaminga (@Gaminganet)

    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

  • MAIK

    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.

    • http://jordanopolanco.com jordano_p

      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.

  • Camilo Illanes

    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:

    si me pudieras ayudar por favor y gracias de antemano :)

  • http://twitter.com/Jordano_P Jordano (@Jordano_P)

    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.

  • JoseCo

    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

    • http://jordanopolanco.com jordano_p

      @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.

      • JoseCo

        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

      • http://jordanopolanco.com jordano_p

        Si tienes la plantilla instalada online puedes poner aquí la url y lo miro.

  • JoseCo

    Al fin pude solucionar lo de la hoja de estilo… pero las imagenes aun se me resisten.

    http://pruebasvipe.herobo.com/

    • JoseCo

      Madre mia, al fin solucione todo. Se ve que era una mala instalación del wordpress.

      Muchas gracias por todo.

  • Pingback: URL

  • http://desphy.com davidmore93

    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.

    • http://jordanopolanco.com jordano_p

      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.

      • http://desphy.com davidmore93

        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 !

  • http://jordanopolanco.com jordano_p

    Se te agradece, soy estudiante y se lo mucho que puede servir un buen tutorial.

    Saludos.

  • http://desphy.com davidmore93

    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:
    [sourcecode language="css"]

    <?php
    query_posts(‘&cat=-9′);
    if ( have_posts() ) : while ( have_posts() ) : the_post();
    ?>

    [/sourcecode]

    ..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:
    [sourcecode language="css"]
    query_posts(‘&cat=-9′);
    [/sourcecode]

    • http://jordanopolanco.com jordano_p

      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:

      Para los que no esten utilizando panel de control:

      Como has dicho con solo borrar esta línea funciona:

      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.

  • Jaime

    Funciona cuando actualizo a wordpress 3.5 ?

    • http://jordanopolanco.com jordano_p

      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.

  • http://gravatar.com/elduendedelparke Santi Po

    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.

    • http://jordanopolanco.com jordano_p

      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.

  • Santi Po

    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.

    • http://twitter.com/PepInca Pep Sánchez C. (@PepInca)

      ¿Conseguiste solucionarlo compañero?

  • Pingback: Nuevo theme, problema al mostrar los comentarios

  • http://www.3dreamagic.com Héctor Guillermo

    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

    • http://jordanopolanco.com jordano_p

      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.

  • http://gravatar.com/kadoshgt kadoshgt

    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.

    • http://jordanopolanco.com jordano_p

      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.

      • http://gravatar.com/kadoshgt kadoshgt

        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

  • http://jordanopolanco.com jordano_p

    Te esta quedando muy bien el sitio web, felicitaciones, me agrada saber que este tuto ayuda a otras personas. Saludos.

  • http://gravatar.com/kadoshgt kadoshgt

    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

    • http://jordanopolanco.com jordano_p

      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.

      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.

  • zuri

    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

  • patriciocifuentes

    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,

  • http://jordanopolanco.com jordano_p

    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.

  • Cesar

    holas y donde le pego este codigo: ID (#wiget-contact)

    • jordano_p

      El ID lo sustituye en la hoja de estilo por el ID q genera el plugins contact form, para q se visualice correctamente.

      • Cesar

        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

  • pepe

    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!

    • http://twitter.com/PepInca Pep Sánchez C. (@PepInca)

      pepe saludos de pepe desde MALLORCA si me lees me gustaría compartir tema API wordpress.

  • Pingback: fiestas privadas en barco

  • Pingback: Ayuda tabletas

  • http://jordanopolanco.com jordano_p

    Gracias Pepe.

  • Pingback: badoo search

  • Pingback: meizitang soft gel

  • http://twitter.com/PepInca Pep Sánchez C. (@PepInca)

    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?

    • http://jordanopolanco.com jordano_p

      Quizás este configurado para que aparezca eso hasta que tu cree un menú en esa posición.

  • http://twitter.com/PepInca Pep Sánchez C. (@PepInca)

    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.

  • http://twitter.com/PepInca Pep Sánchez C. (@PepInca)

    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.

    • http://jordanopolanco.com jordano_p

      Para agregar HTML en los comentarios utiliza

      [/html]

  • John freddy

    Hola que tal…. Mi nombre es John freddy y quiero darte las gracias primeramente por este materia de apoyo, tu esfuerzo, y sobre todo el deseo que querer enseñar y compartir. He seguido paso a paso el tutorial y los resultados han sido satisfactorios con solo una excepción y es para el formulario de búsqueda no veo como lo haces. quisiera que me des (si es posible) una explicación “Detallada” de cómo hacerlo. Nuevamente Gracias por todo.

    • http://jordanopolanco.com jordano_p

      Si te refieres a la parte funcional del buscador: El buscador de wordpress utiliza dos archivos para su funcionamiento:

      search.php: Este archivo muestra los resultados de búsqueda en el blog.
      searchform.php: Este archivo contiene el formulario del buscador el cual luego llamas desde cualquier parte de la plantilla utilizando la función :

      Te aconsejo ver los archivos de la plantilla por defecto de wordpress, así te haces una idea de que contiene cada uno.

      Un saludo.

  • Leo

    Jordano, una consulta, no me funciona el paginador del slider, osea no pasa de una foto a otra. No termino de darme cuenta como hacerlo funcionar, hasta ahora no veo errores…, vi los comments y no encontre nada…, podrias ayudarme ?

    Gracias!!

    • http://jordanopolanco.com jordano_p

      Hola Leo.
      Si en e slider sale la paginación pero no te pasa de una a otra, eso puede ser problema de la llama al script que lo pone en funcionamiento.
      ¿Agregaste esta función en el head?

      • Leo

        Si, esta incluida, de todas formas la borre y la volvi a pegar, pero igual. Pense que quizas habia hecho algo mal desde el administrador de wordpress, pero lo volvi a hacer, y nada…, alguna idea ?

        Muchas Gracias! gran tuto :D

  • http://twitter.com/Javlarr Javier Larrea (@Javlarr)

    Hola Jordano, muy bueno el tuto hasta ahora voy bien ojalá acabemos asi, una duda como cambio o coloco la imagen para el tema? no logro hacerlo.

    Saludos

  • http://twitter.com/Javlarr Javier Larrea (@Javlarr)

    Jordano disculpa, era muy tonta la solución ya esta arreglado.

    • http://twitter.com/Jordano_P Jordano (@Jordano_P)

      Igual lo respondo por si sirve a otras personas.

      Para cambiar la imagen del theme que se muestra en el panel de control, solo hay que agregar una imagen en la carpeta del theme con screenshot como nombre.

  • Yami

    Gracias Totales :) me encantó el tutorial , apenas tenga tiempo creo que lo pondré en práctica. Saludos

  • Leo

    Fijate, que en la parte donde mostras TU codigo, para verificar que nosotros tenemos lo mismo, tenes un de mas, ya esta cerrado y debajo hay otro. Por otro lado, aun no logre hacer funcionar el slider, para que cambie de imagen.

  • Leo

    Jordano, corrijo, ya me funcina la paginacion del slider.

    Era que no tenia wp_head(); Gracias

    • http://jordanopolanco.com jordano_p

      Es muy importante esto, wp_head() se utiliza como gancho para agregar los script en el head.

      Que bueno que lo hayas solucionado.

  • Leo

    jordano, otra consulta, tengo wordpress 3.5, y no me aparece el cuadro de campos personalizados…, en opciones de pantalla, tampoco me aparece el checkbox como para hbailitar la opcion, hay algo que tengo q hacer para poder ver dicho cuadro en el backend ? Gracias nuevamente!!

    • http://jordanopolanco.com jordano_p

      En principio no deberías de hacer nada para que aparezca esta opción, lo único es que debes estar editando algún artículo.

  • Leo

    ya lo encontre jordano ! :D gracias igual !

  • Leo

    en la seccion añadir entrada > opciones de pantalla > darle click al checkbox ” campos personalizados ” o “custom fields”

    Por si a alguien le sirve!

  • http://jordanopolanco.com jordano_p

    jajajaja, pero pensé que ya estabas ahí, por eso no te lo dije. :-D

  • Leo

    Jordano, perdon la molestia nuevamente, pero no me termina de quedar claro el tema de los widgets con los campos personalizados ( que ahora si logro verlos).

    Los pasos que segui para hacer el siderbar de la derecha es lo siguiente :

    Copie el codigo que nos explicas :


    Proximos Conciertos

    <a href="”>ID, ‘Artista’,true); echo $Artista ?>
    ID, ‘Fecha’,true); echo $Fecha ?>
    ID, ‘Donde’,true); echo $Donde ?>

    1-Luego, voy a entradas, nueva categoria, creo la categoria conciertos.

    2-Voy a añadir nueva entrada, uso los campos personalizados, fecha, donde, artista, los completo, publicar.

    Quizas tenga q hacerlo desde la pestaña widgets? ahi solo veo algunos widgets que estaba por default, no tengo el widter conciertos o proximos conciertos o similar.

    Perdon por dar mil vueltos, soy nuevo en WP

    Gracias , excelente tutorial!

    • http://jordanopolanco.com jordano_p

      El código completo del widge es este:

      El código anterior lo debes pegar en el archivo sidebar.php donde esta este comentario .

      Muy importante, Cuando creas la categoría recuerda su ID y sustitúyela en el código anterior. cat=TU ID

  • Leo

    Buenisimo, ahora me quedo mas claro el tema de las categorias llevan su respectivo id…, Gracias por aclararme la situacion jordano, un abrazo, gran tuto :)

  • leo

    jordan puede ser q no se vean las imagenes del tuto ?

    • http://jordanopolanco.com jordano_p

      Yo las veo correctamente.

  • leo

    te pregunto esto por q antes veia las img de lo que mostras, las q son codigo se ven, las otras no, en ningun navegador, por eso te lo preguntaba, graicas!!!

  • Omar

    Excelente Tutorial! he podido hacer mi propia web, pronto la pondre en linea! Solo un Detalle, cuando creo el single y clickeo para ver el post completo, el slider no me aparece! Estaré haciendo algo mal? Agradezco vuestra ayuda! Muchas Gracias!

  • Birlocha

    Saludos, primero te quiero saludar y Segundo felicitarte por tan excelente herramienta, no sabe lo agradecido que estoy de ti.
    Muchas gracias.
    Atte. Birlocha Mejía

    • http://jordanopolanco.com jordano_p

      Me alegro que ta aya servido.

  • Kevin

    Saludos, muy impresionante el tutorial pero, resulta y pasa que he dise;ado mi propio theme
    pero no quiero que funcione como un blog, sino que me mi header tengo varios div (cajas) con cierta información en cada una de ella, de que manera puedo hacer esa tarea de cambiar la informacion a cada una desde el backend?

    Imaginar: un index.html donde muestre cuatro cajas con colores y cada una tiene información distinta

    Con el codigo LOOP se pueden realizar las entradas, que tan bueno es usar varios loop dentro del header?

    de esa manera puedo escribir en dos cajas pero, se puede repetir el mismo codigo LOOP pero antes creando en el backend de wordpress las categorias caja1 y caja2 posteriormente cambio en el codigo LOOP de la siguiente forma

    in_category miro cual es, en este caso es caja1 por lo tanto meto todo el codgio del loop en el div class=”caja1″

    loop con categoria caja1

    loop con categoria caja2

    te agradezco tu ayuda

    • Kevin

      Al parecer no salio bien lo que publique, algunos trozo de codigo con etiquetas

    • http://jordanopolanco.com jordano_p

      Hola Kelvin,

      Esta es una de las virtudes de wordpress, adaptarse a cualquier tipo de web, lo que me comenta se puede hacer perfectamente.

      Lo de crear tres loop no es necesario, es mejor que haga lo siguiente.

      (Asumo que tienes nociones de php)

      Crear una función en el archivo function.php, que se llame por ejemplo:

      A esta función le pasas dos parámetros, el ID de la categoría de la cual quieres mostrar post, y el número de post que quieres mostrar de dicha categoría.

      De esta forma utilizas un loop para llamarlo de los lugares que quieras, de la siguiente forma:

      Espero que hayas entendido un poco la idea.

      Un saludo.

      • Kevin

        Buen dia, te agradezco mucho por ayudarme, claro que te entiendo lo que me estas explicando pero lo malo es que no tengo mucha experiencia con php, me podrías colaborar con el código de la función para el functions.php o es similar al código del loop?

        Cuando mandas los parámetros $Cat_ID este se refiere a la categoria que creo en el backend que uso para asignarlo a una nueva entrada(post)?, si es así como se yo el numero del post?

        Soy muy nuevo en esto del wordpress ya que bastante interesante, tengo conocimiento sobre html, css, javascript pero muy poco en php

      • Kevin

        Ya logre crear el código para functions.php muestra los post pero no con el estilo de la pagina aunque hay sigo checando como mejorarlo, gracias por tu ayuda y tiempo.
        :D

      • https://www.facebook.com/Rojke34 Kevin Rojas Navarro

        Jajaja hola otra vez, (corregir una palabra anterior ‘hay’ por ‘ahi’) bueno el caso ahora es que me he bloqueado, resulta que ya puedo hacer los post pero, no toman el estilo como así tengo mis etiquetas con clases al meter el código donde quiero que aparezca no sale con formato. Por ejemplo

        (p class=”efectos”) (? php muestra_post_category (‘Beneficios’, 1); ?) (/p)

        No sale con los efectos sino que sale en el inspector de código el post fuera de la etiqueta p class=”efectos

        Así queda:
        https://dl.dropboxusercontent.com/u/66188957/Como%20queda.png

        Así debería quedar: https://dl.dropboxusercontent.com/u/66188957/Como%20deberia%20quedar.png

      • https://www.facebook.com/Rojke34 Kevin Rojas Navarro

        Hola jajajaja si de nuevo, es que no he encontrado mejor ayuda que su tutorial y quien mejor que su creador, bueno la cuestion es que ya logre darle efecto a la entrada aunque no se por que al usar (p class=”efectos”) … (/p) NO funciono
        lo que hice fue cambiar “p” por “div” y de maravilla.

        Me gustaría que me ayudaras con otra cosita, pero para mas delante mientras asimilo y mejoro con esto, muy agradecido con usted.
        (y)

        Ni siquiera en el wordpress.org forums me han respondido

  • Kevin

    Para hacerlo mas facil, en esta imagen es todo mi index (por ejemplo) https://dl.dropboxusercontent.com/u/66188957/Screen%20Shot.png

    como puedo hacer que desde wordpress sean ambas editables independientemente

  • https://www.facebook.com/Rojke34 Kevin Rojas Navarro

    Hola, yo otra vez, me podrias ayudar con lo siguiente con alguna idea o referencia
    caso para hacerlo mas entendible:
    tengo mi index.html, segundo.html, tercer.html y cuarto.html

    el caso es que en el index tengo un menu que redirecciona al resto de .html

    como se puede hacer eso con wordpress, no me quedo muy claro en el tutorial

    te agradezco de antemano.

    • http://jordanopolanco.com jordano_p

      En wordpress simplemente sería crear una página para cada index de los que tienes, y agregar en el menú cada página creada, no tiene más historias.

      • Kevin

        :’D GRACIA!!!! ya lo tengo claro pero, jajajaja si otro pero a ver que me recomiendas; bueno tengo mi header.php y al agregar una pagina (de las anteriores por decir segundo.html cierto pero esta tiene contenido con estilos ya que no puedo pegar y copiar su solo su contenido porque solo mostraria texto plano)

        como hacerlo así de facil “copiar todo mi html y pegarlo en el editor del backend” D:, entonces lo que estoy haciendo es colocar html en el page.php pero si hago uso del mismo para otra pagina se va llevar el mismo estilo para el tercer.html

  • Pingback: crocs マリンディ

  • http://gravatar.com/zparky1993 carlos

    muy bien explicado con lujo y detalle jeje mu bueno .. aver cuando subes mas tutoriles wordpress . muchas gracias

  • Jessy

    Muchas gracias por la gran ayuda….. Quería ver si me ayudabas con unas dudas, estoy tratando de agregar un slider a mi pagina, trate de implementar tu slider en mi pagina donde lo llamo desde header.php (en esta pagina realizo el enganche wp_head() y llamo al slider.php), luego copie igualito (con unas pequeñas modificaciones como los logos la carpeta inc y la posición donde quiero que aparezca el slider), luego fuí a wordpress y cree la categoría y le asigne las 5 imagenes que quiero que se presente en el slider, también agrego en los parámetros generales ($active_slider == 1, el nombre de la categoría y la cantidad de imagenes que quiero que se presente)… pero no me muestra nada en la pantalla :(, también agrege en style.css el diseño del slider pero nada y no se que será que me falta configurar o llamar para que me aparezca…. si me puedes dar una luz, te amaría más de lo que hasta ahora te amo jajajaj…. saludos y muchas gracias.

    • http://jordanopolanco.com Jordano Polanco

      Hola Jessy, recuerda que las imágenes debes de agregar la como imagen destacada para que pueda aparecer en el slider.

      Lo has hecho así?

  • http://twitter.com/Csr_Cardoso César Cardoso (@Csr_Cardoso)

    Realmente impresionante! excelente tutorial, bien explicado, excelente!!
    gracias por la gran ayuda!
    saludos
    y espero que realice mas de este tipo!
    la redacción fue genial
    buen día!

    • http://jordanopolanco.com Jordano Polanco

      Gracias por lo que me toca @Cesar, es un placer que que ha tenido bastante aceptación el tutorial.

      un saludo.

  • http://salamancaparty.com Luismi Goes

    muchas gracias¡¡¡ está muy bien

  • http://gravatar.com/lpaola paola

    Hola gracias por este tutorial esta super bueno,pero tengo un problema que cuando le doy clic a mis entradas creadas me aparece la pagina en blanco no sabes a que se deberia mi problema

    • http://jordanopolanco.com Jordano Polanco

      Hola @paola, debes revisar los siguientes puntos:

      1. Que el enlace de tus entradas sea el correcto, utiliza la función the_permalink()
      2. Revisa el archivo single.php, que no tenga error en su código, principalmente el loop de wordpress

      Si no encuentras el problema, tendrás que dejar aquí el código para ver si tienes algún error.

      Un saludo.

  • http://gravatar.com/jamarchi jamarchi

    Hola Jordan
    Estoy viendo el tutorial y me parece excelente.. baje el archivo que tienen para bajar y lo instalé en mi wordpress version 3.8.1 y no se porque me salió este error

    Fatal error: Call to undefined function wp_pagenavi() in C:\wamp\www\wordpress\wp-content\themes\miusicTheme\index.php on line 73
    Call Stack
    # Time Memory Function Location
    1 0.0008 366600 {main}( ) ..\index.php:0
    2 0.0016 370304 require( ‘C:\wamp\www\wordpress\wp-blog-header.php’ ) ..\index.php:17
    3 0.7023 22964072 require_once( ‘C:\wamp\www\wordpress\wp-includes\template-loader.php’ ) ..\wp-blog-header.php:16
    4 0.7430 23321200 include( ‘C:\wamp\www\wordpress\wp-content\themes\miusicTheme\index.php’ ) ..\template-load

    En la line 73 del index.php tengo esto

    Cual puede ser el error? gracias por tu ayuda

    • http://jordanopolanco.com Jordano Polanco

      Hola @jamarchi,

      En esta plantilla he incluido el plugin wp_pagenavi directamente en la carpeta inc, y lo he llamado en el archivo function.php, revisa que eso este todo correcto, o bien instala el plugin desde el gestor de plugin de wordpress.

      Es el problema que tienes, espero puedas resolverlo, un saludo.

  • Manuel

    Excelente blog, gracias por tu gran aporte en especial para los que estamos aprendiendo.
    el logo quisiera que fuera una imagen, como puedo hacerlo?
    nuevamente gracias por tu apoyo!

    • http://jordanopolanco.com Jordano Polanco

      Gracias @Manuel.

      El logo que utilizamos en esta web es una imagen, por qué dices que quisieras que sea una imagen?

  • http://servicio.mercadolibre.cl/MLC-41463106-mallas-de-proteccion-anticaidas-invisibles-stgo-_JM RubenQl

    muuuuuuchas gracias, este tutorial me ha gustado mucho, lo recomiendo para los que estamos empezando en wordpress