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.

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