2 formas de modificar una plantilla WordPress sin saber programar

Vista la gran aceptación de otro post referente a cómo instalar una plantilla WordPress de forma sencilla, esta vez vamos a hablar de cómo modificar  una plantilla WordPress sin saber programar, o teniendo muy pocos conocimientos del lenguaje de diseño web, html y css.

En este post  vamos a explicar brevemente cómo modificar una plantilla Wordpres. Existen dos formas de hacerlo. A continuación explicaremos cómo modificar una plantilla o theme de WordPress ya existente:

1- De forma sencilla, a través del panel de administración de WordPress: es muy fácil de hacer de esta forma, ya que simplemente hay que ir al menú principal (Dashboard), después click-ar sobre Apariencia y allí mismo nos aparecerá la forma de personalizar la plantilla que tengamos. Esto en el caso del WordPress gratuito (.org).

modificar plantilla wordpress

En el caso de tener una página o blog de WordPress de pago o alojado en un hosting, la misma plantilla que hemos comprado nos dirá cómo modificar algunos aspectos como colores, diferentes estilos para tablas, formularios, modificar los banners o pasarelas de fotos, el index.php, etc. sin saber programación.

Compra tu hosting ahora (Soy afiliada ¡Gracias!)

2- De forma no tan sencilla, para esta opción necesitaremos tener conocimientos de html y css aunque sea mínimos para saber interpretar dónde se encuentra cada elemento y cada estilo concreto que queremos modificar.

Primero deberemos tener abierto el archivo style.css en Dreamweaver o cualquier otro programa para diseño de páginas web. Es recomendable ya que este programa de diseño si cometemos cualquier fallo como no cerrar un estilo, olvidarse de una coma, etc. nos aparecerá como error en la línea y podremos verlo mejor.

Segundo, deberemos abrir la página web tal y como se vería en el navegador en una pestaña. Si utilizamos Firefox, hay una herramienta muy útil que deberéis descargaros (solamente para Firefox): “Firebug”. En este enlace podréis descargaros la herramienta Firebug.

Una vez instalado en el navegador, aparecerá de la siguiente forma, en la parte superior derecha (aunque podréis personalizarlo y ponerlo en otra ubicación):

Firebug icon

Si tenemos abierta la página que ya está subida al servidor y tiene una url aunque sea de prueba (incluso con Apache sin subirla al hosting), abriremos la herramienta Firebug para click-ar sobre el elemento que queremos modificar. Por ejemplo imaginemos que quiero modificar el color de un banner de mi blog, clickaría con la herramienta Firebug para saber la ubicación que tiene en uno de los archivos de estilo css que tengo para mi plantilla de wordpress y saber dónde exactamente modificarlo. Click-aremos sobre el recuadro que se marca en rojo para que se active el seleccionar una parte concreta de la web:

firebug para modificar plantilla wordpress

Como vemos, hay una ventana que el propio Firebug nos ha abierto en la parte inferior del navegador Firefox para que sepamos qué elemento es en html el que seleccionamos. En la parte derecha nos indica cuál es la hoja de estilo que debemos de modificar (puede que haya varias), en qué línea del archivo está el estilo a modificar y los elementos que componen el estilo (color, tipo de letra, alineación, etc.).

Al seleccionar un elemento nos dirá exactamente cuál es. En este caso concreto he seleccionado el recuadro rojo que rodea el menú de lista de la parte superior de la web. En este caso querríamos cambiar el color rojo por otro. Por lo tanto lo seleccionaremos con la herramienta anteriormente indicada y miraremos con Firebug dónde está ubicada y en qué archivo de style.css:

modificar plantilla wordpress theme con css

Como vemos en el recuadro de la parte derecha, es un elemento de menú, en el “header” y es una lista “ul” y “li”. El “Background-color” es el color de fondo y al pasar por encima con el raton nos indicará qué color es el código hexadecimal indicado con la almohadilla #, en este caso rojo. Nos dice que está en la línea 2098 y para saber en qué hoja de estilo está, podemos click-ar sobre lo que aparece en color azul que es además donde nos indica la línea 2098.

Antes de ir a modificar el archivo css en Dreamweaver, haremos la prueba con Firebug. Para ello, hay que click-ar sobre CSS en la propia herramienta en la parte izquierda (antes estaba seleccionado el HTML), y modificaremos ahí el código hexadecimal para incluir otro color, en este caso lo modificamos directamente ahí y vemos el resultado:

modificar css con firebug en css

Por último haremos lo mismo buscando la línea 2098 en ese archivo de estilo CSS en Dreamweaver. Para que se materialice el cambio en nuestra página web o WordPress ahora deberemos subir de nuevo al “cpanel” de nuestro hosting ese archivo y reemplazarlo por el que existía antes con el mismo nombre y… ¡ya está!

¡Si te ha parecido interesante comparte este post!

Anuncios

Los 3 sencillos pasos para instalar una plantilla en WordPress

Tenemos dos formas de subir una plantilla para que nuestra página web o blog tenga una buena presencia. Disponemos tanto de plantillas gratuitas como de pago para instalar en nuestro CMS. En el post de hoy se mostrarán los pasos que hay que seguir para instalar la plantilla que queramos de forma sencilla, rápida y efectiva.

Para subir una plantilla a WordPress (a mano):

1. Descargarla o comprarla, (normalmente viene comprimida).

2. Descomprimir la carpeta en nuestro ordenador, copiarla y pegarla en nuestro dominio, vía FTP, a la siguiente carpeta wp-content/themes. Una vez subido aparecerá automáticamente en la lista de temas preinstalados y tendremos que elegirla como predeterminada en el apartado del panel de control de WordPress: apariencia—temas—activar.

Para subir una plantilla a WordPress (de forma automática y sencilla):

1. Descargarla o comprarla, (viene comprimida, la guardaremos en nuestro escritorio del ordenador).

2. Abrir la ruta: http://www.miweb.com/wp-admin/

Aparecerá a continuación la pantalla en la que tenemos que teclear nuestro usuario y contraseña, por lo que introduciremos los datos que nos piden.

3. El siguiente paso es ir al “Dashboard” y allí pinchar sobre el menú Apariencia, después click-amos sobre “Temas” y  en la parte superior, al lado de Buscar, click-amos sobre “Subir”, y aparecerá la siguiente pantalla. Solamente tendremos que darle al botón de “Examinar” y seleccionar el tema comprimido en .zip que tendremos guardado en nuestro escritorio.

instalar tema en WordPress

3. El último paso es Activar la plantilla en Apariencia y ¡ya está! A partir de este momento tendremos que empezar a crear las páginas, el menú, las entradas… etc. para crear la página web o nuestro blog.

Si queremos que nuestra plantilla esté personalizada tendremos que modicar el archivo style.css (puede haber más archivos de estilos .css), descargándolo del FTP en nuestro ordenador y modificando el código CSS en el bloc de notas o con el programa Adobe Dreamweaver. Para esta opción hay que tener un mínimo de conocimiento del código css.

Por último voy a comentaros que soy afiliada de Webempresa (hosting español muy bueno y con buen servicio al cliente) por lo que os paso este link a través del cual me darán un dinerillo (soy afiliada gracias) 😉 si les contratáis para vuestra página web. ¡Gracias!

Ir a Webempresa

Mini Manual para instalar WordPress de forma sencilla

MINI MANUAL WORDPRESS:

Para acceder al panel de administración:

http://www.tuweb.es/wp-admin/

Para visualizar la página web:

http://www.tuweb.es/nuevaweb/

Pasos para subir el CMS WordPress al hosting contratado:

  1. Bajarse la última versión del programa WordPress en la página oficial. http://es.wordpress.org/

descargar WordPress

2. Después de descargarse el CMS guardarlo en el escritorio o en una carpeta creada para ello. A continuación descomprimirlo en el escritorio o en la carpeta que hayamos creado en nuestro ordenador.

3. Lo siguiente es crear una BBDD en PhpMyAdmin, el proveedor del hosting/hospedaje debe facilitarnos, nombre de la BBDD, usuario de acceso y clave de acceso. Si es la primera vez que contratamos este hosting tendremos que crear una en el Hosting, pero normalmente disponemos un panel de control que seguramente tenga un asistente para crear la Base de Datos y no tendremos mas que seguir los pasos que nos indique.

cpanel hosting

4. Acceder mediante FTP (por ejemplo Cyberduck o Firezile) al hosting contratado y abrir la carpeta denominada normalmente httpdocs (o puede que web).

5. Creamos una carpeta con el nombre que queramos darle a la página web (el nombre del cliente, nuestro nombre, etc.).

6. Abrimos la carpeta que hemos descomprimido en el ordenador y todos los archivos que contiene los subimos al hosting a la carpeta creada con el nombre que le dimos en el paso anterior.

7. En la carpeta creada del hosting abrimos el archivo (primero la descargaremos a través del FTP): wp-config-example.php con Dreamweaver o el bloc de notas y modificamos los siguientes campos para asignar el nombre de la BBDD, usuario y clave que bien nos ha facilitado el proveedor de hosting o el que le hemos asignado nosotros al crear la BBDD.

archivo config.php

8. Después de modificar esos campos, renombramos este archivo llamándole: wp-config.php y lo subimos mediante FTP al hospedaje contratado.

9. Abrimos ahora en el navegador: http://tudominio.es/wp-admin/install.php

y vamos siguiendo los pasos que nos marque el WordPress como: nombre de usuario, nombre de la Base de Datos, usuario de acceso al CMS, contraseña, etc.

wordpress configuración

10. En el navegador nos pedirá el usuario y contraseña, por lo que le pondremos las que hemos creado anteriormente.

Ya estaremos entonces en el panel de control de WordPress desde nuestro hospedaje

El siguiente Post será cómo instalar una plantilla en WordPress… ¡seguidme y os llegará un aviso cuando lo publique!

Los 10 aspectos a tener en cuenta para el Posicionamiento Web Natural

Una de las técnicas de marketing online más difíciles e importantes al mismo tiempo para cualquier empresa que disponga de una página web es el Posicionamiento.

Hay dos tipos de posicionamiento:

  • SEO: Search Engine Optimization: posicionamiento natural o también llamado posicionamiento orgánico. Corresponde al que los buscadores asignan a cada página web, por medio de las palabras clave con las que los usuarios buscan los sitios web.
  • SEM: Search Engine Marketing: posicionamiento no orgánico o también denominado “de pago”. Corresponde a las técnicas y campañas de marketing realizadas a través de los motores de búsqueda para aumentar la visibilidad de una página web con unas palabras clave seleccionadas. Suelen aparecer en la parte superior y parte derecha de los resultados con un fondo de otro color.

Para los principales buscadores como Google, lo importante son los siguientes aspectos:

1. Lo importante siempre es el contenido de la página, por eso es tan elemental trabajar el marketing de contenidos y de calidad.
2. Las visitas cualificadas. Que nuestro portal sea muy visitado y permanezcan durante tiempo navegando, para los buscadores eso significará que nuestra página es de interés para las personas que acceden a ella y que han llegado a la misma por medio de una búsqueda con ciertas palabras clave en su portal, por ejemplo Yahoo.
3. Son muy importantes las palabras clave o meta tags incluidas en nuestra página web, porque nuestros usuarios o potenciales clientes nos buscarán por esas palabras introducidas en los buscadores. Además la descripción que hagamos sobre lo que aporta nuestra web, será determinante, porque será lo que aparezca en los resultados.
Posicionamiento Web4. Los enlaces de otras páginas populares hacia la nuestra. Los buscadores reconocen las páginas que son populares. Por ese motivo el inscribirse en muchos portales de directorios, listados de páginas web, etc. no significa que vayamos a tener un mejor posicionamiento orgánico.
5. Los buscadores como Google, penalizan las páginas que realizan técnicas ilicitas denominadas “Black Hat SEO” como son: cross-linking, registrar la web en directorios de granjas de enlaces, añadir texto oculto para los usuarios y que solamente sirve para los robots, etc. por lo que cuidado con lo que hacemos para intentar mejorar nuestro SEO.
6. Google por ejemplo penaliza los sitios web que utilizan “Cloaking” o “Encubrimiento”, esto es, tener una página web para buscadores con todas las etiquetas con las palabras clave para mejorar el posicionamiento y otra para que lo visiten los usuarios.

7. Para elegir nuestras palabras clave hay varias técnicas y herramientas, pero deberemos tener en cuenta las que tienen poca competencia, esto es, pocos resultados con esas palabras al realizar la búsqueda. Cuando hay más de un millón de resultados es muy difícil que consigamos aparecer entre los primeros puestos. Una forma de saber las palabras o frases más utilizadas por nuestros usuarios es mediante la analítica de la web o la herramienta AWStats por ejemplo (es gratuita), aunque tiene que estar instalada en nuestro servidor web.

8. Si finalmente decidimos contratar a una agencia o empresa especializada que nos mejore el posicionamiento natural, cuidado, no nos pueden asegurar el primer puesto nunca, tenerlo en cuenta y desconfiad cuando lo digan.

9. Estar muy atentos a los cambios de los principales buscadores, principalmente de Google, porque modifican sus algoritmos para el SEO muy a menudo, por eso es tan difícil permanecer en los primeros puestos y para ellos es una forma de evitar “trucos” por parte de las empresas para aparecer en los primeros resultados de las búsquedas.

10. Averiguar las palabras clave de los sitios web mejor posicionados de nuestro segmento de mercado. Google por ejemplo nos ayuda en ese sentido, porque si en nuestro navegador pulsamos sobre el botón “ver código fuente” podemos ver las palabras clave en la siguiente etiqueta= <meta name=”keywords” content= ——————>

Espero que os haya ayudado a recordar los aspectos importantes y que nunca debemos olvidar para posicionar mejor nuestra página web, porque aunque los conozcamos, los debemos de tener presentes todos los días.

¿Qué es la accesibilidad Web?

En uno de mis post expliqué e incluso expuse el código html para crear un boletín electrónico. En este post me centraré en la accesibilidad web, un término muy extendido pero poco entendido y muy importante de cara a nuestras páginas web.

accesibilidad webEl significado es el siguiente: “es la posibilidad de que un sitio Web pueda ser visitado y utilizado de forma satisfactoria por el mayor número posible de personas, independientemente de sus propias limitaciones o de las derivadas de su entorno.”

Se refiere a las barreras que hay en las páginas Web que impiden o entorpecen el acceso a la misma a las personas con algún tipo de discapacidad: visual, auditiva, dislexia, etc.

Los siete principios de la accesibilidad Web o “diseño universal” son los siguientes:

– Igualdad de uso

-Flexibilidad

-Simple o intuitivo

-Información fácil de percibir

-Tolerante a errores

-Escaso esfuerzo físico

-Dimensiones apropiadas

Las etiquetas que tenemos que tener en cuenta tanto para la accesibilidad web como el posicionamiento natural u orgánico son sobretodo las alternativas para las imágenes. Google interpreta las páginas como texto, por lo que las imágenes no las reconoce. Por ese motivo tenemos que acordarnos de hacer lo siguiente:

img src=”——–.png”   alt=”descripción de la imagen para que sepa Google lo que contiene”