¿Cómo comenzar a realizar trabajos con WordPress?

Tips para quienes se inician en el desarrollo de páginas web basadas en WordPress como negocio.

Transcript

1. Sesión para la comunidad #WPPerú, Abril 2016 @braulioaquino www.braulioaquino.com Comenzando a trabajar con WordPress
2. Braulio Aquino @braulioaquino braulioaquino.com Bach. Comp. Científica IV Dan de Taekwon-Do ITF … parte del equipo de #WPPerú
3. ¿Cómo comenzamos a realizar trabajos con WordPress? ¿?
4. ¿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. ¿?
5. ¿Qué sabes hacer? Los pre-requisitos.
6. ▪ 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? ¿?
7. ¿Qué tipo de sitio quieres hacer? Porque no puedes hacer de todo.
8. ▪ ¿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? ¿?
9. ¿Cuánto tiempo dispones para trabajar? Porque los programadores somos malos, malísimos, calculando el tiempo de entrega.
10. ¿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? ¿?
11. ¡A trabajar!
12. ¡A trabajar! Ponte a codear Ordena las ideas Habla con el cliente
13. Habla con el cliente ▪ Busca un cliente a la vez. ▪ Agenda un reunión presencial. ▪ Crea un contrato simple.
14. ▪ En el contrato: Especificaciones, tiempos, costos, formas de pago y garantía, etc. Habla con el cliente
15. Pide al cliente “toda” la información: ▪ Textos. ▪ Imágenes. ▪ Presentaciones. Si es reestructurar un sitio, obtén todas las secciones. Ordena las ideas
16. 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
17. Ahora que sabes qué información tienes, recién puedes enfocarte en el diseño. Ponte a codear
18. Ponte a codear ¿Eres diseñador y sabes front-end? Pasa tu creación a WordPress.
19. ¿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
20. ¿No sabes diseñar pero ya sabes front-end? Usa una plantilla. Ponte a codear
21. NO una plantilla WordPress
22. SÍ una plantilla HTML
23. … que tú mismo tienes que pasar a WordPress.
24. De HTML a WordPress
25. 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 ¿?
26. 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 ¿?
27. 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 ¿?
28. 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 ¿?
29. 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 ¿?
30. De HTML a WordPress En el style.css: /* Theme Name: Nombre de mi plantilla */ ¿?
31. 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’);
32. 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 ¿?
33. 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. ¿?
34. 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. ¿?
35. 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 ¿?
36. ¿Recomendaciones? Porque obviamente con esto no basta.
37. Usa sí o sí un servidor de prueba, jamás trabajes directamente en el servidor del cliente.
38. URL amigable en el contenido.
39. Aprende a usar condicionales y algo de PHP.
40. No trates de hacer todo con plugins.
41. Crea una página de error 404.
42. Desconfía de los hosting gratuitos o muy baratos.
43. Usa custom post types.
44. Usa el home.php en lugar de index.php para la portada.
45. Usa el body_class(); para tener páginas con estilos diferentes.
46. No se aislen, no programen solos. Tienes siempre a los amigos de #WPPerú.
47. WordPress Perú - #WPPerú
48. Recursos ▪ Twitter @wpperu ▪ Grupo de facebook facebook.com/groups/wpperu ▪ Slack (chat) wpperu.slack.com - wpperu.herokuapp.com
49. ¡Gracias! Braulio Aquino @braulioaquino www.braulioaquino.com ▪ braulio@braulioaquino.com