Genesis Framework

Aprende a crear themes para WordPress, utilizando este potente framework, con el que conseguirás temes seguros y con un código muy optimizado.

Transcript

1. Imanol Terán Maruri - @itermar GENESIS FRAMEWORK La mejor manera de crear temas WordPress GENESIS FRAMEWORK La mejor forma de crear tus themes WordPress
2. ¿QUIÉN SOY? IMANOL TERÁN MARURI ‣ Diseñador y desarrollador frontend ‣ Fundador de widdiapps.com ‣ Puedes encontrarme en: ‣ itermar.io ‣ @itermar ‣ imanol@itermar.io
3. PROGRAMA ‣ Introducción ‣ ¿Qué es un framework? ‣ Características y ventajas de Genesis Framework ‣ Child Themes ‣ Uso de Genesis, paso a paso ‣ Instalación, configuración, Seo, Hooks, reprogramación del loop, cambios en CSS, layouts, Widget Areas, Custom Post Types, condicionales…. ‣ Plugins Recomendados ‣ Cambios mediante código
4. INTRODUCCIÓN De qué vamos a hablar
5. Introducción ‣ A la hora de crear una web con WordPress, se le da mucha importancia al theme ‣ Mucha importancia en cuanto a su aspecto y funcionalidades ‣ No tanto a su optimización, facilidad de uso, calidad de código…
6. Introducción ‣ Elegir un buen theme sobre el que construir nuestra web, nos va a facilitar mucho la vida, tanto en la creación como en el mantenimiento ‣ Evitamos problemas en el futuro ‣ Hay varias opciones sobre las que partir, y Genesis Framework es una de ellas
7. ¿QUÉ ES UN FRAMEWORK? Genesis Framework = theme supervitaminado
8. – Wikipedia Un framework, entorno de trabajo o marco de trabajo es un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular que sirve como referencia, para enfrentar y resolver nuevos problemas de índole similar. En el desarrollo de software, un entorno de trabajo es una estructura conceptual y tecnológica de asistencia definida, normalmente, con artefactos o módulos concretos de software, que puede servir de base para la organización y desarrollo de software. Típicamente, puede incluir soporte de programas, bibliotecas, y un lenguaje interpretado, entre otras herramientas, para así ayudar a desarrollar y unir los diferentes componentes de un proyecto.
9. ¿Qué es un framework? ‣ Un framework es un conjunto de herramientas, librerías y buenas prácticas ‣ Se utilizan de forma sencilla y se pueden reutilizar ‣ Ayudan a resolver un problema determinado ‣ Nos permite hacer lo mismo, con menos código
10. Frameworks CSS
11. Frameworks Javascript
12. Frameworks PHP
13. ¿Qué es un framework? ‣ Al final, se trata de añadir a un theme, características que no tiene ‣ Genesis se instala de la misma manera que cualquier otro theme ‣ Podemos decir que Genesis es un theme “super-vitaminado”
14. ¿POR QUÉ GENESIS? Características y ventajas de Genesis Framework
15. https://my.studiopress.com/themes/genesis/
16. $ 59,95 * Está incluido dentro de la suscripción mensual a mis cursos
17. GENESIS FRAMEWORK ‣ Seguro y código muy optimizado ‣ Temas robustos ‣ Temas que cargan rápido ‣ Puntúan muy bien en Google ‣ SEO-friendly
18. GENESIS FRAMEWORK ‣ En realidad, no deja de ser un theme (una plantilla) ‣ Theme multi-vitaminado ‣ Nos aporta funcionalidades extra, que podremos utilizar en nuestro site, una vez instalado
19. GENESIS FRAMEWORK ‣ La forma de trabajar es mediante la estructura: ‣ PARENT THEME: funcionalidad del framework ‣ CHILD THEME: personalizaciones, CSS, parte visual…
20. GENESIS FRAMEWORK ‣ El PARENT THEME no debemos tocarlo nunca ‣ Nuestros cambios irán siempre en nuestro CHILD THEME ‣ Cada vez que haya una actualización de Genesis, nos aseguramos que todo lo que hemos tocado no sufre variaciones ‣ Forma mucho más cómoda de trabajar con plantillas personalizadas
21. GENESIS FRAMEWORK ‣ El CHILD THEME necesita que previamente tengamos el PARENT THEME instalado ‣ Funciones personalizadas: ‣ Hooks ‣ Widget Areas
22. CHILD THEMES La forma correcta de trabajar con WordPress
23. ¿QUÉ ES UN THEME?
34. CHILD THEMES ‣ Un CHILD THEME es un theme hijo de otro theme —> PARENT THEME ‣ Hereda todas las propiedades del PARENT THEME ‣ Además, podemos añadir funcionalidades y estilos propios ‣ Es la forma más correcta de trabajar, si no queremos tener problemas
35. CHILD THEMES ‣ Estilos se definen en CSS dentro del fichero style.css ‣ Colores, tipografías, márgenes, bordes, grid…etc ‣ Las funcionalidades se definen en PHP en functions.php (u otro) ‣ Menús, widget areas…
36. CHILD THEMES ‣ Importante no realizar nunca modificaciones sobre el theme padre ‣ Perderíamos todos los estilos y funcionalidades propios que hemos creado, al actualizarlo ‣ Actualización de theme, borra todas las modificaciones y lo sobre escribe con la nueva versión del theme ‣ Ante dos archivos de mismo nombre, el del CHILD THEME tiene preferencia
37. CHILD THEMES PARA GENESIS Dónde encontrarlos
38. CHILD THEMES PARA GENESIS ‣ https://my.studiopress.com/themes/ ‣ https://zigzagpress.com ‣ https://asithemes.com ‣ https://lovelyconfetti.com/es/ ‣ https://restored316designs.com
39. CREACIÓN DE UN CHILD THEME Características y posibilidades que nos ofrece
40. Creación de un Child Theme ‣ Tenemos dos formas de crear un Child Theme ‣ Mediante plugins ‣ De forma manual
41. https://es.wordpress.org/plugins/child-theme-configurator/
42. Creación mediante plugins ‣ Herramientas / Child Themes ‣ Create new Child Theme / Seleccionar Parent Theme ‣ Configurar todo ‣ Comprobar que se ha creado el Child Theme y podemos desactivar / borrar el plugin
43. Creación manual ‣ En nuestro FTP, creamos una nueva carpeta para nuestro CHILD THEME dentro de la carpeta themes ‣ Creamos un archivo style.css
44. Creación manual ‣ Añadimos las siguientes líneas al comienzo de style.css: /* Theme Name: Theme URI: Description: Author: Author URI: Version: Tags: License: License URI: Template: */
45. Creación manual ‣ Añadimos las siguientes líneas al comienzo de style.css: /* Theme Name: Imanol Theme URI: https://itermar.io Description: Custom theme for my personal website Author: Imanol Terán Author URI: https://itermar.io/ Version: 0.1 Tags: one-column, two-columns, three-columns, custom-menu, featured-images, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, accessibility-ready License: GPL-2.0+ License URI: http://www.gnu.org/licenses/gpl-2.0.html Template: genesis */
46. PLANTILLAS ‣ Necesitamos dos archivos para crear nuestro theme: ‣ style.css ‣ index.php
47. Creación manual ‣ Si añadimos un style.css vacío —> web sin estilos ‣ Tenemos dos opciones: ‣ Crear estilos desde cero ‣ Partir de los estilos del Parent ‣ @import ‣ Copiar + Pegar (perderemos futuras actualizaciones theme) ‣ Cargar en functions.php
48. Creación manual ‣ En functions.php: le decimos que cargue todos los estilos del PARENT THEME y los añada al CHILD THEME <?php if ( !defined( 'ABSPATH' ) ) exit; if ( !function_exists( 'chld_thm_cfg_parent_css' ) ): function chld_thm_cfg_parent_css() { wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'genericons' ) ); } endif; add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
49. USO DE GENESIS Paso a paso
50. INSTALACIÓN
51. Instalación ‣ La instalación se hace igual que la de cualquier theme ‣ Descargamos Genesis y lo colocamos en nuestro: wp-content/themes ‣ Trabajamos con Child Themes ‣ El tema padre (framework) ¡¡no se toca!!
52. CONFIGURACIÓN
53. Configuración ‣ Al instalar Genesis, tenemos un nuevo menú en nuestro panel de administrador ‣ Theme Settings: opciones de configuración básicas sobre layout, comentarios, navegación, blog…etc ‣ SEO Settings: Opciones de SEO básicas ‣ Import / Export: todas las opciones que configuremos se pueden importar desde otra página con Genesis o exportar para utilizar en otro momento.
54. Configuración ‣ Todo lo que no se puede modificar desde aquí: podemos hacerlo mediante plugins o código ‣ En header | footer scripts: Podemos usarlo para código Analytics u otro código que queramos que se repita a lo largo de toda la web
55. OPCIONES DE SEO
56. Opciones de SEO ‣ Al instalar un plugin de SEO, como YOAST, desaparecen las opciones de SEO de Genesis ‣ Todas las opciones que vayamos seleccionando, van añadiendo cosas en el código de nuestra web ‣ Todas las opciones que seleccionemos se pueden importar y exportar
57. HOOKS
58. Hooks ‣ Una de las principales características de Genesis ‣ Nos abre infinitas posibilidades de personalización ‣ Aquí es donde empiezan realmente las propiedades de Genesis como framework
59. Hooks ‣ Son unos “ganchos”, sitios (no visibles) o momentos en los que podemos añadir, quitar o modificar información dentro de nuestra página web
60. Hooks ‣ Hay dos tipos de hooks: ‣ Action Hooks: sirven para añadir o eliminar partes de nuestra página ‣ Filter Hooks: sirven para sustituir contenido dentro de la web
61. Hooks ‣ Hay un montón de hooks disponibles en Genesis ‣ Como no podemos saberlos todos, hay un plugin que nos ayuda mucho a verlo de una forma visual, sobre nuestra propia web ‣ Genesis Visual Hook Guide: https://es.wordpress.org/plugins/ genesis-visual-hook-guide/
62. Hooks ‣ El contenido que queremos añadir, eliminar o sustituir, mediante hooks, tenemos que indicarlo mediante código php dentro de nuestro fichero functions.php ‣ Para empezar, podemos utilizar el plugin “GENESIS SIMPLE HOOKS”, el cual nos ayuda a familiarizarnos con el uso de los hooks ‣ Nos añade una nueva opción dentro del menú de Genesis
63. Hooks ‣ Dentro de un hook podemos insertar: ‣ Código html ‣ Código php ‣ Shortcodes de plugins que tengamos instalados
64. SNIPPETS
65. Snippets ‣ Los snippets son pequeños fragmentos de código ‣ Permiten realizar una serie de funciones ‣ Estas funciones se ejecutan a nivel de framework ‣ Van a funcionar independientemente de Child Theme de Genesis que utilicemos
66. Snippets ‣ La función a la que llamemos, tiene que existir: ‣ Bien sea una función definida en Genesis Framework, o una creada por nosotros ‣ Estructura: ‣ tipo_de_accion(‘hook’, ‘funcion a ejecutar en el hook’);
67. Snippets ‣ Ejemplo de snippet de código: add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_content_sidebar' );
68. Snippets ‣ Forzar layout de nuestra web: add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_content_sidebar' ); add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_sidebar_content' ); add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_content_sidebar_sidebar' ); add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_sidebar_sidebar_content' ); add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_sidebar_content_sidebar' ); add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
69. Snippets ‣ Quitar layouts genesis_unregister_layout( 'content-sidebar' ); genesis_unregister_layout( 'sidebar-content' ); genesis_unregister_layout( 'content-sidebar-sidebar' ); genesis_unregister_layout( 'sidebar-sidebar-content' ); genesis_unregister_layout( 'sidebar-content-sidebar' ); genesis_unregister_layout( 'full-width-content' );
70. Snippets ‣ Quitar SEO remove_theme_support( 'genesis-seo-settings-menu' );
71. Snippets ‣ Quitar link del menú remove_theme_support( 'genesis-admin-menu' );
72. Snippets ‣ Quitar link de menú si no es administrador if ( !current_user_can( 'manage_options' ) ) { remove_theme_support( 'genesis-admin-menu' ); }
73. Snippets ‣ Quitar widgets add_action( 'widgets_init', 'quitar_widgets', 20 ); function quitar_widgets() { unregister_widget( 'Genesis_Featured_Page' ); unregister_widget( 'Genesis_Featured_Post' ); unregister_widget( 'Genesis_User_Profile_Widget' ); }
74. CONDICIONALES
75. Condicionales ‣ Todos los action y filtres podemos aplicarlos a todas las páginas, posts, usuarios…o solo a algunos concretos ‣ Listado de todas las condicionales de WordPress: https:// codex.wordpress.org/Conditional_Tags
76. GRID
77. Genesis GRID ‣ Mediante el plugin Genesis Grid, podemos modificar la apariencia del loop de la forma que queramos: ‣ Número de posts destacados, columnas, tamaño de imágenes…etc ‣ Al instalarlo y activarlo, tenemos disponible una nueva opción de menú: Grid Loop
78. REPROGRAMACIÓN DEL LOOP
79. Reprogramación del loop ‣ El loop se refiere al listado de posts dentro de nuestra web ‣ Gracias a los hooks, y algunos snippets de código, vamos a poder añadir, eliminar o modificar, cualquier cosa de cada post
80. Reprogramación del loop ‣ Quitar información meta de los posts remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
81. Reprogramación del loop ‣ Quitar información meta de los posts solo en la Home add_action( 'genesis_before_entry', 'quitar_informacion_antes' ); function quitar_informacion_antes() { if ( is_home() ) { remove_action( 'genesis_entry_header', 'genesis_post_info', 12 ); } }
82. Reprogramación del loop ‣ Personalizar información meta del post add_filter( 'genesis_post_info', 'filtro_informacion' ); function filtro_informacion($post_info) { $post_info = '[post_date] by [post_author_posts_link] [post_comments] [post_edit]'; return $post_info; }
83. Reprogramación del loop ‣ Quitar título de los post remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
84. Reprogramación del loop ‣ Quitar contenido dentro de los posts remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
85. PLUGINS Recomendados para Genesis
86. Plugins Gratuitos ‣ Genesis Columns Advanced: https://es.wordpress.org/plugins/genesis- columns-advanced/ ‣ Genesis Connect for WooCommerce: https://es.wordpress.org/plugins/ genesis-connect-woocommerce/ ‣ Genesis Simple Sidebars: https://wordpress.org/plugins/genesis-simple- sidebars/ ‣ Genesis Simple Menus: https://wordpress.org/plugins/genesis-simple- menus/ ‣ Genesis Simple Share: https://es.wordpress.org/plugins/genesis-simple- share/
87. Plugins Gratuitos ‣ Genesis Visual Hook Guide: https://es.wordpress.org/plugins/genesis- visual-hook-guide/ ‣ Genesis Translations: https://es.wordpress.org/plugins/genesis- translations/ ‣ Genesis Simple Social Icons: https://wordpress.org/plugins/simple- social-icons/ ‣ Genesis Simple Edits: https://es.wordpress.org/plugins/genesis-simple- edits/
88. Plugins Gratuitos ‣ Genesis Blox Lite: https://es.wordpress.org/plugins/blox-lite/ ‣ Genesis Simple Hooks: https://wordpress.org/plugins/genesis-simple- hooks/ ‣ Genesis Enews Extended: https://wordpress.org/plugins/genesis-enews- extended/ ‣ Genesis Grid: https://es.wordpress.org/plugins/genesis-grid-loop/
89. Plugins Premium ‣ Genesis Extender (69 $): https://cobaltapps.com/downloads/genesis- extender-plugin/
90. Cambios mediante código Perdiendo el miedo a programar
91. Cambios CSS
92. Cambios CSS ‣ Modificaciones en código: más eficientes ‣ Modificaciones vía plugin: más cómodo, pero es imposible tener recogidas todas las opciones ‣ Con el Plugin “Visual Hook Guide” / Markup: vemos todas las etiqueta de CSS
93. Cambios CSS ‣ Plugin Genesis Extender / Extender Custom ‣ Podemos hacer cambios CSS directamente mediante código ‣ Utilizar asistente CSS BUILDER, nos genera todo el código ‣ Una vez estemos cómodos con CSS, mejor hacer todo por código directamente en style.css
94. Quitar y reemplazar ACTIONS
95. Quitar y reemplazar actions ‣ En el mismo plugin, pestaña FUNCTIONS ‣ Problema de añadir cambios directamente en functions.php ‣ Si cambiamos de tema, no tenemos esas funciones. ‣ Estar pendiente de añadir funciones en functions.php del otro tema
96. Quitar y reemplazar actions ‣ Con el plugin, estos cambios quedan a nivel de web, no de theme ‣ En la pestaña FUNCTIONS, con PHP BUILDER generamos código PHP ‣ La función REPLACE = REMOVE + ADD
97. Quitar y reemplazar actions ‣ Muy interesante trabajar con condicionales ‣ Aplicar cambios solo en determinados casos ‣ Podemos crear funciones propias ‣ Cuidado con los nombres de funciones ‣ Si hay dos con mismo nombre: problemas
98. Filter Hooks
99. Filter hooks ‣ Functions / Add Filter ‣ Similar a action ‣ Lo mejor del filter: ‣ Podemos pasarle parámetros con $ -> return $parámetro ‣ Etiquetas html entre comillas simples ‘’
100. Filter hooks ‣ Habrá veces que apliquemos el filtro y no se muestre en la página: ‣ Lo habremos cargado en el momento erróneo ‣ Podemos solucionarlo metiendo el if en una función y asociar esa función a un action (por ejemplo en genesis-meta que sabemos que carga justo al principio)
101. Layouts GENESIS
102. Layouts Genesis ‣ En PHP Builder: Layouts ‣ Si forzamos diferentes layouts para la misma página: el que “manda” es el último ‣ Esto también se puede seleccionar en opciones de Genesis ‣ Código “manda” sobre opciones
103. Plantillas de páginas y de WordPress
105. JERARQUÍA DE PLANTILLAS
107. PLANTILLAS DE PÁGINA
108. PLANTILLAS DE PÁGINA ‣ Sólo se pueden aplicar a páginas ‣ No se aplican a posts, categorías ni ningún otro elemento ‣ Podemos elegirlas mediante un desplegable al crear una nueva página
109. PLANTILLAS DE PÁGINA ‣ No se pueden asignar automáticamente a una página por el simple hecho de crearla ‣ Ha de ser un usuario con privilegios quien se la asigne ‣ Dentro de la sección “Atributos de página”, seleccionar la plantilla dentro de la sección “Plantilla”
110. PLANTILLAS DE PÁGINA ‣ Las plantillas dependen del theme ‣ En caso de no haber ninguna disponible, no aparecerá esta opción ‣ Cuando creamos child themes, podemos crear nuestras propias plantillas
111. PLANTILLAS DE PÁGINA ‣ Debemos crear la carpeta “page-templates” dentro de la raíz de nuestro theme, así lo detecta automáticamente ‣ Ahí, creamos un fichero “nombre_plantilla.php” ‣ page.php es la plantilla por defecto
112. PLANTILLAS DE PÁGINA ‣ Indicar el template name, para que WordPress lo reconozca como plantilla de página <?php /* Template Name: Nombre de la plantilla */ ?>
113. PLANTILLAS DE PÁGINA ‣ A partir de ahí, podemos realizar las modificaciones que queramos: ‣ Eliminar partes de page.php ‣ Asignar clases para luego modificar aspecto CSS ‣ Añadir código PHP
114. ARCHIVOS DE PLANTILLA
115. ARCHIVOS DE PLANTILLA ‣ Afectan a las URL de nuestro site en función del tipo de información que vaya a mostrar ‣ Por tanto, puede afectar a: ‣ Posts, páginas, categorías, etiquetas, homepage, página de entradas, página de comentarios…etc.
116. ARCHIVOS DE PLANTILLA ‣ Estas plantillas se asignan de forma automática, por la naturaleza de esa información que muestran ‣ Por tanto, en este caso no hay que indicar qué plantilla queremos usar
117. ARCHIVOS DE PLANTILLA ‣ Se encuentran normalmente en la carpeta raíz del tema, aunque también pueden estar en el directorio “templates” ‣ Prevalecen los cambios en el fichero más específico ‣ Todos los archivos son opcionales, menos index.php ‣ Hay un montón de archivos de plantilla, aquí vemos su jerarquía
118. https://wphierarchy.com
119. ARCHIVOS DE PLANTILLA ‣ Archivos de plantilla más importantes ‣ INDEX ‣ POSTS ‣ PAGE
120. ARCHIVOS DE PLANTILLA ‣ INDEX ‣ home.php - página principal de entradas (Blog) ‣ index.php - página principal en caso de no existir home.php
121. ARCHIVOS DE PLANTILLA ‣ POSTS ‣ single.php: página de un post dentro del blog ‣ singular.php: fallback sirve tanto para páginas como para posts
122. ARCHIVOS DE PLANTILLA ‣ PAGE ‣ front-page.php: homepage estática (una página cualquiera de nuestro site) ‣ page.php: backup de front-page.php ‣ singular.php: fallback, sirve tanto para páginas como para posts
123. ARCHIVOS DE PLANTILLA ‣ Dentro de las plantillas tenemos diferentes instrucciones, las cuales conforman el aspecto final de la web ‣ get_header() ‣ get_footer() ‣ get_sidebar()
124. header.php ‣ wp_head() ‣ wp_title() ‣ body_class()
125. footer.php ‣ wp_footer() ‣ date(‘Y’)
126. sidebar.php ‣ dynamic_sidebar()
127. content.php ‣ the_title() ‣ the_content() ‣ the_excerpt()
129. ARCHIVOS DE PLANTILLA ‣ Plugin What The File: https://es.wordpress.org/plugins/what-the-file/ ‣ Te indica qué archivo de plantilla de está utilizando
130. Labels
131. Labels ‣ Dentro del plugin “Extender Custom”: LABELS ‣ Si creamos un label, después podemos anadírselo a la class de body de una página ‣ Al añadir una nueva página, tenemos abajo nuevo menú “Genesis Extender Labels” ‣ Lo mejor de trabajar con los labels es que podemos tener varias seleccionados a la vez, mientras que la plantilla nos limita
132. Custom Widget Areas
133. Custom Widget Areas ‣ Creamos un label para widget areas ‣ Seleccionamos menú Widget Areas ‣ Le damos un nombre ‣ Elegir hook donde se va a mostrar ‣ Podemos añadir una condicional para un label concreto
134. Hooks Boxes
135. Hook boxes ‣ Está ligado con labels y condicionales ‣ Similar a aplicar lo mismo mediante CSS y body class ‣ Diferencia: CSS se carga siempre y hook sólo donde le corresponde
136. Imágenes
137. Imágenes ‣ Este plugin nos permite subir imágenes sin el gestor de medios de WordPress ‣ Evitamos generar todas las miniaturas ‣ A efectos prácticos, similar a subirlas por FTP
138. Recomendaciones Sobre el uso de Genesis
139. Recomendaciones ‣ Hay plugins muy útiles, pero a medida que nos vayamos sintiendo cómodos, mejor utilizar código ‣ Código nos permite jugar con condicionales ‣ Un plugin nunca va a tener toda las opciones posibles que podamos necesitar, es imposible cubrir todos los casos
140. Imanol Terán Maruri - @itermar GRACIAS itermar.io