Web Desings

Diseño & Desarrollo Web

De HTML a WordPress – Theme WordPress part.3

26 febrero 2012 Compartir en redes sociales
Valoración del artículo
1 Star2 Stars3 Stars4 Stars5 Stars (28 votos)
47945 Visitas Ver Comentarios (165)
index-portada
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.

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

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.

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

<!-- #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á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.

<?php $Fecha = get_post_meta($post->ID, 'Fecha',true); echo $Fecha ?>

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.

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

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:

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

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.

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

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

1 Star2 Stars3 Stars4 Stars5 Stars (28 votos)
Páginas: 1 2 3

Escrito por: Jordano Polanco

Font-End and Back-End Developer

Hola, soy el editor y escritor de este blog, trabajo como Diseñador & Desarrollador web y comparto mis conocimientos en este blog. Otros Post (17)

Twitter Facebook Jordano Polanco

Suscríbete por correo

Suscríbete para recibir los últimos posts directamente en tu bandeja de entrada:

Add Comment

Discussion: 165 Comentarios

  1. Josue Ochoa dice:

    Esta bueno tu blog, sigue así. :)

  2. Gual dice:

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

  3. Hernán dice:

    Hola! Este tutorial es GENIAAAALLL!!!!

    Cuando subis las otras partes?

    Abrazo!!

  4. actodefe dice:

    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.

  5. Muy bueno el tutorial.

    Muchas Gracias, enhorabuena por tu web.

    Suerte!

  6. Mith dice:

    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!

    • Mith dice:

      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 dice:

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

  7. Mith dice:

    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

  8. jordano_p dice:

    Todo arreglado Muth, muchas gracias por las correcciones.

  9. Mario dice:

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

  10. Miguel Martelo dice:

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

    Gracias por todo.

    • jordano_p dice:

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

  11. Anon dice:

    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 dice:

      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

  12. Cesar dice:

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

  13. CristianXP44 dice:

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

  14. jordano_p dice:

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

  15. jjop_215 dice:

    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!

  16. gustavo dice:

    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 dice:

      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.

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

  18. jordano_p dice:

    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.

  19. Alex Bascuañn dice:

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

  20. Camilo Illanes dice:

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

  21. Micky dice:

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

  22. Fabri dice:

    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.

  23. Javier dice:

    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.

      • Javier dice:

        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?

      • jordano_p dice:

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

        //Cambiamos esta función
        <?php the_date();?>
        //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ón the_date().

        Otra vez gracias por avisarme de los errores.

  24. Kmlo Cross dice:

    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?

    • jordano_p dice:

      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.

      • Mike G dice:

        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

  25. Anibox143 dice:

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

  26. jjop215 dice:

    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?

  27. jordano_p dice:

    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.

  28. viri2004 dice:

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

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

  30. jaimcuev dice:

    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 ?

    • jaimcuev dice:

      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

      • jordano_p dice:

        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.

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

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

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

    • jordano_p dice:

      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
  34. jordano_p dice:

    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?

  35. jordano_p dice:

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

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

  37. MAIK dice:

    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.

    • jordano_p dice:

      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.

  38. Camilo Illanes dice:

    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 &gt; 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 :)

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

  40. JoseCo dice:

    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

    • jordano_p dice:

      @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

      <?php stylesheet_url();?>

      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 dice:

        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

      • jordano_p dice:

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

  41. JoseCo dice:

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

    http://pruebasvipe.herobo.com/

  42. davidmore93 dice:

    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.

    • jordano_p dice:

      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.

      • davidmore93 dice:

        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 !

  43. jordano_p dice:

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

    Saludos.

  44. davidmore93 dice:

    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'); 
    
    • jordano_p dice:

      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");
  45. Jaime dice:

    Funciona cuando actualizo a wordpress 3.5 ?

  46. Santi Po dice:

    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.

    • jordano_p dice:

      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.

  47. Santi Po dice:

    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.

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

    • jordano_p dice:

      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.

  49. kadoshgt dice:

    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.

    • jordano_p dice:

      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.

      • kadoshgt dice:

        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

  50. jordano_p dice:

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

  51. kadoshgt dice:

    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

    • jordano_p dice:

      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.

  52. zuri dice:

    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

  53. patriciocifuentes dice:

    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,

  54. jordano_p dice:

    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.

  55. Cesar dice:

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

    • jordano_p dice:

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

      • Cesar dice:

        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

  56. pepe dice:

    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!

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

    <a href="index.html" rel="nofollow">INICIO</a>
    <a href="#" rel="nofollow">Full Width adaptada</a>                        
    <a href="#" rel="nofollow">Contact</a>
    

    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í …
    ..

    <a href="...." rel="nofollow">Full Width demo Page</a>
    <a href="http://freelanceib-local.zapto.org:81/casapujadas-final/?page_id=27" rel="nofollow">Casa Pujadas Full Width demo Page</a>

    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?

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

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

  60. John freddy dice:

    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.

    • jordano_p dice:

      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 :

      <?php get_search_form(); ?>

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

      Un saludo.

  61. Leo dice:

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

    • jordano_p dice:

      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?

      <script>
      $(document).ready(function()
      	{
      	//Slider Show
      		var pager = true;//ESTABLECE A FALSE PARA DESACTIVAR LA PAGINACIÓN.
      	
      		var oSlider = $('#slider-wrapper');
      		if(oSlider.length > 0)
      		{
      			oSlider.tinycarousel(
      			{ 	pager: true, //paginación
      				interval: true, //Auto Play
      				duration: 300 //retardo de pase de imagen
      			});
      		}
      	});
      </script>
      
      • Leo dice:

        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

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

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

  64. Yami dice:

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

  65. Leo dice:

    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.

  66. Leo dice:

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

    Era que no tenia wp_head(); Gracias

  67. Leo dice:

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

  68. Leo dice:

    ya lo encontre jordano ! :D gracias igual !

  69. Leo dice:

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

    Por si a alguien le sirve!

  70. jordano_p dice:

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

  71. Leo dice:

    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!

    • jordano_p dice:

      El código completo del widge es este:

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

      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

  72. Leo dice:

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

  73. leo dice:

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

  74. leo dice:

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

  75. Omar dice:

    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!

  76. Birlocha dice:

    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

  77. Kevin dice:

    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 dice:

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

    • jordano_p dice:

      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:

      muestra_post_category($Cat_ID, $numPost){ ... }
      

      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:

      <?php muestra_post_category(15, 5);?>
      

      Espero que hayas entendido un poco la idea.

      Un saludo.

      • Kevin dice:

        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 dice:

        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

      • 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

      • 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

  78. Kevin dice:

    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

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

    • jordano_p dice:

      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 dice:

        :’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

  80. carlos dice:

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

  81. Jessy dice:

    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.

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

  83. Luismi Goes dice:

    muchas gracias¡¡¡ está muy bien

  84. paola dice:

    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

  85. jamarchi dice:

    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

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

Deja un comentario

© Copyright Web Desings | Power By Wordpress | Desings By: Jordano Polanco