Introducción
Hola a todos, hace unos días, publiqué unos enlaces de unos artículos que estaba escribiendo en mi blog, sobre el uso de post types personalizados para hacer sitios avanzados.
Encontré "fome" copiar y pegar acá, así que mejor voy a aportar con otra guía esta vez publicada sólo en este foro de Capa9.
La idea es hacer una guía con propósito, y no cualquier propósito, sino que uno interesante, útil, y quién sabe, en una de esas rentable, este propósito es llegar a desarrollar un Template que se pueda vender en ThemeForest.net, siempre he querido probar suerte vendiendo algo ahí, y qué mejor que ir desarrollándolo a través de esta guía.
Esto significa que tendríamos que pasar por todas estas etapas:
Requisitos
Los conocimientos básicos requeridos son:
- Haber manejado ampliamente un sitio de wordpress común y corriente para estar al tanto de la terminología.
- Conocimiento de HTML y CSS
- Deseable conocimiento Javascript
- Deseable "reconocimiento" de código PHP para usar las funciones de wordpress
- Tener una instalación de wordpress activa para pruebas (ojalá online para resolver dudas en caso de que alguien tenga problemas, por parte mía o de cualquier otro colaborador)
- Tener acceso por FTP, webdav o lo que sea a la carpeta wp-content de wordpress para crear el tema
No prometo escribir todo de un tirón, pero sí ir avanzado día a día un poco.
La biblia y referencia para todo va a ser la documentación de wordpress existente en codex.wordpress.org
Habiendo dicho todo esto y para no dar tanta lata, partimos con la planificación del template.
Planificación
Lo primero es definir un objetivo de lo que queremos conseguir, pienso que lo más útil para todos es hacer el "típico" sitio web corporativo. Para saltarnos la etapa de diseño creo que lo mejor es ir y hacer un sitio "semejante" a algo muy exitoso, en este caso un excelente ejemplo es el theme uDesign, que es el tercero más vendido con más de 42.000 ventas en 4 años (a USD$58, saquen la cuenta).
No vamos a "asemejar", solo algunos elementos estructurales para ir entendiendo cómo armar el template, el aspecto final va a estar dado por cada uno
La estructura (del home) de momento no es tan compleja, tenemos los siguientes elementos claramente identificables
Frameworks y librerías
Para maquetar utilizaremos Bootstrap, sobre todo por la facilidad que nos dará para hacer los estilos "responsivos" (me gusta más decir adaptable), se descarga completo desde aquí: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip
Para nuestro slide usaremos bxSlider que pueden descargarlo desde aquí: http://bxslider.com/lib/jquery.bxslider.zip
jQuery no hace falta descargarlo, ya que viene con Wordpress
Teniendo ya todo esto descargado, estamos en condiciones de partir construyendo nuestro template desde 0; desde ya espero que te animes y me acompañes en esta aventura
Estructura básica de un tema y la plantilla multiuso index.php
Wordpress requiere solamente 3 archivos para comenzar a operar con un tema básico, estos archivos son los siguientes: index.php, functions.php y style.css
index.php: este será nuestro archivo "comodín", ya que según la jerarquía de plantillas de wordpress, puedes utilizar distintos archivos que se cargan automáticamente dependiendo del contenido que se quiere visualizar, sin embargo si no se encuentra alguno de los archivos que tienen mayor "jerarquía", el último de la lista es nuestro querido index.php
Puede que sea muy pronto, pero puedes revisar la estructura completa aquí: http://wphierarchy.com/
Si se fijan, en la gráfica del hipervínculo anterior, cualquiera sea el contenido que queramos mostrar, si no se encuentras los archivos desde izquierda a derecha, la última opción es siempre el index.php.
Para facilitar la creación del tema, voy a partir armándolo desde lo más general hasta lo más específico, es decir, a medida que vayamos avanzandos, vamos a ir "destripando" el tema en otros varios archivos como para ir reutilizando componentes del mismo (si ya tienes algo de experiencia te sonará header.php, footer.php, sidebar.php).
functions.php: este archivo se utiliza para ejecutar las funciones php de wordpress que necesitemos para "configurar" nuestro tema, esto es habilitar "features" de wordpress, agregar tamaños de imágenes, cambiar la longitud del excerpt (fragmento o resumen de entrada), agregar post types, cargar scripts en javascript, hojas de estilo, etc.
style.css: esta hoja de estilos es necesaria, ya que desde aquí wordpress carga la información relativa a nuestro tema, es decir, aparte de incluir los estilos necesarios, las primeras líneas comentadas describen el autor, nombre del tema, licencia, url, de nuestro trabajo, y es lo que se muestra en el dashboard de wordpress bajo el menú apariencia.
screenshot.png (opcional): esta imagen es la que se muestra en el dashboard de wordpress para la elección de nuestro tema, el tamaño debe ser de 880x660px sin embargo el tamaño a mostrar es de 387x290, esto se debe a que wordpress adapta la imagen para resoluciones que tienen más dpi que las tradicionales para que no pierdan calidad.
Comencemos con el archivo style.css, este archivo de momento sólo contendrá la siguiente información que se explica por sí misma:
Luego lo más recomendable para la construcción del index.php (que será nuestra base para todo lo que viene), es mirar bien la estructura de lo queremos conseguir y ponernos a hacer la maqueta html de una vez.
...
Hola a todos, hace unos días, publiqué unos enlaces de unos artículos que estaba escribiendo en mi blog, sobre el uso de post types personalizados para hacer sitios avanzados.
Encontré "fome" copiar y pegar acá, así que mejor voy a aportar con otra guía esta vez publicada sólo en este foro de Capa9.
La idea es hacer una guía con propósito, y no cualquier propósito, sino que uno interesante, útil, y quién sabe, en una de esas rentable, este propósito es llegar a desarrollar un Template que se pueda vender en ThemeForest.net, siempre he querido probar suerte vendiendo algo ahí, y qué mejor que ir desarrollándolo a través de esta guía.
Esto significa que tendríamos que pasar por todas estas etapas:
- - Planificación del Template
- - Definir frameworks y plugins básicos de apoyo
- - Plantilla "todo uso" index.php
- - Creación de sidebars y menús
- - Plantillas individuales para páginas, post type personalizados, blog y archive
- - Activar configuraciones del panel propio de wordpress para que los usuarios puedan personalizar el tema
- - Internacionalización
- - Creación de Panel de Control de Administración
Requisitos
Los conocimientos básicos requeridos son:
- Haber manejado ampliamente un sitio de wordpress común y corriente para estar al tanto de la terminología.
- Conocimiento de HTML y CSS
- Deseable conocimiento Javascript
- Deseable "reconocimiento" de código PHP para usar las funciones de wordpress
- Tener una instalación de wordpress activa para pruebas (ojalá online para resolver dudas en caso de que alguien tenga problemas, por parte mía o de cualquier otro colaborador)
- Tener acceso por FTP, webdav o lo que sea a la carpeta wp-content de wordpress para crear el tema
No prometo escribir todo de un tirón, pero sí ir avanzado día a día un poco.
La biblia y referencia para todo va a ser la documentación de wordpress existente en codex.wordpress.org
Habiendo dicho todo esto y para no dar tanta lata, partimos con la planificación del template.
Planificación
Lo primero es definir un objetivo de lo que queremos conseguir, pienso que lo más útil para todos es hacer el "típico" sitio web corporativo. Para saltarnos la etapa de diseño creo que lo mejor es ir y hacer un sitio "semejante" a algo muy exitoso, en este caso un excelente ejemplo es el theme uDesign, que es el tercero más vendido con más de 42.000 ventas en 4 años (a USD$58, saquen la cuenta).
No vamos a "asemejar", solo algunos elementos estructurales para ir entendiendo cómo armar el template, el aspecto final va a estar dado por cada uno
La estructura (del home) de momento no es tan compleja, tenemos los siguientes elementos claramente identificables
- Barra superior con un menú secundario, luego datos de contacto, para finalmente tener el acceso a las redes sociales.
- Luego tenemos un slide de imágenes, en este caso se usa un plugin de un tercero, en nuestro caso para reducir el costo de una licencia extendida, utilizaremos una librería de javascript de uso libre, pero que nos de cierta funcionalidad que nos permitan tener efectos y algún otro truco.
- Luego tenemos un texto de bienvenida, seguido por una cita
- A continuación tenemos las típicas "calugas" describiendo los productos o servicios, los que usualmente son vinculado a alguna página.
- Por sencillez nos saltaremos el resto de las secciones hasta el footer.
- Usaremos un footer similar al presentado, con las 4 columnas que incluyen los posts del blog, post recientes, (obviaremos los comentarios), la columna de dirección y otra de términos de uso, o similar.
Frameworks y librerías
Para maquetar utilizaremos Bootstrap, sobre todo por la facilidad que nos dará para hacer los estilos "responsivos" (me gusta más decir adaptable), se descarga completo desde aquí: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip
Para nuestro slide usaremos bxSlider que pueden descargarlo desde aquí: http://bxslider.com/lib/jquery.bxslider.zip
jQuery no hace falta descargarlo, ya que viene con Wordpress
Teniendo ya todo esto descargado, estamos en condiciones de partir construyendo nuestro template desde 0; desde ya espero que te animes y me acompañes en esta aventura
Estructura básica de un tema y la plantilla multiuso index.php
Wordpress requiere solamente 3 archivos para comenzar a operar con un tema básico, estos archivos son los siguientes: index.php, functions.php y style.css
index.php: este será nuestro archivo "comodín", ya que según la jerarquía de plantillas de wordpress, puedes utilizar distintos archivos que se cargan automáticamente dependiendo del contenido que se quiere visualizar, sin embargo si no se encuentra alguno de los archivos que tienen mayor "jerarquía", el último de la lista es nuestro querido index.php
Puede que sea muy pronto, pero puedes revisar la estructura completa aquí: http://wphierarchy.com/
Si se fijan, en la gráfica del hipervínculo anterior, cualquiera sea el contenido que queramos mostrar, si no se encuentras los archivos desde izquierda a derecha, la última opción es siempre el index.php.
Para facilitar la creación del tema, voy a partir armándolo desde lo más general hasta lo más específico, es decir, a medida que vayamos avanzandos, vamos a ir "destripando" el tema en otros varios archivos como para ir reutilizando componentes del mismo (si ya tienes algo de experiencia te sonará header.php, footer.php, sidebar.php).
functions.php: este archivo se utiliza para ejecutar las funciones php de wordpress que necesitemos para "configurar" nuestro tema, esto es habilitar "features" de wordpress, agregar tamaños de imágenes, cambiar la longitud del excerpt (fragmento o resumen de entrada), agregar post types, cargar scripts en javascript, hojas de estilo, etc.
style.css: esta hoja de estilos es necesaria, ya que desde aquí wordpress carga la información relativa a nuestro tema, es decir, aparte de incluir los estilos necesarios, las primeras líneas comentadas describen el autor, nombre del tema, licencia, url, de nuestro trabajo, y es lo que se muestra en el dashboard de wordpress bajo el menú apariencia.
screenshot.png (opcional): esta imagen es la que se muestra en el dashboard de wordpress para la elección de nuestro tema, el tamaño debe ser de 880x660px sin embargo el tamaño a mostrar es de 387x290, esto se debe a que wordpress adapta la imagen para resoluciones que tienen más dpi que las tradicionales para que no pierdan calidad.
Comencemos con el archivo style.css, este archivo de momento sólo contendrá la siguiente información que se explica por sí misma:
Código:
/*
Theme Name: Tutorial WP Capa9
Theme URI: http://www.capa9.net/foro/posts/13538160/
Author: comunidad Capa9.net
Author URI: http://www.capa9.net
Description: Tutorial tema wordpress desde 0 Capa9.net
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/Luego lo más recomendable para la construcción del index.php (que será nuestra base para todo lo que viene), es mirar bien la estructura de lo queremos conseguir y ponernos a hacer la maqueta html de una vez.
...
Última modificación:
