wordpress - 2020.spain.wordcamp.org · 5/8/2020 · mr.foxtalbot Álvaro gómez velasco...
TRANSCRIPT
![Page 1: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/1.jpg)
WordPress
Un CMS con mucha clase
![Page 2: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/2.jpg)
Mr.FoxTalbot
Álvaro Gómez [email protected]
WordCamp MadridMadrid WordPress Meetup
Happiness EngineerAutomattic / WordPress.com
![Page 3: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/3.jpg)
Porque no siempre se tiene acceso por FTP o al editor.
¡Sólo CSS!
![Page 4: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/4.jpg)
<body><nav><article><aside>
Un CMS mucha clase (CSS)
<body>
<nav>
<article>
<article>
<aside>
![Page 5: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/5.jpg)
selector {propiedad: valor;}
Anatomía de una regla CSS
Esto va de selectores
Regla CSS
![Page 6: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/6.jpg)
¿Por qué hacerlo con CSS?
- No siempre se tiene acceso
- CSS es fácil
- Soluciones sencillas
- !important: ¡El HTML no cambia!...y cuándo no es buena idea
![Page 7: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/7.jpg)
Estos cambios sólo afectan a la presentación.
- SEO- Accesibilidad- Seguridad
¡El HTML sigue ahí!
![Page 8: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/8.jpg)
Tener siempre en cuenta la jerarquía de plantillas para entender estos trucos:
Template Hierarchy
Templates
![Page 9: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/9.jpg)
body_class()No te olvides de poner el where...
![Page 10: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/10.jpg)
.single-post .postid-(id) .single-format-(formatname)
.page .page page-id-(id) .page-template-(pagetemplatename) .page-parent .page-child .parent-pageid-(id)
1. body_class() .single
.single-(cptslug) .singular .attachmentid-(id)
![Page 11: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/11.jpg)
.home .blog.archive.single (.post / .page).search.error404.logged-in.rtl
1. body_class()
<body>
<nav>
<article>
<article>
<aside>
![Page 12: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/12.jpg)
1. body_class() .home
.entry-title {display: none;}
.home .entry-title {display: none;}
![Page 13: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/13.jpg)
1. body_class() .error404
.error404 #content {Background-image: url(“this-is-fine.png”);}
![Page 14: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/14.jpg)
1. body_class() .logged-in
.logged-in img[alt=' '] {border:3px dotted red;}
![Page 15: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/15.jpg)
1. body_class() “Landing” Page
.page-template-name header,
.page-template-name footer { display:none;}
.page-id-XXX footer,
.page-id-XXX header {display:none; }
![Page 16: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/16.jpg)
.blog
.archive
.post-type-archive-(cpt-slug)
.author .author-(id) .author-(slug).search .search-results .search-no-results
1.2 body_class() .archive
.date
.category .category-(slug) .category-(id).tag .tag-(slug) .tag-(id).tax-(slug) .term-(slug) .term-(id)
![Page 17: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/17.jpg)
1.2 body_class() .archive
.entry-meta {display: none;}
.blog .entry-meta,
.archive .entry-meta {display: none;}
![Page 18: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/18.jpg)
post_class()el pre_get_posts de los pobres
![Page 19: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/19.jpg)
.post
.post-id
.sticky
.category-name
.tag-name
.format-{format-name}
.type-{post-type-name}
.has-post-thumbnail
.status-private
.attachment
.post-password-required
.post-password-protected
2. post_class()
<body>
<nav>
<article>
<aside><article>
![Page 20: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/20.jpg)
2. post_class() .status-private
.status-private {border: 1px dotted black;}
![Page 21: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/21.jpg)
2. post_class() .category-(slug)
.archive .category-frases .entry-title,
.blog .category-frases .entry-title {font-size: 3rem;text-align:left;}
![Page 22: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/22.jpg)
2. post_class() .category-(slug)
.blog .category-frases:after,
.archive .category-frases:after {content: "\201D ";position:absolute;bottom:0;right:1rem;font-size:15rem;}
![Page 23: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/23.jpg)
2. post_class() .category-(slug)
.blog #main {display: flex;flex-flow: row wrap;}
blog .category-frases {order:-1;}
![Page 24: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/24.jpg)
widgets
![Page 25: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/25.jpg)
3. widgets
<body>
<article>
<article>
<nav>
#widget-name-id.widget_name_slug
<aside>
![Page 26: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/26.jpg)
#footer .widget_nav_menu {position:fixed;}
3. widgets position:fixed
![Page 27: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/27.jpg)
wp_nav_menu()No hace falta usar ese !important, y lo sabes.
![Page 28: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/28.jpg)
4. wp_nav_menu()
<body>
<article>
<aside><article>
<nav>
#menu-item-(id).menu-item.menu-item-home
![Page 29: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/29.jpg)
Añadir una clase CSS manualmente
4. wp_nav_menu()
![Page 30: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/30.jpg)
4. wp_nav_menu()
.menu-item-has-children
.current-menu-item .current-menu-parent .current-menu-ancestor
.menu-item-object-tag .menu-item-object-(cpt-slug) .menu-item-object-(taxonomy-slug) .menu-item-object-custom (links)
.menu-item-type-(type) .menu-item-type-post_type .menu-item-type-taxonomy .menu-item-type-custom (links) .menu-item-object-(object) .menu-item-object-page .menu-item-object-post .menu-item-object-category
![Page 31: WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco @mrfoxtalbot WordCamp Madrid Madrid WordPress Meetup Happiness Engineer Automattic / WordPress.com](https://reader034.vdocuments.net/reader034/viewer/2022043010/5f9ecee0fb7aba57c05e95d1/html5/thumbnails/31.jpg)
¡Gracias!¿Preguntas? ¿Quejas? >> @mrfoxtalbot