Programación > Programación Web

TALLERES WORDPRESS

(1/7) > >>

creepernex:


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 y código modificable, tiene como fundador a 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



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 (versión en ingles) o www.es.wordpress.org (versión en español) esta ultima es la que estaré utilizando durante los talleres.



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: ---cd ./Descargas
--- Fin del código ---


--- Código: ---ls
--- Fin del código ---

2- Extraemos el archivo descargado en el directorio /opt:


--- Código: ---tar xvfz xampp-linux-1.8.0.tar.gz -C /opt
--- Fin del código ---

3- Damos permisos para poder modificar el directorio /opt/htdocs:


--- Código: ---sudo chmod a+w /opt/lampp/htdocs
--- Fin del código ---

4- Creamos un enlace simbólico entre el directorio htdocs y una ubicación en nuestra carpeta personal:


--- Código: ---mkdir ~/wptaller
--- Fin del código ---
Este comando creara el directorio en este caso wptaller.

Con este comando enlazaremos el directorio wptaller con htdocs


--- Código: ---sudo ln -s ~/wptaller /opt/lampp/htdocs/$USER
--- Fin del código ---

Comandos para utilizar Xampp:

Iniciar XAMPP:

--- Código: ---sudo /opt/lampp/lampp start
--- Fin del código ---
Reiniciar XAMPP:

--- Código: ---sudo /opt/lampp/lampp restart
--- Fin del código ---
Detener XAMPP:

--- Código: ---sudo /opt/lampp/lampp stop
--- Fin del código ---
Para mas comandos véase:

--- Código: ---sudo /opt/lampp/lampp help
--- Fin del código ---

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



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.





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





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


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.



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.




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:



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



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.



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.



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.



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.



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



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.



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

JAG:
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!!

creepernex:

--- Cita de: 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!!

--- Fin de la cita ---

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.

<[Zoro]248>:
Se puede, como decirlo que el worpress que tengo este en un hosting gratuito?,

creepernex:

--- Cita de: Zoro248 en Septiembre 25, 2012, 08:26:42 pm ---Se puede, como decirlo que el worpress que tengo este en un hosting gratuito?,

--- Fin de la cita ---

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

Navegación

[0] Índice de Mensajes

[#] Página Siguiente

Ir a la versión completa