Clases CSS en WordPress

Slide 1

Slide 1 text

Slide 2

Slide 2 text

César Aquino Maximiliano @cesjam7 +

Slide 3

Slide 3 text

Clases CSS .content .text { font-size: 1.4rem; margin-left: 12px; }

Slide 4

Slide 4 text

¿Clases CSS? ¿WordPress?

Slide 5

Slide 5 text

Clases que genera WordPress: .home .single-product .search .page-contact .post-514 .menu-item-69 .status-publish

Slide 6

Slide 6 text

Ya muy bonito, pero…

Slide 7

Slide 7 text

Ya muy bonito, pero… ¿sirven?

Slide 8

Slide 8 text

body_class(); .archive .search-no-results .error404 .single-product .page-contact .logged-in .admin-bar http://codex.wordpress.org/Function_Reference/body_class

Slide 9

Slide 9 text

archive.php .post-type-archive-product { background: url(product.jpg); } .post-type-archive-event { background: url(event.jpg); } http://codex.wordpress.org/Function_Reference/body_class

Slide 10

Slide 10 text

post_class(); .post-610 .type-noticias .has-post-thumbnail .status-publish .tag-futbol .category-deporte http://codex.wordpress.org/Function_Reference/post_class

Slide 11

Slide 11 text

single.php .type-noticias { padding-left: 50px; } .type-noticias.has-post- thumbnail { padding-left: 0px; } http://codex.wordpress.org/Function_Reference/post_class

Slide 12

Slide 12 text

wp_nav_menu(); .menu-item .current-menu-item .menu-item-has-children .menu-item-666 .current-menu-parent .menu-item-object-page http://codex.wordpress.org/Function_Reference/wp_nav_menu

Slide 13

Slide 13 text

header.php .current-menu-item, .current-menu-parent { background: #c00; } http://codex.wordpress.org/Function_Reference/wp_nav_menu

Slide 14

Slide 14 text

¿Y si jugamos con JavaScript y sus selectores CSS?

Slide 15

Slide 15 text

¿Y si jugamos con JavaScript y sus selectores CSS? main.js $(‘.menu-item-has-children ul’).addClass(‘menu-submenu’);

Slide 16

Slide 16 text

¿Y las clases del wp-admin?

Slide 17

Slide 17 text

¿Y las clases del wp-admin?

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

functions.php function border_colors() { echo ' #categorydiv.postbox { border: 1px solid #000; } '; add_action('admin_head', 'cborder_colors');

Slide 20

Slide 20 text

Gracias ;) + @cesjam7 + jovenred.com + databomberos.com + orange612.com + speakerdeck.com/cesjam7

Slide 21

Slide 21 text

Gracias ;) + @cesjam7 + jovenred.com + databomberos.com + orange612.com + speakerdeck.com/cesjam7 PD: En caso de emergencias llamen al 116