Your SlideShare is downloading. ×
0
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
Crea temas para Wordpress sin saber programar
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,195

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,195
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    

×