Crear Theme Wordpress Pasos II
Transcript of Crear Theme Wordpress Pasos II
-
8/3/2019 Crear Theme Wordpress Pasos II
1/62
Vistiendo aVistiendo a
Lorena [email protected]
Cursillos del e-ghost 2010
WordPressWordPress
mailto:[email protected]:[email protected] -
8/3/2019 Crear Theme Wordpress Pasos II
2/62
Contenidos
La estructura de WordPress
La estructura bsica de un theme
Sidebars
Cabeceras y footers personalizados Categoras y etiquetas personalizadas
Templates
The Loop
Funciones
Custom fields - Campos personalizados
Panel de administracin del theme
-
8/3/2019 Crear Theme Wordpress Pasos II
3/62
-
8/3/2019 Crear Theme Wordpress Pasos II
4/62
Vuestra nueva Biblia: Codex WordPress
http://codex.wordpress.org/
-
8/3/2019 Crear Theme Wordpress Pasos II
5/62
El gran repositorio de WordPress de plantillaspara que tomemos ideas:
http://wordpress.org/extend/themes/
-
8/3/2019 Crear Theme Wordpress Pasos II
6/62
La estructura de WordPress (I)
wp-config.php: fichero de configuracin.Aqu est almacenado el usuario y el nombrede la base de datos, as como otros datos de
seguridad. Este fichero no se machaca conlas actualizaciones de WP.
wp-admin ywp-includes: carpetas queguardan los ficheros php que hacen quefuncione el blog. Ambas carpetas semachacan con las actualizaciones.
-
8/3/2019 Crear Theme Wordpress Pasos II
7/62
La estructura de WordPress (II)
wp-content: esta carpeta guarda los datos y configuraciones propias delblog. No se toca nada en la actualizaciones de WP. La estructura interna esla siguiente:
uploads: todas las imgenes, vdeos y archivos que se suban a la librerade wordpress. Normalmente se organiza por aos y luego por meses.
Ejemplo: uploads/2009/12. plugins: todos los plugins que tenemos disponibles para el blog (aunque
no estn activos).
languages: aqu van los ficheros .mo de los idiomas en los que queremostener WP (tanto la parte visible como la de administracin).
themes: todas las plantillas que tenemos disponibles para "vestir" al blog.
Nosotros nos centraremos en esta carpeta.
-
8/3/2019 Crear Theme Wordpress Pasos II
8/62
Una instalacin de WordPress es totalmente portable
Slo necesitaremos esas carpetas y la BD
-
8/3/2019 Crear Theme Wordpress Pasos II
9/62
Las plantillas o themes son la capa de presentacin
Se puede cambiar esta capa sin que la informacin se vea afectada
-
8/3/2019 Crear Theme Wordpress Pasos II
10/62
La estructura bsica de un theme
-
8/3/2019 Crear Theme Wordpress Pasos II
11/62
-
8/3/2019 Crear Theme Wordpress Pasos II
12/62
-
8/3/2019 Crear Theme Wordpress Pasos II
13/62
sidebar.php: aqu se definen las diferentes barras laterales
-
8/3/2019 Crear Theme Wordpress Pasos II
14/62
index.php: este es el fichero que carga de inicio el site.
Desde aqu se invoca la carga de cabecera(get_header();),barras laterales (get_sidebar();) y footer (get_footer();)
y en el cuerpo central, se ejecuta el bucle para cargar la informacin
-
8/3/2019 Crear Theme Wordpress Pasos II
15/62
single.php: este es el fichero que se interpreta
cuando se carga un post concreto
-
8/3/2019 Crear Theme Wordpress Pasos II
16/62
-
8/3/2019 Crear Theme Wordpress Pasos II
17/62
category.php: plantilla para las categoras.Cuando un usuario pincha sobre el enlace de una categora,
WordPress prueba si existe el fichero category.php.Si no lo encuentra, carga archive.php.
Y si ste tampoco lo encuentra, se va a por el index.php
-
8/3/2019 Crear Theme Wordpress Pasos II
18/62
comments.php: plantilla de los comentarios
-
8/3/2019 Crear Theme Wordpress Pasos II
19/62
searchform.php: formulario de bsqueda
search.php: pgina donde se muestran los resultados de una bsqueda
-
8/3/2019 Crear Theme Wordpress Pasos II
20/62
functions.php: aqu se recogern funciones propias del theme.Por ejemplo, si queremos registrar varias barras laterales paraque aparezcan en la seccin de widgets, indicar a WP dnde
estn los ficheros de idiomas, quitar filtros, ...
-
8/3/2019 Crear Theme Wordpress Pasos II
21/62
404.php: si creamos este fichero, cada vez que algo no seencuentre en el blog, se cargar esta pgina
-
8/3/2019 Crear Theme Wordpress Pasos II
22/62
Desde el apartado de administracin se podr configurar la apariencia deuna forma muy visual mediante widgets (enApariencia -> Widgets).
Aqu aparecen las barras laterales definidas y mltiples funcionalidadesque se pueden colocar: comentarios recientes, posts recientes, buscador,
una caja donde introducir nuestro propio cdigo html, ...
-
8/3/2019 Crear Theme Wordpress Pasos II
23/62
Tambin desde el apartado de administracin (Ajustes -> Lectura)podemos configurar que en la portada se cargue una pgina y no el
formato blog de entradas, dndole ms carcter de pgina web
-
8/3/2019 Crear Theme Wordpress Pasos II
24/62
Sidebars
Para que aparezcan en la seccin de
widgets las diferentes sidebars quequeramos "alimentar" desde el panel deadministracin, hay que registrarlas en el
fichero functions.php de la siguiente forma:
-
8/3/2019 Crear Theme Wordpress Pasos II
25/62
if ( function_exists('register_sidebars') )
{
register_sidebar(array(
'name' => 'Barra Lateral Derecha',
'before_widget' => 'cdigo html que queremos que se cargue al inicio de labarra',
'after_widget' => 'cdigo html que queremos que se cargue al final de labarra',
'before_title' => 'cdigo html que queremos que se cargue al inicio delttulo de la barra',
'after_title' => 'cdigo html que queremos que se cargue al final delttulo de la barra',
));
register_sidebar(array(
'name' => 'Barra Lateral Izquierda',
'before_widget' => 'cdigo html que queremos que se cargue al inicio de labarra',
'after_widget' => 'cdigo html que queremos que se cargue al final de labarra',
'before_title' => 'cdigo html que queremos que se cargue al inicio delttulo de la barra',
'after_title' => 'cdigo html que queremos que se cargue al final delttulo de la barra',
));
}
-
8/3/2019 Crear Theme Wordpress Pasos II
26/62
-
8/3/2019 Crear Theme Wordpress Pasos II
27/62
Cabeceras y footers personalizados (I)
De una forma sencilla podemos cargar ficherosphp personalizados para mostrar diferentesfooters o cabeceras segn estemos en unacategora u otra.
WordPress busca el fichero header-slug.php (elslug es el permalink. Es decir, la versin url delnombre: una cadena sin maysculas, sin tildes,con guiones en vez de espacios).
-
8/3/2019 Crear Theme Wordpress Pasos II
28/62
Cabeceras y footers personalizados (II)
Ejemplo: si estamos en la categora de Cine secargar header-cine.php.Si no, se cargar header.php
-
8/3/2019 Crear Theme Wordpress Pasos II
29/62
Categoras y etiquetas personalizadas (I)
Para cargar diferentes presentaciones dependiendo dela categora o la etiqueta sobre la que se pinche,podemos crear un php igual que lo hacamos con las
cabeceras, es decir category-slug.php o tag-slug.phpo bien con el siguiente formato de nombre category-XX.php o tag-XX.php (donde XX es el id que tieneinternamente esa categora o etiqueta). De esta forma,podramos ponerle una cabecera, un footer y un sidebarpersonalizados dependiendo de la categora o la etiqueta
en la que estemos.
-
8/3/2019 Crear Theme Wordpress Pasos II
30/62
-
8/3/2019 Crear Theme Wordpress Pasos II
31/62
Templates
Podemos crear plantillas con comportamientospropios a los que luego asignar a cada pgina.Desde el editor de pginas estticas hay una
opcin para aplicar plantillas. Para que un ficherophp sea interpretado por WordPress como unatemplate, hay que incluir al inicio del mismo elsiguiente cdigo:
/*Template Name: Nombre-plantilla*/
-
8/3/2019 Crear Theme Wordpress Pasos II
32/62
The Loop
El bucle es el proceso ms importante de WordPress, aquelque nos devuelve y recorre todos los posts que correspondenal fichero desde el que se invoca:
Si se le llama desde index.php, nos devuelve los ltimosposts que se hayan escrito (tantos como tengamos definidosque deberan formar parte de la portada en el apartado deadministracin).
Si se le llama desde archive.php, nos devuelve los postsde una etiqueta determinada o de una categora concreta(depender de quin haga la llamada a ese fichero).
-
8/3/2019 Crear Theme Wordpress Pasos II
33/62
-
8/3/2019 Crear Theme Wordpress Pasos II
34/62
The Loop
wp_query->current_post: nos devuelve el nmero delpost en el que estamos dentro del loop. Un ejemplo deuso en el que mostramos el contenido para los tresprimeros posts y slo el ttulo para el resto:
-
8/3/2019 Crear Theme Wordpress Pasos II
35/62
query_posts: nuestro Loop personalizado
Tambin se puede controlar qu posts nos devolver ese loopmediante la funcin query_posts. Esa funcin regenera laconsulta y filtra los posts en base a los parmetros que lepongamos:
cat=ID: filtra por esa categora. Si al id se le pone un guin por delante,muestra los posts de todas las categoras menos de esa.tag=slug: filtra por etiqueta. En esta ocasin se le pasa el slug. Siqueremos usar el ID de la etiqueta, pondremos el parmetro tag_id.author=ID: filtra por usuario, usando el ID del mismo.order=ASC u order=DESC: indica la ordenacin de los resultados,
ascendente o descendente.year=ao: filtra por ao.monthnum=mes: filtra por mes.day=da: filtra por da.posts_per_page=nmero: nmero de posts por pgina
-
8/3/2019 Crear Theme Wordpress Pasos II
36/62
-
8/3/2019 Crear Theme Wordpress Pasos II
37/62
Funciones nativas de WordPress
-
8/3/2019 Crear Theme Wordpress Pasos II
38/62
h i l ($b f $ f $ h )
-
8/3/2019 Crear Theme Wordpress Pasos II
39/62
the_title($before, $after, $echo)
Muestra el ttulo del post. Es necesario usarlo dentro del loop.
Los parmetros $after y $before nos permite introducir cadenas de texto que irndelante y detrs respectivamente. Ejemplo: the_title('', '');
El parmetro $echo nos sirve para indicar si queremos que muestre el ttulo porpantalla (si lo ponemos a true) o no para hacer algn tratamiento con ese ttulo(si lo ponemos a false). Con get_the_title(ID) sucede igual que get_permalink
pero para el ttulo del post.
-
8/3/2019 Crear Theme Wordpress Pasos II
40/62
the_content()
Muestra el cuerpo del post.Se usa dentro del loopTiene tambin su versin get_the_content()
-
8/3/2019 Crear Theme Wordpress Pasos II
41/62
Muestra lo que hayamos introducido en el campo ExtractoSe usa dentro del loop. Tiene su versin get_the_excerpt()
the_excerpt()
-
8/3/2019 Crear Theme Wordpress Pasos II
42/62
-
8/3/2019 Crear Theme Wordpress Pasos II
43/62
the_time()
Muestra la fecha por cada postLe podemos pasar por parmetro el formato de esa fecha
-
8/3/2019 Crear Theme Wordpress Pasos II
44/62
l = Nombre completo del da de la semana.
F = Nombre completo para el mes.
j = Da numrico.
m = Mes con dos dgitos.
Y = Ao con cuatro dgitos.
y = Ao con dos dgitos.
Para escapar letras, usaremos la barra \. Por ejemplo, paraponer la palabra "de" le pasaremos "\d\e"
-
8/3/2019 Crear Theme Wordpress Pasos II
45/62
the_date()
Igual que the_time pero muestra la fecha sol en el primer post de ungrupo que haya sido publicado el mismo da
-
8/3/2019 Crear Theme Wordpress Pasos II
46/62
bloginfo()
Nos ofrece numerosa informacin de nuestro blog que luego podremosplasmar en otros apartados (tiene se versin get_bloginfo)
-
8/3/2019 Crear Theme Wordpress Pasos II
47/62
bloginfo('name'): muestra por pantalla el nombre del blog.
bloginfo('description'): muestra por pantalla el nombre del blog.
bloginfo('url'): muestra por pantalla la direccin del blog. bloginfo('stylesheet_url'): muestra por pantalla la ruta del fichero de
estilos (style.css).
bloginfo('template_url'): muestra por pantalla la ruta del theme.
bloginfo('rss2_url'): muestra por pantalla la ruta del RSS.
-
8/3/2019 Crear Theme Wordpress Pasos II
48/62
Muestra por pantalla el autor que ha escrito ese post
Tiene su versin sin echo: get_the_author
the_author()
-
8/3/2019 Crear Theme Wordpress Pasos II
49/62
the_tags( $before, $separator, $after)
Muestra las etiquetas asociadas a ese postTiene su versin get_the_tags.
-
8/3/2019 Crear Theme Wordpress Pasos II
50/62
Por parmetro se le puede pasar el texto que preceder alas etiquetas, los caracteres que queremos que separenlas etiquetas y el texto que ir al final:
-
8/3/2019 Crear Theme Wordpress Pasos II
51/62
previous_posts_link()next_posts_link()
Muestra un enlace con el texto que le pasemos por parmetro alos posts que estn en pginas anteriores o posteriores
-
8/3/2019 Crear Theme Wordpress Pasos II
52/62
-
8/3/2019 Crear Theme Wordpress Pasos II
53/62
in_category($category)
Nos dice si ese post est en la categora pasada por parmetro.Se puede pasar el ID de la categora o bien el slug. Con estotambin podemos hacer que tenga comportamientos distintos
segn la categora y en un nico fichero category.php
-
8/3/2019 Crear Theme Wordpress Pasos II
54/62
-
8/3/2019 Crear Theme Wordpress Pasos II
55/62
Custom fields o campos personalizados: informacin adicionalcomo la cancin que estaba escuchando el autor cuando escriba
el post, su estado de nimo, ...
-
8/3/2019 Crear Theme Wordpress Pasos II
56/62
El Nombre ser el identificador de nuestro campopersonalizado y el Valor lo que queremos mostrar
Obt d l l d d t d l l
-
8/3/2019 Crear Theme Wordpress Pasos II
57/62
Obtendremos el valor de ese campo dentro del loopcon la siguiente llamada get_post_custom_values:
O tambin con la funcin get_post_meta:
-
8/3/2019 Crear Theme Wordpress Pasos II
58/62
Creando nuestro propio apartado de administracin para el theme
Poner una cajita para guardar nuestro cdigo de Google Analytics (en functions.php):
-
8/3/2019 Crear Theme Wordpress Pasos II
59/62
function nombredeltheme_theme() {
if(isset($_POST['submitted']) and $_POST['submitted'] == 'yes') :
update_option("google_analytics", stripslashes($_POST['google_analytics']));
endif;
?>
Google Analytics
Google Analytics:
Copia elcdigo Google Analytics aqu. -
8/3/2019 Crear Theme Wordpress Pasos II
60/62
Luego lo llamamos desde footer.php:
-
8/3/2019 Crear Theme Wordpress Pasos II
61/62
Muchas gracias :-)
Todas las imgenes* son propiedad de sus
-
8/3/2019 Crear Theme Wordpress Pasos II
62/62
Todas las imgenes son propiedad de susrespectivos dueos, el resto del contenido
est licenciado bajoCreative Commons by-sa 3.0
* Steven Snodgrass, Tracy, Publicenergy, Giuliana, Silkegb, Gabaldn,Gonzalo Iza, Sebastian Delmont, Maurizio Abbate, Leeni!, Borghetti,
Gustavo Peres, Chris Bevan, Seattle Municipal Archives, Luis deBethencourt, No hay un nombre real, Vctor Nuo, Baptiste Pons,
Pupilas Gustativas, Jess DQ, Brandon Warren, Joe Lencioni, ArnoldoLara, Luis Beltrn, Ivan Walsh, Claudio Seplveda Geoffroy, Mireia,
Sara Music, Anas RV, David Acevedo, Godoy