Crea tu propio theme base para WordPress
con Foundation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5719686/marca_gris.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5727491/WordPress-logotype-standard.png)
9 de febrero de 2019
¿Qué quería hacer?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5724435/elenayhelmer-2.png)
Una estructura que pudiera controlar
Entender y trabajar con HTML y CSS
Controlar las vistas y la información tanto en back como en front
Entender mejor el código
Ser productivo
¿Qué es
Foundation?
The most advanced
responsive front-end
framework in the world.
Framework CSS
Prototipar y llevar a producción de una manera muy ágil y rápida.
Pensado para que el diseño se vea bien en cualquier dispositivo.
Es semántico, legible, fácil de aprender y totalmente personalizable.
¿Qué es un framework?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5727664/cueva-de-los-verdes-lanzarote.jpg)
Es una herramienta pensada para ahorrarnos tiempo a la hora de programar o diseñar ya que reúne un conjunto de componentes, librerías y acciones predefinidas.
Nos ayuda...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5733581/lanzarote-141928_1280.jpg)
- Mobile First
- Responsive
- Rapidez
- Buenas prácticas
- Aprendizaje
No estamos solos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5727689/greg-rakozy-129733-unsplash.jpg)
HTML
CSS
JAVASCRIPT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5727691/tecnologias-stackoverflow.jpg)
Fuente: https://insights.stackoverflow.com/survey/2018/#technology
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5727696/logo-so-PRINT-4.png)
¿Cómo Integramos foundation
en WordPress?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5757806/webdesign-lanzarote.jpg)
_S UNDERSCORES
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5727711/underscores.jpg)
website: https://underscores.me
Los pasos...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5728687/el-quemao-la-santa.jpg)
Descargamos Foundation y Underscores
Integramos la carpeta de Foundation en el theme
Llamamos los archivos CSS y JavaScript desde la plantilla
functions.php
Maquetamos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5759330/1-screenshot__8_.png)
Los pasos...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5728716/jardin-cactus-lanzarote.jpg)
Descargamos Foundation y Underscores
Integramos la carpeta de Foundation en el theme
Llamamos los archivos CSS y JavaScript desde la plantilla
functions.php
Maquetamos
_S UNDERSCORES
foundation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5728991/theme-without.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5728990/theme-with.jpg)
Los pasos...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5728729/buceo-lanzarote.jpg)
Descargamos Foundation y Underscores
Integramos la carpeta de Foundation en el theme
Llamamos los archivos CSS y JavaScript desde la plantilla
functions.php
Maquetamos
// Añadimos el CSS de foundation //
wp_enqueue_style( 'testwordcamp-foundationCSS', get_template_directory_uri() . '/foundation/css/foundation.css',false,'','all');
wp_enqueue_style( 'testwordcamp-style', get_stylesheet_uri() );
// Añadimos el JS de foundation //
wp_enqueue_script( 'testwordcamp-foundationjs', get_template_directory_uri() . '/foundation/js/vendor/foundation.js', array(), '', true );
// Añadimos el JS APP de foundation //
wp_enqueue_script( 'testwordcamp-foundationjs-app', get_template_directory_uri() . '/foundation/js/app.js', array(), '', true );
functions.php
Llamamos el CSS y JS de foundation para que suceda la magia
Los pasos...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5728784/giphy.gif)
Descargamos Foundation y Underscores
Integramos la carpeta de Foundation en el theme
Llamamos los archivos CSS y JavaScript desde la plantilla
functions.php
Maquetamos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5729238/examplelayout.png)
Grid CSS
12 columnas
3 columnas
9 columnas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5759345/1-screenshot__9_.png)
Underscores sin foundation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5733656/web-no-found-desktop.jpg)
Underscores con foundation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5733658/web-found-mobile.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5733660/web-found-tablet.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5733659/web-found-desktop.jpg)
Controlar el grid
<div id="page" class="site grid-container">
<div id="content" class="site-content grid-x grid-padding-x">
<div id="primary" class="content-area cell medium-8 large-9">
<main id="main" class="site-main">
<div class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-3">
<p>Contenido / Loop</p>
</div>
</main><!-- #main -->
</div><!-- #primary -->
<aside id="secondary" class="widget-area cell medium-4 large-3">
<p>Contenido / Sidebar</p>
</aside><!-- #secondary -->
</div><!-- #content -->
</div><!-- #page -->
¿Qué más podemos hacer aparte de definir un layout?
![](https://media2.giphy.com/media/th490Ed7IiAbS/giphy.gif)
Mostrar u ocultar contenido
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5727684/adwords-hiw-overview-hero-laptop_1x.png)
<!-- Tamaño de la pantalla -->
<p>You are on a small screen or larger.</p>
<p class="show-for-medium">You are on a medium screen or larger.</p>
<p class="show-for-large">You are on a large screen or larger.</p>
<p class="hide-for-medium">You are <em>not</em> on a medium screen or larger.</p>
<p class="hide-for-large">You are <em>not</em> on a large screen or larger.</p>
<!-- Orientación del móvil o tablet -->
<p class="show-for-landscape">You are in landscape orientation.</p>
<p class="show-for-portrait">You are in portrait orientation.</p>
Botones
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5729425/dual-screen-1745705.png)
<!-- Tamaños -->
<a class="button tiny" href="#">So Tiny</a>
<a class="button small" href="#">So Small</a>
<a class="button" href="#">So Basic</a>
<a class="button large" href="#">So Large</a>
<a class="button expanded" href="#">Such Expand</a>
<a class="button small expanded" href="#">Wow, Small Expand</a>
<!-- Colores -->
<a class="button primary" href="#">Primary</a>
<a class="button secondary" href="#">Secondary</a>
<a class="button success" href="#">Success</a>
<a class="button alert" href="#">Alert</a>
<a class="button warning" href="#">Warning</a>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5729447/island-524009_1280.jpg)
Y decenas de acciones más...
!EXPLORA LA DOCUMENTACIÓN¡
!APRENDE¡
¿Alternativas?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5729461/lanzarote-la-geria.jpg)
¡Muchas!
Resumen / Recursos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5729474/timanfaya-2466279_1280.jpg)
Descargas Foundation: https://foundation.zurb.com _S UNDERSCORES: https://underscores.me Proyecto usado Github: https://github.com/helmercol/testWordCampGC2019 Recursos gráficos Pixabay: https://pixabay.com GIPHY: https://giphy.com Unsplash: https://unsplash.com Info Grid Layout y Flex https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout
Incluir CSS y Javascript en WordPress
https://developer.wordpress.org/themes/basics/including-css-javascript/
Helmer
Galvis
rrss
twitter / instagram
@helmercol
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5719722/IMG_4196.jpg)
web
hgrdesign.es
galvisrojas.eu
¡GRACIAS!
¡TOTALES!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5719684/WordPress-logotype-standard-white.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/993588/images/5719685/marca_blanco.png)
WordCamp Gran Canaria 2019
By helmercol
WordCamp Gran Canaria 2019
Presentación para la ponencia en WordCamp Gran Canaria 2019
- 713