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]


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


3/62


4/62

Vuestra nueva Biblia: Codex WordPress

http://codex.wordpress.org/


5/62

El gran repositorio de WordPress de plantillaspara que tomemos ideas:

http://wordpress.org/extend/themes/


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.


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/62

Una instalacin de WordPress es totalmente portable

Slo necesitaremos esas carpetas y la BD


9/62

Las plantillas o themes son la capa de presentacin

Se puede cambiar esta capa sin que la informacin se vea afectada


10/62

La estructura bsica de un theme


11/62


12/62


13/62

sidebar.php: aqu se definen las diferentes barras laterales


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


15/62

single.php: este es el fichero que se interpreta

cuando se carga un post concreto


16/62


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


18/62

comments.php: plantilla de los comentarios


19/62

searchform.php: formulario de bsqueda

search.php: pgina donde se muestran los resultados de una bsqueda


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


21/62

404.php: si creamos este fichero, cada vez que algo no seencuentre en el blog, se cargar esta pgina


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


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


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:


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

));

}


26/62


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).


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


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.


30/62


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*/


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).


33/62


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:


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


36/62


37/62

Funciones nativas de WordPress


38/62

h i l ($b f $ f $ h )


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.


40/62

the_content()

Muestra el cuerpo del post.Se usa dentro del loopTiene tambin su versin get_the_content()


41/62

Muestra lo que hayamos introducido en el campo ExtractoSe usa dentro del loop. Tiene su versin get_the_excerpt()

the_excerpt()


42/62


43/62

the_time()

Muestra la fecha por cada postLe podemos pasar por parmetro el formato de esa fecha


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"


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


46/62

bloginfo()

Nos ofrece numerosa informacin de nuestro blog que luego podremosplasmar en otros apartados (tiene se versin get_bloginfo)


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.


48/62

Muestra por pantalla el autor que ha escrito ese post

Tiene su versin sin echo: get_the_author

the_author()


49/62

the_tags( $before, $separator, $after)

Muestra las etiquetas asociadas a ese postTiene su versin get_the_tags.


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:


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


52/62


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


54/62


55/62

Custom fields o campos personalizados: informacin adicionalcomo la cancin que estaba escuchando el autor cuando escriba

el post, su estado de nimo, ...


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


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:


58/62

Creando nuestro propio apartado de administracin para el theme

Poner una cajita para guardar nuestro cdigo de Google Analytics (en functions.php):


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.


60/62

Luego lo llamamos desde footer.php:


61/62

Muchas gracias :-)

Todas las imgenes* son propiedad de sus


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

Documents

Crear Theme Wordpress Pasos II