
El modo en que se muestran los enlaces en un theme de WordPress se determina con la hoja de estilos del mismo. Cada plantilla de WordPress está codificada con ligeras variaciones pero una vez localizado el código es muy fácil de cambiarlas. Lo que voy a tratar en esta entrada es una sencilla guía que te dé una comprensión general acerca de como cambiar el aspecto y comportamiento de los enlaces en una plantilla de WordPress.
Antes de nada debes asegurarte de que los archivos del theme tengan permisos de escritura y puedas editarlos desde tu panel de administración. No obstante, en mi caso siempre prefiero editarlos desde el cliente FTP con la ayuda de mi editor de código favorito (Smultron). Los permisos correctos para editar estos archivos suelen ser 666, y estarán localizados en "wp-content/themes/tuplantilla".
Como decía antes, cada theme está codificado de distinto modo, y los enlaces en el título del blog, la cabecera, la barra lateral, pié de página o contenido, pueden tener estilos distintos en la hoja de estilos (normalmente el fichero llamado "style.css"). Elos enlaces básicos de la parte del contenido pueden ser algo así:
-
a {
-
color: #333366;
-
text-decoration: none;
-
}
-
-
a:visited {
-
color: #333366;
-
text-decoration: none;
-
}
-
-
a:hover {
-
color: #336699;
-
text-decoration: none;
-
}
El primer apartado corresponde a los enlaces normales (a), y verás que en la primera línea se define el color de los mismos, mientras que en la segunda puedes elegir si tendrá subrayado por defecto (underline) o sin subrayado (none). El segundo apartado, con la misma estructura, marcará el aspecto de los enlaces que ya haya visitado tu lector (visited) mientras que la última parte es la que añade estilo a tus enlaces cuando el visitante coloca el cursor sobre el mismo, y antes de hacer clic sobre el enlace (hover).
Otro ejemplo, este de los enlaces de cabecera, podría ser parecido a este:
-
#header a {
-
color: #333366;
-
text-decoration: none;
-
}
-
-
#header a:visited {
-
color: #333366;
-
text-decoration: none;
-
}
-
-
#header a:hover {
-
color: #336699;
-
text-decoration: none;
-
}
Fíjate de la llamada a la cabecera (header) antes de la llamada al enlace (a), esto especifica que el enlace es relativo a la cabecera, en concreto a los enlaces que aparezcan en la misma, normalmente referidos al título del blog.
También puedes encontrarte una sección dedicada a la barra lateral, en la que vendría marcada por su identificador (p.ej. "sidebar"), pero la estructura sería la misma que en los casos anteriores.
Por supuesto, antes de hacer cambios en tu hoja de estilo siempre es recomendable que hagas una copia de seguridad de la misma para poder recuperarla en caso de que no te guste el resultado de los cambios que realices.
Otro día tocaremos algún otro aspecto del CSS si te parece bien.














3 comentarios en “Aprender CSS – Modificando Enlaces”
interesante... y muy util
Justo lo que estaba buscando ademas de otras. porque los enlaces en la plantilla que elegi no se notan, es decir mantienen el mismo color del texto,, y tampoco tienen algun subrayado o algo que se note que es un enlace. Bueno vamos a ver si puedo hacerlo, de lo contrario tendre que seguir con la forma manual, dando color con el editor de texto.
Hola, sabes tengo un problema en el theme p2, que es que no he encontrado donde modificar el color de los links que estan naturalmente en celeste. Estoy creando con esa plantilla y no he podido modificar ese color que lo quiero cambiar por azul. Muchas gracias, este problema que hablo lo pueden ver en http://www.curto.com.uy/muro
Escribe un Comentario
Comentarios adicionales gracias BackType
Mucho hemos hablado de como asegurar WordPress pero cuando uno de mis blogs de cabecera en seguridad informática: Security by default, hace recomendaciones lo menos es tomarlas en cuenta. Personalmente me ha interesado mucho Plecost, que no conocía y que, además de hacer fingerprinting de la base de Wordpress que disponemos, reconoce los plugins y sus versiones y es capaz de mostrarnos vulnerabilidades con enlaces CVE incluidas en caso de encontrar algún plugin vulnerable. Interesantísimo.
[#8]
Donncha anunció la disponibilidad la versión 2.9.2 de WordPress MU, con solución a todos los fallos encontrados desde la última actualización. Esta versión, salvo necesidad, será la última versión de WordPress MU, ahora que WordPress 3.0 integrará ambas plataformas, ofreciendo la posibilidad de montar sistemas multiusuario a voluntad.
[#9]
BuddyPress 1.2 está prácticamente lista para lanzarse salvo que las pruebas de los usuarios digan lo contrario. Ya puedes descargarla y empezar a comprobarla (enlace al svn). En esta nueva versión se han cerrado más de 125 tickets desde la última beta.
[#3]
Último mensaje de: fendetestas
En el foro: General WordPress.org
Último mensaje de: tonii
En el foro: General WordPress.org
Último mensaje de: Li Chong
En el foro: Instalación / Actualización
Último mensaje de: inerxia
En el foro: bbPress - TalkPress
Último mensaje de: medievalia
En el foro: Programación
Acceder