De PSD a WP - Mauricio Gelves - Consultor Freelance de … › ... ›...

#WCBilbao | @ciudadanob

De PSD a WP (o cómo crear en 2017 un theme desde un diseño)


¿Quién soy yo?

Juan Hernando @ciudadanoB Diseño & Desarrollo Web @Vertixe Actualidad WP @EnlacePermanent

Organizador @WPPontevedra


Dos charlas en unaLa de la presentación con sus buenas prácticas

La de lo que realmente vais a hacer vosotros después


Mis cuatro problemasCómo encontrar imágenes para estos textos Cómo pronunciar functions, plugin, archive… Cómo resumir todo en 1 hora y no volveros locos Cómo buscar un tema para diseñar


Un clásico que se resiste a desaparecer


Pero han cambiado muchas cosas


¿Cómo debe ser un diseño en 2017?

Web optimizada para el navegador Internet Explorer y una resolución de 800x600


¿Cómo debe ser un diseño en 2017?

Web optimizada para el navegador Internet Explorer y una resolución de 800x600

Web optimizada para 600 navegadores y para 800 resoluciones diferentes


Formatos, programas y consejos

Un diseño en 2017


Formatos, programas y consejos

Un diseño en 2017

Zeplin


¿Cómo debe ser el trato diseñador/desarrollador?

Un diseño en 2017


Consejos y herramientas

Un diseño en 2017

Intenta aprender lo básico del trabajo del otro

Determina qué herramienta de comunicación vas a usar

Define cómo vais a compartir los mockups

Define el proceso de realizar modificaciones

Asana/Trello/Basecamp + Invision + Drive/Dropbox


Consejos y herramientas

Un diseño en 2017

Inbox 9.384 *


¿Y si el diseñador soy yo?

Un diseño en 2017

Organización *, claro

* Al menos haz una foto a la hoja donde pintaste el diseño


¿Qué tengo que saber para hacer mi propio tema?

No vamos a empezar la casa por el tejado


HTML

Qué tengo que saber


CSS / SASS



PHP



Copy & Paste AvanzadoBuscar en Google, Stack Overflow, Codex WordPress



Copy & Paste Avanzado


¿Hola? ¿Hay alguien ahí?


El theme handbook


https://developer.wordpress.org/themes/


Tipografías



¿Qué es un tema de WP?

https://dariobf.com/slides/WCMadrid2017/

Es* lo que nos permite cambiar la apariencia de nuestra página web. También nos permite

cambiar alguna funcionalidad, pero lo principal es el aspecto visual.

*son archivos .php .css .js


La evolución del dev

Temas de WordPress


Buscando en Themeforest

Temas de WordPress


Creando un child themeTemas de WordPress

https://maugelves.com/wp-content/uploads/2017/04/carla-saiz-mi-primer-parto-en-wordpress.pdf


Esqueletos y frameworksTemas de WordPress

Underscoreshttp://underscores.me/

Underscores Componentshttp://components.underscores.me/


Un tema desde cero

Temas de WordPress


Vamos al lío


Lo que tiene que estar sí o sí

Básicos de un tema

https://dariobf.com/slides/WCMadrid2017/

style.cssindex.php


Y ponerlo bonito…

Básicos de un tema

screenshot.png


El loop / WP queriesBásicos de un tema

https://codex.wordpress.org/es:The_Loop_in_Action

<?phpget_header();if (have_posts()) : while (have_posts()) : the_post(); the_content(); endwhile;endif;get_sidebar();get_footer(); ?>


Otras plantillas importantesBásicos de un tema

style.css index.php

header.phpsidebar.phpfooter.php


Otras plantillas importantesBásicos de un tema

style.css index.php

header.php sidebar.php footer.php page.phphome.php

archive.phpsingle.php

…https://developer.wordpress.org/themes/basics/template-hierarchy


Al lío lío


¿Cómo trocear un diseño?

Creando el tema desde el diseño

Imágenes: formatos correctos / bien exportadas ¿Retina?

Lista de tipografías Estructura de márgenes y paddings



Footer.php

Header.php

Index.php


Mobile first y media queries


@media (min-width: 30rem) { body { padding: 4rem; } }


¿Cómo organizarlo todo?


* código para el header.php * código para el footer.php * portada para el index.php o page-portada.php * ¿vamos a usar custom fields?


Template parts


para reusar partes de código para organizarlo todo mejor


Functions.php vs plugins


<?php

/** * Plugin Name: Funciones que no van en el functions.php * Description: Un plugin fantástico que acabamos de crear. * Author: Ciudadanob * Version: 0.1 */

/* Y aquí va tu código */

?>


Enqueue scripts & styles


wp_enqueue_style( 'wordcampguide2017-style', get_stylesheet_uri() );

wp_enqueue_script( ‘wordcampguide2017-navigation', get_template_directory_uri() . ‘/js/custom.js', array(‘jQuery’), '20170513', true );


Imágenes y thumbnails


https://developer.wordpress.org/reference/functions/add_image_size/

add_image_size( ‘mi-niatura', 100, 100, array( 'left', 'top' ) );


Funcionalidades: el menú


<?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>


Usar el customizador: el logo


function theme_prefix_setup() { add_theme_support( 'custom-logo', array( 'height' => 48, 'width' => 134, 'flex-width' => true, ) ); } add_action( 'after_setup_theme', 'theme_prefix_setup' );


Añadir sidebars: los widgets


function wordcampguide_widgets_init() { register_sidebar( array( 'name' => esc_html__( 'Sidebar', 'wordcampguide' ), 'id' => 'sidebar-1', 'description' => esc_html__( 'Add widgets here.', 'wordcampguide' ), 'before_widget' => '<section id="%1$s" class="widget %2$s">', 'after_widget' => '</section>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); } add_action( 'widgets_init', 'wordcampguide_widgets_init' );


Tags condicionales


is_home() is_front_page()

is_admin() is_single() is_page()

is_category() in_category()

https://developer.wordpress.org/themes/basics/conditional-tags/


Custom Fields


ACF <?php the_field();?>

http://maugelves.com/wp-content/uploads/2017/04/mauricio-gelves-boxeo-de-campos-personalizados.pdf


I18N & L10N


https://developer.wordpress.org/themes/functionality/internationalization/https://developer.wordpress.org/themes/functionality/localization/


Accesibilidad


https://developer.wordpress.org/themes/functionality/accessibility/https://www.youtube.com/watch?v=SlTDIQwa6EA


Seguridad


https://codex.wordpress.org/Validating_Sanitizing_and_Escaping_User_DataValidating, sanitizing and escaping data


¿Y si tiene WooCommerce?


https://docs.woocommerce.com/document/third-party-custom-theme-compatibility/https://docs.woocommerce.com/document/template-structure/


Preguntas¿Me lo puedes repetir todo desde “Buenos días…”?


Graciñas!

De PSD a WP - Mauricio Gelves - Consultor Freelance de … › ... ›...

Documents

Transcript of De PSD a WP - Mauricio Gelves - Consultor Freelance de … › ... ›...