Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WordPress Child Themes

WordPress Child Themes

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

6c68edbaa40e50a0420ee1c125d17189?s=128

Imanol Terán

May 16, 2017
Tweet

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?

  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  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…
  17. None
  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

  50. None
  51. JERARQUÍA DE PLANTILLAS

  52. None
  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

  74. None
  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/

  82. None
  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