Hack x Crack - Comunidad de Seguridad informática

Programación => Programación Web => Mensaje iniciado por: creepernex en Septiembre 25, 2012, 05:28:26 am

Título: TALLERES WORDPRESS
Publicado por: creepernex en Septiembre 25, 2012, 05:28:26 am
(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-570x210.gif)

Estos tutoriales pretenden introducirles al manejo de WordPress, por ende utilizare un nivel básico para que todos interesados puedan seguir los tutoriales sin problema alguno. El objetivo de estos talleres tutoriales apunta a que ustedes aprendan a instalar y manejar WordPress, por otro lado daré por sentado que tienen un mínimo conocimiento de PHP, JS, CSS, HTML y SQL entre otros.

En este primer tutorial veremos:
- ¿Que es un CMS?
- Un poco de historia(tedioso para unos y educativo para otros).
- Diferencia entre wordpress.com y wordpress.org.
- Como descargar e instalar wordpress en nuestro ordenador.
- Conociendo el back-office de wordpress
- Creación de entradas(publicación).

¿Que es un CMS?

Un sistema de gestión de contenidos (en inglés Content Management System, abreviado CMS) es un programa que permite crear una estructura de soporte (framework) para la creación y administración de contenidos, principalmente en páginas web, por parte de los administradores, editores, participantes y demás roles.
Consiste en una interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio web. El sistema permite manejar de manera independiente el contenido y el diseño. Así, es posible manejar el contenido y darle en cualquier momento un diseño distinto al sitio web sin tener que darle formato al contenido de nuevo, además de permitir la fácil y controlada publicación en el sitio a varios editores. Un ejemplo clásico es el de editores que cargan el contenido al sistema y otro de nivel superior (moderador o administrador) que permite que estos contenidos sean visibles a todo el público (los aprueba).

Un poco de historia

WordPress es un CMS enfocado a la creación de blogs (sitios web periódicamente actualizados). Desarrollado en PHP y MySQL, bajo licencia GPL (http://es.wikipedia.org/wiki/GNU_General_Public_License) y código modificable, tiene como fundador a Matt Mullenweg (http://es.wikipedia.org/wiki/Matt_Mullenweg). WordPress fue creado a partir del desaparecido b2/cafelog y se ha convertido uno de los CMS más popular de la blogosfera. Las causas de su enorme crecimiento son, entre otras, su licencia, su facilidad de uso y sus características como gestor de contenidos.
Otro motivo a 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.

¿Qué es WordPress?

Es un sistema de manejo de contenido prefabricado, rápido y sin costo alguno.
En sus comienzo fue un sistema mas blog pero con el tiempo se a ido convirtiendo en una importante herramienta para muchos diseñadores, programadores y aficionados a la web ya que su simplicidad de manejo y aprendizaje lo a puesto por encima de otros CMS.

Algunas características:

Distribuido bajo licencia GPL
Facilidad de instalación y actualización
Gestión de usuarios
Suscripción y sistema de noticias RSS
De fácil personalización
Protección de artículos con contraseña
Buscador integrado
Sistema de comentarios

Diferencia entre wordpress.com y wordpress.org

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-diferencia-wp-org-wp-com.gif)

La diferencia entre wordpress.com y wordpress.org suele causar confusión.
wordpress.org es un paquete de código abierto gratuito para la creación de blogs con el que puedes instalar temas, plugins, editar la base de datos e incluso modificar el código fuente, mientras que en wordpress.com no tienes que descargar el software, ni pagar el hospedaje o administrar un servidor web.
Solo te inscribes en un blog wordpress.com y obtendrá una url (myweb.wordpress.com) o también puedes asignar un dominio propio, claro que esta acción tendrá un costo.
Lo malo de wordpress.com es al igual que en Blogger, no tienes el control total de tu web.

¿Como obtener WordPress?

Obtener wordpress es muy sencillo solo tenemos que ir a www.wordpress.org (http://wordpress.org/) (versión en ingles) o www.es.wordpress.org (http://es.wordpress.org/) (versión en español) esta ultima es la que estaré utilizando durante los talleres.

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-descargar-wp.gif)

Vamos a instalar los archivos necesarios en nuestro PC para poder trabajar con WordPress, lo aremos de forma local para poder trabajar mas rápida.

Paso 1

Para trabajar en localhost necesitamos tener instalado un servidor local, yo estoy trabajando con XAMPP.

Explico como instalar XAMPP en Ubuntu:

Descarga la ultima vercion de XAMPP desde http://www.apachefriends.org/en/xampp-linux.html.
Una ves descargada abriremos esa cosa tan rara llamada terminal y pondremos los siguientes comandos:

1- Nos dirigimos al directorio donde descargamos XAMPP

Código: [Seleccionar]
cd ./Descargas
Código: [Seleccionar]
ls
2- Extraemos el archivo descargado en el directorio /opt:

Código: [Seleccionar]
tar xvfz xampp-linux-1.8.0.tar.gz -C /opt
3- Damos permisos para poder modificar el directorio /opt/htdocs:

Código: [Seleccionar]
sudo chmod a+w /opt/lampp/htdocs
4- Creamos un enlace simbólico entre el directorio htdocs y una ubicación en nuestra carpeta personal:

Código: [Seleccionar]
mkdir ~/wptaller Este comando creara el directorio en este caso wptaller.

Con este comando enlazaremos el directorio wptaller con htdocs

Código: [Seleccionar]
sudo ln -s ~/wptaller /opt/lampp/htdocs/$USER
Comandos para utilizar Xampp:

Iniciar XAMPP:
Código: [Seleccionar]
sudo /opt/lampp/lampp startReiniciar XAMPP:
Código: [Seleccionar]
sudo /opt/lampp/lampp restartDetener XAMPP:
Código: [Seleccionar]
sudo /opt/lampp/lampp stopPara mas comandos véase:
Código: [Seleccionar]
sudo /opt/lampp/lampp help
Paso 2

Una ves que tengamos instalado, cofigurado e iniciado XAMPP abrimos nustro navegador favorito y nos dirigimos a la siguiente direccion:
http://localhost/phpmyadmin donde crearemos una base de datos con el nombre wptaller

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-db.png)

Ahora pasaremos a descomprimir el archivo ZIP que aviamos descargado de es.wordpress.org, como resultado nos dara una carpeta llamada wordpress, la cual pegaremos en Carpeta personal/wptaller (en caso de que estén usando un SO windows las ruta por defecto es c:xampp/htdocs). Posteriormente abrimos dicha carpeta y buscamos el archivo wp-config-sample.php, lo abrimos un editor de texto y editaremos las lineas 19, 22, 25.

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-wp-config-1.png)

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-wp-config-2.png)

Guardamos este archivo con el nombre de wp-config.php

Paso 3

Abrimos el navegador web y nos dirigimos a http://localhost/nombredeusuario/wordpress/, en la siguiente ventana rellenamos los campos:
Titulo del sitio: Contendrá el nombre que queramos darle a nuestro sitio.
Nombre de usuario: Como trabajaremos en local le podemos dejar admin.
Password: Deben recordar la contraseña que usaran o de lo contrario no podrán ingresar como administrador.
Pondremos nuestro E-Mail
Por el momento la opción de aparecer en los motores de búsqueda no tendrá influencia por que recuerden que estamos en local.
Por ultimo pulsamos instalar wordpress y si todo salio bien nos mostrara una ventana con el mensaje ¡Lo lograste!.

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-install.png)

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-install-0k.png)

Pulsamos acceder y en la siguiente ventana pondremos el nombre de usuario y la contraseña.

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-log.png)

Explorando el escritorio de WordPress

Para no hacer tan extenso y aburrido este primer tutorial finalizaremos con una breve descripción del escritorio WP y crearemos la primer entrada en nuestro blog.

Al acceder llegas primeramente a lo que se conoce como el Back-office o Dashboard, esta es la parte principal de todo blog basado en WordPress.
En esta área es donde se escriben los artículos, se suben las fotos, etc. Todo lo que se haga aquí se verá reflejado delante del blog, osea lo que el público ve.

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-escritorio.png)

A continuación cerraremos el mensaje de bienvenida dando clic en Omitir, ya cerrado veremos que se nos muestra una nueva serie de paneles en el contenedor principal de nuestro Back-office.

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-paneles.png)


Ahora mismo: Muestra la cantidad de entradas, paginas, categorías y etiquetas que hemos creado como también el numero de comentarios el theme que estamos usando y la versión de WP.
Publicación rápida: Te permite crear entradas nuevas y publicarlas o guardarlas como borradores.
Comentarios recientes: Muestra los comentarios más recientes en tus entradas (es configurable, hasta 30 comentarios) y te permite moderarlos.
Últimos borradores: Muestra un enlace a los últimos 5 borradores de entradas que hayas comenzado.
Enlaces entrantes: Muestra enlaces que apuntan a tu sitio encontrados por la búsqueda de blogs de Google.
Blog oficial de WordPress: Las últimas noticias del proyecto oficial de WordPress.
Otras noticias sobre WordPress: Muestra el feed de WordPress Planet. Puedes configurarlo para que muestre un feed diferente, a tu elección.
Plugins: Muestra los plugins más populares, más nuevos y los recientemente actualizados del directorio de plugins de WordPress.org.
Cada uno de los elementos vistos anteriormente pueden ser re-organizados a tu gusto, colapsarlos y desaparecerlos. Para ello selecciona la opción “Opciones de Pantalla”
con lo que se desplegarán las opciones:

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-paneles-02.png)

Del lado izquierdo verás el menú de navegación:

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-nav.png)

Escritorio:
- Inicio: Muestra los paneles que hemos visto anteriormente.
- Actualizaciones: Desde aquí podremos actualizar WP.
Entradas:
- Todas las entradas: Muestra todas las entradas creadas en el blog.
- Añadir nueva: Crear una nueva entrada.
- Categorías: Crear una categoría.
- Etiquetas: Crear una etiqueta.
Multimedia:
- Librería multimedia: Muestra una lista con los archivos que hemos subido ya sea imágenes, pdf, mp3, etc.
- Añadir nuevo: Subir a la librería multimedia un nuevo archivo.
Enlaces:
- Todos los enlaces: Aquí puedes añadir enlaces a mostrar en tu sitio, generalmente usando Widgets. Por defecto, los enlaces son a varios sitios de la comunidad de WordPress. Por lo general se utilizan para colocar web amigas, patrocinadores, etc.
- Añadir nuevo: Puede añadir o editar enlaces desde esta pantalla introduciendo la información en cada caja. Sólo son necesarios el enlace a la web y el nombre (el texto que quieres mostrar en el enlace en tu sitio).
- Categorías de enlaces: Puedes crear grupos de enlaces utilizando las categorías de enlaces.
Paginas:
- Todas las paginas: Muestra todas las paginas creadas.
- Añadir nueva: Crear una nueva pagina.
Comentarios: Desde quí puedes gestionar los comentarios de tu sitio aprobar, rechazar, editar, etc.
Apariencia:
- Temas: Puedes ver tu tema activo en la parte superior de la pantalla. Debajo están los otros temas que has instalado y que no están actualmente en uso.
- Widgets: Los Widgets son secciones independientes de contenido que pueden ser colocados en cualquier parte de tu tema que esté preparado para ello (comúnmente llamados sidebars).
- Menús: Esta funcionalidad te permite utilizar un menú personalizado en vez de los menús por defecto de tu tema.
- Opciones del tema: Algunos temas ofrecen opciones de personalización que se agrupan en una pantalla de Opciones del tema.
- Cabecera: Esta pantalla se usa para personalizar la sección de cabecera de tu tema(no todos los temas la traen).
- Fondo: Puedes personalizar la imagen de tu sitio sin tocar nada del código del tema usando un fondo personalizado. Tu fondo puede ser una imagen o un color(no todos los temas la traen).
- Editor: Puedes usar el Editor de temas para editar de forma individual los archivos css y php que crean la apariencia de tu sitio.
Plugins:
- Plugins instalados: Una vez instalados, puedes activarlos o desactivarlos desde aquí.
- Añadir nuevo: Desde aquí puedes buscar o subir un plugins para luego ser instalados.
- Editar: Desde aquí podrás reescribir el código fuente del plugins deseado.
Usuarios:
- Todos los usuarios: Esta pantalla muestra todos los usuarios existentes para tu sitio.
- Añadir nuevo: Crear un nuevo usuario.
- Tu perfil: contiene infomación sobre ti (tu “cuenta”) así como algunas opciones personales relacionadas con el uso de WordPress.
Herramientas:
- Herramientas disponibles(publicar esto): Es un marcador de enlaces que hace fácil bloguear sobre algo con lo que te hayas topado en la web. Puedes usarlo para guardar un enlace, para publicar un resumen del mismo.
- Importar: Esta pantalla lista los enlaces a los plugins de importación de datos de blogs/contenido de diferentes plataformas.
- Exportar: Puedes exportar un archivo del contenido de tu sitio para que puedas importarlo a otra instalación o plataforma. El archivo de exportación será un archivo en formato XML llamado WXR.
Ajustes:
- Generales: Los campos en esta pantalla determinan algunas configuraciones básicas de tu sitio.
- Escritura: Esta pantalla contiene las opciones para todas ellas. La selección superior controla el editor dentro del escritorio, mientras las demás controlan las formas externas de publicación. Para más información sobre estos métodos para publicar, puedes mirar en los enlaces de la documentación.
- Lectura: Esta pantalla contiene los ajustes que afectarán a cómo se muestran tus contenidos.
- Comentarios: Esta pantalla da muchas opciones para controlar la gestión y la visualización de los comentarios y enlaces de tus páginas y entradas.
- Multimedia: Desde aquí puedes establecer los tamaños máximos para las imágenes insertadas en tu contenido; también puedes insertar una imagen a tamaño completo.
- Privacidad: Puedes seleccionar que tu sitio sea agregado por robots, servicios de ping y arañas. Si quieres que estos servicios ignoren tu sitio, marca el botón de radio “Pide a los buscadores que no indexen este sitio” y haz clic en Salvar Cambios al final de la pantalla. Debes saber que tu privacidad no es completa; tu sitio seguirá siendo visible en la web.
- Enlaces permanentes: Esta pantalla te permite elegir la estructura de enlaces permanentes. Puedes elegir entre las más habituales o crear una estructura de URL personalizada.
Cerrar menú: Botón para cerra el menú lateral.


Amigandonos con el editor interno de WP


Título: Introduce el título de tu entrada. Después de introducir el título, podrás ver el enlace permanente el cual podrás editar.

Editor de entradas: Hay dos formas de editar: Visual y HTML. Elige la manera que quieras haciendo clic en la pestaña correspondiente. El modo visual te permite utilizar un editor WYSIWYG. Haz clic en el último icono de la fila para ver una segunda fila de controles adicionales. El modo HTML te permite poner código HTML plano con el texto de tu entrada.

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-editor-entrada-new.png)

A la derecha del editor podremos ver una serie de paneles los cuales se describen a continuación:

Publicar: Puedes fijar las características de publicación en la caja de publicación. Para el estado, visibilidad y publicar (inmediatamente), haz clic en el enlace “editar” para ver más opciones. La visibilidad incluye opciones para proteger una entrada con contraseña o para hacer que se quede en la parte superior de tu sitio indefinidamente (entrada fija). Publicar (inmediatamente) te permite fijar una fecha de publicación pasada o futura, con lo que puedes programar una entrada para publicarse después o atrasar la fecha de una entrada.

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-editor-entrada-panel-lateral-der-public.png)

Formato: Esto se refiere a como tu tema mostrará una entrada específica. Por ejemplo, puedes tener una entrada de blog standard con título y párrafos, o una cita corta que omita el título y contenga un texto corto emergente. Los temas pueden o no, permitir los 10 posibles formatos.

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-editor-entrada-panel-lateral-der-format.png)

Categorías: Desde este panel podremos elegir en que categoría(s) se encontrara nuestra entrada como también podremos ver las mas utilizadas o crear nuevas categorías.

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-editor-entrada-panel-lateral-der-cat.png)

Etiquetas(Tag): Desde este panel podremos etiquetar nuestra entrada como también podremos ver las mas utilizadas.

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-editor-entrada-panel-lateral-der-tag.png)

Imagen destacada: Esto te permite asociar una imagen con su entrada sin tener que insertarla, Es útil sólo si tu tema usa la imagen destacada para mostrar una miniatura en la página de inicio, en una cabecera personalizada, etc.

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-editor-entrada-panel-lateral-der-img-dest.png)

Para dar por finalizado este primer tutorial les dejo a ustedes la creación de una entrada, vamos que no es nada difícil.
Algunos link útiles para esto:

Texto de relleno:
http://www.lipsum.com/
http://loripsum.net
http://www.zombieipsum.com
http://generator.lorem-ipsum.info
http://html-ipsum.com

Imágenes de relleno:
http://www.placehold.it/
http://rndimg.com/
http://lorempixel.com/
http://placekitten.com/
http://placedog.com/
http://flickholdr.com/

Para este tutorial se utilizado información de las siguientes websites:

www.wikipedia.com
www.wordpress.org
www.ayudawordpress.com

Espero que este tutorial haya sido de utilidad, si tienen alguna duda o problema no duden en comentarlo.

<!-- Saludos, hasta el próximo tutorial -->
Título: Re:De 0 a WordPress [Taller 1]
Publicado por: JAG en Septiembre 25, 2012, 10:44:18 am
Si, está muy bien para el que se está iniciando con wordpress... tengo una pregunta... si trabajamos en local, no puede ser visitado por otra gente, entonces, ¿Qué es lo que hay que hacer para que pueda ser visitado por el resto de gente? ¿Y si apagamos el servidor no sería accesible verdad? preguntas de novatillo... ;) avisa cuando tengas el siguiente vale? Buen trabajo exotren!!
Título: Re:De 0 a WordPress [Taller 1]
Publicado por: creepernex en Septiembre 25, 2012, 07:41:25 pm
Si, está muy bien para el que se está iniciando con wordpress... tengo una pregunta... si trabajamos en local, no puede ser visitado por otra gente, entonces, ¿Qué es lo que hay que hacer para que pueda ser visitado por el resto de gente? ¿Y si apagamos el servidor no sería accesible verdad? preguntas de novatillo... ;) avisa cuando tengas el siguiente vale? Buen trabajo exotren!!

Para que pueda ser visto desde cualquier parte del mundo y de cualquier PC con acceso a Internet tendrías que crear un servidor en tu ordenador el cual tendría que estar encendido las 24HS para mantener la pagina siempre online.
Título: Re:De 0 a WordPress [Taller 1]
Publicado por: <[Zoro]248> en Septiembre 25, 2012, 08:26:42 pm
Se puede, como decirlo que el worpress que tengo este en un hosting gratuito?,
Título: Re:De 0 a WordPress [Taller 1]
Publicado por: creepernex en Septiembre 25, 2012, 09:39:16 pm
Se puede, como decirlo que el worpress que tengo este en un hosting gratuito?,

Si se puede, no influye en lo mas mínimo en cuanto al funcionamiento de WP en lo que si influye es el ancho de banda que solicita el servidor y en el espacio de almacenamiento pero para un blog personal con 250MB de espacio en el disco y 1GB de transferencia mensual es mas que suficiente.
Te recomiendo estos hosting gratuitos:

http://www.000webhost.com/
http://nixiweb.com ---> Excelente
Título: Re:De 0 a WordPress [Taller 1]
Publicado por: <[Zoro]248> en Septiembre 26, 2012, 01:54:48 am
Se puede, como decirlo que el worpress que tengo este en un hosting gratuito?,

Si se puede, no influye en lo mas mínimo en cuanto al funcionamiento de WP en lo que si influye es el ancho de banda que solicita el servidor y en el espacio de almacenamiento pero para un blog personal con 250MB de espacio en el disco y 1GB de transferencia mensual es mas que suficiente.
Te recomiendo estos hosting gratuitos:

http://www.000webhost.com/
http://nixiweb.com ---> Excelente
Sale, muchas gracias, y esperando el siguiente taller


...Saludos --->
Título: Re:De 0 a WordPress [Taller 1]
Publicado por: ACK en Septiembre 26, 2012, 03:48:58 am
Excelente tuto! Espero ansioso la siguiente parte! Muchas gracias por el aporte :D

Saludos familia ;)
Título: Re:De 0 a WordPress [Taller 1]
Publicado por: creepernex en Octubre 06, 2012, 12:27:15 am
El domingo publico el segundo tutorial, lo que sucedió es que me di cuenta que para hacer un tuto escrito lleva demasiadas imágenes como para no pasar nada por alto y mucho texto el cual aburre a muchos y hace que el tutorial sea extenso por eso decidí hacer los restantes en vídeos.

Saludos y mil disculpas a los interesados  ;).
Título: De 0 a WordPress [Taller 2]
Publicado por: creepernex en Octubre 10, 2012, 10:46:10 am
Estos tutoriales pretenden introducirles al manejo de WordPress, por ende utilizare un nivel básico para que todos interesados puedan seguir los tutoriales sin problema alguno. El objetivo de estos talleres tutoriales apunta a que ustedes aprendan a instalar y manejar WordPress, por otro lado daré por sentado que tienen un mínimo conocimiento de PHP, JS, CSS, HTML y SQL entre otros.

Bienvenidos a al segundo tutorial de WordPress, en esta ocasión vamos a configurar WordPress fecha, hora descripción, ajustes de escritura, etc.
Enlaces permanentes(URLs amigables para SEO).



Configuración de sitio

Ajustes generales

Nos dirigimos a la pestaña Ajustes que se encuentra en el menú de navegación del Back-office de WP.
Lo primero que veremos sera la pestaña generales en la podremos configurar algunos aspectos importantes de nuestro sitio.

(http://cridavcor.com.ar/imagenes/2012/10/de-0-a-wordpress-configuracion.png)

1- Desde aquí podremos configurar el nombre de nuestro sitio wen, cabe aclarar que es recomendable que este siga siendo el mismo que hemos colocado cuando instalamos WP aunque se puede cambiar con una instalación reciente ya que no tendrá demasiada influencia en los motores de búsqueda.

2- Desde aquí pondremos una descripción corta de nuestro sitio ¿Y que es la descripción?, pues como dice la frase es un descripción de lo que contiene o contendrá nuestro sitio ¿?. Sigues sin entender:

Citar
Titulo(title): Google.
Descripción(description): Soy el buscador mas usado, domino el mercado y espió al mundo para mi país   :).

Titulo(title): Cridavcor.
Descripción(description): Informática en general.

No siempre estas a la vista de los visitantes ya que a beses solo están para los buscadores.

3- Desde aquí podremos cambiar la dirección del directorio donde esta instalado WP por ejemplo http://wptaller.com/blog o podría ser http://wptaller.com si esta en el directorio raíz. Es recomendable que esta casilla no sea reformada a menos que queramos cambiar de directorio o hosting.
Para mas información véase http://codex.wordpress.org

4- Esta casilla se podrá cambiar la URL de nuestro sitio, podría ser la misma que se utiliza en el punto 3. Es recomendable que esta casilla no sea reformada

5- Desde aquí podrás cambiar el correo electrónico, como podrás leer debajo de la casilla solo es para fines administrativos.

6- Esta opción permitirá que cualquier persona pueda registrarse en nuestra web y participar según el rol asignado(punto 7).

7- Desde esta casilla indicaremos el rol que se le asignara a los usuarios que acaban de registrarse, siempre y cuando este activa la opción cualquiera que pueda registrase.
Los roles por defecto en WP son: Administrador, Editor, Autor Colaborador, Suscriptor.

8- Podremos seleccionar la zona horaria que se mostrara en las publicaciones, comentarios ,etc. Como en un foro esto depende de la configuración de cada usuario. No todos los temas de WP muestran la hora de publicación.

9- Como dice la descripción de esta casilla, aquí seleccionaremos el formato en el que veremos la fecha. Puedes elegir las opciones por defecto o puedes personalizarla por ejemplo j \d\e\ F \d\e\ Y daria como resultado DÍA de MES de AÑO(22 de septiembre de 2012).

10- Como en el punto 9 esta casilla nos dejara modificar el formato en el que deseamos visualizar la hora.

11- Podremos indicar el día en el que comienza la semana, esta opción nos sirve para el calendario.

12- Cuando tengamos configurado WP a nuestro gusto pinchamos en el para guardar los cambios



Ajustes de escritura

(http://cridavcor.com.ar/imagenes/2012/10/de-0-a-wordpress-configuracion-escritura.png)

1- Cambia el tamaño del editor interno de WP. Este detalle a mucha gente se le pasa o bien lo desconoce.

2- Convertir emoticonos como :-) para gráficos en pantalla: Si marcamos esta casilla remplazara los emoticones de escritura por emoticones gráficos ; ) = ;) .
WordPress debería corregir XHTML mal anidadas automáticamente: Si marca esta ayuda WP corregirá automáticamente el código XHTML. Al marcar esta casilla desde código no válido a veces causa problemas con navegadores web. Nota: algunos plugins pueden no funcionar correctamente cuando esta función está activada.

3- Aquí podremos elegir cual sera la categoría por defecto, Osea que si publicamos una entrada y no le asignamos una categoría el propio WP le asignara una que en este caso es Sin categoría.

4- El formato de mensaje que seleccione en este menú desplegable se llama el formato de mensaje predeterminado. Formatos de Correos son utilizados por temas para crear un estilo diferente para diferentes tipos de mensajes. Este ajuste sólo es visible si el tema actual activado soporta los formatos de mensaje.

5- Al igual que en categoria por defecto(punto 3) WP asignara una categoría a los enlaces.

6- Es una pequeña aplicación que se ejecuta en el navegador y permite coger secciones de la web.
Utiliza Publicar esto para copiar texto, imágenes y vídeos de cualquier página Web. Después corrige y añade más directamente desde Publicar esto antes de guardarlo o publicarlo en una entrada del sitio.
Arrastra el siguente enlace y colócalo en tu barra de marcadores o haz clic con el botón derecho para añadirlo en tu lista de favoritos como un atajo de publicación de entradas.

7- Con una correcta configuración podremos publicar via E-Mail, por el momento dejemos así ya que mas adelante lo configuraremos.

8 Desde aquí elegiremos en que categoría irán la publicaciones vía E-Mail.

9- Para escribir a WordPress desde un cliente de blogging de escritorio o sitio web remoto que utiliza el protocolo de publicación Atom.
Protocolo de publicación Atom: Esto permite el uso del protocolo de publicación Atom.
XML-RPC: Cuando está seleccionado, habilita el protocolo XML-RPC de publicación.

10- Cuando se publica una nueva entrada, WordPress notifica automáticamente a los servicios de actualización de los sitios que figuran en el cuadro.



Ajustes de lectura

(http://cridavcor.com.ar/imagenes/2012/10/de-0-a-wordpress-configuracion-lectura.png)

1- Desde aquí podemos elegir si queremos que WP muestre las ultimas entrada en el INICIO de pagina o podremos seleccionar una pagina estática como INICIO y mostrar las entradas en otra pagina por ejemplo:
Podemos crear una pagina estática llamada PORTAL y la ponemos como pagina inicial y otra llamada blog donde mostraremos las publicaciones.

2- Puedes seleccionar en numero de entradas que mostrara WP por cada pagina.

3- Numero de entrada que deseamos mostrar en el Feed.

4- Esta opción nos permite mostrar las publicaciones enteras o mostrar un resumen con el famoso LEER MÁS.

5- Selección de codificación de caracteres, recomendable dejar UTF-8 para no tener errores de tilde.



Ajustes de comentarios

(http://cridavcor.com.ar/imagenes/2012/10/de-0-a-wordpress-configuracion-comentarios.png)

1- Las primeras dos opciones tienen que ver con los pingbacks y trackbacks. El primero determina si tu blog va a enviar pings y trackbacks a otros blogs al publicar entradas. La segunda se determina si tu blog va a aceptar pings y trackbacks de otros blogs. La tercera opción se establece si los comentarios están activados o desactivados por defecto.

2- El autor del comentario debe rellenar el nombre y el correo electrónico: Cuando esta opción está activada, cualquier persona que haga un comentario se ve obligado a dejar un nombre y una dirección de correo electrónico válida.
Los usuarios deben registrarse e identificarse para comentar: Si esta casilla está marcada, sólo los usuarios registrados podrán dejar comentarios.
Cerrar automáticamente los comentarios en las entradas con más de X días: Esta opción se utiliza para cerrar los comentarios en entradas que tienen más de X días de antiguedad.
Activar los comentarios anidados hasta X niveles: Activar esta opción para permitir a los visitantes responder a los comentarios de otros en modo anidado.
Separa los comentarios en páginas de X comentarios por página y se muestra la X página por defecto: Si tus entradas / páginas tienen gran cantidad de comentarios, es posible que desees dividir los comentarios en páginas. Puedes elegir el número de comentarios de primer nivel (comentarios anidados no se cuentan y no se dividen en dos páginas) para mostrar en cada página. También puedes elegir la página para mostrar de forma predeterminada cuando un visitante visualiza por primera vez los comentarios.
Los comentarios se ordenarán con los X al principio: Esta opción te permite invertir el orden de los comentarios. Puede visualizar los comentarios en orden ascendente o descendente.

3- Marca estas casillas si deseas que WP te avise cuando hay nuevos comentarios o comentarios en espera de moderar.

4- Tiene dos opciones diferentes. Si la primer casilla se activa, todos los comentarios tendrán que ser aprobados por el administrador. Si la segunda casilla es activada, todos los visitantes que han tenido un comentario aprobado en el blog en el pasado tienen ya la aprobación predeterminada.

5- Una casilla de gran utilidad ya que muchos comentarios spam incluye un gran número de enlaces.
En el textarea puedes escribir caracteres y si coinciden con los que se encuentran en el comentario, el mismo entrara automáticamente en cola de espera hasta ser moderado.

6- Es muy similar a la lista de moderación, pero aquí el comentario se marca como spam en lugar de lugar de ir a la cola de moderación.

7- Visibilidad: Permite activar o desactivar los avatares de tu blog.
Calificación máxima: Se utiliza sólo cuando se muestra en pantalla un Gravatar del autor del comentario. Si deseas limitar el nivel de madurez de un avatar, puedes cambiar esta configuración.
Avatar por defecto: Se puede utilizar para elegir un logotipo genérico o un avatar generado por ordenador para los usuarios que no tienen su propio avatar.



Ajustes de medios (Multimedia)

(http://cridavcor.com.ar/imagenes/2012/10/de-0-a-wordpress-configuracion-multimedia.png)

1- Establece el tamaño mínimo con el cual las imágenes serán recortadas y redimensionadas.

2- Anchura máxima con la que se recortara la imagen. Deben tener en cuenta que si la imagen subida es menor a este tamaño se lograra un deformación de la misma.

3- El tamaño máximo puede ser de utilidad si la imagen que quieres publicar es por ejemplo un wallpapers, aunque cabe decir que una imagen de tantas dimensiones podría ralentizar la carga de la web.

4- Te da la opción para mostrar un reproductor de vídeo, con tan sólo escribir en la URL en formato de texto plano.

5- Puedes especificar el tamaño del vídeo.

6- Por defecto WP crea un directorio llamado uploads en wp-content y en el se alojan los archivos que subimos ya sea imágenes, pdf, etc, pero nos da la opción de cambiarlo si así lo deseamos. Por ejemplo podríamos crear un directorio llamado subidas en nuestro servidor. En la primer casilla debería ir la ruta absoluta donde se encuentra el directorio subidas y para que se den una idea pondré un EJ como pude ser dentro de un hosting: /home/usuario/public_html/subidas/ y en ruta completa a los archivos seria /subidas

7- Si marcamos esta casilla WP creara sub-directorios y organizara los archivos subidos por mes y año. Citando el ejemplo del punto 6 se vería de esta forma: /subidas/2012/11/nombre-de-archivo



Ajustes de privacidad

(http://cridavcor.com.ar/imagenes/2012/10/de-0-a-wordpress-configuracion-privacidad.png)

Esta opción se puede definir al instalar WP pero si no lo has hecho no te alteres que todo tiene solución.

Permitir que los buscadores indexen tu sitio: Permite a cualquiera leer tu blog y permite que sea incluido en los motores de búsqueda y otros sitios de contenido.
Dile a los buscadores que no indexen tu sitio: Puedes seleccionar que tu sitio no sea agregado por robots, servicios de ping y buscadores como Google, Yahoo, Altavista, etc.




Ajustes de los enlaces permanentes

(http://cridavcor.com.ar/imagenes/2012/10/de-0-a-wordpress-configuracion-enlaces-permanentes.png)

WordPress viene por defecto con un sistema de URLs interesante pero no muy efectivo para SEO por eso crearemos nuestros propios estilos de URLs enriquecidas, pero primero veamos un poco estos ajustes de enlaces permanentes.

Predeterminado: Como pueden ver el sistema que viene por defecto no es de los mejores que hay en la red www.wptaller.com/?p=123 Lo único que cambia siempre es la id numérica del post.

Día y nombre: Esta opción incluye la fecha y el titulo que se le dio a la publicación. www.wptaller.com/2012/12/11/titulo-post/

Mes y nombre: Esta opción incluye el mes y el titulo que se le dio a la publicación. www.wptaller.com/2012/12/titulo-post/

Numérico: Solo incluye la id del post www.wptaller.com/232

Nombre entrada: Solo incluye el titulo del post www.wptaller.com/titulo-post/

Estructura personalizada: Aquí podremos crear nuestras URLs personalizadas y para eso hay que saber que :
% = Comodín
/%day%/ = Día
/%monthnum%/ = Mes
/%year%/ = Año
/%postname%/ = Nombre del post (Titulo)
/%post_id%/ = Id del post
/%category%/ = Categoría

Aquí un ejemplo /%category%/%postname%/%post_id% = www.wptaller.com/categoria/titulo-post/123.

Nota: También le podemos asignar un texto cualquiera y una extensión como por ejemplo :
/%category%/%postname%/?id=%post_id%.htm = www.wptaller.com/categoria/titulo-post/?id=123.htm

Categoría base: Por defecto Wp asigana la palabra category a las URLs de las categorías por ejemplo si un post esta en la categoría PHP la URL podría ser como esta www.wptaller.com/category/php/

Etiqueta base: Cumple la misma función que categoría base.

Próximo tutorial: Crear y editar entradas.

<!-- Saludos -->
Título: Re:De 0 a WordPress [Taller 2]
Publicado por: JAG en Octubre 10, 2012, 12:15:07 pm
Gracias exotren!! Ha seguir dandole caña! jejejeje muchas gracias por el curro que estás haciendo... de verdad que nos ayudas a muchos... Saludos ;)
Título: Re:De 0 a WordPress [Taller 2]
Publicado por: <[Zoro]248> en Octubre 14, 2012, 01:49:46 am
Muchas Gracias Exotren... aun no termino el primero :D, pero ya espero terminar este para continuar aprendiendo mas..


<!-- Saludos -->
Título: Re:De 0 a WordPress [Taller 2]
Publicado por: 3V1L en Octubre 26, 2012, 08:33:03 pm
Excelente bro,  ojala siga la iniciativa!
Título: Re:De 0 a WordPress [Taller 2]
Publicado por: creepernex en Octubre 30, 2012, 09:47:48 am
Excelente bro,  ojala siga la iniciativa!

Si amigos seguiré con los talleres. Ando un poco escaso de tiempo por eso no eh terminado la 3er entrega. Son las 05:45 de ARG y ya estoy trabajando grgrgrgrrr.

P.D: Tenganme paciencia
Título: De 0 a WordPress [Taller 3]
Publicado por: creepernex en Noviembre 12, 2012, 04:24:17 pm
Estos tutoriales pretenden introducirles al manejo de WordPress, por ende utilizare un nivel básico para que todos los interesados puedan seguir los tutoriales sin problema alguno. El objetivo de estos talleres tutoriales apunta a que ustedes aprendan a instalar y manejar WordPress, por otro lado daré por sentado que tienen un mínimo conocimiento de PHP, JS, CSS, HTML y SQL entre otros.

Bienvenidos al tercer tutorial de WordPress, en esta ocasión vamos a ver como crear, editar y publicar entradas y páginas.



Crear entradas

(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-editor-entrada-new.png)

Como podrán apreciar en la imagen anterior WP viene integrado con un editor interno el cual podremos usar como editor VISUAL (WYSIWYG) o HTML , esto sera de gran utilidad para aquellos que son recién llegados a WP ya que por medio del editor visual les sera mas fácil editar y estilizar sus publicaciones.



Editor visual

Este editor es muy fácil de utilizar y no les sera difícil familiarizarse con los controles, pero para hacerlo mas facilito veamos un EJ:

(http://cridavcor.com.ar/imagenes/2012/11/de-0-a-wordpress-editor-visual.png)

A continuación les daré una descripción de los controles(botones) que podremos encontrar en el editor visual:

(http://cridavcor.com.ar/imagenes/2012/11/de-0-a-wordpress-editor-visual-botones.png)

1 Aquí podremos ver tres formatos diferentes con el que podremos resaltar nuestros textos.
Negrita
Código: [Seleccionar]
<strong></strong> Esto esta en negrita
Cursiva
Código: [Seleccionar]
<em></em>Esto esta en cursiva
Tachado
Código: [Seleccionar]
<del></del> Esto esta tachado

2 Con estos botones podremos crear listas ordenadas o desordenadas.
Lista ordenada
Código: [Seleccionar]
<ol></ol>

Lista sin ordenar
Código: [Seleccionar]
<ul></ul>

3 Cita es utilizado para resaltar un texto de otros autores.

Cita
Código: [Seleccionar]
<blockquote></blockquote>
Citar
¿Por qué quiere regalar Microsoft copias casi gratuitas (de su programa) a escuelas y niños?, es como regalar drogas adictivas, ya que la primera dosis es gratis pero, después de ser dependiente, tienes que pagar.
Para este ejemplo se a utilizado una cita de Richard Matthew Stallman (http://es.wikipedia.org/wiki/Richard_Matthew_Stallman)

4 Estos botones nos permitirán alinear el texto de acuerdo a nuestros intereses.
Alinear a la izquierda
Código: [Seleccionar]
<p style=”text-align: left;”></p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget rutrum ante. Sed sagittis nunc sit amet enim scelerisque interdum. Sed volutpat adipiscing felis, vel vestibulum purus convallis mollis. In consectetur mattis sem, venenatis gravida justo elementum quis. Aenean quis luctus ipsum.

Alinear al centro
Código: [Seleccionar]
<p style=”text-align: center;”></p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget rutrum ante. Sed sagittis nunc sit amet enim scelerisque interdum. Sed volutpat adipiscing felis, vel vestibulum purus convallis mollis. In consectetur mattis sem, venenatis gravida justo elementum quis. Aenean quis luctus ipsum.

Alinear a la derecha
Código: [Seleccionar]
<p style=”text-align: right;):”></p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget rutrum ante. Sed sagittis nunc sit amet enim scelerisque interdum. Sed volutpat adipiscing felis, vel vestibulum purus convallis mollis. In consectetur mattis sem, venenatis gravida justo elementum quis. Aenean quis luctus ipsum.

5 Estos botones nos permitirán insertar o editar un vinculo y tambien quitarlo.

6 Insertar etiqueta More (<!–more–>) nos permite cortar un publicación para que no sea tan extensa y al hacerlo mostrara el famoso y conocido Leer Más → para que los visitantes den clic si desean leer la publicación completa.

7 Activar o desactivar corrector nos permite verificar si tenemos errores ortográficos.

8 Este botón nos permite trabajar con el editor en pantalla completa.

9 Si pinchamos en el nos mostrara mas botones de edición que se describen a continuación.

10 El botón párrafo contiene formatos para nuestros textos entre los que podemos encontrar
Código: [Seleccionar]
<address></address>,<h1></h1>, <h2></h2>, etc.
11 Este botón proporciona un subrayado al texto.
Subrayado
Código: [Seleccionar]
<span style=”text-decoration: underline;”></span>Este texto esta subrayado.

12 Con el podremos justificar un texto.
Justificación completa
Código: [Seleccionar]
<p style=”text-align: justify;”></p>
13 Cambia el color de texto por el que mas te guste.
Elegir color de texto
Código: [Seleccionar]
<span style=”color: orange;”></span> Un color para mi texto

14 Estos botones nos permiten pegar un texto plano o sea formatear el texto y también podemos pegar desde Word con todos los estilos.

15 Elimina los formatos del texto.

16 Nos muestra un iframe con caracteres especiales y sus valores en HTML-code y NUM-code.

17 Nos permite agregar padding a nuestros textos o imagenes.
Texto sin padding:

Este texto no tiene padding.

Texto con un padding izquierdo de 90px
Código: [Seleccionar]
<p style=”padding-left: 90px;”></p>
                     Texto con padding

18 Botones para deshacer o rehacer.

19 Este botón brinda una pequeña ayuda para los recién llegados.

Nota: No hablare del editor HTML ya que daré por sentado que tienen conocimiento de este lenguaje.



Añadir imágenes a las publicaciones

Añadir una imagen a nuestra publicación es muy sencillo en WP, solo debemos pinchar en el icono que se encuentra sobre la caja de edición.
(http://cridavcor.com.ar/imagenes/2012/11/de-0-a-wordpress-insertar-imagenes.png)
Al hacer esto nos mostrara un iframe donde podemos elegir de donde cargar nuestra imagen ya sea desde nuestra PC, de otra URL, etc.



Editar y obtener enlaces cortos de las publicaciones

Si prestamos atención justo debajo de la caja del titulo post veremos que nos muestra un enlace con dos opciones (Editar y Obtener enlace corto), el botón Editar nos permite cambiar el formato del enlace por ejemplo: http://wptaller.com/blog/editar-enlace por el que nos guste a nosotros EJ: http://wptaller.com/blog/editenla-editado
Nota: Para esto tendríamos que haber reformado los enlaces permanentes que trae por defecto WP.
Obtener enlace corto nos mostrara una url corta para publicarla por ejemplo en twitter.



Extractos

Los Extractos de WordPress son resúmenes opcionales o descripciones de un artículo; simplemente un resumen del artículo.

Los Extractos tienen dos usos principales:

Reemplaza al contenido completo en los feeds RSS cuando la opción de mostrar resúmenes es seleccionada en Escritorio > Opciones > Lectura.
Dependiendo del tema de WordPress, puede ser mostrado en lugares donde resúmenes rápidos sean preferibles antes que el contenido completo:
Resultados de búsquedas
Archivos de etiquetas
Archivos de categorías
Archivos mensuales
Archivos de autor

Cómo agregar Extractos a tus artículos
Para agregar un extracto a un artículo, simplemente escribe uno en el campo Extracto debajo de la caja de edición del artículo. Un extracto puede ser tan corto o largo como desees.

(http://cridavcor.com.ar/imagenes/2012/11/de-0-a-wordpress-extracto-01.png)

Resultado

(http://cridavcor.com.ar/imagenes/2012/11/de-0-a-wordpress-extracto-02.png)



Creación de paginas

Las páginas son similares a los artículos en que tienen un título, cuerpo y meta-datos asociados, pero no deben confundirse por que estas a diferencia de los artículos son estáticas, tratare de resumir todo en un ejemplo ya que me parecen mas prácticos.

Vamos a Páginas > Todas la páginas, no encontraremos con una página llamada Página de ejemplo que viene por defecto en WP, si pasamos el puntero por encima veremos que salen 4 opciones (Editar, Edición rápida, Papelera, Ver) pinchamos en Editar y reformaremos a nuestro gusto, en mi caso creare una página llamada About.
Reformamos el titulo y el contenido, en caso de que hayamos reformado los enlaces permanentes de nuestro de WP tendremos que editar el enlace permanente de la pagina como hicimos con las publicaciones, una ves echo esto damos clic en Actualizar y ya tenemos nuestra página About.

Próximo tutorial: Temas y Plugins.

<!-- Saludos -->

Citar
Agradecería que las preguntas las hagan aquí y no por MP ya que no serán respondidas, esto es un foro y sus preguntas pueden ayudar a otros. creo que los administradores y moderadores estarán de acuerdo
Título: Re:De 0 a WordPress [Taller 3]
Publicado por: JAG en Noviembre 12, 2012, 05:03:40 pm
Vaya exotren!! Te estás currando estos talleres bastante! Parece que ahora viene el que más me interesa jejejee el de "Temas y plugins" estaré pendiente. Ahora de que termine de estudiar le daré una buena leída al post,  muchas gracias de nuevo! Saludos ;)
Título: Re:De 0 a WordPress [Taller 3]
Publicado por: White Rabbit en Noviembre 12, 2012, 05:06:44 pm
Lo estaba esperando :)
Título: Re:De 0 a WordPress [Taller 1]
Publicado por: White Rabbit en Noviembre 12, 2012, 05:10:37 pm
Paso a poner este y los demás post similares a fijo.
Título: Re:De 0 a WordPress [Taller 3]
Publicado por: creepernex en Noviembre 12, 2012, 05:18:49 pm
Realmente no sabia como encarar los talleres porque como a muchos les debe pasar, se como hacer las cosas pero no como explicárselo a otras personas, si lo ases mu técnico no hay lugar para quienes desconocen por completo este sistema y si lo haces muy descriptivo se torna lento y aburrido.

P.D: Luego de los temas y plugins crearemos dos temas (1 simple para introducción y el 2do mas avanzado) y terminara estos talleres con seguridad en WP.

 ;D  ;)

Gracias por comentar.
Título: Re:De 0 a WordPress [Taller 3]
Publicado por: White Rabbit en Noviembre 12, 2012, 05:19:39 pm
Realmente no sabia como encarar los talleres porque como a muchos les debe pasar, se como hacer las cosas pero no como explicárselo a otras personas, si lo ases mu técnico no hay lugar para quienes desconocen por completo este sistema y si lo haces muy descriptivo se torna lento y aburrido.

P.D: Luego de los temas y plugins crearemos dos temas (1 simple para introducción y el 2do mas avanzado) y terminara estos talleres con seguridad en WP.

 ;D  ;)

Gracias por comentar.

Excelente :), buen trabajo!
Título: Re:De 0 a WordPress [Taller 3]
Publicado por: Neutron en Noviembre 12, 2012, 06:07:38 pm
Estan excelente, gracias bro.


Saludos!
Título: Re:De 0 a WordPress [Taller 3]
Publicado por: ACK en Noviembre 12, 2012, 07:20:59 pm
Muy buenos los talleres Exotren, excelentes aportes, se agradecen!

Saludos familia! ;)
Título: Re:De 0 a WordPress [Taller 3]
Publicado por: <[Zoro]248> en Noviembre 12, 2012, 11:16:29 pm
Excelente trabajo, estan muy interesantes y educativos tus aportes exotren, Gracias por aportar


<!-- Saludos -->
Título: Re:De 0 a WordPress [Taller 1]
Publicado por: Bryan20 en Noviembre 13, 2012, 11:09:33 pm
Muy bueno Brother.
Ya habia trabajado wordpress pero jejeje Veo que no sabia mucho de el. xD!


Salu2
Título: De 0 a WordPress [Taller 4]
Publicado por: creepernex en Noviembre 28, 2012, 06:42:52 pm
(http://cridavcor.com.ar/imagenes/2012/09/de-0-a-wordpress-570x210.gif)

Estos tutoriales pretenden introducirles al manejo de WordPress, por ende utilizare un nivel básico para que todos los interesados puedan seguir los tutoriales sin problema alguno. El objetivo de estos talleres tutoriales apunta a que ustedes aprendan a instalar y manejar WordPress, por otro lado daré por sentado que tienen un mínimo conocimiento de PHP, JS, CSS, HTML y SQL entre otros.

Bienvenidos al cuarto tutorial de WordPress, en esta ocasión vamos a aprender a instalar, personalizar y editar los temas de WordPress, también veremos como descargar e instalar plugins.



WordPress Themes(temas)

Como instalar un tema en WordPress: Cuando instalamos WP este utiliza el tema TwentyEleven por defecto, pero que pasa si no queremos utilizar este tema o bien queremos personalizarlo pues en WP no es una tarea difícil y para cuando termine este taller ustedes verán que no les eh mentido.
Algunas cosas que debemos de tener en cuenta al hora de elegir un tema para nuestro WP son que no todos los temas son multi-idioma ya que la mayoría son en ingles, también debemos tener en cuenta que si no sabemos programar debemos buscar un tema que sea lo mas personalizable posible o contratar un diseñador web, también deben saber que hay ocasiones en las que los plugins que queremos utilizar no son compatibles con algunos temas.
No los aburro más así que manos a la obra.



Instalar temas desde WordPress

1- Entramos como administrador y nos dirigimos a Apariencia -> Temas

(http://cridavcor.com.ar/imagenes/2012/11/de-0-a-wordpress-apariencia-temas.png)

2- En esta sección tenemos dos pestañas Administrar temas e Instalar temas. En la pestaña Administrar temas veremos el tema que estamos usando actualmente y los temas que tenemos instalados mientras que en Instalar temas tenemos barias opciones:
Buscar: Nos permitirá buscar un tema en el repositorio de temas WordPress ademas tiene un sistema de filtrados como colores, columnas, ancho, etc.
Subir: Esta opción nos permite subir un tema que previamente hayamos descargado desde otro sitio y lo tenemos alojado en nuestro PC. Solo se permite subir los temas comprimidos en formato ZIP.
Destacados: Nos muestra una galería con los temas mas usados y descargados, también nos permite instalar solo basta con clicar Instalar ahora.
Recientes: Muestra una galería con los últimos temas añadidos al repositorio.
Actualizados recientes: Muestra una galería con los temas que han sido actualizados recientemente.

(http://cridavcor.com.ar/imagenes/2012/11/de-0-a-wordpress-administrar-temas-300x271.png) (http://cridavcor.com.ar/imagenes/2012/11/de-0-a-wordpress-administrar-temas.png)Clic para ampliar

(http://cridavcor.com.ar/imagenes/2012/11/de-0-a-wordpress-instalar-temas-300x239.png) (http://cridavcor.com.ar/imagenes/2012/11/de-0-a-wordpress-instalar-temas.png)Clic para ampliar

3- Nos vamos a Instalar temas e ingresamos los parámetro que nos interesa como por Ej:

(http://cridavcor.com.ar/imagenes/2012/11/de-0-a-wordpress-instalar-temas01-300x236.png) (http://cridavcor.com.ar/imagenes/2012/11/de-0-a-wordpress-instalar-temas01.png)Clic para ampliar

Yo eh elegido el tema Martin (Por Themestown), como verán podemos instalarlo, probarlo o ver sus detalles.
Le damos clic a Instalar ahora y automáticamente nos mostrara algo como esto:

(http://cridavcor.com.ar/imagenes/2012/11/de-0-a-wordpress-instalar-temas02.png)

Una vez activado podremos ver que en Apariencia(barra lateral) hay mas opciones (Opciones de tema, cabecera, fondo, etc). Deben tener en cuenta que las opciones de personalización irán de acuerdo al tema que estén usando ya que algunos son menos personalizables que otros y hasta hay casos en que no son personalizables.



Instalar temas alojados en el PC

Es muy sencillo de hacer solamente hay que recordar subir nuestro tema como nombreTema.zip.

Veamos un rápido ejemplo de como hacerlo:

1- Si hemos descargado un tema de algún sitio web de seguro que ya esta en formato ZIP, de lo contrario lo comprimimos con 7zip, PeaZip, AZip, etc.

2- Nos vamos a AparienciaInstalar temasSubir y buscamos el tema en el PC, una ves echo esto so queda pinchar en Instalar ahora.



Instalar temas vía FTP

Para poder subir el tema por FTP debemos utilizar un cliente FTP como FileZilla, Cyberduck, FireFTP, etc.
Una ves establecida la conexión con el servidor nos dirigimos a wp-content/themes

(http://cridavcor.com.ar/imagenes/2012/11/de-0-a-wordpress-instalar-temas03.png)

Una ves subido el tema solo resta ir AparienciaAdministrar temas y lo instalamos.



Plugins

Los plugins amplían las funcionalidades de WordPress.

La instalación de estos es muy similar a la de temas ya que la única diferencia es que hay que alojarlos en /wp-content/plugins y para que el plugins funcione debemos ir PluginsPlugins instalados y le damos activar.

En esta parte del taller no indagare sobre el uso de estos y su instalación ya que como comente anteriormente no hay diferencia con la instalación de temas.
Si bien lo plugins nos facilitan el trabajo, no es recomendable abusar de su uso ya que al tener gran cantidad de ellos instalados generaran peticiones adicionales de HTTP lo cual puede ralentizar tu web, por otro lado están lo plugins mal desarrollados o desactualizados que no solo pueden saturar de peticiones tu web si no hasta generar agujeros de seguridad.



Próximo tutorial: Crearemos el primer tema para WordPress.

<!-- Saludos -->
Título: De 0 a WordPress [Taller 5]
Publicado por: creepernex en Diciembre 16, 2012, 08:36:13 pm
Estos tutoriales pretenden introducirles al manejo de WordPress, por ende utilizare un nivel básico para que todos los interesados puedan seguir los tutoriales sin problema alguno. El objetivo de estos talleres tutoriales apunta a que ustedes aprendan a instalar y manejar WordPress, por otro lado daré por sentado que tienen un mínimo conocimiento de PHP, JS, CSS, HTML y SQL entre otros.

Bienvenidos al quinto tutorial de WordPress, en esta ocasión vamos a crear nuestro primer tema para WordPress el cual sera solo a base de CSS.

Herramientas para este taller:
Servidor Web Local: XAMPP (http://v), LAMPP (http://www.apachefriends.org/en/xampp-linux.html), AppServ (http://www.appservnetwork.com/), WampServer (http://www.wampserver.com/en/), etc.
IDE: AptanaStudio (http://www.aptana.com/), SublimeText (http://www.sublimetext.com/), notepad++ (http://notepad-plus-plus.org/), Programmer’s Notepad (http://www.pnotepad.org/), PSPad (http://www.pspad.com/es/), Gedit (http://projects.gnome.org/gedit/index.html), KompoZer (http://www.kompozer.net/), etc.



Para comenzar a crear temas para WP será necesario tener conocimiento en PHP, HTML, CSS y JavaScript, pero de momento vamos no utilizaremos JavaScript ya que se trata de un tema muy básico que servirá de base para entender como el funcionamiento de los mismos.
Antes de comenzar a escribir código es necesario que se familiaricen un poco con la anatomía de los temas de WP o de lo contrario sera muy difícil de entender su funcionamiento.

A continuación mostrare los archivos mínimos que se necesitan para que un tema funcione correctamente.

index.php: Este archivo contiene referencias a las demás plantillas.
header.php: Contiene información que se encuentra en head (HTML).
sidebar.php: Contiene información de la barra lateral, la cual puede estar de lado izquierdo, derecho o en ambos.
footer.php: Contiene toda la información que se muestra en el pie de página y cabe destacar que este cierra las etiquetas body y html.
single.php: Contiene solo la publicación, en pocas palabras es quien se esconde detras del popular Leer Más>>
page.php: Este archivo es el encargado de manipular y mostrar las páginas estaticas.
comments.php: Este archivo solo contiene el formulario para que los visitantes puedan comentar.
search.php: Muestra los resultados de una búsqueda por medio del buscador interno de WP.
functions.php: Con el podemos añadir funciones especiales a nuestros temas.
404.php: Este archivo solo mostrara el conocido error 404.

Para mas informacion les recomiendo que visiten:

http://yoast.com/wordpress-theme-anatomy/

http://codex.wordpress.org/Theme_Development

A continuación crearemos un sencillo template HTML el cual iremos comentando.

Código: [Seleccionar]
<!--//// Aquí comienza el archivo [header.php] ////-->
<!DOCTYPE HTML>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>WPTaller</title>
        <link href="#" rel="stylesheet"><!-- css -->
        <!--//** Compatibilidad de HTML5 con navegadores antiguos **//-->
        <!--[if IE]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <div id="wrapper"><!-- #wrapper -->
            <header><!-- header -->
                <hgroup><!-- hgroup -->
                    <h1></h1>
                    <h2></h2>
                </hgroup><!-- fin hgroup -->
                <nav><!-- nav -->
 
                </nav><!-- fin nav -->
            </header><!-- fin header -->
             
            <!--//// Aquí termina el archivo [header.php] ////-->
             
            <!--//// Aquí comienza el archivo [index.php] ////-->
             
            <section id="contenedor"><!-- section #contenedor -->
                <section id="contenido"><!-- section #contenido -->
                    <article>
                         
                    </article>
                                 
                </section><!-- fin section #contenido -->
                 
                <!--//// Aquí comienza el archivo [sidebar.php] ////-->
                 
                <aside id="sidebar"><!-- aside #sidebar -->
                     
                </aside><!-- fin aside #sidebar -->
                 
                <!--//// Aquí termina el archivo [sidebar.php] ////-->
                 
            </section><!-- fin section #contenedor -->
             
            <!--//// Aquí termina el archivo [index.php] ////-->
             
            <!--//// Aquí comienza el archivo [footer.php] ////-->
             
            <footer><!-- footer -->
                 
            </footer><!-- fin footer -->
        </div><!-- fin #wrapper -->
    </body>
</html>
<!--//// Aquí termina el archivo [footer.php] ////-->

Como podrán apreciar en el código anterior eh comentado cada parte para que se den una idea de como dividiremos el template en diferentes archivos.

A continuación agregaremos un titulo, una descripción de nuestro blog y la barra de navegación dentro del HEADER remplazando este fragmento de código:

Código: [Seleccionar]
<header id="top-header"><!-- header #top-header -->
    <hgroup><!-- hgroup -->
        <h1></h1>
        <h2></h2>
    </hgroup><!-- fin hgroup -->
    <nav><!-- nav -->
    </nav><!-- fin nav -->
</header><!-- fin header -->

Por este otro

Código: [Seleccionar]
<header id="top-header"><!-- header #top-header -->
    <hgroup><!-- hgroup -->
        <h1><a href="#">WPTaller</a></h1>
        <h2>De 0 a WordPress</h2>
    </hgroup><!-- fin hgroup -->
    <nav><!-- nav -->
        <ul>
            <li><a href="#">INICIO</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">CONTACTO</a></li>
        </ul>
    </nav><!-- fin nav -->
</header><!-- fin header -->

Si todo va perfecto deberán obtener algo similar a esto DEMO (http://cridavcor.com.ar/demo/demowptheme/demo1.html)

El siguiente paso sera introducir un poco de contenido dentro de #CONTENEDOR y del #SIDEBAR

Código: [Seleccionar]
<section id="contenedor"><!-- section #contenedor -->
    <section id="contenido"><!-- section #contenido -->
        <article>
            <header>
                <h1><a href="#">Lorem ipsum dolor sit amet</a></h1>
                <time datetime="2012-12-03">3 de diciembre de 2012</time>
            </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum tincidunt enim, ac tempor elit semper pulvinar. Etiam vehicula placerat laoreet. Sed a facilisis urna. Nullam fermentum suscipit leo, nec auctor urna aliquet a. Ut mattis felis at arcu rhoncus sit amet congue lorem congue. Vivamus iaculis leo at sem condimentum lacinia. Fusce sed nunc sit amet lacus luctus tincidunt eget in velit. Vivamus sit amet nisl at dui congue tempor. Donec blandit imperdiet turpis, sed elementum metus vestibulum nec. Donec porttitor aliquam mauris eget varius...<br/><a class="leermas" href="#">Leer M&aacute;s</a></p>
        </article>
        <article>
            <header>
                <h1><a href="#">Lorem ipsum dolor sit amet</a></h1>
                <time datetime="2012-12-03">3 de diciembre de 2012</time>
            </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum tincidunt enim, ac tempor elit semper pulvinar. Etiam vehicula placerat laoreet. Sed a facilisis urna. Nullam fermentum suscipit leo, nec auctor urna aliquet a. Ut mattis felis at arcu rhoncus sit amet congue lorem congue. Vivamus iaculis leo at sem condimentum lacinia. Fusce sed nunc sit amet lacus luctus tincidunt eget in velit. Vivamus sit amet nisl at dui congue tempor. Donec blandit imperdiet turpis, sed elementum metus vestibulum nec. Donec porttitor aliquam mauris eget varius....<br/><a class="leermas" href="#">Leer M&aacute;s</a></p>
        </article>
        <article>
            <header>
                <h1><a href="#">Lorem ipsum dolor sit amet</a></h1>
                <time datetime="2012-12-03">3 de diciembre de 2012</time>
            </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum tincidunt enim, ac tempor elit semper pulvinar. Etiam vehicula placerat laoreet. Sed a facilisis urna. Nullam fermentum suscipit leo, nec auctor urna aliquet a. Ut mattis felis at arcu rhoncus sit amet congue lorem congue. Vivamus iaculis leo at sem condimentum lacinia. Fusce sed nunc sit amet lacus luctus tincidunt eget in velit. Vivamus sit amet nisl at dui congue tempor. Donec blandit imperdiet turpis, sed elementum metus vestibulum nec. Donec porttitor aliquam mauris eget varius....<br/><a class="leermas" href="#">Leer M&aacute;s</a></p>
        </article>
     
    <div id="nexpost"><a href="#">&laquo;Entradas m&aacute;s recientes</a>    <a href="#">Entradas antiguas &raquo;</a></div>
     
    </section><!-- section #contenido -->
    <aside id="sidebar"><!-- aside #sidebar -->
        <div class="widget">
            <h3>Categor&iacute;as</h3>
                <ul>
                    <li><a href="#">Categor&iacute;a 1</a></li>
                    <li><a href="#">Categor&iacute;a 2</a></li>
                    <li><a href="#">Categor&iacute;a 3</a></li>
                    <li><a href="#">Categor&iacute;a 4</a></li>
                    <li><a href="#">Categor&iacute;a 5</a></li>
                </ul>
        </div>
        <div class="widget">
            <h3>Categor&iacute;as</h3>
                <ul>
                    <li><a href="#">Categor&iacute;a 1</a></li>
                    <li><a href="#">Categor&iacute;a 2</a></li>
                    <li><a href="#">Categor&iacute;a 3</a></li>
                    <li><a href="#">Categor&iacute;a 4</a></li>
                    <li><a href="#">Categor&iacute;a 5</a></li>
                </ul>
        </div>
        <div class="widget">
            <h3>Categor&iacute;as</h3>
                <ul>
                    <li><a href="#">Categor&iacute;a 1</a></li>
                    <li><a href="#">Categor&iacute;a 2</a></li>
                    <li><a href="#">Categor&iacute;a 3</a></li>
                    <li><a href="#">Categor&iacute;a 4</a></li>
                    <li><a href="#">Categor&iacute;a 5</a></li>
                </ul>
        </div>
    </aside><!-- fin aside #sidebar -->
                                     
</section><!-- fin section #contenedor -->

Pueden comparar su resultado con este DEMO (http://cridavcor.com.ar/demo/demowptheme/demo2.html)

Ahora solo nos resta agregar algo al FOOTER, noce ustedes pero yo solo pondré el copyright

Código: [Seleccionar]
<footer><!-- footer -->
    <p>&copy; copyright 2012 WPTalleres</p>
</footer><!-- fin footer -->

Ya tenemos nuestro HTML pero ahora falta darle estilos, así que lo primero que aremos sera resetear las etiquetas HTML.
Creamos un archivo llamado style.css y ponemos esto:

Código: [Seleccionar]
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Citar
Este codigo fue obtenido de la pagina personal de Eric Meyer (http://es.wikipedia.org/wiki/Eric_Meyer): meyerweb.com (http://meyerweb.com/eric/tools/css/reset/)

Ahora seguiremos por dar unos estilos básicos y el HEADER

Código: [Seleccionar]
body{
    font-family:Verdana, Arial, Helvetica, Sans-serif;
    font-size:16px;
    line-height:1.4;
    word-spacing:-0.1em;
    background-color:#333333;
}
 
a{
    text-decoration:none;
    color:#DD4814;
}
 
p{
    text-align:left;
}
 
div#wrapper{
    width:960px;
    margin:20px auto 20px auto;
    background-color:#FFFFFF;
}
 
header#top-header{
    width:100%;
    background-color:#772953;
    border-bottom:3px solid #DD4814;
    margin-bottom:10px;
}
 
hgroup{
    margin:5px 0 30px 30px;
}
 
hgroup h1 a{
    font-size:48px;
    font-weight:700;
    font-style:italic;
}
 
hgroup h1 a:hover{
    text-shadow:3px 3px 3px #000000;
}
 
hgroup h2{
    font-size:13px;
}
 
nav{
    width:100%;
    height:35px;
    padding:6px 0 0 0;
    background-color:#000000;
}
 
nav li{
    display:block;
    float:left;
    position:relative;
    margin:0 3px;
}
 
nav li a{
    display:block;
    padding:2px 5px;
}
 
nav li a:hover{
    background-color:#DD4814;
    border-radius:2px;
    color:#000000;
}

Ahora estilizaremos el resto del template.

Código: [Seleccionar]
section#contenedor{
    width:100%;
    margin:0 auto;
    overflow:hidden;
}
 
section#contenido{
    float:left;
    width:630px;
    margin:5px 15px;
}
 
aside#sidebar{
    float:right;
    width:300px;
}
 
aside#sidebar .widget{
    width:280px;
    margin:5px 10px;
}
 
article{
    margin:15px 0;
}
 
article header h1 a{
    font-size:18px;
    font-weight:700;
}
 
article header time{
    font-size:10px;
    background-color:#F7F6F5;
    padding:2px 1px;
    border-radius:2px;
}
 
.leermas{
    background-color:#DD4814;
    padding:3px 2px;
    border-radius:3px;
    color:#333333;
    font-weight:700;
}
 
.leermas:hover{
    background-color:#772953;
}
 
#nexpost{
    width:100%;
    float:left;
    margin:5px 0;
    text-align:center;
}
 
#nexpost a:hover{
    color:#000000;
    background-color:#DD4814;
}
 
footer{
    width:100%;
    margin:0 auto;
    clear:both;
    background-color:#000000;
    color:#F7F6F5;
    font-size:11px;
}
 
footer p{
    padding:10px 0;
    text-align:center;
}

Si todo quedo bien su resultado debera ser similar a este DEMO (http://cridavcor.com.ar/demo/demowptheme/demo3.html)



De HTML a WordPress

Ya hemos creado la plantilla web ahora viene lo mas importante y emocionante que es pasarla a WP, o sea que transformaremos una simple plantilla en un tema.

Lo primero sera ir a wp-content/themes y crear una carpeta con el nombre de nuestro tema, en este caso utilizare wptaller debiendo quedar así wp-content/themes/wptaller a continuación crearemos los siguientes archivos dentro de dicha carpeta: index.php, header.php, sidebar.php, footer.php y style.css.
Una ves que tengamos estos archivos comenzaremos a fragmentar la plantilla que aviamos creado anteriormente. En primer lugar copiaremos el siguiente código y lo pegaremos en HEADER.PHP

Código: [Seleccionar]
<!--//// Aquí comienza el archivo [header.php] ////-->
<!DOCTYPE HTML>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>WPTaller</title>
        <link href="style.css" rel="stylesheet"><!-- css -->
        <!--//** Compatibilidad de HTML5 con navegadores antiguos **//-->
        <!--[if IE]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <div id="wrapper"><!-- #wrapper -->
            <header id="top-header"><!-- header #top-header -->
                <hgroup><!-- hgroup -->
                    <h1><a href="#">WPTaller</a></h1>
                    <h2>De 0 a WordPress</h2>
                </hgroup><!-- fin hgroup -->
                <nav><!-- nav -->
                    <ul>
                        <li><a href="#">INICIO</a></li>
                        <li><a href="#">ABOUT</a></li>
                        <li><a href="#">CONTACTO</a></li>
                    </ul>
                </nav><!-- fin nav -->
            </header><!-- fin header -->
             
            <!--//// Aquí termina el archivo [header.php] ////-->

Luego el INDEX.PHP, pero no olviden que deben quitar el sidebar ya que este va en un archivo individual el cual es llamado desde el index.

Código: [Seleccionar]
<!--//// Aquí comienza el archivo [index.php] ////-->
 
<section id="contenedor"><!-- section #contenedor -->
    <section id="contenido"><!-- section #contenido -->
        <article>
            <header>
                <h1><a href="#">Lorem ipsum dolor sit amet</a></h1>
                <time datetime="2012-12-03">3 de diciembre de 2012</time>
            </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum tincidunt enim, ac tempor elit semper pulvinar. Etiam vehicula placerat laoreet. Sed a facilisis urna. Nullam fermentum suscipit leo, nec auctor urna aliquet a. Ut mattis felis at arcu rhoncus sit amet congue lorem congue. Vivamus iaculis leo at sem condimentum lacinia. Fusce sed nunc sit amet lacus luctus tincidunt eget in velit. Vivamus sit amet nisl at dui congue tempor. Donec blandit imperdiet turpis, sed elementum metus vestibulum nec. Donec porttitor aliquam mauris eget varius...<br/><a class="leermas" href="#">Leer M&aacute;s</a></p>
        </article>
        <article>
            <header>
                <h1><a href="#">Lorem ipsum dolor sit amet</a></h1>
                <time datetime="2012-12-03">3 de diciembre de 2012</time>
            </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum tincidunt enim, ac tempor elit semper pulvinar. Etiam vehicula placerat laoreet. Sed a facilisis urna. Nullam fermentum suscipit leo, nec auctor urna aliquet a. Ut mattis felis at arcu rhoncus sit amet congue lorem congue. Vivamus iaculis leo at sem condimentum lacinia. Fusce sed nunc sit amet lacus luctus tincidunt eget in velit. Vivamus sit amet nisl at dui congue tempor. Donec blandit imperdiet turpis, sed elementum metus vestibulum nec. Donec porttitor aliquam mauris eget varius....<br/><a class="leermas" href="#">Leer M&aacute;s</a></p>
        </article>
        <article>
            <header>
                <h1><a href="#">Lorem ipsum dolor sit amet</a></h1>
                <time datetime="2012-12-03">3 de diciembre de 2012</time>
            </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum tincidunt enim, ac tempor elit semper pulvinar. Etiam vehicula placerat laoreet. Sed a facilisis urna. Nullam fermentum suscipit leo, nec auctor urna aliquet a. Ut mattis felis at arcu rhoncus sit amet congue lorem congue. Vivamus iaculis leo at sem condimentum lacinia. Fusce sed nunc sit amet lacus luctus tincidunt eget in velit. Vivamus sit amet nisl at dui congue tempor. Donec blandit imperdiet turpis, sed elementum metus vestibulum nec. Donec porttitor aliquam mauris eget varius....<br/><a class="leermas" href="#">Leer M&aacute;s</a></p>
        </article>
     
    <div id="nexpost"><a href="#">&laquo;Entradas m&aacute;s recientes</a>    <a href="#">Entradas antiguas &raquo;</a></div>
                                     
</section><!-- fin section #contenedor -->
 
<!--//// Aquí termina el archivo [index.php] ////-->

A continuación pegaremos esto en SIDEBAR.PHP

Código: [Seleccionar]
<!--//// Aquí comienza el archivo [sidebar.php] ////-->
 
<aside id="sidebar"><!-- aside #sidebar -->
    <div class="widget">
        <h3>Categor&iacute;as</h3>
            <ul>
                <li><a href="#">Categor&iacute;a 1</a></li>
                <li><a href="#">Categor&iacute;a 2</a></li>
                <li><a href="#">Categor&iacute;a 3</a></li>
                <li><a href="#">Categor&iacute;a 4</a></li>
                <li><a href="#">Categor&iacute;a 5</a></li>
            </ul>
    </div>
    <div class="widget">
        <h3>Categor&iacute;as</h3>
            <ul>
                <li><a href="#">Categor&iacute;a 1</a></li>
                <li><a href="#">Categor&iacute;a 2</a></li>
                <li><a href="#">Categor&iacute;a 3</a></li>
                <li><a href="#">Categor&iacute;a 4</a></li>
                <li><a href="#">Categor&iacute;a 5</a></li>
            </ul>
    </div>
    <div class="widget">
        <h3>Categor&iacute;as</h3>
            <ul>
                <li><a href="#">Categor&iacute;a 1</a></li>
                <li><a href="#">Categor&iacute;a 2</a></li>
                <li><a href="#">Categor&iacute;a 3</a></li>
                <li><a href="#">Categor&iacute;a 4</a></li>
                <li><a href="#">Categor&iacute;a 5</a></li>
            </ul>
    </div>
</aside><!-- fin aside #sidebar -->
 
<!--//// Aquí termina el archivo [sidebar.php] ////-->

Para terminar pegaremos esto en FOOTER.PHP

Código: [Seleccionar]
            <!--//// Aquí comienza el archivo [footer.php] ////-->
             
            <footer><!-- footer -->
                <p>&copy; copyright 2012 WPTalleres</p>
            </footer><!-- fin footer -->
        </div><!-- fin #wrapper -->
    </body>
</html>
<!--//// Aquí termina el archivo [footer.php] ////-->

Ahora copiamos el style.css tal cual esta y lo ponemos en la misma carpeta con el resto de los archivo pero para que WordPress lo reconozca deberemos agregar el siguiente código en la cabecera del archivo.

Código: [Seleccionar]
/*
Theme Name: WPTaller5
Theme URI: http://wptaller.com
Author: Cristian
Author URI: http://cridavcor.com.ar
Description: Tema diseñado solo en css y utilizando la paleta de colores de GNU/Linux Ubuntu.
Version: 1
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

Bamos a administrar temas y activamos el nuestro tema.

(http://cridavcor.com.ar/imagenes/2012/12/de-0-a-wordpress-taller-5-1-cap1.png)

No se alarmen si lo único que ven son los textos de Lorem Ipsum, ya que solo esta mostrando el contenido que dejamos en la sección contenido <section id=”contenido”> pero esto lo solucionamos ahorita, para eso vamos al index.php y borramos todo lo que esta dentro de esta sección excepto lo que esta dentro de header:

Código: [Seleccionar]
<article>
    <header>
        <h1></h1>
        <time datetime=""></time>
    </header>
</article>

Ahora comenzaremos a introducir código dentro del HEADER.PHP pero para poder ver en el navegador lo que estamos asiendo introduciremos los siguientes códigos en el index.php:

Código: [Seleccionar]
<?php get_header();?>
<?php get_sidebar();?>
<?php get_footer();?>

Es códigos son lo encargados de llamar al header, sidebar y el footer, tal vez les resulte familiar ya que de seguro alguna ves han utilizado el include en PHP, una vez que han agregado estas funciones deben de tener algo así:

Código: [Seleccionar]
<?php get_header();?><?php // Esta función es la encargada de llamar al header.php ?>
            <!--//// Aquí comienza el archivo [index.php] ////-->
             
            <section id="contenedor"><!-- section #contenedor -->
                <section id="contenido"><!-- section #contenido -->
                    <article>
                        <header>
                            <h1></h1>
                            <time datetime=""></time>
                        </header>
                    </article>
                 
                <div id="nexpost"><a href="#">&laquo;Entradas m&aacute;s recientes</a>    <a href="#">Entradas antiguas &raquo;</a></div>
                 
                </section><!-- section #contenido -->
                 
                                 
<?php get_sidebar();?><?php // Esta función es la encargada de llamar al sidebar.php ?>
                 
            </section><!-- fin section #contenedor -->
             
            <!--//// Aquí termina el archivo [index.php] ////-->
             
<?php get_footer();?><?php // Esta función es la encargada de llamar al footer.php ?>

Ahorita pasamos a header.php y remplazamos todo por esto

Código: [Seleccionar]
<!--//// Aquí comienza el archivo [header.php] ////-->
<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
 
    <head>
        <meta charset="<?php bloginfo('charset'); ?>"><!-- meta -->
         <title><?php bloginfo('name'); ?></title><!-- titulo blog -->
        <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet"><!-- css -->
        <link rel="pingback" href="<?php bloginfo'pingback_url' ); ?>" /><!-- pingback -->
        <link rel="alternate" type="application/rss+xml" title="<?php bloginfo'name' ); ?>" href="<?php bloginfo'rss2_url' ); ?>" /><!-- rss -->
        <!--//** Compatibilidad de HTML5 con navegadores antiguos **//-->
        <!--[if IE]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <?php wp_head(); ?>
    </head>
    <body>
        <div id="wrapper"><!-- #wrapper -->
            <header id="top-header"><!-- header #top-header -->
                <hgroup><!-- hgroup -->
                    <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
                    <h2><?php bloginfo('description'); ?></h2>
                </hgroup><!-- fin hgroup -->
                <nav><!-- nav -->
                    <ul>
                        <li <?php if( is_home() ) : ?> class="current_page_item"<?php endif; ?>><a href="<?php bloginfo'url' ); ?>" title="<?php bloginfo'title' ); ?>">Inicio</a></li>
                        <?php wp_list_pages'title_li=&depth=1' ); ?>
                    </ul>
                </nav><!-- fin nav -->
            </header><!-- fin header -->
             
            <!--//// Aquí termina el archivo [header.php] ////-->

Les describiré un poco los códigos que estamos utilizando aquí:

Código: [Seleccionar]
<?php language_attributes(); ?>Muestra el idioma que estamos utilizando en html en este caco es español por lo tanto el resultado sera es-ES.
Código: [Seleccionar]
<?php bloginfo('charset'); ?>Muestra el conjunto de caracteres que esta utilizando nuestro blog.
Código: [Seleccionar]
<?php bloginfo('name'); ?>Muestra el nombre o titulo que le hemos asignado al blog cuando instalamos WordPress.
Código: [Seleccionar]
<?php bloginfo('stylesheet_url'); ?>Esta función se utiliza para llamar a la hoja de estilos (style.css)
Código: [Seleccionar]
<?php bloginfo'pingback_url' ); ?>Es función habilita el uso de pingback.
Código: [Seleccionar]
<?php bloginfo'rss2_url' ); ?>Muestra la URL del RSS 2.0.
Código: [Seleccionar]
<?php wp_head(); ?>Esta función es indispensable para el buen funcionamiento de nuestro blog ya que la mayoría de los plugins la utilizan como gancho (hook) para añadir elementos.
Código: [Seleccionar]
<?php bloginfo('url'); ?>Esta función devuelve la URL de nuestro blog http://localhost/wptaller.
Código: [Seleccionar]
<?php bloginfo('description'); ?>Devuelve la descripción de nuestro blog Otro sitio realizado con WordPress.
Código: [Seleccionar]
<li <?php if( is_home() ) : ?> class="current_page_item"<?php endif; ?>><a href="<?php bloginfo'url' ); ?>" title="<?php bloginfo'title' ); ?>">Inicio</a></li>
                        <?php wp_list_pages'title_li=&depth=1' ); ?>
Como podrán apreciar en esta función WP asigna una clase a la pagina que estamos viendo, para que el usuario sepa en que pagina esta, para ver su funcionamiento le daremos unos estilos
Código: [Seleccionar]
.current_page_item a{
    background-color:#DD4814;
    border-radius:2px;
    color:#000000;
}



Ahora pasemos al index.php

En primer lugar remplacemos todo el código de index.php por este

Código: [Seleccionar]
<?php get_header();?><?php // Esta función es la encargada de llamar al header.php ?>
            <!--//// Aquí comienza el archivo [index.php] ////-->
             
            <section id="contenedor"><!-- section #contenedor -->
             
                <section id="contenido"><!-- section #contenido -->
                <?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
                    <article>
                        <header>
                            <h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
                            <time datetime="<?php echo get_the_time('Y-m-d'); ?> <?php echo get_the_time(''$post->ID); ?>"><?php echo get_the_time('d \d\e F \d\e Y'); ?></time>
                            <?php the_excerpt(); ?>
                        </header>
                    </article>
                <?php endwhile; ?>
                <div id="nexpost"><?php next_posts_link('&laquo; Entradas Previas'?>
 
<?php previous_posts_link('Entradas Anteriores &raquo;'?></div>
                <?php else : ?>
                <?php endif; ?>
                </section><!-- section #contenido -->
                 
                                 
<?php get_sidebar();?><?php // Esta función es la encargada de llamar al sidebar.php ?>
                 
            </section><!-- fin section #contenedor -->
             
            <!--//// Aquí termina el archivo [index.php] ////-->
             
<?php get_footer();?><?php // Esta función es la encargada de llamar al footer.php ?>

Ya es suficiente por hoy, les dejo el index para que ustedes lo analicen, si tienen que preguntar no lo duden.
En el próximo taller terminaremos el tema saludos.
Título: Re:De 0 a WordPress [Taller 5]
Publicado por: L05T en Febrero 01, 2013, 01:27:31 am
Muy interesante!
Justamente quiero ampliar conocimiento en este tema. Muchas gracias por estos talleres, seguimos al pendiente. Saludos!
Título: Re:De 0 a WordPress [Taller 5]
Publicado por: creepernex en Febrero 15, 2013, 02:42:52 am
Se que eh estado ausente y que me quede con el taller, pero os prometo que en cuanto este libre publico los 2 talleres restantes.

<!-- Saludos -->
Título: Re:TALLERES WORDPRESS
Publicado por: JAG en Marzo 05, 2013, 11:14:29 pm
Se que eh estado ausente y que me quede con el taller, pero os prometo que en cuanto este libre publico los 2 talleres restantes.

<!-- Saludos -->

Los esperamos con muchas ganas creepernex!!! ¿Te cambiaste el nick verdad? jejeje bueno, espero la continuación ya que están muy currados! Saludos
Título: Re:TALLERES WORDPRESS
Publicado por: mir08 en Junio 20, 2013, 01:11:43 am
donde puedo bajar themes gratuitos?
Título: Re:TALLERES WORDPRESS
Publicado por: Greed en Noviembre 11, 2013, 12:43:20 am
Hola creepernex, espero que te des un tiempo para publicar la continuación del Taller... Saludos! = )
Título: Re:TALLERES WORDPRESS
Publicado por: Chromeo en Octubre 15, 2014, 05:06:22 pm
Guau! La verdad es que estos talleres están super bien, cómo te lo has currado! Me va a servir mucho para mi página, hay algunas cosas que creía saber y parece que no sabía tan bien...