Your SlideShare is downloading. ×
Crea temas para Wordpress sin saber programar
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Crea temas para Wordpress sin saber programar

3,130

Published on

Curso sobre como crear plantillas o temas en Wordpress sin conocimientos de programación o maquetación. …

Curso sobre como crear plantillas o temas en Wordpress sin conocimientos de programación o maquetación.
En este curso veremos herramientas gratuitas y de pago para poder crear temas de Wordpress para customizar nuestro sitio web de una manera rápida y sencilla.
También veremos como se estructura un tema en Wordpress y ver que ficheros tenemos que crear.

Published in: Technology
1 Comment
14 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,130
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
3
Comments
1
Likes
14
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Crea  temas  de  Wordpress  sin  saber   programar   Dani  Reguera   Mondragon  Unibertsitatea   dreguera@mondragon.edu   h9p://twi9er.com/dreguera   h9p://slideshare.net/dreguera   h9p://linkedin.com/in/danireguera    
  • 2. Introducción  y  objeDvos   §  En  este  curso  veremos  cómo  podemos  crear   temas  en  Wordpress  para  poder  customizar   nuestro  siDo  web  y  sacarle  el  máximo  parDdo.   §  Los  objeDvos  del  curso  son:   ¨  Conocer  herramientas  que  permiten  crear  temas   personalizados   para   WordPress   sin   necesidad   de   programar.   ¨  Aprender  a  crear  temas  con  dichas  herramientas.   ¨  Ser   capaces   de   instalar,   borrar   y   configurar   los   temas  creados  con  dichas  herramientas.   2  
  • 3. ¿Qué  es  Worpdress?  (wikipedia  dixit)   §  WordPress  es  un  sistema  de  gesDón  de   contenido  o  CMS  (siglas  en  del  inglés  de   Content  Management  System)  enfocado  a  la   creación  de  bitácoras  web  (siDos  web   periódicamente  actualizados)   §  Desarrollado  en  PHP  para  funcionar  en   ambientes  MySQL     3  
  • 4. ¿Qué  es  Wordpress?   4  
  • 5. ¿Por  qué  el  auge  de  Wordpress?  (wikipedia  dixit)   §  Facilidad  de  uso   §  Licencia  de  uso   §  Buen  gestor  de  contenidos  (SI,  los  hay   mejores  aunque  la  gente  no  se  lo  crea…  )   §  Otro  moDvo  que  considerar  sobre  su  éxito  y   extensión  es  la  enorme  comunidad  de   desarrolladores  y  diseñadores,  encargados  de   desarrollarlo  en  general  o  crear  plugins  y   temas  para  la  comunidad.     5  
  • 6. Wordpress  en  números   §  El  48%  de  los  100  blogs  mas  leídos  están   basados  en  Wordpress   §  60  millones  de  siDos  basados  en  Wordpress   §  3.5  billones  de  páginas  vistas  basadas  en   Wordpress   h9p://royal.pingdom.com/2013/01/16/internet-­‐2012-­‐in-­‐numbers/   6  
  • 7. ¿Qué  es  un  tema  de  Wordpress  y  para  qué   sirve?   §  Un  tema  de  Wordpress  es  una  colección  de   archivos  PHP  y  CSS  que  cambian  el  aspecto  de   nuestro  siDo  web  sin  cambiar  el  contenido   almacendo  en  la  base  de  datos.   §  Estos  nos  permiten  cambiar  la  presentación   de  nuestro  siDo  web,  cambiando  los  temas,   mientras  que  el  contenido  se  manDene.   7  
  • 8. ¿Qué  es  un  tema  de  Worpress  y  para  qué  sirve?   §  Digamos  que  el  tema  de  wordpress  Dene  dos   Dpos  de  ficheros:   ¨  Qué  mostramos  al  usuario  mediante  la  estructura   de  la  página   ¨  Cómo  mostramos  al  usuario  mediante  los  esDlos   defindos  (Dpografias,  colores,  etc…)   8  
  • 9. ¿Cómo  manejamos  los  temas  de  un  siDo?   9   APARIENCIA  à  TEMAS  
  • 10. Ficheros  de  un  tema   10  Fuente:    Digging  into  WordPress  h9p://digwp.com/      
  • 11. Ficheros  de  un  tema   §  Ficheros  OBLIGATORIOS:   ¨  style.css   ¨  index.php   §  Ficheros  “habituales”:   ¨  Header.php   ¨  Footer.php   ¨  Sidebar.php   11  
  • 12. Fichero  style.css   /*   Theme  Name:  Twenty  Twelve   Theme  URI:  h9p://wordpress.org/extend/themes/twentytwelve   Author:  the  WordPress  team   Author  URI:  h9p://wordpress.org/   DescripDon:  The  2012  theme  for  WordPress  is  a  fully  responsive  theme  that  looks  great  on  any  device.   Features  include  a  front  page  template  with  its  own  widgets,  an  opDonal  display  font,  styling  for  post   formats  on  both  index  and  single  views,  and  an  opDonal  no-­‐sidebar  page  template.  Make  it  yours  with  a   custom  menu,  header  image,  and  background.   Version:  1.1   License:  GNU  General  Public  License  v2  or  later   License  URI:  h9p://www.gnu.org/licenses/gpl-­‐2.0.html   Tags:  light,  gray,  white,  one-­‐column,  two-­‐columns,  right-­‐sidebar,  flexible-­‐width,  custom-­‐background,   custom-­‐header,  custom-­‐menu,  editor-­‐style,  featured-­‐images,  flexible-­‐header,  full-­‐width-­‐template,   microformats,  post-­‐formats,  rtl-­‐language-­‐support,  sDcky-­‐post,  theme-­‐opDons,  translaDon-­‐ready   Text  Domain:  twentytwelve     This  theme,  like  WordPress,  is  licensed  under  the  GPL.   Use  it  to  make  something  cool,  have  fun,  and  share  what  you've  learned  with  others.   */   12  
  • 13. Fichero  style.css   13  
  • 14. Fichero  index.php   §  Hace  tres  llamadas:   ¨  <?php  get_header();  ?>   ¨  <?php  get_sidebar();  ?>   ¨  <?php  get_footer();  ?>   14  
  • 15. Fichero  index.php   15  
  • 16. Estructura  página   16   <?php  get_header()?>   <?php  get_footer()?>   <?php  get_sidebar()?>  
  • 17. El  fichero  header.php   §  En  este  fichero  definimos  lo  siguiente:   ¨  Declaración  del  documento   ¨  Llamadas  a  los  esDlos   ¨  La  función  wp_head()   17  
  • 18. El  fichero  header.php   18  
  • 19. El  fichero  footer.php   §  En  este  fichero  definimos:   ¨  Pie  de  página   ¨  Llamadas  a  javascript  (WPO)   ¨  La  función  wp_footer()   19  
  • 20. El  fichero  footer.php   20  
  • 21. El  fichero  sidebar.php   §  En  este  fichero  definimos:   ¨  Los  widgets  de  nuestro  siDo   ¨  La  barra  lateral   21  
  • 22. El  fichero  sidebar.php   22  
  • 23. Ficheros  de  contenido     §  Home.php:  Va  a  ser  la  portada  de  nuestro  siDo   web   §  Page.php:  Página  estáDca  de  nuestro  siDo  web   §  Single.php:  Post  de  nuestro  siDo  web       23  
  • 24. ¿Cómo  instalar  un  nuevo  tema  en  nuestro   Wordpress?   §  Tenemos  varias  opciones  para  instalar  un   tema  en  nuestro  siDo  web:   ¨  UDlizar  un  tema  de  los  existentes  en  el  repositorio   oficial  de  Wordpress   ¨  UDlizar  un  tema  desde  el  archivo  comprimido   ¨  Crearnos  nuestro  tema  desde  cero.  (¿Somos   diseñadores/maquetadores?)   24  
  • 25. Instalando  un  tema  en  Wordpress  desde  el   repositorio   25  
  • 26. Instalando  un  tema  en  Wordpress  desde  el   repositorio   26  
  • 27. Instalando  un  tema  en  Wordpress  desde  el   repositorio   27  
  • 28. Instalando  un  tema  en  Wordpress  desde  el   repositorio   28  
  • 29. Instalando  un  tema  en  Wordpress  desde  el   repositorio   29  
  • 30. Instalando  un  tema  en  Wordpress  desde  el   repositorio   §  Como  hemos  comentado  al  principio,   modificamos  el  aspecto  de  nuestro  siDo  web   sin  modificar  o  tocar  el  contenido   §  Respetamos  el  contenido,  estructura  de  la   página,  home,  etc  pero  modificamos  los   esDlos     30  
  • 31. Instalando  un  tema  en  Wordpress  mediante  un   archivo  comprimido   31  
  • 32. Instalando  un  tema  en  Wordpress  mediante  un   archivo  comprimido   32  
  • 33. Instalando  un  tema  en  Wordpress  mediante  un   archivo  comprimido   33  
  • 34. Instalando  un  tema  en  Wordpress  mediante  un   archivo  comprimido   34  
  • 35. Instalando  un  tema  en  Wordpress  desde  el   repositorio   35  
  • 36. Instalando  un  tema  en  Wordpress  desde  el   repositorio   36  
  • 37. Instalando  un  tema  en  Wordpress  desde  el   repositorio   37  
  • 38. Borrando  un  tema  de  Wordpress   38  
  • 39. Borrando  un  tema  de  Wordpress   39  
  • 40. Borrando  un  tema  de  Wordpress   40   Una  vez  borrado  el  tema,  no  lo  podremos   volver  a  utlizar.  Para  volver  a  uDlizarlo   deberiamos  volver  a  instalarlo  desde  cero.  
  • 41. Borrando  un  tema  de  Wordpress   41  
  • 42. Creando  /  Modificando  temas  existentes   §  Existen  varios  temas  que  nos  dejan  modificar   su  esDlo  o  apariencia  directamente  desde  la   pantalla  de  administrado   §  Es  una  solución  correcta  si  lo  que  queremos  es   solo  modificar  los  colores,  Dpograyas,   imágenes,  etc…   §  Si  lo  que  queremos  es  modificar  la  estructura   deberíamos  crearnos  nuestra  propia  planDlla   42  
  • 43. Modificando  temas  existentes  (Ej.  Montezuma)   43  
  • 44. Creando  temas  nuevos  desde  cero   §  Para  crear  un  tema  desde  cero  tenemos  dos   opciones:   ¨  Crearnos  la  estructura  de  ficheros  desde  cero   ¨  Heredar  los  esDlos  de  un  tema  existente   §  Para  cualquiera  de  estas  dos  opciones  hay  que   tenemos  conocimientos  tanto  de   programación,  como  de  maquetación  y  diseño   §  En  nuestro  caso  vamos  a  uDlizar  herramientas   de  terceros  para  generar  los  temas   44  
  • 45. Heredando  esDlos  de  otro  tema   45   h9p://codex.wordpress.org/Child_Themes  
  • 46. Creando  temas  nuevos  desde  cero   §  Existen  muchas  herramientas  de  terceros  que   nos  generan  temas  desde  cero   §  Algunas  son  gratuitas,  con  recursos  limitados   y  otras  de  pago  con  mayores  funcionalidades   §  Las  que  vamos  a  ver  en  este  curso  son:   ¨  h9p://www.yvoschaap.com/wpthemegen/   ¨  h9p://www.lubith.com/   ¨  h9p://www.wpthemegenerator.com/   46  
  • 47. h9p://www.yvoschaap.com/wpthemegen/   47  
  • 48. h9p://www.lubith.com/   48  
  • 49. h9p://www.lubith.com/   49  
  • 50. h9p://www.wpthemegenerator.com/   50  
  • 51. Creando  temas  desde  cero   §  Existen  mas  herramientas  que  las   mencionadas,  tanto  de  pago  como  gratuitas   §  A  la  hora  de  empezar  un  nuevo  desarrollo   debemos  tener  en  cuenta  cuanto  presupuesto   disponemos,  o  saber  cuanto  profesional  va  a   ser  nuestro  siDo  web   §  Igual  no  hace  falta  complicarnos  y  ajustando   un  par  de  cosas  en  un  tema  predefinido  nos   sirve   51  
  • 52. Documentación   §  h9p://codex.wordpress.org/ Theme_Development   §  h9p://codex.wordpress.org/Child_Themes   §  h9p://www.lubith.com/tutorials/     52  
  • 53. Bonus  track   §  Los  diseñadores  /  maquetadores  son  buenos   haciendo  su  trabajo,  confiemos  en  ellos   §  Los  programadores  son  buenos  haciendo  su   trabajo,  confiemos  en  ellos   53  
  • 54. Eskerrik  asko!   Dani  Reguera   Mondragon  Unibertsitatea   dreguera@mondragon.edu   h9ps://twi9er.com/dreguera   h9ps://linkedin.com/in/danireguera    

×