Como crear un #theme para #wordpress desde cero con Bootstrap

fuente: Carlos Arturo – Falcon Masters (Youtube)

  • Primero descargamos una version basica de bootstrap
  • creamos style.css en la carpeta raiz de nuestro tema (wp-content\themes\nuestroTEMA) y añadimos las siguientes lineas para que wordpress nos reconozca el theme:
  • creamos en el raiz los archivos index.php, header.php y footer.php –> IMPORTANTE: antes de </head> en header.php agregamos <?php wp_head(); ?> y antes de </body>  en footer.php agregamos <?php wp_footer(); ?> entre otras cosas algunos plugins como Simple Lightbox pueden no funcionarnos
  • en el index.php (vacio completamente de codigo) agregamos estas lineas
    • <?php get_header(); ?><?php get_sidebar(); ?><?php get_footer(); ?>
  • creamos el archivo sidebar.php (hueco para los widgets)
  • creamos archive.php (en este archivo se visualizan los articulos)
  • functions.php (libreria de funciones)
  • page.php
  • single.php (visualizacion de articulos)
  • slideshow (slide de imagenes del index – para cargarlo desde el index PHP–> include (TEMPLATEPATH. ‘/slideshow.php’); )
  • archive.php (para visualizar todos los posts de una misma categoria)

Hasta aqui la creacion de la estructura, ahora empezamos a añadir o modificar codigo

  • editamos header.php para establecer las rutas del site, por ejemplo las rutas de los css. con esta funcion de php bloginfo(‘template_url’) obtenemos la URL del template en nuestro servidor
  • en el archivo functions.php añadimos este codigo para poder modificar el menu desde el panel de control de wordpress  (apariencia > menus):
    • php:
      register_nav_menus( array(
      ‘menu’ => ‘Menu superior’,
      ));
  • y en el header quitamos el ul del menu estatico y añadimos este codigo donde teniamos el ul (seguramente dentro de los tags NAV):
    • wp_nav_menu(
      array(
      ‘container’ => false,
      ‘items_wrap’ => ‘<ul id=”menu-top”>%3$s</ul>’,
      ‘theme_location’ => ‘menu’
      ));
  • bucle para mostrar posts en index (y donde convenga – URL del capitulo del curso):
    • <?php if(have_posts()):while(have_posts()):the_post();?>
      codigo HTML del articulo
      <?php endwhile; else:?>
      codigo HTML si no hay ningun post
      <?php endif;?> con este bucle veriamos todos los posts de todas las categorias, si solo queremos ver los post de una categoria en concreto usaremos este codigo:sustituimos esta linea –> if(have_posts()):while(have_posts()):the_post(); por este bloque:
      $args = array(‘cat’ => 3);
      $category_posts = new WP_Query($args); if($category_posts->have_posts()) :
      while($category_posts->have_posts()) :
      $category_posts->the_post();
    • bueno acabo de encontrar en el curso otra manera mucho mas sencilla de mostrar solo posts de una categoria en concreto:
      <?php query_posts(‘category_name=NOMBRECATEGORIA’);?>
      añadiendo esto delante del bucle que muestra todos los posts ya estaria, asi de sencillo …
    • y ahora dentro del bucle para mostrar contenido del post:
      – titulo: the_title();
      – enlace al articulo: the_permalink();
      – fecha: the_date();
      – categoria: the_category();
      – descripcion: the_excerpt(); –> OJO ! cuando creamos un post debajo de la caja de texto del cuerpo del post tenemos otra llamada “extracto” esta info es la que mostramos con esta funcion, si no hemos puesto nada entonces wordpress automaticamente coge los datos de la caja de texto de descripcion o cuerpo del post (si no vemos ninguna caja extracto cuando estamos creando o editando el post vamos a opciones de pantalla y seleccionamos extracto)
    • cargar imagen del post, es un poco mas rollete … para cargar la imagen destacada del post tenemos que irnos a functions.php y añadir esto (url del capitulo):
      • add_theme_support(‘post-thumbnails’);
        add_image_size(‘list_blog_thumbs’,1000,220,true);
        entre comillas ponemos un nombre que usaremos de referencia, y los numeros son las medidas en pixeles que wordpress usara para redimensionar las imagenes al subirlas. Si necesitamos mas redimensiones distintas solo tenemos que copiar y pegar esta linea con las diferentes medidas y diferentes referencias
      • y ahora en index.php (o donde queramos cargar la imagen destacada del post) ponemos este codigo donde deberia ir a la imagen:
        <?php if(has_post_thumbnail()){ the_post_thumbnail(‘list_blog_thumbs’);}?> // como se puede ver usamos list_blog_thumbs que es la referencia usada en functions
    • por ultimo nos falta la paginación, si tenemos mas posts de los X configurados a mostrar en el panel de control/ajustes necesitamos movernos por los anteriores y los siguientes agregando este codigo debajo del bucle de mostrar posts:
      php next_post_link(‘<- Post Siguientes’)
      php previous_post_link(‘Post Anteriores ->’)
      – y delante del bucle agregamos esta linea para solventar un bug de wordpress con el paginador: php query_posts(“paged=$paged”);
  • ahora creamos donde se cargan los articulos (post):
    • abrimos el archivo single.php y le copiamos el siguiente codigo (esta sin estilos ni nada de nada, es un ejemplo ultra sencillo. Tal y como esta al pinchar en el index en el permalink nos cargara el contenido concreto del post
    • <?php get_header(); ?> <?php if(have_posts()):while(have_posts()):the_post(); ?>
           <?php the_title();?>
           <?php the_content();?>
      <?php endwhile;else: ?>
           Ta vacio !
      <?php endif; ?><?php get_sidebar(); ?>
      <?php get_footer(); ?>
    • y por ultimo añadimos el apartado “comentarios:
      <?php comments_template(); ?>
  • ahora creamos las paginas, page.php (practicamente es el mismo codigo que single.php para los posts, hacemos copy-paste –> url del capitulo)

pues este es mi esquemita super resumido del señor curso de wordpress que me ha ayudado mucho muchisimo, GRACIAS !

Anuncios

Los mejores plugins de #Photoshop que todo diseñador debe instalar by @GTechDesignNet

Los mejores plugins de #Photoshop que todo diseñador debe instalar by @GTechDesignNet

fuente: http://gtechdesign.net/es/blog/mejores-plugins-de-photoshop-que-todo-disenador-debe-instalar

los-mejores-plugins-de-photoshop-que-todo-disenador-debe-instalar-by-gtechdesignnet

Photoshop es la herramienta más usada entre los creativos del diseño a nivel mundial. Pero, ¿cómo se pueden mejorar las características de Photoshop para que sea más productivo?. Adobe Photoshop soporta plugins externos que mejoran sus capacidades de manera impresionante.

A continuación ofrecemos una lista con 11 de las mejores extensiones para Photoshop que todo diseñador debe tener. Estos plugins te ayudarán a ahorrar tiempo y automatizar muchos procesos tediosos, serás capaz de trabajar más rápido y de forma más productiva utilizando estos sorprendentes extensiones de Adobe Photoshop

Ver artículo completo en la web del autor

5 libros #gratis de #diseño #web que todo diseñador debería tener by @infyart

5 libros #gratis de #diseño #web que todo diseñador debería tener by @infyart

fuente: http://www.informacionyarte.com/libros-electronicos-gratuitos-diseno-web?utm_source=ReviveOldPost&utm_medium=social&utm_campaign=ReviveOldPost

 

5-libros-gratis-de-diseno-web-que-todo-disenador-deberia-tener-by-infyart

Queremos compartir cinco libros electrónicos gratuitos sobre diseño web que todo diseñador web debería tener en cuenta.

Por desgracia, los libros están en inglés, pero si eres un apasionado del diseño o estás estudiando diseño web seguro que tener esta bibliografía en tus manos es más que interesante.

Seguir leyendo articulo completo