Slide 1
Slide 1 text
Sesión para la comunidad #WPPerú, Abril 2016
@braulioaquino
www.braulioaquino.com
Comenzando a
trabajar con
WordPress
Slide 2
Slide 2 text
Braulio Aquino
@braulioaquino
braulioaquino.com
Bach. Comp. Científica
IV Dan de Taekwon-Do ITF
… parte del equipo de #WPPerú
Slide 3
Slide 3 text
¿Cómo comenzamos a realizar trabajos con
WordPress?
¿?
Slide 4
Slide 4 text
¿Cómo comenzamos a realizar trabajos con WordPress?
Varias preguntas.
■ ¿Qué sabes hacer?
■ ¿Qué tipo de sitio quieres hacer?
■ ¿Cuánto tiempo dispones para trabajar?
¿El precio? Si recién vas a comenzar, no te debe
preocupar. Cada uno cobra lo que negocia.
¿?
Slide 5
Slide 5 text
¿Qué sabes hacer?
Los pre-requisitos.
Slide 6
Slide 6 text
■ No seas un vende-humo.
■ Ten tu propio servidor de prueba.
■ Conoce bien tus límites (sí, hablamos de tus
capacidades técnicas).
■ Aprende a decir NO a lo que no se debe hacer o lo
que no sabes hacer.
¿Qué sabes hacer?
¿?
Slide 7
Slide 7 text
¿Qué tipo de sitio
quieres hacer?
Porque no puedes hacer de todo.
Slide 8
Slide 8 text
■ ¿Recién estás comenzando?
Haz sitios corporativos.
■ ¿Tienes conocimiento intermedio?
Haz sitios informativos.
■ ¿Tienes conocimientos de nivel avanzado?
E-commerce, intranets, multisitios, etc.
¿Qué tipo de sitio quieres hacer?
¿?
Slide 9
Slide 9 text
¿Cuánto tiempo
dispones para trabajar?
Porque los programadores somos malos,
malísimos, calculando el tiempo de entrega.
Slide 10
Slide 10 text
¿Cuánto tiempo dispones para trabajar?
■ ¿Cuántas horas al día usarás?
■ ¿Cuántos días a la semana le dedicarás?
■ ¿Cuánto tiempo necesitas para investigar?
■ ¿Qué tiempo te va a tomar acabar el proyecto?
¿?
Slide 11
Slide 11 text
¡A trabajar!
Slide 12
Slide 12 text
¡A trabajar!
Ponte a
codear
Ordena las
ideas
Habla con el
cliente
Slide 13
Slide 13 text
Habla con el cliente
■ Busca un cliente a la
vez.
■ Agenda un reunión
presencial.
■ Crea un contrato
simple.
Slide 14
Slide 14 text
■ En el contrato:
Especificaciones,
tiempos, costos,
formas de pago y
garantía, etc.
Habla con el cliente
Slide 15
Slide 15 text
Pide al cliente “toda” la
información:
■ Textos.
■ Imágenes.
■ Presentaciones.
Si es reestructurar un
sitio, obtén todas las
secciones.
Ordena las ideas
Slide 16
Slide 16 text
Toda la información que
tienes hazla navegable.
Define las secciones lo
más preciso que puedas.
Como resultado sabrás
qué tipo de “diseños”
necesitas.
Ordena las ideas
Slide 17
Slide 17 text
Ahora que sabes qué
información tienes,
recién puedes enfocarte
en el diseño.
Ponte a codear
Slide 18
Slide 18 text
Ponte a codear
¿Eres diseñador y sabes
front-end?
Pasa tu creación a
WordPress.
Slide 19
Slide 19 text
¿No sabes diseñar ni
sabes front-end?
Practica algo de
front-end.
@shesho te ayudará:
speakerdeck.com/shesho/
html-plus-css
Ponte a codear
Slide 20
Slide 20 text
¿No sabes diseñar pero
ya sabes front-end?
Usa una plantilla.
Ponte a codear
Slide 21
Slide 21 text
NO una plantilla
WordPress
Slide 22
Slide 22 text
SÍ una plantilla
HTML
Slide 23
Slide 23 text
… que tú mismo
tienes que pasar a
WordPress.
Slide 24
Slide 24 text
De HTML a WordPress
Slide 25
Slide 25 text
Antes:
■ Que la plantilla se adapte a tu contenido, no tu
que tu contenido se adapte a ella.
■ Obviamente tiene que ser responsive.
■ Tiene que tener documentación, no como las
piratas.
De HTML a WordPress
¿?
Slide 26
Slide 26 text
Y ahora tus herramientas:
■ Atom o cualquier editor que no sea dreamweaver.
■ Chrome, por el explorador de elementos.
■ Git, vale desde GitHub hasta tu propia GitLab.
■ Una carpeta ordenada del proyecto.
De HTML a WordPress
¿?
Slide 27
Slide 27 text
En HTML necesitas (como mínimo):
■ La portada.
■ Una página de sección con diferentes contenidos.
■ Una página con el contenido en singular.
■ Una página con información de la empresa y el
equipo.
■ Una página de contacto.
De HTML a WordPress
¿?
Slide 28
Slide 28 text
Tu diseño tiene que ser congruente y no va a variar la
cabecera ni el pie de página.
■ El contenido de la cabecera va en header.php
■ El contenido del pie de página va en footer.php
■ Todas las páginas cambian a extensión html y se
reemplaza con get_header(); y get_footer();
De HTML a WordPress
¿?
Slide 29
Slide 29 text
De HTML a WordPress
Para que WordPress lea tu diseño:
■ Estilos en style.css
■ Portada: home.php (index.php)
■ Sección con contenidos: archive.php
■ Contenido en singular: single.php page.php
■ Página personalizada: page-algo.php
■ Contacto: page-contact.php
¿?
Slide 30
Slide 30 text
De HTML a WordPress
En el style.css:
/*
Theme Name: Nombre de mi plantilla
*/
¿?
Slide 31
Slide 31 text
De HTML a WordPress
¿?
El codex es tu mejor amigo para pasar todo lo estático
a dinámico
https://codex.wordpress.org
Por ejemplo, para enlaces:
■ home_url();
■ get_permalink();
■ bloginfo(‘template_url’);
Slide 32
Slide 32 text
De HTML a WordPress
Para mostrar contenido:
■ the_title(); - the_excerpt(); - the_content(); y otros
template tags
codex.wordpress.org/Template_Tags/
También necesitas dominar el loop:
■ codex.wordpress.org/The_Loop
■ codex.wordpress.org/The_Loop_in_Action
¿?
Slide 33
Slide 33 text
De HTML a WordPress
¿Algún builder como divi o elementor? NO.
Los builder te facilitan la creación rápida de sitios, el
problema vendrá cuando necesitas personalizar.
Pasar a WP se ve difícil, pero como todo, mientras
más practiques más lo vas a dominar.
¿?
Slide 34
Slide 34 text
De HTML a WordPress
¿Algún plugin recomendado?
■ Básicamente Advanced custom field para crear
los tipos de contenido y extender el uso de
WordPress.
■ Usa Contact form 7 para el formulario de
contacto, es simple y se adapta a casi todo lo que
necesites.
¿?
Slide 35
Slide 35 text
De HTML a WordPress
Prueba que tu contenido se adapte a diferentes
contenidos, WordPress entrega un XML con data de
prueba.
https://raw.githubusercontent.com/WPTRT/theme-
unit-test/master/themeunittestdata.wordpress.xml
Más info en https://codex.wordpress.org/Theme_Unit_Test
¿?
Slide 36
Slide 36 text
¿Recomendaciones?
Porque obviamente con esto no basta.
Slide 37
Slide 37 text
Usa sí o sí un servidor de prueba, jamás trabajes
directamente en el servidor del cliente.
Slide 38
Slide 38 text
URL amigable en el contenido.
Slide 39
Slide 39 text
Aprende a usar condicionales y algo de PHP.
Slide 40
Slide 40 text
No trates de hacer todo con plugins.
Slide 41
Slide 41 text
Crea una página de error 404.
Slide 42
Slide 42 text
Desconfía de los hosting gratuitos o muy baratos.
Slide 43
Slide 43 text
Usa custom post types.
Slide 44
Slide 44 text
Usa el home.php en lugar de index.php para la
portada.
Slide 45
Slide 45 text
Usa el body_class(); para tener páginas con
estilos diferentes.
Slide 46
Slide 46 text
No se aislen, no programen solos. Tienes
siempre a los amigos de #WPPerú.
Slide 47
Slide 47 text
WordPress Perú - #WPPerú
Slide 48
Slide 48 text
Recursos
■ Twitter
@wpperu
■ Grupo de facebook
facebook.com/groups/wpperu
■ Slack (chat)
wpperu.slack.com - wpperu.herokuapp.com
Slide 49
Slide 49 text
¡Gracias!
Braulio Aquino
@braulioaquino
www.braulioaquino.com
■ [email protected]