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.

Hola, después de un largo tiempo sin poder retomar la serie de tutoriales regreso para empezar la conversión pasar de html a wordpress de nuestra plantilla, en la descarga les dejo la plantilla ya terminada, para explicar detalladamente el proceso de conversión a wordpress dividiré en tres partes este proceso, en las cuales trataremos los siguientes temas:

Pasar de html a wordpress – Primera parte:

Descargar resultado final de esta parte

Segunda parte:

Descargar resultado final de esta parte

  • Dividir la estructura del archivo index.php en: Header.php, index.php, footer.php y sidebar.php
  • Configuración del archivo single.php
  • Configurar los comentarios de cada post
  • Agregar paginación de los post desde el archivo single.php

Tercera parte:

  • Registrar posición de los widget para el sidebar
  • Utilizar campos personalizados de wordpress.
  • Crear el widget próximos conciertos utilizando campos personalizados
  • Crear widget próximos conciertos
  • Crear Widget últimos vídeos
  • Crear formulario de contacto con el plugins contactform

Empezamos la primera parte

En la parte anterior del tutorial maquetamos la plantilla con html y css, ahora utilizaremos esa plantilla html para crear los archivos básicos de una plantilla wordpress.

En nuestro caso no crearemos todos los archivos que tiene la plantilla por defecto de wordpress, ya que para su funcionamiento básico no es necesario, Nuestra plantilla estará constituida por los siguientes archivos:

  • index.php: Mostrara todas las entras del blog en la página principal, estará compuesto por el header, content, sidebar y el footer
  • header.php: Es el archivo donde agregaremos todos los meta datos de la web e incluiremos las hojas de estilos y los script necesarios.
  • Footer.php: Este archivo contiene la información del copy right de la web, un menú y alguna otra información opcional, se suele agregar zonas para widget en este archivo, en nuestro caso no será necesario.
  • sidebar.php: Este archivo contiene todo el contenido de la barra lateral, se puede agregar directamente esta información sin la necesidad de crear este archivo, pero tenerlo en un archivo independiente da la facilidad de editar la información en un solo lugar y que se refleje en allí donde se incluya el archivo.
  • single.php: Es el archivo que se muestra cuando se accede a una entrada concreta, este archivo incluye la plantilla de comentarios, en nuestro caso incluirá la plantilla de comentarios, el sidebar con un widget que muestre los artículos relacionados por categoría y la navegación de los artículos
  • page.php: WordPress tiene una funcionalidad que permite crear páginas que se comporten en gran medida como una página HTML estática, se utilizan generalmente para mostrar contenido estático en nuestro wordpress, la página por defecto muestra el contenido agregado en el panel de administración ala página y el sidebar, también tiene opción de activar o desactivar los comentarios.
  • functions:Es uno de los archivos más importantes de un theme wordpress, en este archivo se definen una serie de funciones y se hacen llamadas a funciones propias de la Api de WordPress.
  • style.css: Este es otro archivo muy importante, en el se definen los datos propios del tema en cuestión, Author, descripción, y otras informaciones que se visualizan en el gestor de themes en el panel de administración dewordpress.
  • 404.php: Cuando wordpress no puede encontrar los datos que busca, presenta este archivo. Por defecto no hay nada en esta página más que un breve comentario que indica al usuario el error (Error 404 – Not Found).
  • search.php: Este archivo muestra los resultados de búsqueda en el blog.
  • searchform.php: Aunque wordpress tiene una función personalizada que te devuelve el formulario de búsqueda utilizaremos este archivo para sobre escribir la salida html de esa función, de esta forma podemos maquetar el formulario de búsqueda a nuestro gusto o necesidad.

Estos son los archivos que utilizaremos para nuestra plantilla, WordPress funciona perfectamente solo utilizando (index.php, single.php, function.php, style.css), solo que de esa forma te brinda una funcionalidad muy limitada.

Si vas a seguir este tutorial deberías de instalar wordpress en local, para que vayas creando la plantilla por partes según pasa el tutorial.

Estructura de archivos básicos para nuestra plantilla

Para la estructura de los archivos utilizaremos la creada en el tutorial anterior y lo copiaremos dentro de la carpeta wp_content/themes, de esta forma ya tenemos los archivos base de nuestra plantilla.

grey De HTML a Wordpress   Theme WordPress part.3

Para empezar la creación de nuestra plantilla wordpress, renombrar el archivo index.html a index.php, dentro de esa misma carpeta crea otro archivo llamado functions.php, con esto ya estamos preparado para empezar a dinamizar nuestro archivo index.php.

Hacer que wordpress reconozca nuestra plantilla HTML en el panel de temas

Para que wordpress reconosca nuestros archivos como una plantilla en el panel de administración debemos editar el archivo style.css para agregar algunos datos requeridos por el sistema de wordpress para reconocer nuestra plantilla. Abre el archivo style.css y agrega los siguientes datos.

Con esto si entramos a nuestro panel de administración y en el apartado Apariencia –> Temas, podemos ver que ya wordpress reconoce nuestra plantilla, solo que no tiene ninguna imagen en miniatura, pueden copiar la que dejo en los archivos base del tutorial o crear la suya propia.

grey De HTML a Wordpress   Theme WordPress part.3

Si visualizamos la web en el navegador podemos ver que se pueden visualizar la estructura html pero sin ningún tipo de estilo aplicado, esto se debe a que debemos Cambiar la ruta relativa que utilizábamos anteriormente en nuestro diseño estático y debemos agregar la función que nos brinda wordpress para llamar la hoja de estilos, esto lo aremos en el siguiente paso, con lo cual empecemos a agregar las distintas etiquetas de plantilla que nos brinda wordpress.

Antes de empezar les dejo esta imagen donde pueden encontrar casi todas las etiquetas de plantillas de wordpress organizadas por categorías, pueden tenerla a mano e ir guiándose de ella, también recomendaré utilizar un editor de código que les ayude con referencias al código de wordpress y evitarán problemas de escritura, yo utilizo DreamWeaver y Eclipse, los dos tienen ayuda para la escritura del código en wordpress.

Ahora Trabajaremos dinamizando todo el archivo index.php, iremos agregando etiquetas de plantilla en orden descendente desde arriba hacia abajo hasta tener todo creado, Empecemos!!!.

Dinamizar información en el head

En nuestro archivo index.php en la parte del head cambiaremos el código estático por el ya dinámico, mayormente utilizaremos la función bloginfo(), les recomiendo echarle un vistazo en el code de wordpress.

En el archivo index.php borra todo el código desde el cierre de la etiqueta head hasta el inicio del documento (DOCTYPE) Como muestra la siguiente imagen.

grey De HTML a Wordpress   Theme WordPress part.3

Borra todo el código seleccionado anteriormente y sustitúyelo por el siguiente:

El código esta comentado y creo que se puede entender perfectamente para que sirve cada trozo de código.

Las funciones utilizadas fueron las siguientes:

  • language_attributes();: Muestra el atributo de idioma para la etiqueta HTML
  • bloginfo( 'charset' );: Muestra el conjunto de caracteres usado en tu blog,(EJ: UTF-8)
  • Para el titulo podemos usar bloginfo('name'); que nos devuelve el nombre que hemos puesto en el panel de administración, actualmente como se toma tan en serio el tema del SEO ayudamos un poco a nuestro blog colocando un titulo dinámico, que cambie dependiendo de la pagina que se encuentre el usuario, esto lo logramos con el código que colocamos entre las etiquetas title anteriormente.
  • bloginfo( 'stylesheet_url' );: Esta función nos devuelve la url del archivo style.css de nuestra plantilla.(stylesheet_url = http://example/home/wp/wp-content/themes/theme/style.css).
  • bloginfo( 'rss2_url' );Devuelve la URL del feed RSS 2.0 (/feed)
  • wp_head();: esta función no puede faltar en tu head ya que muchos plugins la utilizan como referencia para iniciarse.

Seguramente han notado que los script no aparecen en el head, los he eliminado del head para agregarlo desde el archivo functions.php, ¿por que? Sencillamente evitar que se carguen todos en todas las páginas sin necesidad y además de paso evitar tantas peticiones HTTP solo generando las necesaria en cada caso.

Por ejemplo: si no mostraremos el slider en todas las páginas, ¿para que cargar en el head el archivo jquery.tinycarousel.min.js, para eso crearemos una función en la que se cargue el script necesario en cada caso.

Agregar script de forma selectiva en el head de wordpress

Para agregar de forma automática los script necesarios a nuestro head wordpress cuenta con una acción wp_register_script(), aprovechando esto, crearemos una función y aremos que se ejecute con wp_enqueue_scripts(), puedes obtener más información sobre esta acción en el code de wordpress, en nuestro caso solo agregaremos de forma selectiva el script necesario para los comentarios.

Abre el archivo functions.php y agrega el siguiente código:

¿Como Funciona el código anterior?

Creamos la función wd_load_script(), dentro de esta función registramos y desactivamos los script utilizando las fuinciones wp_deregister_script y wp_register_script respectivamente, luego se llama con la función wp_enqueue_script() los script registrados con la función wp_register_script, esta función solo se utiliza cuando utilizamos un script que no sea registrado por defecto en wordpress, Aquí puedes ver una lista de los script registrados por defecto en wordpress.

Y por ultimo utilizando add_action('wp_enqueue_scripts', 'wd_load_script');, decimos a wordpress que cuando inicie los script que se ejecute la funcion wd_load_script que es donde cargamos los escript que necesitamos.

La funcion add_action() en wordpress son muy importante especialmente para los plugins, puedes informarte sobre ello aquí.)

En nuestro caso desactivamos la carga por defecto de jQuery y utilizamos en su lugar la versión alojada en la librería de API de google.

Script para los comentarios

Para los comentarios wordpress utiliza un script que es totalmente innecesario cargarlo en la página principal por ejemplo, por esta razón crearemos una función la cual solo cargue este script en las paginas single.php y page.php, el código utilizado es el siguiente.

El código anterior simplemente utilizamos una función la cual contiene una condicional if que pregunta si estamos en la en single.php o en page.php, si utilizáramos los comentarios en otras páginas pues debería de agregarlas a esta lista.

Luego tenemos la función wp_enqueue_script que llama nuestro script, en este caso comment-reply que es uno de los que registra wordpres por defecto con lo cual no hace falta registrarlo, y por último agregamos la accion que activara nuestra función, add_action('wp_print_scripts', 'wd_single_scripts');

Puedes probar que se están cargando correctamente los script, pre visualizando la web y mirando si existen en el código fuente.

Con esto concluimos con nuestro head, ya tenemos todos los datos que fluyen dinámica mente,la configuración de lenguaje del documento, la codificación del documento, el titulo del blog, la hoja de estilos y el canal rss, sabiendo que debes configurar el blog desde tu panel de administración y colocar los datos pertinentes en la descripción, el nombre y el juego de caracteres que utilizaras.

función body_class();

Ya que terminamos con el head, empezamos con el BODY, lo primero que aremos es agregar la etiqueta BODY la funcion body_class();, como misión principal agregar una clase a la etiqueta BODY dependiendo de la página en la que se encuentre el usuario, es de bastante utilidad cuando tenemos un blog temático en el que hay distintas categorías y cada categoría puede tomar un estilo diferente.

Crear menú Principal del blog

Para el menú principal del blog utilizaremos los menús personalizados de wordpress, una característica agregada en la versión 3.0.

Si entra a tu panel de Administración –> Apariencia Puedes ver como nuestra plantilla no tiene soporte para menús personalizados.

grey De HTML a Wordpress   Theme WordPress part.3

Para agregar nuestro menú personalizado lo primero que debemos hacer es dar a nuestra plantilla soporte para estos menús, para ello utilizamos la función register_nav_menu(), agrega el siguiente código en el archivo functions.php

grey De HTML a Wordpress   Theme WordPress part.3

Con el código anterior además de agregar soporte para menú personalizado, aprovechamos la función y registramos el menú principal del blog, hora si compruebas en el panel de administración nuestra plantilla te da la opcion de entrar en la configuración de menús personalizados.

grey De HTML a Wordpress   Theme WordPress part.3

Lo siguiente después de haber dado soporte y registrado el menú es habilitar un area en la plantilla donde se mostrará este menú, lo aremos con la función wp_nav_menu(), esta función proporciona un lugar donde los menús construidos en el panel de control se puede colocar de forma predeterminada.

En el archivo index.php eliminamos la lista desordenada que representa el menú estático de nuestra plantilla.

grey De HTML a Wordpress   Theme WordPress part.3

Sustituimos la lista por el siguiente código que hace la llamada del menú personalizado que registramos en el archivo functions.php

Utilizamos la funcion wp_nav_menu esta función tiene bastantes parámetros, de los cuales solo utilizamos los siguientes:

  • theme_location' => 'MenuPrincipal': (opcional) Es la ubicación donde podremos agregar nuestro menú desde el panel de administración.
  • 'container' => ' ': (Opcional)Pasando este parámetro evitamos que la UL sea envuelta con otras etiquetas, se permiten etiquetas nav y div, utilizamos false para que no tenga ningún envolvente.

Ya tenemos soporte para menús personalizado y tenemos un área definida para mostrar el menú en nuestra plantilla, el siguiente paso será crear las categorías que queremos mostrar en el menú y luego crearlo desde el panel de administración –> Apariencia –> Menú.

Crear categorías del Menú

vamos a crear las categorías o páginas que queremos mostrar en el menú, en nuestro caso solo agregaremos categorías, vamos al panel de administración –> Entradas –> categorías, rellenamos los campos necesarios y creamos las siguientes categorías:

  • Hip hop, Pop, Rap, Rock

grey De HTML a Wordpress   Theme WordPress part.3

Creae el menú en el panel de administración

Tenemos los items del menú, ahora crearemos el menú y le asignaremos la ubicación registrada anteriormente, para ello vamos al panel de administración –> Apariencia –> Menús, en el panel de la derecha agregamos el nombre del menú y pulsamos guardar menú, luego en el panel de la izquierda agregamos la ubicación Menú Principal y pulsamos guardar.

grey De HTML a Wordpress   Theme WordPress part.3

Ya tenemos el menú creado y en su posición, ahora solo nos queda agregar las categorías que creamos antes, para ellos en el panel categorías de la izquierda pulsamos Ver todo si no salen todas las categorías, la seleccionamos todas y pulsamos en añadir al menú.

grey De HTML a Wordpress   Theme WordPress part.3

Agregaremos un enlace personalizado para enlazar al index.php y que nos lleve ala página principal del blog, para ellos en la columna izquierda el bloque Enlaces personalizados, en el campo URL agregamos index.php, En el campo Etiqueta agregamos Home y pulsamos en Añadir menú, este item lo colocamos encima de los demas.

grey De HTML a Wordpress   Theme WordPress part.3

Con esto ya esta terminado el menú, si pre visualizas el bog en el navegador puedes ver el menú terminado, siempre puedes regresar y cambiar el orden, eliminar y agregar items al menú, es lo interesante que tiene esta forma de utilizar el menú.

Configurar El slider de imágenes

En esta parte hay varias opciones y detalle que considerar, para el slider podemos dejar que aparezcan todas las entras del blog, en nuestro caso configuraremos el slider para una categoría en especifico, se llamará Anuncios.

¿Por que una categoría para el slider? Esto es opcional yo decidí programarlo así por que me interesa que solo aparezcan imágenes de anuncios en este slider.

Teniendo todo esto en cuenta empecemos!!!

Para la imagen del slider aprobecharemos la función post-thumbnails();, Esta función nos da la facilidad de agregar soporte a imagenes de miniatura, ademas tiene la capacidad de generar imagenes de varios tamaño, par agregar diferentes tamaño de imagenes se utiliza la función add_image_size(); pasando los siguientes parámetros.

Bien para agregar soporte de imágenes en miniaturas y agregar los distintos tamaños que utilizaremos en la plantilla, agregaremos el siguiente código en el archivo functions.php

Al agregar esta función, puede entrar a editar o agregar un post y puede comprobar que existe un nuevo recuadro en el cual puede seleccionar la miniatura para ese post.

grey De HTML a Wordpress   Theme WordPress part.3

Bien, ya que tenemos las imágenes configuradas, creamos la categoría Anuncios y agregamos almenos 5 post donde estos tengan una imagen destacada con un tamaño mínimo de 400px x 190px, pueden general imágenes en esta web o utilizar las que dejo en los archivos base.

grey De HTML a Wordpress   Theme WordPress part.3grey De HTML a Wordpress   Theme WordPress part.3

De esta forma agregamos almeno 3 entradas más, una vez tenemos las entradas listas podemos empezar a dinamizar el código del slider con php y las funciones de wordpress.

Necesitamos llamar las entradas de la categoría anuncios, y que solo se muestren esos artículos en el slider, wordpress tiene una gran flexibilidad para crear consultas personalizadas un poco más avanzadas que el simple loop, para este caso utilizaremos la función WP_Query(), y llamaremos 5 post de la categoría anuncios y mostraremos solo la imagen de este articulo, empecemos.

Justo encima del div id="slider-wrapper" agrega el siguiente código:

grey De HTML a Wordpress   Theme WordPress part.3

En el código anterior almacenamos una nueva consulta (WP_Query) en la variable $query, además agregamos dos condiciones a esa consulta, que solo se muestren 5 post: (posts_per_page=5) y que los poat correspondan ala categoría 9: (cat=9), más adelante esta categoría tendremos que excluirla de la consulta que mostrará los post del blog por que esta categoría solo mostrará sus post en el slider.

Con esta consulta ya tenemos acceso a las imágenes de todos los post de la categoria ID=9. Ahora utilizaremos una lista desordenada (UL) para listar las imágenes en el slider utilizando la función the_post_thumbnail(); y pasaremos como parámetro el nombre que registramos en el archivo fuenctions.php para las imágenes del slider, para ello eliminamos las etiquetas LI que estan dentro de ul class="overview" y agregamos el siguiente código:

grey De HTML a Wordpress   Theme WordPress part.3

El código anterrior realiza la consulta a la base de datos y con el bucle while listamos las imagenes que se muestran en el slider, la imagen esta dentro de un enlace que con la función the_permalink(); enlaza a la vista completa del post, de esta forma ya obtenemos la cantidad de imágenes configurada al principio con el parámetro posts_per_page=5.

Para la paginación de las imágenes utilizaremos la variable $post_count, en la que esta almacenada la cantidad de post que tenemos, aprovecharemos esta variable en conjunto con el bucle forpara listar la cantidad de circulo de paaginación así como post hayan guardado en esta variable.

Eliminamos todas las etiquetas li que esten dentro de la etiqueta ul class="pager" y agregamos el siguiente código:

grey De HTML a Wordpress   Theme WordPress part.3

Lo que hace el código anterior es: con el bucle for comparar el valor de la variable $post_count y muestra en pantalla la cantidad de etiquetas li que sean necesarias hasta que se cumpla la condición $i < $post_count del bucle, de esta forma obtenemos la paginación dinámica mente dependiendo del número de post que se vayan a mostrar en el slider.

Para concluir cerramos la condicional if , colocamos enif justo antes de del cierre del div id="slider-wrapper".

grey De HTML a Wordpress   Theme WordPress part.3

Si ejecutas el blog en el navegador podrás ver que el slider ya funciona dinámica mente tomando las imágenes de la categoría Anuncios, este método tiene sus inconveniente, esto no deberíamos entregárselo así a un cliente ya que el cliente posiblemente no tenga ni idea de códigos, con lo cual si un día le da con mostrar menos imágenes en el slider, el cliente te llamará, lo más profesional sería agregar un simple panel de opciones para que este pueda controlar lo que muestra en el slider de forma fácil, pero eso ya se sale del objetivo de este tutorial.

Para finalizar agregamos el script del plugins tinycarousel en el head del archivo index.php, En este fragmento de código es donde se controla la configuración del slider, puedes agregar o quitar dependiendo el efecto que desees, para más información visita la página del plugins.

Configurando el logo de la web.

Para el logo de la web no tenemos mucho que hacer, mas que agregar el enlace a la página principal del blog, lo aremos con la función home_url();, tambien agregaremos el nombre de la web y el valor de la etiqueta title del enlace de forma dinámica, para ellos agregaremos el siguiente código dentro de la etiqueta h1 id="logo".

grey De HTML a Wordpress   Theme WordPress part.3grey De HTML a Wordpress   Theme WordPress part.3

El botón que esta debajo del logo lo dejo que decidan ustedes que poner en ese espacio, solo tienen que abrir el psd de la plantilla y agregar el texto que deseen y sustituir la imagen del botón, luego agregar el enlace de una categoría, post o página a la que quiera enlazar.

El loop en wordpress(Desplegar contenido del blog)

Antes de empezar a obtener dinámica mente los articulos del blog en la parte del contenido de la web, tratare de explicar una de las partes más importantes de wordpress, el LOOP, a continuación tratare de explicar su funcionamiento básico.

El loop es el encargado de mostrar el contenido en el blog, se utiliza casi para todas las llamadas de contenido de wordpress por eso su enorme importancia en saber como funciona.

Estructura básica del loop

¿Como funciona?if ( (have_posts() ) Si hay posts disponibles en la base de datos, while( (have_posts() ) mientras aya post, muéstrame el post the_post();, si hay post se ejecuta lo definido en la parte 1. Cuando se acaba el bucle while se muestra lo que salga en la parte 2. Si no se encuentra ningún post se muestra la parte 3.

Con este bucle conseguimos invocar todo lo contenido en la tabla wp_posts de la Base de Datos de nuestro blog y con ayuda de las etiquetas de plantillas podemos desplegar la información que necesitemos de cada post que es lo que aremos a continuación.

Desplegar dinámica mente los post

Después de esta breve explicación, empezamos a agregar etiquetas de plantillas para dinamizar la salida de los post del blog, para ello en el archivo index.php busca la etiqueta section id="content" role="main" y justo debajo de esta línea de código agregamos el inicio del loop, como muestro a continuación:

En el código anterior agregamos al loop la función query_posts();.

query_posts () Es la forma más fácil de modificar la consulta predeterminada que utiliza WordPress para mostrar mensajes. Utilice query_posts () para mostrar mensajes diferentes a los que normalmente aparecen en una URL específica.

En nuestro caso la utilizamos para evitar que se desplieguen los post de la categoría con ID=9, recomiendo leer en el code de wordpress esta función seguro que le ayudara bastante.

Para cerrar el bucle agregaremos endwhile; justo debajo del cierre de la etiqueta article, que es donde finaliza el post.

Si no hay post para mostrar agregaremos un mensaje de error, con lo cual agregamos else: después del cierre del bucle y para finalizar agregamos endif; después del código de error que agreguemos.

Ya con el bucle cargado empezaremos a dar dinamismo a las todas las partes que componen el post del blog, que en estos momento solo tenemos uno y en html, si esta trabajando en algún editor de código no se asuste si muestra algún error ya que es normal por que aun no hemos cerrado el bucle while ni la condicional if, asi que siga trabajando que más adelante cerraremos todo.

Agregando etiquetas de plantilla de wordpress

Titulo del post

Empezamos a sustituir las partes del post por las etiquetas de plantillas de wordpress, primero trabajaremos con el titulo, buscamos la etiqueta h2 y sustituimos el enlace por el siguiente código:

grey De HTML a Wordpress   Theme WordPress part.3

En el código anterior utilizamos las etiquetas de plantilla the_permalink() y the_title();, the_permalink(); debuelve el enlace de la entrada del post y the_title(); debuelve el titulo del post, bastante sencillo, ¿ verdad?.

Meta datos del post

Continuamos con los meta datos, en nuestro caso el autor, la categoría y la fecha del post, para obtener esa información utilizaremos las siguientes funciones:

Dentro de la etiqueta div class=”metadatos” agregamos las etiquetas anteriormente mensionadas y el código final será el siguiente:

grey De HTML a Wordpress   Theme WordPress part.3

Hay otras funciones interesantes relacionadas con las mencionadas anteriormente pero no quiero enrollarme mucho con esto ya que es de lo más sencillo.

Imagen en miniatura o post thumbnail

Para la imagen del post utilizaremos la función the_post_thumbnail();, crearé una estructura condicional el cual coloque una imagen por defecto si no existe imagen destacada en el post, el código será el siguiente:

grey De HTML a Wordpress   Theme WordPress part.3

Lo que hacemos es preguntar si hay imagen thumbnail, si no hay imagen thumbnail ejecutamos el código que agrega una imagen por defecto, si hay imagen thumbnail la muestra en pantalla.

Para llamar la imagen del post utilizamos la función the_post_thumbnail('index-thumbnail'); pasandole como parametro el nombre de la imagen registrada en el archivo functions.php.

Contenido del post

Para el contenido del post utilizaremos la función the_excerpt(); la cual nos devuelve un fragmento del post, tiene la opción de escribir el fragmento de código que quiere que se muestre al escribir el post, si no configura nada wordpress toma por defecto un extracto de las primeras 55 palabras del post.

Puede también utilizar la función the_content(); lo único es que debe siempre agregar el comentario ! - More - en la parte del post donde quiere que se corte el extracto para mostrar, es más productivo utilizar la función the_excerpt(); para mostrar extractos.

Botón leer más y número de comentarios

En la parte de abajo de cada post colocaremos el número de comentarios de la entrada y un botón leer más, para ello debajo del final del div entry-content colocamos el siguiente código:

En el código anterior creamos un div y dentro de este div colocamos el botón leer más y el número de comentario, para el número de comentario utilizamos la función comments_popup_link(), esta función nos debuelve el numero de comentarios que contiene la entrada, además de enlazar el área de los comentarios del post.

Para el botón leer más simplemente utilizamos un enlace y agregamos en el atributo href="" la función the_permalink(), esta función nos devuelve la url del post y entramos en su vista completa.

Para dar estilo tanto al botón como a los comentarios agregaremos el siguiente código css en nuestro archivo style.css.

Con esto concluimos con el botón y el número de comentarios, nuestras entradas quedarían así:

grey De HTML a Wordpress   Theme WordPress part.3

Para concluir con el loop, cerramos el bucle while, para ello despues del cierra de la etiqueta article class="post" colocamos el siguiente código:

Ademas de cerrar el bucle agregamos la sentencia else,de esta forma se ejecutará el código que agreguemos a continuación si no hay ningún post que mostrar en la base de dato, con lo cual después del código anterior agregaremos lo siguiente.

El código resultante del cierre del loop será el siguiente:

grey De HTML a Wordpress   Theme WordPress part.3

Por si te ocurre cualquier error te dejo el código completo de la dinamización del contenido del blog.

Footer Del blog

Para el footer tendremos poco trabajo, agregaremos el año del copyRight con la función the_time(), a la cual le pasamos como parámetro la “Y” esta nos devuelve el año actual, con esto mantenemos el año del copyRight actualizado, si quieres ver los parametros posibles a la función the_time() puedes ver el manual de php en pesañol.

CopyRight

Dentro del párrafo Agregamos la función the_time, el código resultante es el siguiente.

Menú Footer

Para el menú del footer debemos ir al archivo functions.php y registrarlo del mismo modo que el menú principal nuestro menú para el footer, para ellos abrimos el archivo function.php y donde registramos el menú principal, el código resultante será el siguiente:

grey De HTML a Wordpress   Theme WordPress part.3

Una vez registrado nuestro menú debemos sustituir la lista desordenada del footer por la función wp_nav_menu para llamar el menú que registramos anteriormente

grey De HTML a Wordpress   Theme WordPress part.3

Si entramos en el panel de administración –> Apariencia –> Menú, podemos ver una nueva área de menú llamada Footer Menú.

grey De HTML a Wordpress   Theme WordPress part.3

El siguiente paso es crear las páginas, categorias o post que quieras mostrar en este menú, este proceso no lo explicaré ya que en este paso he explicado todo el proceso necesario y me imagino que ya saben que deben hacer.

Con este paso terminamos la primera parte del tutorial, espero que se haya entendido todo, si tienen alguna duda no duden en dejar sus comentarios y tratare de ayudarlos en todo lo que pueda.

Conclusión

En esta parte del tutorial solo creamos el index del blog, ya nuestros post salen de forma dinámica de la base de datos, ya tenemos nuestro slider dinámico que toma los post agregados en una categoría especifica.

En la siguiente parte del tutorial trabajaremos con el archivo single.php que es donde mostraremos el post completo y agregaremos los comentarios, los comentarios aprenderemos a modificar la salida predeterminada y crearemos una estructura personalizada adaptada a nuestro diseño.

Recomiendo seguir la siguiente parte que es una de las más interesantes y difícil de encontrar en la red, les prometo que aprenderán cosas nuevas.

¿Que te ha parecido este artículo? Dejanos tu valoración...

HorribleMaloBuenoMuy BuenoExcelente (1 votes, average: 5,00 out of 5)
Loading ... Loading ...

  • 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

  • Robert

    Hola buenas, resulta que en la entradas del indice me aparecen la fecha en unas y en otras no mientras si pinchas en seguir leyendo aparece en todas, este error porque puede ser, saludos :)