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

Clases CSS en WordPress

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?

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