presentacion de fran moreno para adwe
Post on 12-Jun-2015
1.689 Views
Preview:
TRANSCRIPT
Introducción al desarrollo de plantillas de WordPress
sábado 24 de septiembre de 11
Hashtag #adwe_mur
sábado 24 de septiembre de 11
Fran Moreno
Introducción al desarrollo de plantillas de WordPress
Indice
- Breve introducción a WordPress- Estructura de un Theme- Conceptos básicos de PHP- Funciones básicas de WordPress- Manos a la obra- Enlaces
sábado 24 de septiembre de 11
Fran Moreno
Introducción al desarrollo de plantillas de WordPress
Breve introducción a WordPress
sábado 24 de septiembre de 11
Fran Moreno
Breve introducción a WordPress
- WordPress es un CMS (Content Management System) de código abierto desarrollado por Automattic y con la colaboración de un inmenso número de desarrolladores.
- La curva de aprendizaje es mucho menor que en Drupal, el mantenimiento de la web es más sencillo.
- Pero con WordPress sólo se pueden hacer blogs, no?
sábado 24 de septiembre de 11
Fran Moreno
Web de Dymo Awwwards
Breve introducción a WordPress
sábado 24 de septiembre de 11
Fran Moreno
Breve introducción a WordPress
Spotify Typographica
sábado 24 de septiembre de 11
Fran Moreno
Breve introducción a WordPress
Web de Andy Roddick Blog de Play Station
sábado 24 de septiembre de 11
Fran Moreno
- Varios aspectos importantes para tener en cuenta WordPress como plataforma para desarrollo web:
- Plugins: Hay una inmensa cantidad de plugins disponibles.- Themes: Tanto free como premium, de muy diversos tipos.- Comunidad: Una comunidad de usuarios muy amplia.- El codex: Documentación clara y bien organizada.
- Desarrollar un theme o un plugin es bastante fácil.
Breve introducción a WordPress
sábado 24 de septiembre de 11
Fran Moreno
Introducción al desarrollo de plantillas de WordPress
Formato de un Theme en WordPress
sábado 24 de septiembre de 11
Fran Moreno
Formato de un theme en Wordpress
- Secciones a tener en cuenta de un blog con WordPress:
Loop la iteración de los distintos artículos del blog. Puede ser general, de una categoría, de una etiqueta...
Single Un artículo en particular. Suele llevar un apartado de comentarios
Page Una página estática, por ejemplo, Acerca de...
Header Parte superior de la web, con el logo, navegación, etc...
Footer Información que queramos poner en el pie de la web
Sidebar Barra lateral con enlaces de interés
sábado 24 de septiembre de 11
Fran Moreno
Formato de un theme en Wordpress
Cabecera
SidebarLoop
Footer
sábado 24 de septiembre de 11
Fran Moreno
Formato de un theme en Wordpress
- Estructura básica de ficheros en WordPress
- Hay ficheros prescindibles, pero que nos ayudan a organizarnos mejor
- Es una buena práctica usar directorios para organizar los elementos como imágenes, css, scripts...
Imprescindibles
sábado 24 de septiembre de 11
Fran Moreno
Introducción al desarrollo de plantillas de WordPress
Conceptos básicos de PHP
sábado 24 de septiembre de 11
Fran Moreno
Conceptos básicos de PHP
- Hay ciertos conocimientos sobre PHP que debemos tener para programar un theme en WordPress, dejando de lado el HTML y CSS, que en teoría vienen de la maqueta, e incluso el JS.
- Si usamos un theme base podemos no necesitar escribir apenas líneas de PHP, pero en cuanto tengamos que añadir cualquier modificación o mejora, necesitaremos conocer las bases.
sábado 24 de septiembre de 11
Fran Moreno
Conceptos básicos de PHP
Bucles
Recorremos un array de elementos y para cada uno de ellos hacemos alguna acción, en este caso mostrar por pantalla su contenido.
sábado 24 de septiembre de 11
Fran Moreno
Conceptos básicos de PHP
Arrays y objetos
Es importante diferenciar la forma de acceder a los elementos de un array y a los de un objeto.
sábado 24 de septiembre de 11
Fran Moreno
Conceptos básicos de PHP
Condicionales
Podremos necesitar que algún elemento se muestre en unas ocasiones especiales, para eso usaremos condicionales.
sábado 24 de septiembre de 11
Fran Moreno
Introducción al desarrollo de plantillas de WordPress
Funciones básicas de WordPress
sábado 24 de septiembre de 11
Fran Moreno
Funciones básicas de WordPress
- get_header(): Incluir la cabecera en alguna plantilla, es decir, el fichero header.php.
- get_sidebar(): Incluir la barra lateral en cualquier parte de nuestra página, fichero sidebar.php.
- get_footer(): Incluir el pie de página, fichero footer.php.
sábado 24 de septiembre de 11
Fran Moreno
Funciones básicas de WordPress
- wp_head(): Esta función es importante que esté en nuestro fichero header.php para que wordpress incluya los ficheros que necesite para su funcionamiento.
- wp_footer(): Similar al anterior, es importante incluirlo en nuestro fichero footer.php para que se carguen correctamente algunos scripts que necesita WordPress.
sábado 24 de septiembre de 11
Fran Moreno
Funciones básicas de WordPress
- WP_Query(): Más que una función, es una clase. Nos permite realizar consultas sobre las páginas y posts de nuestra web, para por ejemplo listar todos los posts de una categoría, obtener un post en concreto, etc.
sábado 24 de septiembre de 11
Fran Moreno
Funciones básicas de WordPress
Función Descripción
the_title() Obtiene el título de un post
the_content() Muestra el contenido completo de un post
the_excerpt() Muestra un resumen de un post
the_category() Muestra un listado de categorías de un post
the_tags() Listado de tags de un post
previous_post_link() Enlace al post anterior
next_post_link() Enlace al siguiente post
sábado 24 de septiembre de 11
Fran Moreno
Introducción al desarrollo de plantillas de WordPress
Manos a la obra
sábado 24 de septiembre de 11
Fran Moreno
Manos a la obra
- La maqueta preparada consta de tres ficheros:
- Un index.html con la página principal del blog que contiene un listado de noticias.- Un single.html con la vista de una noticia en particular con comentarios.- Un style.css con los estilos de los distintos elementos de la web.
- Además, todos los css necesarios para que tenga el aspecto y layout deseados.
- Se ha hecho uso de 1140px css grid y de html5 boilerplate.
sábado 24 de septiembre de 11
Fran Moreno
Manos a la obra
Principal Post
sábado 24 de septiembre de 11
Fran Moreno
Manos a la obra
- El theme base para adaptar la plantilla a WordPress ha sido Nakeme. Por los siguientes motivos:
- Lo he hecho yo ;)
- Es muy sencillo y no tiene apenas opciones que puedan distraernos de lo que queremos desarrollar.
- Ofrece las funcionalidades básicas para empezar una nueva web desde cero.
sábado 24 de septiembre de 11
Fran Moreno
Manos a la obra
- El theme Nakeme está alojado en GitHub y puede descargarse de forma gratuita.
- Además, si alguien quiere colaborar en su desarrollo, puede hacerlo sin problemas.
sábado 24 de septiembre de 11
Fran Moreno
Manos a la obra
sábado 24 de septiembre de 11
Fran Moreno
Manos a la obra
¡Al código!
sábado 24 de septiembre de 11
Fran Moreno
Introducción al desarrollo de plantillas de WordPress
Enlaces
sábado 24 de septiembre de 11
Fran Moreno
Funciones básicas de WordPress
Link Descripción
http://codex.wordpress.org/ Web principal de la documentación de WordPress. Podemos encontrar toda la información necesaria para desarrollar themes y plugins.
http://themeforest.net/category/wordpress Web donde podemos encontrar gran cantidad de themes para WordPress bastante bien diseñados y programados.
http://www.wpbeginner.com/ Interesante web para empezar con WordPress
http://www.wprecipes.com/ Otra web con tutoriales y ejemplos.
sábado 24 de septiembre de 11
MUCHAS GRACIAS!!!!
Fran Moreno
twitter: @siner
Web: www.franmoreno.com
Introducción al desarrollo de plantillas de WordPress
sábado 24 de septiembre de 11
top related