Clases CSS en WordPress

Clases que genera WordPress automaticamente para facilitarnos la vida y que algunos desconocíamos

Transcript

1. Clases CSS en WordPress
2. César Aquino Maximiliano @cesjam7 +
3. Clases CSS .content .text { font-size: 1.4rem; margin-left: 12px; }
4. ¿Clases CSS? ¿WordPress?
5. Clases que genera WordPress: .home .single-product .search .page-contact .post-514 .menu-item-69 .status-publish
6. Ya muy bonito, pero…
7. Ya muy bonito, pero… ¿sirven?
8. body_class(); .archive .search-no-results .error404 .single-product .page-contact .logged-in .admin-bar http://codex.wordpress.org/Function_Reference/body_class
9. 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
10. post_class(); .post-610 .type-noticias .has-post-thumbnail .status-publish .tag-futbol .category-deporte http://codex.wordpress.org/Function_Reference/post_class
11. single.php .type-noticias { padding-left: 50px; } .type-noticias.has-post- thumbnail { padding-left: 0px; } http://codex.wordpress.org/Function_Reference/post_class
12. 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
13. header.php .current-menu-item, .current-menu-parent { background: #c00; } http://codex.wordpress.org/Function_Reference/wp_nav_menu
14. ¿Y si jugamos con JavaScript y sus selectores CSS?
15. ¿Y si jugamos con JavaScript y sus selectores CSS? main.js $(‘.menu-item-has-children ul’).addClass(‘menu-submenu’);
16. ¿Y las clases del wp-admin?
17. ¿Y las clases del wp-admin?
19. functions.php function border_colors() { echo '<style type="text/css"> #categorydiv.postbox { border: 1px solid #000; } </style>'; add_action('admin_head', 'cborder_colors');
20. Gracias ;) + @cesjam7 + jovenred.com + databomberos.com + orange612.com + speakerdeck.com/cesjam7
21. Gracias ;) + @cesjam7 + jovenred.com + databomberos.com + orange612.com + speakerdeck.com/cesjam7 PD: En caso de emergencias llamen al 116