$30 off During Our Annual Pro Sale. View Details »

¿Cómo comenzar a realizar trabajos con WordPress?

¿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.

Braulio Aquino

April 07, 2018
Tweet

More Decks by Braulio Aquino

Other Decks in Programming

Transcript

  1. Sesión para la comunidad #WPPerú, Abril 2016
    @braulioaquino
    www.braulioaquino.com
    Comenzando a
    trabajar con
    WordPress

    View Slide

  2. Braulio Aquino
    @braulioaquino
    braulioaquino.com
    Bach. Comp. Científica
    IV Dan de Taekwon-Do ITF
    … parte del equipo de #WPPerú

    View Slide

  3. ¿Cómo comenzamos a realizar trabajos con
    WordPress?
    ¿?

    View Slide

  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.
    ¿?

    View Slide

  5. ¿Qué sabes hacer?
    Los pre-requisitos.

    View Slide

  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?
    ¿?

    View Slide

  7. ¿Qué tipo de sitio
    quieres hacer?
    Porque no puedes hacer de todo.

    View Slide

  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?
    ¿?

    View Slide

  9. ¿Cuánto tiempo
    dispones para trabajar?
    Porque los programadores somos malos,
    malísimos, calculando el tiempo de entrega.

    View Slide

  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?
    ¿?

    View Slide

  11. ¡A trabajar!

    View Slide

  12. ¡A trabajar!
    Ponte a
    codear
    Ordena las
    ideas
    Habla con el
    cliente

    View Slide

  13. Habla con el cliente
    ■ Busca un cliente a la
    vez.
    ■ Agenda un reunión
    presencial.
    ■ Crea un contrato
    simple.

    View Slide

  14. ■ En el contrato:
    Especificaciones,
    tiempos, costos,
    formas de pago y
    garantía, etc.
    Habla con el cliente

    View Slide

  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

    View Slide

  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

    View Slide

  17. Ahora que sabes qué
    información tienes,
    recién puedes enfocarte
    en el diseño.
    Ponte a codear

    View Slide

  18. Ponte a codear
    ¿Eres diseñador y sabes
    front-end?
    Pasa tu creación a
    WordPress.

    View Slide

  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

    View Slide

  20. ¿No sabes diseñar pero
    ya sabes front-end?
    Usa una plantilla.
    Ponte a codear

    View Slide

  21. NO una plantilla
    WordPress

    View Slide

  22. SÍ una plantilla
    HTML

    View Slide

  23. … que tú mismo
    tienes que pasar a
    WordPress.

    View Slide

  24. De HTML a WordPress

    View Slide

  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
    ¿?

    View Slide

  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
    ¿?

    View Slide

  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
    ¿?

    View Slide

  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
    ¿?

    View Slide

  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
    ¿?

    View Slide

  30. De HTML a WordPress
    En el style.css:
    /*
    Theme Name: Nombre de mi plantilla
    */
    ¿?

    View Slide

  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’);

    View Slide

  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
    ¿?

    View Slide

  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.
    ¿?

    View Slide

  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.
    ¿?

    View Slide

  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
    ¿?

    View Slide

  36. ¿Recomendaciones?
    Porque obviamente con esto no basta.

    View Slide

  37. Usa sí o sí un servidor de prueba, jamás trabajes
    directamente en el servidor del cliente.

    View Slide

  38. URL amigable en el contenido.

    View Slide

  39. Aprende a usar condicionales y algo de PHP.

    View Slide

  40. No trates de hacer todo con plugins.

    View Slide

  41. Crea una página de error 404.

    View Slide

  42. Desconfía de los hosting gratuitos o muy baratos.

    View Slide

  43. Usa custom post types.

    View Slide

  44. Usa el home.php en lugar de index.php para la
    portada.

    View Slide

  45. Usa el body_class(); para tener páginas con
    estilos diferentes.

    View Slide

  46. No se aislen, no programen solos. Tienes
    siempre a los amigos de #WPPerú.

    View Slide

  47. WordPress Perú - #WPPerú

    View Slide

  48. Recursos
    ■ Twitter
    @wpperu
    ■ Grupo de facebook
    facebook.com/groups/wpperu
    ■ Slack (chat)
    wpperu.slack.com - wpperu.herokuapp.com

    View Slide

  49. ¡Gracias!
    Braulio Aquino
    @braulioaquino
    www.braulioaquino.com
    [email protected]

    View Slide