WordPress Child Themes

¿Qué son los child themes de WordPress? ¿Cómo funcionan? ¿Por qué debemos utilizarlos?

Transcript

1. Imanol Terán Maruri - @itermar CHILD THEMES en 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 ‣ Creación de un Child Theme ‣ Modificaciones PHP ‣ Modificaciones CSS ‣ Plantillas ‣ Child Theme Responsive ‣ Genesis Child Themes ‣ Actualizaciones
4. INTRODUCCIÓN ¿Qué es un Child Theme? ¿Por qué debemos utilizarlos?
5. ¿QUÉ ES UN THEME?
16. INTRODUCCIÓN ‣ Un tema es una plantilla, mediante la cual mostramos el contenido de nuestra página web ‣ Incluye funcionalidad y estilos ‣ Dentro de la parte de los estilos podemos definir posicionamiento, tamaños, colores, bordes…cualquier propiedad de CSS que queramos ‣ La funcionalidad indica qué partes de la web se muestran, dónde se muestran…
18. INSTALACIÓN EN LOCAL https://serverpress.com/get-desktopserver/ https://local.getflywheel.com
19. Themes ‣ https://www.elegantthemes.com/gallery/ ‣ https://themeforest.net ‣ https://my.studiopress.com/themes/ ‣ https://asithemes.com
20. INTRODUCCIÓN ‣ 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
21. INTRODUCCIÓN ‣ 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…
22. INTRODUCCIÓN ‣ 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
23. CREACIÓN DE UN CHILD THEME Características y posibilidades que nos ofrece
24. Creación de un Child Theme ‣ Tenemos dos formas de crear un Child Theme ‣ Mediante plugins ‣ De forma manual
25. https://es.wordpress.org/plugins/child-theme-configurator/
26. 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
27. Creación manual ‣ En nuestro FTP, creamos una nueva carpeta para nuestro CHILD THEME dentro de la carpeta themes ‣ Creamos un archivo style.css
28. 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: */
29. 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 */
30. PLANTILLAS ‣ Necesitamos dos archivos para crear nuestro theme: ‣ style.css ‣ index.php
31. 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
32. Creación manual <?php function example_enqueue_styles() { // enqueue parent styles wp_enqueue_style(‘parent-theme', get_template_directory_uri() .'/style.css'); } add_action('wp_enqueue_scripts', 'example_enqueue_styles'); } ‣ En functions.php: le decimos que cargue todos los estilos del PARENT THEME y los añada al CHILD THEME
33. MODIFICACIONES PHP functions.php, front-page.php, home.php….
34. Modificaciones PHP ‣ Si queremos duplicar una función, hay que tener cuidado ‣ Si copiamos la del parent y la pegamos en el functions.php del child: PHP da error cuando se encuentra dos funciones con el mismo nombre ‣ El error lo da el parent ‣ ¿Cómo podemos modificar una función entonces?
35. Modificaciones PHP ‣ Debemos fijarnos en las funciones que estén envuelta dentro del condicional: <?php if (! function_exists(‘nombre_funcion’)): /*Código de la función*/ endif; }
36. Modificaciones PHP ‣ Debemos fijarnos en las funciones que estén envuelta dentro del condicional: <?php if (! function_exists(‘nombre_funcion’)): /*Código de la función*/ endif; }
37. Modificaciones PHP ‣ Por lo tanto, antes de sustituir algo de una función definida en el parent theme, comprobar si está envuelta en una condicional. ‣ Sino, podemos hacerlo manualmente, o mejor, darle un nombre diferente
38. functions.php ‣ Gracias a este fichero podemos agilizar el tiempo de desarrollo ‣ Podemos crearnos uno por defecto y utilizarlo en todos nuestros themes ‣ Nos sirve para añadir o quitar funcionalidad a nuestro theme
39. functions.php ‣ Ejemplos de cosas que podemos hacer con él: ‣ Incluir jQuery ‣ Incluir Google Analytics ‣ Deshabilitar widget areas que no estemos utilizando ‣ etc…
40. functions.php ‣ Incluir jQuery if (!is_admin()) { wp_deregister_script('jquery'); wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/ jquery/1/jquery.min.js"), false); wp_enqueue_script('jquery'); }
41. functions.php ‣ Eliminar elementos del head que no nos interesan remove_action('wp_head', 'rsd_link'); remove_action('wp_head', 'wp_generator'); remove_action('wp_head', 'feed_links', 2); remove_action('wp_head', 'index_rel_link'); remove_action('wp_head', 'wlwmanifest_link'); remove_action('wp_head', 'feed_links_extra', 3); remove_action('wp_head', 'start_post_rel_link', 10, 0); remove_action('wp_head', 'parent_post_rel_link', 10, 0); remove_action('wp_head', 'adjacent_posts_rel_link', 10, 0);
42. functions.php ‣ Añadir Google Analytics en el footer function add_google_analytics() { echo '<script src="http://www.google-analytics.com/ga.js" type="text/ javascript"></script>'; echo '<script type="text/javascript">'; echo 'var pageTracker = _gat._getTracker("UA-XXXXX-X");'; echo 'pageTracker._trackPageview();'; echo '</script>'; } add_action('wp_footer', 'add_google_analytics');
43. functions.php ‣ Añadir un favicon function blog_favicon() { echo '<link rel="Shortcut Icon" type="image/x-icon" href="'.get_bloginfo('wpurl').'/favicon.ico" />'; } add_action('wp_head', 'blog_favicon');
44. functions.php ‣ Logo personalizado para el login de administrador function custom_login_logo() { echo '<style type="text/css"> h1 a { background-image: url('.get_bloginfo('template_directory').'/images/ custom-login-logo.png) !important; } </style>'; } add_action('login_head', 'custom_login_logo');
45. functions.php ‣ Deshabilitar widget areas function disable_all_widgets($sidebars_widgets) { //if (is_home()) $sidebars_widgets = array(false); return $sidebars_widgets; } add_filter('sidebars_widgets', 'disable_all_widgets');
46. MODIFICACIONES CSS Poniendo nuestro Child Theme “bonito”
47. Modificaciones CSS ‣ Cuando utilizamos Child Themes, al cargar la web cargamos los dos styles.css, el del Parent y el del Child. ‣ Si en lugar de crear clases nuevas para nuestros estilos, sobreescribimos clases definidas en el Parent Theme, los estilos del Child Theme prevalecen —> Cascade Style Sheet
48. Modificaciones CSS ‣ Si lo cargamos mediante el functions.php —> Cargamos los dos ‣ Si copiamos y pegamos, solo cargamos el del Child: Mejor para SEO
49. PLANTILLAS Archivos de plantilla, Plantillas de página
51. JERARQUÍA DE PLANTILLAS
53. PLANTILLAS DE PÁGINA
54. 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
55. 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”
56. 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
57. 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
58. 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 */ ?>
59. 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
60. ARCHIVOS DE PLANTILLA
61. 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.
62. 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
63. 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
64. https://wphierarchy.com
65. ARCHIVOS DE PLANTILLA ‣ Archivos de plantilla más importantes ‣ INDEX ‣ POSTS ‣ PAGE
66. ARCHIVOS DE PLANTILLA ‣ INDEX ‣ home.php - página principal de entradas (Blog) ‣ index.php - página principal en caso de no existir home.php
67. 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
68. 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
69. ‣ Dentro de las plantillas tenemos diferentes instrucciones, las cuales conforman el aspecto final de la web ‣ get_header() ‣ get_footer() ‣ get_sidebar() ARCHIVOS DE PLANTILLA
70. ‣ wp_head() ‣ wp_title() ‣ body_class() header.php
71. ‣ wp_footer() ‣ date(‘Y’) footer.php
72. ‣ dynamic_sidebar() sidebar.php
73. ‣ the_title() ‣ the_content() ‣ the_excerpt() content.php
75. ARCHIVOS DE PLANTILLA ‣ Plugin What The File: https://es.wordpress.org/plugins/what-the-file/ ‣ Te indica qué archivo de plantilla de está utilizando
76. RESPONSIVE Child Themes
77. Responsive Child Themes ‣ La mayoría de themes son responsive, pero si añadimos elementos propios, debemos tenerlos en consideración ‣ Crear media queries al final de nuestro style.css ‣ Diferentes formas de que nuestros elementos se adapten a diferentes resoluciones de pantalla
78. Responsive Child Themes ‣ Actualmente, los inspectores de los navegadores traen por defecto, visualizados en distintos dispositivos móviles. ‣ Chrome: Inspector ‣ Firefox: Inspector ‣ Safari: Modo desarrollo activado. Desarrollo / Adoptar el modo de diseño con capacidad de respuesta
79. Responsive Child Themes ‣ En los media queries podemos indicar los breakpoints que queramos, normalmente con 2 o 3 será suficiente ‣ Si hemos trabajado con medidas relativas, en vez de absolutas, tendremos menos cosas con cambiar ‣ Utilizando flexbox y grid, los cambios serán mínimos ‣ No hay que sobre escribir todos los estilos, solo lo que deba cambiar
80. GENESIS Child Themes
81. https://my.studiopress.com/themes/genesis/
83. $ 59,95 * Está incluido dentro de la suscripción mensual a mis cursos
84. GENESIS FRAMEWORK ‣ Seguro y código muy optimizado ‣ Temas robustos ‣ Temas que cargan rápido ‣ Puntúan muy bien en Google ‣ SEO-friendly
85. 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
86. GENESIS FRAMEWORK ‣ La forma de trabajar es mediante la estructura: ‣ PARENT THEME: funcionalidad del framework ‣ CHILD THEME: personalizaciones, CSS, parte visual…
87. 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
88. GENESIS FRAMEWORK ‣ El CHILD THEME necesita que previamente tengamos el PARENT THEME instalado ‣ Funciones personalizadas: ‣ Hooks ‣ Actions ‣ Widget Areas
89. ACTUALIZACIONES Cómo hacerlo para evitar sustos
90. Actualizaciones ‣ Si queremos no tener problemas al actualizar un theme y no perder nuestros estilos —> Crear Child Theme ‣ Lo más cómodo es copiar los estilos del parent theme en el child theme ‣ Quitar funciones del functions.php en las que cargamos el CSS del parent
91. Actualizaciones ‣ Ir uno a uno copiando en el Child Theme los archivos modificados ‣ Si no sabemos exactamente qué hemos tocado, en FTP ordenar por fecha de modificacion. ‣ Activar el Child Theme ‣ Actualizar Parent Theme
92. Imanol Terán Maruri - @itermar GRACIAS itermar.io