Clases CSS en WordPress

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

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