WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco...
31
WordPress Un CMS con mucha clase
Transcript of WordPress - 2020.spain.wordcamp.org · 5/8/2020 · Mr.FoxTalbot Álvaro Gómez Velasco...
WordPress
Un CMS con mucha clase
Mr.FoxTalbot
Álvaro Gómez [email protected]
WordCamp MadridMadrid WordPress Meetup
Happiness EngineerAutomattic / WordPress.com
Porque no siempre se tiene acceso por FTP o al editor.
¡Sólo CSS!
<body><nav><article><aside>
Un CMS mucha clase (CSS)
<body>
<nav>
<article>
<article>
<aside>
selector {propiedad: valor;}
Anatomía de una regla CSS
Esto va de selectores
Regla CSS
¿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
Estos cambios sólo afectan a la presentación.
- SEO- Accesibilidad- Seguridad
¡El HTML sigue ahí!
Tener siempre en cuenta la jerarquía de plantillas para entender estos trucos:
Template Hierarchy
Templates
body_class()No te olvides de poner el where...
.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)
.home .blog.archive.single (.post / .page).search.error404.logged-in.rtl
1. body_class()
<body>
<nav>
<article>
<article>
<aside>
1. body_class() .home
.entry-title {display: none;}
.home .entry-title {display: none;}
1. body_class() .error404
.error404 #content {Background-image: url(“this-is-fine.png”);}
1. body_class() .logged-in
.logged-in img[alt=' '] {border:3px dotted red;}
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; }
.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)
1.2 body_class() .archive
.entry-meta {display: none;}
.blog .entry-meta,
.archive .entry-meta {display: none;}
post_class()el pre_get_posts de los pobres
.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>
2. post_class() .status-private
.status-private {border: 1px dotted black;}
2. post_class() .category-(slug)
.archive .category-frases .entry-title,
.blog .category-frases .entry-title {font-size: 3rem;text-align:left;}
2. post_class() .category-(slug)
.blog .category-frases:after,
.archive .category-frases:after {content: "\201D ";position:absolute;bottom:0;right:1rem;font-size:15rem;}
2. post_class() .category-(slug)
.blog #main {display: flex;flex-flow: row wrap;}
blog .category-frases {order:-1;}
widgets
3. widgets
<body>
<article>
<article>
<nav>
#widget-name-id.widget_name_slug
<aside>
#footer .widget_nav_menu {position:fixed;}
3. widgets position:fixed
wp_nav_menu()No hace falta usar ese !important, y lo sabes.
4. wp_nav_menu()
<body>
<article>
<aside><article>
<nav>
#menu-item-(id).menu-item.menu-item-home
Añadir una clase CSS manualmente
4. wp_nav_menu()
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
¡Gracias!¿Preguntas? ¿Quejas? >> @mrfoxtalbot
