De HTML a WordPress – Theme WordPress part.3
(28 votos)
Herramientas:DreamWeaver, PHP, HTML, Css, Wordpress
Dificultad:Intermedia
Duración Estimada:30-60 min
- Parte 1: Theme WordPress en Photoshop (Music Layou)
- Parte 2: Pasar de PSD a HTML5 – Theme WordPress part.2
- Parte 3: De HTML a WordPress – Theme WordPress part.3
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
- Estructura básica de una plantilla para wordpress
- Hacer que wordpress reconozca nuestra plantilla HTML en el panel de temas
- Configurar el head con las funciones de wordpress.
- Cargar script de forma selectiva en el head de wordpress
- Crear menús personalizados en wordpress y desplegarlos en tu plantilla
- Crear un slider que pueda desplegar información de forma dinámica
- Como utilizar imágenes en miniaturas en wordpress
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.
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.
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.
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 HTMLbloginfo( '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.
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' ),
)
);
}
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.
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.
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 etiquetasnavydiv, 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
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.
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ú.
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.
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.
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.
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;
?>
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; ?>
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>';}
?>
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".
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 -->
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>
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:
the_date();devuelve la fecha de publicación del post.the_category( ' ' );devuelve la categoría/s del psot.the_author();Devuelve el nombre del autor del post.
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>
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 -->
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í:
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; ?>
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">©<?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')
)
);
}
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
Si entramos en el panel de administración –> Apariencia –> Menú, podemos ver una nueva área de menú llamada Footer Menú.
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.
Loading ...
Esta bueno tu blog, sigue así.
Gracias por el tutorial. Estoy siguiendo tus pasos pero cambiando un poco el diseño..ya te contaré. Saludos
Hola! Este tutorial es GENIAAAALLL!!!!
Cuando subis las otras partes?
Abrazo!!
En unos días lo publico, ya tengo el theme terminado, solo tengo que redactar el articulo.
Suscríbanse al RSS para que les avise de su publicación.
Copado!! Ya me suscribí al RSS
Abrazo!
Gracias por el tutorial, bien explicado y cuidando el detalle que es lo que marca las diferencias.
Muy agradecido.
PD: Ahora sólo he de encontrar el tiempo para poder ponerlo en práctica.
Me alegra que les guste, este es el primero de muchos que pretendo publicar desde que tenga un tiempo libre.
Muy bueno el tutorial.
Muchas Gracias, enhorabuena por tu web.
Suerte!
En la parte en que se explica cómo introducir el “register_nav_menu()” en functions.php, hay un fallo en el código a copiar.
En el código sale ésta parte, que dará fallo en el compilador (si se está usando Dreamweaver):
=>
Simplemente hay que sustituirlo por
=>
como en la imagen que sale justo debajo.
¡Sigo probando, felicidades al autor!
Acabo de escribir un comentario. El codificador html de la página me ha escrito los caracteres, pero quería decir ( ” = & g t ; ” ) donde sale el primer =>.
Tomen los caracteres juntos, sin los espacios que hay entre ellos
Gracias por el detalle no me di cuenta de eso. Arreglado…
Otro detalle. En la parte de inclusión de datos del Metadatos, las partes del código y de la imagen inferior señalando qué se cambia por qué estan al revés.
La parte que hay que incluir para sustituir la de html es la de php.
Esta es la parte que hay que SUSTITUIR, NO LA QUE SE QUEDA FINALMENTE:
Jun 30th, 2010
Categoría:Notícias Musciales
Autor: JordanoPolanco
Todo arreglado Muth, muchas gracias por las correcciones.
Empezando a leer la parte de HTML a WP lo e buscado por mucho tiempo espero entender todo bien si no, espero que puedas resolver algunas dudas =D. Espero que para cuando termine el 1 y 2 ya se encuentre la 3ra parte. Gracias de nuevo por el aporte!!!
Sin ningún problema trataré de ayudarte en cualquier duda que te pueda surgir.
Para cuando planeas subir la tercera parte Jordano????
Gracias por todo.
Lo tengo terminado en localhost, no he tenido tiempo de publicarlo, cuando saque un rato libre lo publicaré. lo siento mucho tardar tanto.
No solo haces el tutorial, si no que explicas el porqué de las cosas (algo que no veo en un tutorial desde hace mucho tiempo)
¿Te casas conmigo?
Hago de esta forma los tutoriales por que me acurdo a mis inicios, siempre que buscaba un tutorial lo encontraba pero siempre te dejaban a medias, o siempres explicaban el ejemplo más simple de las cosas.
yo trato de dejar todo claro y el camino más directo sin importar si es más difícil o más fácil.
y otras cosa, no, no me caso.
Hola a todos¡¡¡ Jordano-P ¿Aún estás operativo????
INCREIBLE TUTORIAL! … felicitaciones!!… he aprendido mas aquí que mirando vídeo tutoriales en youtube, en mi trabajo me piden que aprenda esto y yo la verdad de mirar tantos tutoriales termine un tanto perdido, ¿Cuando lanzaras la tercera parte?.
Muy bueno todo el tutorial, haber si algún día lo suben en PDF para descargarlo.
Gracias
@Cesar, La tercera parte ya la tengo lista, solo espero a tener un tiempo libre para publicarlo, además esta terminando la plantilla para dejarla online para que puedan verla funcionando.
Dejare la plantilla para descargar, he agregado muchas funcionalidades que en el tutorial no he tocado, la más destacada es que agregue un panel de control desde donde se podrá configurar muchas partes desde la web, tales como: el slider, el sidebar, el logo, la caja de búsqueda entre otras novedades.
@CristianXP44, Más adelante mirare eso, es una buena opción.
te soy sincero, medio e visto el tutorial, y me parece genial y practico, tengo unas webs html que queria pasar a wordpress… y ahora practicare con ellas! sigue adelante y esperare con ansias la ultima parte!
Hola! disculpa… estoy siguiendo tu tutorial que la verdad me parece excelente pero me atore en la parte de “Agregar script de forma selectiva en el head de wordpress” lo que pasa es que agrego el código en el archivo “functions.php” y al recargar la pagina todo ese codigo me aparece en la parte de arriba espero me puedas ayudar de antemano muchas gracias.
Saludos!
Esa parte suele dar problemas cuando no agregas ese código, debes verificar muy bien dónde lo colocas.
Siempre recomiendo que se organice el archivo function.php eliminando lo que no se este utilizando en tu plantilla para tener el código bien organizado y evitar esto que te esta pasando.
Seguramente es un error de alguna llave.
Hola Jordano TUS TUTOS SON LOS MEJORES DE LA WEB!! es genial como abarcas el proceso total desde photoshop, no sabia casi nada de wordpress y ahora gracias a tus tutos me le mido a lo que salga!!! jeje.
Ni en español ni en ingles he visto algo tan completo en la web acerca de wordpress.
por favor dinos una fecha aproximada de cuando subes la ultima parte de esta excelente serie, te sigo en twitter @elvismartinrozo felicitaciones y ojala sigas con este proyecto tan profesional.
SALUDOS DESDE BOGOTA!!!!
El tuto es ya terminado hace como un mes, lo que sucede es que estoy sacando tiempo para terminar la plantilla con panel de administración incluido con una gran variedad de opciones, liberaré la plantilla terminada para que puedan ver el código completo y funcionando.
Ahora estoy de vacaciones a miles de kilómetros de mi casa y mi portátil, cuando llegue a casa (17/julio) ya esa semana publicare la ultima parte del tutorial.
Por cierto muchísimas gracias por sus comentarios.
Tu tutorial es excelente!, pero solo me pierdo en una parte
, el codigo del slider no me funciona, hago todos los pasos pero no me resulta, alguien me puede ayudar porfavor ? 
…
Que error tienes?
Muy buen tutorial!
una pregunta ¿hay una tercera parte o es hasta aqui el tuto? lo otro q cuando puse el script para la imagen destacada no me aparece la opcion en el panel de administracion de wp, pero tampoco me da error en el codigo.
muchas gracias de antemano!!
la opción de imagen destacada te aparece en el panel que aparece cuando agregas una imagen, Fíjate bien.
ya inserte una imagen pero no resulta no se que podra ser
Si pudiera ver que es lo que estas asiendo seria más fácil decirte cual es el error.
Hola @jordano_p
Vengo siguiendo tus tutos desde hace meses!!!…
Y me gustaría saber cuando publicaras el último que falta para poder completar la plantilla que estoy haciendo basándome en tus enseñanzas xDDD
La verdad no quisiera seguir otro tutorial pues empece con el tuyo y me parece genial y me gustaría seguirlo hasta el último detalle ^^
Espero lo publiques pronto para así también terminar el mio xDDD
Un saludo y gracias por el esfuerzo ^^
Acabo de publicar la ultima parte hoy mismo
Hola excelente tuto ! de a poco lo estoy viendo
alguna idea de como poner para q las entradas en la main page solo se vea la imagen destacada y el titulo? algo como un tema de galeria pero solo el main page, el contenido del post normal
Sí, es más fácil de lo que te imaginas, puedes hacerlo creando una plantilla personalizada para la home Page, y con el loop de wordpress solo extraer las imágenes y el titulo.
Si no sabes crear plantillas personalizadas me dices y creo un tutorial, de como crear una plantilla personalizada para la Home Page de la web.
Sii porfavor crea un tutorial que no encuentro por ningun lado como hacerlo.
Sos el mejor!!!
Mil gracias
Hola, ante todo excelente tutorial, recien me inicio en la creación de theme en WordPress, esta perfecto, bien explicado, me gustaria y te lo agradeceria de corazón que expliques los siguientes pasos de como haz hecho para que el logo, el slider, el contacto, en fin lo que quedo pendiente y en el que dejas en tu demo online como lo haz realizado.
Aparte de eso, veo que en la demostración no funciona la paginación del home, el plugin me funciona de maravilla cuando hago un filtro en las categorias, etc pero lo unico en que no me sale es en el home siempre cuando le dos en la pagina 2 me vuelve a cargar el 1, vi en tu demo y también tienes el mismo error, agradeceria me ayudes, gracias y muchos exitos, estare al pendiente de tu respuesta!!!
Tienes razón tengo que revisar eso, aprovechare para agregar la paginación sin necesidad de pluguins.
Lo del tutorial sobre el index con las imágenes los estoy mirando y lo creare en el transcurso de la semana, tratare de crear una página personalizada que tenga un listado con las imágenes de los post.
Muchas gracias!!! Otra cosa más, me acabo de dar cuenta que tampoco esta agarrando las fechas de los posts en el Home, solo se muesta la fecha del primer post, eso a que se debe?
@Javier si, no me di cuenta, eso podemos solucionarlo cambiando esta función:
//Por esta <?php the_time('F j, Y');?>Le pasamos como parámetros la configuración deseada.
Esto pasa por que la función
the_date()como puedes comprobar aquí solo devuelve la fecha de el primer post, al contrario de la funciónthe_date().Otra vez gracias por avisarme de los errores.
hola
sabes no me funciona el slider y cuando abro la consola java de chrome me aparece como si los archivos javascript q uno llama no los carga
por que sera?
Si no te funciona el slider de imágenes y dices que no estan cargando los script, puede que tu theme no tenga el gancho wp_head ya que utilizo este gancho junto a una función en el archivo function.php para cargar esos archivos js para el slider y jQueri, revisa si tienes en el head de tu theme el gancho y si lo tienes prueba colocar los script directamente en el head de la web.
Hola, he seguido el tut y todo perfecto salvo el slider, que no consigo que me funcione. me aparece todo perfecto, pero la imagen no cambia, ni dándole a los botones para que pase a la siguiente
Hola, amigo muy bueno tú tutorial… la idea es qué si podría usar, CS3 ya qué no tengo CS4 espero tú respuestas… SALUDOS
Claro que si no importa la versión de strong>photoshop para crear el theme de wordpress
una consulta… un amigo me paso una web (muy buena) en html, y queremos ver si la podemos pasar a WordPress… el problema esque esta hecha con tablas, y el css es un dolor de cabeza… alguna idea que me puedas dar?
Pues si esta hecha con tablas lo mejor es limpiar ese código, poco a poco ir modificando la estructura ya sea con DIV o utilizando etiquetas de HTML5 (HEADER , NAV, SECTION, etc.)
Es lo que yo aria, no es recomendables crear una web completa con tablas, ya esos tiempos pasaron.
Excelente tutorial!!! Gracias por tu aporte, me ha servido muxo!!!
De nada amigo, compartan el tutorial y la web con sus amigo, de esa forma me ayudan y le ayudan a otros a aprender. @Saludos
Hola Jordano, bien explicado y completo tu tutorial, y lo he ido siguiendo, pero no he podido descargar la plantilla. Me aparece el siguiente mensaje: “¡La ruta de descarga no es válida!”
Gracias por tu tiempo en este tema de WordPress.
Ya esta resuelto amigo, me di cuenta el otro día pero se me paso areglarlo, Gracias por avisar.
Hola amigo tengo un problema y es este tengo toda mi plantilla echa pero el problema es que cuando va de la pagina 1 a la 2 me sigue saliendo lo mismo que podra ser eso ?
Bueno te cuento que logre resolver el problema pero ahora tengo la duda de por que no sale la barra de administracion el el sitio por que como podras ver no sale :S
La barra de administración para activarse hace una llamada a la función wp_footer(), no recuerdo si la agregue en la plantilla, si no esta agregada agrégala y seguro que aparece la barra de administración.
Muchiiisimas gracias, excelente explicación. Lo necesitaba como agua de mayo.
super agradecido hare una prueba de inmediato llevo tiempo buscando como llevar mi pagina web a WP
Saludos desde Mexicali
hola tengo un problema pues e estado haciendo plantillas y pues la gente a querido comprarmelas pero el problema es que cada ves que se las doy les da errores o les parece todo en blanco o no les funciona algo pero lo raro es que a mi si me andan que podria ser el problema??
pueden ser muchas cosas amigo, te mencionare algunas a tener en cuenta:
ahh bueno usa una imagen destacada dentro del post y en los inicios bueno tengo u na duda digamos que quiero excluir una categoría al inicio como hago eso?
Si te refieres a excluir una categoría a un theme que vas a vender, eso ya son palabras mayores, no puedes vender un theme donde el cliente deba entrar en el código para excluir una categoría y hacer que el theme funcione.
En estos casos lo normal sería agregar un panel de control, y desde un desplegable que el usuario pueda elegir la categoría que quiere excluir.
si no te refieres a eso para excluir una categoría del index o cualquier otra página debes utilizar la función query_por(cat=-3) pasándole como parámetro la categoría que queremos excluir.
Para más info sobre esto mira este tema en wordpress.org
gracias man por contestar tan rapido bueno ahora no estoy vendiéndolas pero me an ofrecido comprármelas pero ahora tengo una duda mas es que estoy haciendo una de peliculas y digamos que quiero que en el index aparescan por categorias separadas osea una parte que diga accion y se muestren unos cuantos accion despues otro que diga acentura y otros cuantos pero por separado se puede?
Utilizando las consultas personalizadas en wordpres claro que puedes mostrar los artículos como quieras.
pongo esto pero no me funciona corrigemelo si esta mal porfas T.T
bien amigo tengo otro error y es este por ejemplo entro a un tema cualquiera que seria este miweb. com/ted/ y cuando subo el buscador pasa que busca asi miweb. com/ted/?s=hola# y deveria ser miweb .com/?s=hola# que hago
me parecio fantastico tu tutorial ahora mismo estoy creando mi propio tema pero tengo una gran duda sobre la creacion de menus, ya que mi menu principal esta formado por sprites en css y no logro que se muestre. espero puedas ayudarme ya me estoy volviendo loco.
No importa que este utilizando Sprite para crear tu menú, fíjate en la parte que ice el menú, yo también cree el menú con sprite, ten muy pendiente la posición de la imagen, utiliza firebug o cualquier herramienta de inspección de código y varia el css en vivo para que veas donde va quedando la imagen para cada estado.
Hola jordano
sabes al momento de cargar el sitio el slider de imagenes no me funciona y lo q alcanzo a ver en la consola java de chrome es esto:
Uncaught TypeError: Object [object Object] has no method ‘tinycarousel’
al copiar el codigo de chrome queda asi:
$(document).ready(function() var pager = true; var oSlider = $('#slider-wrapper'); if(oSlider.length > 0) { oSlider.tinycarousel( Uncaught TypeError: Object [object Object] has no method 'tinycarousel' { pager: true, //paginación interval: true, //Auto Play duration: 300 //retardo de pase de imagen }); } });si me pudieras ayudar por favor y gracias de antemano
Revisa en tu código fuente si se esta cargando correctamente la librería de tiny carousel, el error dice que no esta ese metodo.
Buenas tardes,
increible tutorial, lo segui al pie de la letra y la verdad que esta muy bien, pero tengo algunas dudas, las cuales se que es por algun error cometido por mi.
Creé un sitio web con html, y lo pase a wordpress ( siguiendo al pie de la letras tus instrucciones), antes de pasarlo a mi host, lo fui probando con mi localhost. Cuando lo hice en el local, parece que casi todo me funcionaba, pero al pasarlo al host, no me cargaba nada, ni las tipografias, ni color de fondo, ni nada de nada.
El otro problema que vi es al cargar las fotografias, ya que estas no se cargan bien ( ni en el local ni en el host).
He mirado y remirado todo y parece que lo he echo bien.
Que crees que podria ser?
Muchas gracias
@joseCo – El error de que no carga los estilos puede ser, la ruta de la hoja de estilo, recuerda que para cargar la hoja de estilo utilizamos la función
Si creas un theme en local cuando subes la carpeta la host, todo debe funcionar igual, solo revisa estos detalles, y no muevas ni renombre carpetas cuando ya la subas al host.
No entiendo a que te refieres cuando dices carga de fotografías.
Con lo de las fotografias ( o imagenes) me vengo a referir, que me salen los vinculos rotos. ( no he cambiado de sitio las cosas)
He probado lo que me has comentado y continua igual.
Gracias igualmente
Si tienes la plantilla instalada online puedes poner aquí la url y lo miro.
Al fin pude solucionar lo de la hoja de estilo… pero las imagenes aun se me resisten.
http://pruebasvipe.herobo.com/
Madre mia, al fin solucione todo. Se ve que era una mala instalación del wordpress.
Muchas gracias por todo.
Informo:
En el enlace a la ” Segunda parte” el enlace lleva a la tercer.
Hay que editar la URL terminandola en un 2, pequeños detalles.
Respecto al manual solo valoro tu paciencia y se ve que te has comido la cabeza para escribir todo pero merece muchisimo la pena, jamas vi nada tan explicado, incluso para mi web he mirado consejos tuyos, lo explicas asombrosamente bien, de veras..
Enhorabuena.
Como consejo tambien decirte que si pusieras un par de tags mas como Categorias o Popular post en widgets seria quizas mas generico pero entiendo el trabajo y realmente cualquiera que halla leido todo el post lo entiende a la primera.
Saludos.
Muchas gracias por avisar sobre esos detalles, se agradece.
Respecto a lo que dices de los módulos del sidebar, lo he creado de esta forma solo para seguir el ejemplo para este tutorial,
es algo genérico, sabes que se pueden agregar cientos de cosas.
Y sí me rompí la cabeza con este tutorial lo termine solo por que me sentí comprometido por que vi que muchos estaban siguiéndolo y
me anime a terminarlo.
Tendras algunos mas en los siguientes dias, a todos los alumnos que tengo de programacion web les diré que se pasen por aqui ante cualquier duda, si no puedo estar yo, en tu web estaran muy bien
De veras se agradece el compromiso y esperemos que esté esta informacion aqui por mucho tiempo, es dificil encontrar ayudas asi, y tutoriales tan claros y precisos ni te cuento.
Cordiales saludos !
Se te agradece, soy estudiante y se lo mucho que puede servir un buen tutorial.
Saludos.
Una cosilla mas jordano, pero algo util que le ha fallado hoy a un chico y me ha costado encontrarlo, pero lo posteo para futuros visitantes con el mismo problema (espero que lo lean aqui abajo)
El problema surge en el siguiente codigo:
<?php query_posts('&cat=-9'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>..que imposibilita la paginacion, y esto afecta a que si no hay un archivo search.php, category.php, etc… la web deja de ser “tan dinamica”, solo trabaja el index.php como timeline de los post, no muestra categorias, busquedas, tags, etc..
El problema es con el query_posts(), que nos repite constantemente los resultados.
Por lo que se, esto debe ser nuevo, antes no me pasaba y bueno, fue quitar o cambiar la orden y se solucionó, y buscando explicaciones me encontre lo siguiente:
http://www.anieto2k.com/2008/08/13/query_posts-y-el-problema-de-la-paginacion/
El problema es que con el slider funcionaria si asi estuviera configurado pero para otros usuarios, deberian borrarlo, o en el mejor de los casos leer el codex, pero bueno ahi queda la solucion.
Solo con borrar la siguiente linea el index.php paginara:
query_posts('&cat=-9');Otra vez gracias @davidmore93, Este problema me lo reportaron ya hace tiempo lo solucione en local y se me olvido actualizar el tutorial y la Demo, en el post de anieto2k explica perfectamente la solución, simplemente agrear a la consulta la variable page para informarle a la consulta si existe paginación o no.
El código final para los que esten creando el theme con panel de control es este:
<?php $exclude_cat = of_get_option('exclude_cat', 'no entry'); if (have_posts()) : $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=$exclude_cat&paged=$paged"); while (have_posts()) : the_post(); ?>Para los que no esten utilizando panel de control:
<?php //Agregar las ID de las categorías que quieren excluir de la home if (have_posts()) : $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=ID de las categorias a excluir de la home&paged=$paged"); while (have_posts()) : the_post(); ?>Como has dicho con solo borrar esta línea funciona:
query_posts('&cat=-9');Pero si quieres evitar que alguna categoría aparezca en la portada de la web, es mejor no borrar esta línea y agregar esta tal como el código que deje antes.
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=$exclude_cat&paged=$paged");Funciona cuando actualizo a wordpress 3.5 ?
Acabo de actualizar la plantilla de ejemplo y sí, no afecta en nada la versión 3.5 de wordpress al código del tutorial, sigue funcionando perfectamente.
Hola Jordano.
En primer lugar felicitarte por el fantástico trabajo que has hecho con este tutorial, creo que nos has salvado la vida a muchos.
Simplemente quería añadir un matiz por si le ha pasado a más gente como yo. He seguido todos los pasos meticulosamente y al finalizar no me funcionaba el slider (descargando e instalando el theme finalizado tampoco) y tras indagar un poco descubrí que la solución era muy sencilla. Resulta que cuando haces la llamada en el tuto a la categoría “Anuncios” le asignas el ID=9, cuando en mi caso el ID es 7, cambiando este parámetro ya me funciona el slider a la perfección. Para cualquier otro que le pase puede saber el ID de la categoría entrando en ella desde el panel de administración y mirándola en la barra de navegación.
De nuevo un millón de gracias.
Gracias Santi Po, ya le ha pasado a varias personas y le he dicho esto del ID de la categoría.
En el theme final que dejo para descargar, esta categoría a de seleccionarse desde el panel de control de la plantilla.
Hola de nuevo Jordano.
Estoy siguiendo tu tutorial para adaptarlo a una plantilla que estoy haciendo, puedes verla aquí (sólo está el index):
http://pilatesriazor.tk/
Mi problema es el siguiente: Puedes ver en la plantilla el slider de imágenes, hecho con “Cycle” y puesto en el head de index.php (o de header.php). Pues bien, cuando trato de poner el script en el archivo functions.php en base a cómo lo explicas en el tutorial, éste deja de funcionar y sólo aparece la primera imagen, desapareciendo también los botones de navegación, mientras que si lo mantengo en el head de index.php funciona a la perfección. Te dejo el código:
functions.php:
//Scripts JQuery
function wd_load_script(){
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’,'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’);
wp_register_script(‘cycle’,get_template_directory_uri() . ‘/js/jquery.cycle.all.js’,'jquery’);
wp_register_script(‘custom’,get_template_directory_uri() . ‘/js/custom.js’,'jquery’);
wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘cycle’);
wp_enqueue_script(‘custom’);
}
add_action(‘wp_enqueue_scripts’,'wd_load_script’);
index.php:
$(document).ready(function()
{
$(‘#slider-wrapper’)
.before(”)
.cycle({
fx: ‘scrollHorz’,
speed: 1000,
timeout: 3000,
pager: ‘#nav_slider’
});
});
Muchas gracias de antemano y de nuevo enhorabuena por el tutorial.
Saludos.
¿Conseguiste solucionarlo compañero?
Ok. Muchas gracias.
Pondré en la web mi consulta. De todos modos debo hacerte la observación que estoy usando tu mismo theme, y según entiendo, tu theme ¿”ya” venía con la función widget incorporada?
Saludos,
Héctor
Quizás leíste mal, la función BODY_CLASS(); no tiene nada que ver con el menú apariencia, esta función simplemente agrega la clase en el body.
El menú apariencia por defecto solo aparece el editor, para que aparezca widget y menú, debe tener soporte para estas funciones en tu theme actual.
Cualquier otra duda en la web, de esta forma le sirve a otros.
Un saludo.
Hola Jordano:
Antes que nada, muchas gracias por haber subido tu excelente tutorial sobre “de HTML a WordPress”. Sin embargo, tengo un problema que no sé cómo solucionar. En la !a parte en el punto FUNCION BODY_CLASS(); dices que en el panel ADMINISTRACION -> APARIENCIA aparecen estas tres etiquetas: TEMA – WIDGETS – EDITOR. Bien, ahí está mi problema: sólo me aparecen dos etiquetas: TEMAS y EDITOR. ¿Dónde estará el error que impide la presencia de la etiqueta WIDGETS?
Gracias de antemano y saludos,
Héctor
Esto que te sucede es un poco extraño, la el menú widget entra en wordpress por defecto, incluso en un theme que solo tenga entre sus archivos solo el style.css y el index.php.
debe de salirte sin tener que agregar código.
Buenas tardes e seguido todo el tutorial y me a parecido extremadamente bueno, hay algunas dudas que e ido resolviendo, pero hay una que todavía no logro resolver y es de donde salio el identificador “wpcf7-f76-t1-o1″ que utilizaste para el estilo css de formulario de contacto de widget, me podrias indicar en donde puedo tomar este dato ya que si lo pongo en mi hoja de estilos no muestra los cambios.
Que tal @kadoshgt, los selectores que utilice para aplicar estilos al formulario, son los generados por el plugins contact Form 7.
Cuando instales el plugins crea tu formulario y lo pones en el sidebar, luego revisas el código fuente y tomas los selectores que te saldrán y lo sustituyes en la hoja de estilos.
Gracias por responder tan pronto, te comento que tengo ya instalado contact form7 incluso ya tengo el formulario y lo que hice fue poner lo mismo “wpcf7-f76-t1-o1″ solo que me di cuenta que el formulario que cree tenia un numero y lo sustituí por el “f76″ y todo funciono muy bien y una ves más muchas gracias este tutorial me a sido de mucha ayuda, por cierto en donde esta el sito que estoy creando es http://www.corporacionresuena.com y ya voy dejándolo como quiero aunque todavía me falta muchas cosas más, GRACIAS NUEVAMENTE GRACIAS
Te esta quedando muy bien el sitio web, felicitaciones, me agrada saber que este tuto ayuda a otras personas. Saludos.
Buenas jordano_p, te quería hacer otras consulta, e intentado ponerle la paginacion a la pagina principal pero no e podido ya intente incluso al ver que no pude instale un plugins para esto y no me funciono, también estaba viendo que para el tema que hice no puedo hacer que funcionen varios plugins como por ejemplo el poner botones de facebook o twiter en cada post, que puedo hacer
Hola, para solucionar el problema de la paginación, en comentarios anteriores hablamos de que hay que modificar el código y utilizar este en el loop de la página principal.
<?php //Agregar las ID de las categorías que quieren excluir de la home <?php if (have_posts()) : $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=ID de las categorias a excluir de la home&paged=$paged"); while (have_posts()) : the_post(); ?>Para el problema de que algunos plugins no funcional tienes que revisar los ganchos o hooks, wp_head() en el hader.php y wp_footer en el footer.php.
Estos ganchos lo utilizan los desarrolladores para arrancar iniciar los plugins, revisa esto y si no lo tienes pues agrégalo en el código de cada archivo.
Espero te sirva, un saludo.
Hola… mira tengo una pagina html con frames, como todos sabemos esos frames llaman a otras paginas html..
pero al querer hacer eso en wordpress.. como llamo a las otras paginas? donde tengo que subir los archivos o que?
Gracias
Hola, te agradezco mucho el tutorial; esta excelente y muy bien explicado; estoy haciendo mi primer paso de un sitio HTML a WP.
Quiero hacerte una pregunta, ya que el sitio que quiero convertir en su primera pagina es un slider de fotografias a pantalla completa y sobre eso está el menu en la parte superior, pero la idea mia era cargar los contenidos de las paginas en una ventana tipo modal y ya que es una pagina iniformativa no es la idea hacer comentarios en ella.
para lograr eso debo solamenet quitar el codigo que muestra comentarios y el formulario?
gracias,
Lo que puedes hacer es crear una plantilla personalizada para la página principal y agregar y eliminar el código que te haga falta.
Lo de lo comentarios siempre recomiendo dejar el código y activar o desactivar por el panel de administración.
si un día te piden comentarios lo solucionas con un clic.
holas y donde le pego este codigo: ID (#wiget-contact)
El ID lo sustituye en la hoja de estilo por el ID q genera el plugins contact form, para q se visualice correctamente.
ok muchas gracias ya lo solusione y felicidades excelente tutorial otra cosita me gustaria saber si tienes algun tutorial para crear widgets con API muchas gracias y muchos exitos
eres un dios! muchas gracias!todo muy bien explicado y con los archivos bases, mas facil, si te llegas a atorar con algun paso lo buscas y listo!
pepe saludos de pepe desde MALLORCA si me lees me gustaría compartir tema API wordpress.
Gracias Pepe.
Hola siguiendo el tutorial en el paso de los menús con la plantilla que ando adaptando que es esta … http://www.templateaccess.com/demos/responsive/html/vooveo/ el menú lateral está formado por este código:
Lo que sucede es que activo el Menú principal en functions.php va correcto aparece menú en wordpress administrador. Pero aun sin poner nada ni tener ningún botón activado ya me sale el código así …
..
Veo que me queda mucho he visto http://codex.wordpress.org/Function_Reference/wp_nav_menu y bueno voy sacando información pero al estar en inglés me satura. ¿Saben algúna manera de profundizar mas en este tema?
Quizás este configurado para que aparezca eso hasta que tu cree un menú en esa posición.
Don Jordano no me aceptes los comentarios, no se como pegar html en el comentario igualmente gracias por su fabuloso trabajo me está sirviendo mucho.
Ya funciona el tema estaba en el wp_nav_menu() donde pone menu_class yo ponía class buuuf
‘MenuPrincipal’,
‘container’ => ‘false’,
‘menu_class’ => ‘menusm’,
));
?>
y por que no puse bien el html anterior en el comentario por que lo puse entre
lo que sale no es lo que yo colgué pero bueno. Gracias. Sigo trabajando.Para agregar HTML en los comentarios utiliza
[/html]