guia word press

41
Conociendo el Mundo de WordPress

Upload: ivan1587

Post on 18-Nov-2014

1.273 views

Category:

Education


0 download

DESCRIPTION

Pequeña guía sobre WordPress

TRANSCRIPT

Page 1: Guia word press

Conociendo el Mundo de WordPress

Page 2: Guia word press

ANTES DE COMENZAR

Conociendo el Mundo de WordPress

Page 3: Guia word press

Antes de Comenzar

• No le teman a WP, amenlo, quieranlo e incluso salgan a pasear con él.

• Olvídense de los subdirectorios de secciones.

• Olvídense de rutas estáticas.

• Olvídense de Flash (no es joda).

• Tengan el Codex de WP (Biblia) siempre a mano.

• No se frustren si sale "Fatal Error" o "Warning".

• No dejen código que no van a utilizar (trae problemas a futuro).

• Intenten usar modo remoto y no local (hay varios problemas siempre)

• WP no solo se usa para crear un "blog", es una herramienta: flexible, fácil, práctica, potente, autosuficiente y desprende belleza al ser utilizado.

Page 4: Guia word press

INSTALACIÓN

Conociendo el Mundo de WordPress

Page 5: Guia word press

Instalación

1. Descomprimir los archivos de Wordpress en el root.2. Edición del archivo wp-config.php.3. Configuración del cliente FTP y subida de los archivos descomprimidos de

Wordpress al servidor.4. Instalación de Wordpress.5. Configuración del idioma.

 ==================================== Aclaración: también pueden usar el "Fantastico" (tiene diversos nombres según el tipo de panel) para instalar WP, pero yo recomiendo hacer una instalación limpia y manual, para evitar problemas a futuro. (Spam y Seguridad)

Page 6: Guia word press

Instalación

Edición del archivo wp-config.php: Renombrar el archivo wp-config-sample.php a wp-config.php, abrirlo y fijarse enesto:define('DB_NAME', ‘wordpress'); define('DB_USER', ‘username'); define('DB_PASSWORD', ‘password'); define('DB_HOST', ‘localhost'); ========== DB_NAME = nombre de la base de datos.DB_USER = usuario que accede a la base de datos.DB_PASSWORD = contraseña para acceder a la base de datos.DB_HOST = donde está la base de datos (en el 95% suele ser localhost). ==========

Experiencia Personal: ¡No dejar espacios ni al comienzo ni al final del archivo! Ya que puede arrojar errores en el header.php!

Page 7: Guia word press

Instalación

URL para realizar la instalación: http://www.dominio.com.ar/wp-admin/install.php Ingresan a la url (con su dominio correspondiente) y siguen los pasos para finalizar la instalación. La instalación no dura más de 30 segundos. ================ URL para entrar al panel de administrador: http://www.dominio.com.ar/wp-admin o http://www.dominio.com.ar/wp-login.php

Page 8: Guia word press

CONFIGURACIÓN BASICA

Conociendo el Mundo de WordPress

Page 9: Guia word press

Configuración Básica

Ajustes de Lectura: Si queremos personalizar el home de nuestro Sitio Web, se realiza en este lugar:Ajustes --> Lectura

Page 10: Guia word press

Configuración Básica

Cambiar los permalinks para que sean mas amigables: http://www.dominio.com.ar/wp-admin/options-permalink.php - Los Permalinks (permanent links o enlaces permanentes) va a condicionar toda la estructura del WordPress. - La mejor estructura para los permalinks es /%postname%/ el resultado final sería: http://www.dominio.com.ar/titulo-del-post - Otra opción recomendable es /%year%/%monthnum%/%postname%/ para lograr un mayor orden con las diferentes entradas. Ambas opciones son recomendables, pero si o si hay que sacar el permalink que viene por defecto que no es amigable con el SEO y por supuesto es muy dificil de identificarlo: Ejemplo:  http://www.dominio.com.ar/?p=123

Page 11: Guia word press

CATEGORÍAS, ENTRADAS Y PÁGINAS

Conociendo el Mundo de WordPress

Page 12: Guia word press

Categorías, Entradas y Páginas

Categorías: Las categorías van a ser primordiales a la hora de organizar nuestro sitio web, si por ejemplo queremos filtrar páginas mostrando determinado contenido. Para filtrar una categoría, hay que obtener el "ID" de la misma.

Para mostrar las categorías hay que utilizar la siguiente función:

<?php the_category(); ?>

En caso de querer excluir determinadas categorías se agrega el parámetro correspondiente para filtrar las categorías:

<?php wp_list_categories('orderby=name&exclude=3,5,9,16'); ?>

Para mas info ver el codex ================

Page 13: Guia word press

Categorías, Entradas y Páginas

Entradas: Serían las noticias de nuestro Sitio Web, pero haciendo un buen uso de las categorías con filtros, se pueden agregar diferentes elementos para ser mostrados como testimonios, productos, etc.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    [ACA VA TODO EL CONTENIDO]

<?php endwhile; else: ?>

    <p>Mensaje de Error</p>

<?php endif; ?>

Ver este sitio para más información o bien el Codex de WP ================

Page 14: Guia word press

Categorías, Entradas y Páginas

Algunas etiquetas que se usan frecuentemente en las Entradas (y demás): <?php the_permalink() ?>Muestra el enlace permanente del post.

<?php the_title(); ?>Muestra el título del post.

<?php the_time(’F jS, Y’) ?>Muestra la fecha. Puedes encontrar los distintos formatos.

<?php the_author() ?>Muestra el nombre del autor.

<?php the_tags(’Tags: ‘, ‘, ‘, ‘<br />’); ?>Muestra las etiquetas (tags) asignadas al post, separadas por comas y seguidas por un salto de línea.

<?php the_category(’, ‘) ?>Muestra las categorías igual que en el caso anterior de las etiquetas.

Page 15: Guia word press

Categorías, Entradas y Páginas

Páginas: Las Páginas son como las Entradas, excepto que pueden hacer mucho más que las Entradas, y viven fuera de la cronología normal del blog. Se puede usar Páginas para organizar y manejar cualquier cantidad de contenido. Esta belleza fue implementada recién en la versión 1.5 de WP y permite hacer maravillas.

¿Pero cómo funcionan en realidad las Páginas en WordPress? El objetivo de este documento es intentar explicar lo que es una Página y lo que no es, describir lo que una Página puede hacer, y ofrecer algunos ejemplos.

================

Aclaración: Las Páginas NO son entradas, ni extractos. No hacen el ciclo por la página principal del sitio web (blog) y no pueden ser asociadas con las Categorías.

Page 16: Guia word press

INSTALACIÓN Y PERSONALIZACIÓN DE PLUGINS

Conociendo el Mundo de WordPress

Page 17: Guia word press

ESTRUCTURA DE UNA PLANTILLA

Conociendo el Mundo de WordPress

Page 18: Guia word press

Estructura de una Plantilla

Ficheros que componen una Plantilla:

Page 19: Guia word press

Estructura de una Plantilla

Sobre el index.php:

El directorio de la plantilla se debe situar en el directorio /wp-content/themes de tu WordPress.

El fichero principal, o punto de entrada en una plantilla es el fichero index.php , desde este fichero se cargará el header, el sidebar y el footer.

Para llamar al resto de los archivos se van a utilizar las funciones:

<?php get_header(); ?><?php get_sidebar(); ?><?php get_footer(); ?>

Page 20: Guia word press

Estructura de una Plantilla

Sobre el single.php:

En el caso en que se muestre una entrada en concreto, en lugar de la página principal, nuestro punto de entrada en la plantilla sera el fichero single.php. Desde single.php cargaremos el header y el sidebar de igual forma que desde index.php, pero además cargaremos también los comentarios y algunas cosas más que hay que tener en cuenta cuando se carga una entrada.

En caso de que carguemos entradas de archivo nuestro punto principal será el fichero archives.php.

Page 21: Guia word press

Estructura de una Plantilla

Sobre el style.css:Esto tiene que estar en el comienzo del style.css/*Theme Name: Nombre de la PlantillaTheme URI: http://www.proyectosenior.netDescription: Tema de prueba para la clase de WP, esta descripción es sublime.Author: Nombre del AutorAuthor URI: http://www.dominio.com.ar/*/  =========== Aclaración: El archivo style.php es fundamental y debe llamarse así ya que la función de WP se limita a style.php y no a "mi_estilo.php". En caso de querer usar otros archivos .css se tiene que usar @import url("mi_estilo.css");

Page 22: Guia word press

Estructura de una Plantilla

Sobre el sidebar.php:El sidebar se almacena en el fichero sidebar.php, y en el mostraremos las categorías, los archivos de la página por meses, los enlaces, tags, etc.

Todo esto será lo que se muestre por defecto en nuestra plantilla, pero se puede retocar para que tenga contenido dinámico mediante widgets y la persona a cargo no tenga que estar modificando el sidebar.php específicamente. if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_right') )    [aca va el contenido estático]<?php endif; ?>

¿Que se supone que hace esto?Comprobamos si nuestro WP esta preparado para widgets y si además hay algun widget en el sidebar_right, en caso de haberlo, se cargaran los widgets, pero si no hay widgets, se cargará el contenido estático que vamos a ver a continuación.  ===========

Aclaración: si nosotros ponemos tan solo 1 widget, pisamos todo el resto estático que esta entro de sidebar.php.

Page 23: Guia word press

Estructura de una Plantilla

Page 24: Guia word press

Estructura de una Plantilla

Sobre el header.php:<title>    <?php bloginfo('name'); ?> <?php wp_title(); ?></title>La función <?php wp_title ?> nos brinda la sección en la que estamos, mientras que la función <?php bloginfo('name'); ?> nos da el título del Sitio Web. <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />Esta etiqueta puede ser usada o no, yo recomiendo no utilizarla para que nadie sepa que versión de WP usamos y así evitar posibles problemas. Enlazamos a la hoja de estilos mediante la función bloginfo(‘stylesheet_url’), también enlazamos al feed, para que el navegador pueda accederlo desde el icono de la barra de direcciones, para ello usamos la función bloginfo(‘rss2_url’).

Para llamar a otros archivos (img, .js, etc) vamos a tener que utilizar la función <?php bloginfo('template_url');?> hacer crear rutas dinámicas y que nuestro theme sea 100% flexible y sea posible reutilizarlo a futuro.===========

Page 25: Guia word press

Estructura de una Plantilla

Page 26: Guia word press

Estructura de una Plantilla

Sobre el page.php:Para poder levantar la información que hay en una página, se tiene que poner la misma estructura de cuando se quiere mostrar una entrada:

<?php if (have_posts()) : while (have_posts()) : the_post();?>   [ACA VA EL CONTENIDO]<?php endwhile; endif; ?> ===========

Page 27: Guia word press

Estructura de una Plantilla

Múltiples archivos page.php:

Para crear diferentes archivos page.php tenemos que crear otro archivo, por ejemplo page-ejemplo.php y dentro al comienzo del archivo poner:

<?php /* Template Name: Pagina de Ejemplo */ ?>

Para seleccionar nuestra plantilla personalizada, hay que ir a la página creada y asignarle la que queremos.

Esto es muy beneficioso si tenemos páginas estáticas con diferente diseño, como por ejemplo sin una barra lateral, etc. ===========

Page 28: Guia word press

Estructura de una Plantilla

¿Donde esta la diferencia entre index.php y page.php?:

Ambos archivos utilizan un loop para levantar la información y son exactamente iguales, el truco esta en la jerarquización de archivos. WordPress automáticamente al detectar que una pagina se quiere mostrar, busca en el directorio el archivo page.php, si no encuentra ninguno, sigue por los archivos page.php personalizados y si no encuentra ninguno, llama directamente al archivo index.php.

Para más información sobre Jerarquización ver el Codex de WP.===========

Page 29: Guia word press

Estructura de una Plantilla

Otros archivos:Por ejemplo, si le pinchamos sobre una categoría para ver los posts de la misma, el fichero que se cargará será archives.php, lo mismo con los archivos por mes , día y año.

También esta el fichero search.php, que lo utilizaremos como plantilla para las búsquedas que se realicen en el Blog.

El fichero comments.php donde cargaremos los comentarios.

El fichero 404.php sirve para enviar una salida personalizada de error 404 cuando alguien haga una petición al servidor que genere un error 404.

Las imágenes las almacenaremos en el directorio img.

Page 30: Guia word press

Estructura de una Plantilla

Otros archivos:En screenshot.jpg guardaremos un thumbnail (miniatura) de nuestra plantilla terminada y que se mostrara en el panel de administración del WordPress.

Por último tenemos el fichero funtions.php, que básicamente actúa como un plugin… si el fichero existe, se carga automáticamente durante la inicialización de WordPress. Lo podemos usar como fichero donde declarar funciones que vayamos a usar después en la plantilla.

===========

Experiencia Personal: El uso del functions.php puede ser una bendición si lo utilizamos correctamente, pero muchas veces puede que salgan múltiples errores si usamos diferentes funciones que se pisen entre sí a la hora de mostrarse en el Sitio.

Page 31: Guia word press

Estructura de una Plantilla

La Barra de Navegación (menú):El menú de nuestro sitio web es una parte esencial y tenemos que darle un giro para que sea dinámico.

En nuestro menú se van a cargar las diferentes Pages (pages.php) que vayamos creando. Para llamar a la función que permite obtener las Pages hay que usar:

<?php wp_list_pages(‘depth=1&title_li=’); ?>

En caso de querer filtrar algunas secciones podríamos retocar el código y usar:

<?php wp_list_pages(‘title_li=&depth=1&exclude=6,4′); ?>

===========

Aclaración: en caso de tener un menú que utilice imágenes y/o posicionamiento, hay que implementar condicionales en el navbar, para eso hay que ver cada caso en particular y leerse el Codex de WP.(comentar en clase los pro y contra de un menú dinámico)

Page 32: Guia word press

Estructura de una Plantilla

Generando archivos personalizados:Si se generan archivos externos a la estructura base, como por ejemplo sidebar2.php, footer-especial.php, header-solo-php vamos a tener que utilizar la función include de PHP pero con unos detalles a tener en cuenta:

<?php include (TEMPLATEPATH . '/ejemplo.php'); ?>

El parámetro "TEMPLATEPATH" sirve para insertar dinámicamente la ruta de nuestra plantilla, nosotros podríamos poner a mano la ruta, pero si queremos reutilizar a futuro nuestra plantilla en otro sitio web (dominio) no nos va a servir.

Page 33: Guia word press

Estructura de una Plantilla

Tags de WordPress:Son llamadas que se utilizan en la plantilla del Sitio Web, para mostrar información de forma dinámica. Casi todas son personalizables para que uno puedan generar diferentes resultados. Hay de tipo:

• Generales• Autor• Categorías• Comentario• Entradas

Para mas información en detalle sobre cada una visitar el Codex de WP.

Page 34: Guia word press

HOJA DE AYUDA

Conociendo el Mundo de WordPress

Page 35: Guia word press

Hoja de ayuda

Hoja de Ayuda para WP:

Es muy común olvidarse algún snippet / funciones de WordPress por lo tanto es recomendable tenerlos a mano a la hora de desarrollar una plantilla. Link para Descargar

Page 36: Guia word press

CONSIDERACIONES CUANDOSE REALIZA UNA PLANTILLA

Conociendo el Mundo de WordPress

Page 37: Guia word press

Consideraciones cuando se realiza una plantilla

Para tener en cuenta:• Cuando el sitio no tiene una sección de noticias/novedades (blog) el sitio es

mas un CMS que otra cosa, es por eso que hay que definir bien que archivos se van a utilizar y cuales no, por ejemplo los comments.php y archive.php no se usarían.

• Hacer dinámicas y flexibles todas las rutas. (¡Utilicen las funciones de WP!)• No dejar contenido estático en el back-end y que a futuro traiga problemas en el

frond-end.• Realizar comentarios en la estructura del sitio web, especialmente si a futuro se

le van a hacer modificaciones.• Comentar absolutamente todo el archivo functions.php para que sea mas fácil

editarlo a futuro si se utilizan muchas funciones.• Saber cuando utilizar <?php include (TEMPLATEPATH . '/ejemplo.php'); ?>

Page 38: Guia word press

XHTML A WORDPRESS

Conociendo el Mundo de WordPress

Page 39: Guia word press

XHTML a WordPress

Pasos a seguir:1) Tener la estructura del WP realizada (con todos los archivos que se necesiten según el caso). 2) Comentar el código XHTML con el "comienzo y fin" de cada parte (contenedor, encabezado, contenido, lateral, pie, etc). Esto sirve mucho para acelerar el proceso de "corte" y que no tengamos divs abiertos sin cerrar.

3) Pegar cada bloque de código en su respectivo archivo. Por ejemplo: todo el pie de página en el footer.php, el encabezado y el menu en el header.php, etc.

4) Llamar a las respectivas funciones de Wordpress (get_footer, get_sidebar, etc) en los archivos base, como index.php, page.php, single.php

5) Remplazar toda linea estática por dinámica (funciones base de Wordpress), como en el tittle del Sitio Web, hoja de estilo, archivos .js, etc.

6) Subir la plantilla finalizada, habilitarla y comenzar a realizar las pruebas (dolores de cabeza).

===========

Page 40: Guia word press

CONSEJOS PARA WORDPRESS

Conociendo el Mundo de WordPress

Page 41: Guia word press

Consejos para Wordpress

• Borrar los archivos wp-install.php, wp-upgrade.php• Bloquear el listado de archivos de los directorios clave, como wp-content,

específicamente el de los plugins• Si se puede dejar de lado un plugin, hacerlo y optar por la filosofía “Without a

plugin” para evitar vulnerabilidades y compatibilidad a futuro.• Actualizar siempre WordPress y tener presente que el diseño/plugins pueden

sufrir cambios de incompatibilidad.• Realizar full-backups frecuentes y de manera manual de ser posible (no confiar

en plugins)• Desactivar el registro de usuarios si no se lo va a utilizar.• Borrar el usuario admin base que se genera al instalar el WP.