Pages Menu
TwitterRssFacebook
Categories Menu

Posted by on Feb 11, 2015 in General | 0 comments

Modificar las plantillas o themes de su Blog

En post anterior explicaba cómo cambiar la plantilla o theme y la estructura de los mismos,  de su Blog ahora trataremos como modificar la plantilla o theme que usted ha elegido, ahora escribiremos sobre cómo modificarlos o personalizarlos.

El theme es el que contiene las funciones php encargadas de llamar la información de la base de datos y mostrarla en el navegador. Estas funciones se  caracterizan por tener una estructura similar a <?php wp_tag_cloud(‘smallest=12&largest=20&’); ?>.

En los siguientes links encuentra un extenso listado de funciones que se pueden utilizar:

http://www.dbswebsite.com/design/wordpress-reference/

http://codex.wordpress.org/Template_Tags

Pero quizás lo que más le interese modificar es el aspecto de su Blog, como el color de fondo, o tipo de letra.

El control del formato del sitio, entendido este como color, tamaño, tipo de letras, y demás aspectos visuales, se hace desde un archivo llamado style.css, así que es necesario modificar este archivo para cambiar el formato de la plantilla.

La estructura de la plantilla o theme está controlada por unas etiquetas llamadas div [<div></div>].

Cada div es una sección o sector de la página. Es con un div que se define el encabezado, el footer, el sideber, el cuerpo del documento, una sección dentro del sidebar, etcs.

Por ejemplo, el marco externo de la plantilla, dentro del cual está todo el contenido, está definido por  <div id=”wrap”>, el encabezado está definido por <div id=”header”>, el sidebar por <div id=”sidebar”>, los comentarios por <div id=”comments”>, etc.

No hay que olvidar que cada vez que se abre un div hay que cerrarlo, de modo que debe quedar algo así: <div id=”header”>Encabezado el mi Blog</div>.

El formato de cada etiqueta div, está controlado desde el archivo style.css. Por ejemplo el div <div id=”header“>, tiene un estilo [style] llamado header, de modo que en el archivo style.css debe existir un formato con ese nombre, es decir que se llame header.

Al abrir el archivo style.css, encontraremos algo así:

#header {

background: #FFFFFF url(images/header.gif);

width: 860px;

height: 80px;

color: #2e5c95;

margin: 0px auto 0px;

padding: 0px;

overflow: hidden;

}

#header es el nombre que identifica el estilo y que debe coincidir con el div del archivo php. Luego hay se abre el formato con {, y se cierra con }. Dentro de estos corchetes, es que se colocan los códigos css que controlan el formato del respectivo div.

Por ejemplo, en el código publicado aquí, se ha definido que el encabezado tiene un ancho de 860 píxeles y un alto de 80 píxeles, que tiene un color de fondo compuesto por una imagen o en su defecto de color blanco.

Así se hace con cada uno de los sectores de la plantilla que están estructurados y definidos con div.

En las siguientes direcciones encuentra las diferentes propiedades y funciones disponibles en css:

http://htmlhelp.com/es/reference/css/properties.html

http://www.manualdecss.com/

http://www.cssya.com.ar/

Recuerde que usted puede agregarle tantos div a su plantilla como necesite, teniendo presente que cada div que abra debe cerrarlo.

Los div reemplazan las tablas, por lo que usted nunca encontrará una tabla en un theme de WordPress, y esto es precisamente una de sus ventajas, puesto que las tablas generan un exceso de código basura que dificulta el proceso de rastreo a los bots de los buscadores.

Cuando haya modificado su plantilla, debe subirla al servidor en la carpeta correspondiente, que en el gestor ftp la ruta será por ejemplo /www/wp-content/themes/default/

Publicar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *