Añadir estilo a la etiqueta “more” en WordPress

Es muy común el uso de la etiqueta "more" en WordPress, por lo mismo es muy útil agregarle estilo a esta etiqueta para mejorar la visualización de nuestro sitio.

Para hacerlo solo debemos modificar un poco el fichero index.php, o donde sea que se muestre esta etiqueta.

Primero que todo haz una copia de tu archivo index.php por si algo sale mal, ahora empezaremos por modificar una línea:

PLAIN TEXT
<?php the_content(); ?>

No necesariamente será identica a esa, pero sí será similar.

Ahora podemos agregar un texto, para personalizarlo un poco:

PLAIN TEXT
<?php the_content('Seguir leyendo...'); ?>

Por último podemos agregarle estilos CSS para personalizarlo aún más, para eso utilizaremos la etiqueta :

PLAIN TEXT
<?php the_content(__('<span class="more">Seguir leyendo...</span>'));?>

Para agregarle estilo usaremos el siguiente CSS:

PLAIN TEXT
.more {font-size: 12px; background: url(dirección de imágen) 2px;}

Sólo debes probar hasta que encuentres un estilo acorde a tu diseño.

Publicado el: 28/08/2009 Publicado en la Categoria: CSS, PHP, WordPress Imprimir este Artículo Imprimir
Comparte este artículo en Twitter Twitter Comparte este artículo en Menéame Menéame Agregar a tus favoritos de del.icio.us Delicious Agregar a tus favoritos de Technorati Technorati Votar en Bitácoras.com Bitácoras Enviar a Facebook Facebook

Post Relacionados


2 Comentarios en “Añadir estilo a la etiqueta “more” en WordPress”

  1. Gravatar
    giObanii

    Octubre 2nd, 2009 a las 9:26 pm
    Comentario:

    Bueno eso esta bien pero tambien es posible hacerlo solo con CSS de esta forma solo dandoles estilo al more-link

    .more-link {
    font-size: 12px;
    background: url(dirección de imágen) 2px;
    }

    /*Al pasar el cursor*/

    .more-link:hover {
    font-size: 12px;
    background: url(dirección de imágen) 2px;
    }

    que al parecer en worpress esto es lo mismo ya que he creado themes y esto no cambia ya que en primera instancia utilize el metodo que muestras pero en IE no me detectaba las lineas HTML asi que utilize este ultimo..

    Saludos..

    ReplyReply
  2. Gravatar
    JuanK

    Octubre 3rd, 2009 a las 2:32 pm
    Comentario:

    @giObanii: gracias por el aporte ;)

    Ahora mismo lo pruebo y si funciona bien se gana un post :B

    Nos vemos!

    ReplyReply

Deja un Comentario


Haz click en los emoticonos para usarlos:

:smile: :grin: :razz: :lol: :wink: :mrgreen: :neutral: :roll: :shock: :???: :cool: :oops: :twisted: :evil: :eek: :mad: :sad: :cry: :!:

Additional comments powered by BackType

«
»