$30 off During Our Annual Pro Sale. View Details »

Clases CSS en WordPress

Clases CSS en WordPress

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

More Decks by César J. Aquino Maximiliano

Other Decks in Technology

Transcript

  1. Clases CSS en
    WordPress

    View Slide

  2. César Aquino Maximiliano
    @cesjam7
    +

    View Slide

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

    View Slide

  4. ¿Clases CSS?
    ¿WordPress?

    View Slide

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

    View Slide

  6. Ya muy bonito, pero…

    View Slide

  7. Ya muy bonito, pero… ¿sirven?

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  14. ¿Y si jugamos con JavaScript y sus
    selectores CSS?

    View Slide

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

    View Slide

  16. ¿Y las clases del wp-admin?

    View Slide

  17. ¿Y las clases del wp-admin?

    View Slide

  18. View Slide

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

    View Slide

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

    View Slide

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

    View Slide