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

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.

/*
Theme Name: Miusic Theme
Theme URI: http://web-desings.com/miusicTheme
Description: Miusic Theme es una plantilla gratuita para wordpress, utilizando los archivos minimos para que funcione.
Author: Jordano Polanco
Version: 1.0
License: GNU General Public License
License URI: Puede utilizarlo tanto en lo personal como comercialmente, es libre de editarlo a su gusto sin necesidad de referenciar al autor.
License: GNU General Public License
License URI: license.txt
Tags: custom-menu,full-width-template, right-sidebar
*/

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.

<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<head>
 
   <!-- METAS -->
   <meta charset="<?php bloginfo( 'charset' ); //cambiamos <meta charset="utf-8"> por su   ?>" />
   <!-- /METAS -->
 
   <title><?php
        /*Con este código agregamos a wordpress un titulo que cambia dependiendo 
        * del lugar donde te encuentres en el blog. También puede utilizar <?php bloginfo('name'); ?>
        * Muestra en la etiqueta <title> el nombre de lo que esta viendo, la forma en la que lo estamos creando
        * es mucho más amigable para los navegadores ya que muestra información de cada lugar que estés.
        */
        global $page, $paged;
 
        wp_title( '|', true, 'right' );
 
        // Agrega el nombre del blog.
        bloginfo( 'name' );
 
        // Agrega la descripción del blog, en la página principal.
        $site_description = get_bloginfo( 'description', 'display' );
        if ( $site_description && ( is_home() || is_front_page() ) )
        echo " | $site_description";
 
        // Agrega el número de página si es necesario:
        if ( $paged >= 2 || $page >= 2 )
        echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
        ?>
   </title>
 
   <!-- CSS -->
   <link href='<?php bloginfo( 'stylesheet_url' ); ?>' rel="stylesheet" />
   <!-- /CSS -->
 
   <!-- RSS & PINGBACKS -->
   <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
   <link rel="alternate" type="application/rss+xml" title="<?php bloginfo( 'name' ); ?>" href="<?php bloginfo( 'rss2_url' ); ?>" />
   <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
   <!-- /RSS & PINGBACKS -->
 
   <?php /* Para compatibilizar HTML5 con navegadores antiguos */ ?>
   <!--[if IE]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
 
   <?php
        /*Siempre agrege wp_head antes del cierre de </ head> de su thema,
        * si no lo agrega puede que muchos plugins no funcionen ya que
        * lo utilizan este gancho (hook)para agregar elementos al head.
        */
        wp_head();
   ?>
</head>

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:

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('tinycarousel', get_template_directory_uri() . '/js/jquery.tinycarousel.min.js', 'jquery');
    wp_register_script('custom', get_template_directory_uri() . '/js/custom.js', 'jquery');

    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'tinycarousel' );
    wp_enqueue_script( 'custom' );
}    

add_action('wp_enqueue_scripts', 'wd_load_script');

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

// Cargar scripts para comentarios solo en single.php y page.php
function wd_single_scripts() {
	if(is_singular() || is_page()){
	wp_enqueue_script( 'comment-reply' ); // Carga el javascript necesario para los comentarios anidados
	}
}
add_action('wp_print_scripts', 'wd_single_scripts');

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.

<body <?php body_class(); ?>>

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

/*------------------------------------------------------------*/
/*   Registrar Menus WP3.0+
/*------------------------------------------------------------*/
   if ( function_exists( 'register_nav_menus' ) )
   {
      register_nav_menus(
        array(
              'MenuPrincipal' => __( 'Menu Principal' ),
             )
      );
   }

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

<?php wp_nav_menu( 
     array(
          'theme_location' => 'MenuPrincipal', 
          'container' => 'false' 
          )); 
?>

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.

add_image_size(
     'video-thumbnail',//Nombre de la miniatura, utilizado para llamarla desde la plantilla.
     66,//Ancho de la imagen.
     56, // Alto de la imagen.
     true // Activar o desactivar el recortado de la imagen.
               );

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

/*-----------------------------------------------------------*/
/*	Configurar Imágenes Thumbnails WP2.9+
/*-----------------------------------------------------------*/
if ( function_exists( 'add_theme_support' ) ) {
	add_theme_support( 'post-thumbnails' );//Agrega soporte
	add_image_size( 'video-thumbnail', 66, 56, true ); // Videos list thumbnails
	add_image_size( 'index-thumbnail', 170, 160, true ); // Blog thumbnail
	add_image_size( 'slider-thumbnail', 400, 190, true ); // Slider thumbnail
}

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:

<?php 
   $query = new WP_Query();
   $query->query('posts_per_page=5&cat=9');
   $post_count = $query->post_count;
?>

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:

<?php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>
   <li>
      <a href="<?php the_permalink();?>"><?php the_post_thumbnail('slider-thumbnail') ?></a>
   </li>
<?php endwhile; ?>

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:

<?php for($i = 0; $i < $post_count; $i++ ){
   echo'<li><a href="#" class="pagenum" rel="'.$i.'">'.$i.'</a></li>';}
?>

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.

<script type="text/javascript">// <![CDATA[
$(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>

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

!-- #logo -->
<h1 id="logo">
   <a href="<?php echo home_url(); ?>" 
      title="<?php bloginfo('description')?>">
      <?php bloginfo('name');?>
   </a>
</h1>
<!-- Final #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

<?php if (have_posts()) : ?>;
<?php while (have_posts()) : the_post(); ?>
 
/* 1- Lo que quieres que se muestre en  el loop */
 
<?php endwhile; //finaliza el bucle ?>
 
/*2- Lo que se muestra cuando acaba el loop */
 
<?php else :?>
 
/*3- Se muestra Si no hay nada que mostrar*/
 
<?php endif; ?>

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

<?php					
   if (have_posts()) :
      $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
      query_posts("cat=-9&paged=$paged");
      while (have_posts()) : the_post();
?>
Actualizado//  14/12/2012 

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:

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

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:

<div class="MetaDatos">
   <span class="fecha">Jun 30th, 2010</span>
   <span>Categoría:<a href="#">Notícias Musciales</a></span>
   <span>Autor: <a href="#">JordanoPolanco</a></span>
</div>

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:

<!-- Imagen del post -->
<?php if ( has_post_thumbnail() ) {?>
   <figure>
      <a href="<?php the_permalink();?>"><?php the_post_thumbnail('index-thumbnail');?></a>
   </figure>
<?php }else{ ?>
   <figure>
      <a href="<?php the_permalink();?>">
         <img src="<?php bloginfo('template_url');?>/images/imageDefaul.png" alt="<?php the_title();?>"   />
      </a>
   </figure>   
<?php }?>
<!-- Final Imagen del post -->

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:

<div class="metaBottom">
    <?php comments_popup_link('0 Comentario »', '1 Comentario »', '% Comentarios »'); ?>
    <a href="<?php the_permalink();?>" title="<?php the_title(); ?>" class="leermas">Seguir Leyendo</a>
</div>

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.

.posts div.metaBottom .leermas {
    float: right;
    margin-left: 120px;
}
.posts div.metaBottom {	float: right;}
.posts div.metaBottom .leermas{
	float: right;
	margin-left: 120px;
	}

/*BOTÓN LEER MÁS*/
.leermas{
	display: inline-block;
	padding: 5px 10px;
	border-radius: 5px;
	border: solid 1px #558300;
	text-shadow: none !important;
	color: #fff !important;
	background: #6aa103;
	box-shadow:none !important;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.leermas:hover{
	text-decoration: none;
	color: red;
	-moz-box-shadow: 0px 0px 0px 1px #77b800 inset !important;
	text-shadow: 0px 0px 3px #FFFFFF !important;
	cursor:pointer;
}

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:

<?php endwhile; else:  ?>

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.

<article class="posts">
   <p><h2><?php _e('Ha ocurrido un error.'); ?></h2></p>
   <p><?php _e('Disculpe, no existen post relacionados con su criterio de busqueda'); ?></p>
   <?php get_search_form();?>
</article>
<?php endif; ?>

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

<?php endwhile; else:  ?>
 
   <article class="posts">
      <p><h2><?php _e('Ha ocurrido un error.'); ?></h2></p>
      <p><?php _e('Disculpe, no existen post relacionados con su criterio de busqueda'); ?></p>
      <?php get_search_form();?>
   </article>
<?php endif; ?>

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.

<!-- #content -->
<section id="content" role="main">
<?php query_posts('&cat=-9'); //categoria del slider ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 
   <!-- .Posts -->
   <article class="posts">
 
      <!-- .entry-header -->
      <header class="entry-header">
 
         <div class="entry-titulo">
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
         </div>
 
         <div class="MetaDatos">
            <span class="fecha"><?php the_date();?></span>
            <span>Categoría:<?php the_category( ' ,' );?></span>
            <span>Autor: <?php the_author(); ?></span>
         </div>
 
      </header>
      <!-- Final .entry-header -->
 
      <hr>
 
      <!-- Imagen del post -->
      <?php if ( has_post_thumbnail() ) {?>
      <figure>
         <a href="<?php the_permalink();?>"><?php the_post_thumbnail('index-thumbnail');?></a>
      </figure>
      <?php }else{ ?>
      <figure>
         <a href="<?php the_permalink();?>">
            <img src="<?php bloginfo('template_url');?>/images/imageDefaul.png" alt="<?php the_title();?>"   />
         </a>
      </figure>   
      <?php }?>
      <!-- Final Imagen del post -->
 
      <!-- .entry-content -->
      <div class="entry-content">
         <?php the_excerpt();?>                     
      </div>
      <!-- Final .entry-content -->
 
      <div class="metaBottom">
         <?php comments_popup_link('0 Comentario »', '1 Comentario »', '% Comentarios »'); ?>
         <a href="<?php the_permalink();?>" title="<?php the_title(); ?>" class="leermas">Seguir Leyendo</a>
      </div>
 
   </article>
   <!-- Final .posts -->
 
   <?php endwhile; else:  ?>
 
   <article class="posts">
      <p><h2><?php _e('Ha ocurrido un error.'); ?></h2></p>
      <p><?php _e('Disculpe, no existen post relacionados con su criterio de busqueda'); ?></p>
      <?php get_search_form();?>
   </article>
   <?php endif; ?>
</section>
<!-- final #content -->
 
</section>
<!-- final #content -->

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.

<p class="copy">&copy;<?php the_time('Y');?> Music.com. All rights reserved.</p>

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:

if ( function_exists( 'register_nav_menus' ) ) { //To add support for navigation menus
   register_nav_menus(
      array(
        'MenuPrincipal' => __( 'Menu Principal' ),
        'MenuFooter' =>__('Munu Footer')
      )
   );
}

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.

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