Tips & hacks Wordpress theme

Publicado por Nikko el dia 30 Nov 2008 - Guardado en CSS, Diseño Web, WordPress Leido 3,661 Veces

Hace tiempo que llevo marcado en navegador un artículo que deseaba comentar, Tips and hacks for creating your own Wordpress theme, algunos tips básicos y avanzados que ayudaran a personalizar sus diseños basados en Wordpress. Algunos de ellos, sin duda sacara algunas de sus dudas. Leer mas tips

Hacer referencia a las imágenes de su Theme
Hacer referencia a las imágenes en su hoja de estilos (style.css)

CSS:
background:url(images/myimage.gif)

Hacer referencia a las imágenes desde nuestra plantilla

HTML:
<img src="<?php bloginfo('template_directory'); ?>/images/myimage.gif" alt="" />

Poner el nombre de la página actual seguido por un guión.

1.jpg

PHP:
<?php wp_title(' - ',true,'right');?>Freelance Web Design

Tags fantasías

2.jpg

Configure su lista de etiquetas.

PHP:
<?php the_tags('<ul class="tags clearfix"><li>', '</li><li>', '</li></ul>'); ?>

Lograr algo como

PHP:
<ul class="tags">
    <li><a rel="tag" href="http://www.leemunroe.com/tags/cms/">CMS</a></li>
</ul>

A continuación, aplicar algunos estilos CSS

CSS:
ul.tags{
list-style: none;
margin:0;
}
ul.tags li{
display: inline;
}
ul.tags li{
display:block;
float:left;
padding-left:12px;
background:url(images/tag.gif) left no-repeat;
margin:0 5px 5px 0;
}
ul.tags li a{
display:block;
float:left;
height:22px;
padding:3px 12px 0 0;
background:url(images/tag.gif) right no-repeat;
}

Personalizar leer más

sin-titulo-4.jpg

Personalizar el enlace "Leer más" que separa a su post. En su index.php, donde dice:

PHP:
<?php the_content(); ?>

Coloque el texto que usted desea para su enlace.

PHP:
<?php the_content('Read this article'); ?>

Aplicar algunos estilo CSS para la misma.

CSS:
.more-link{
padding:10px;
background:#3c3028;
font-weight: bold;
float: right;
}

Destacar comentarios del autor

4.jpg

Añadir Authcomment estilo.

CSS:
.authcomment{ background:#fff; }

comments.php tiene una línea como esta:

PHP:
<li class=”<?php echo $oddcomment; ?>” id=”comment…

Cambiar por estas lineas:

PHP:
<li class=”<?php
/* Only use the authcomment class from style.css if the user_id is 1 (admin) */
if (1 == $comment->user_id)
$oddcomment = “authcomment”;
echo $oddcomment;
?>” id=”comment…

Puedes encontrar muchos mas tips aqui: Tips and hacks for creating your own Wordpress theme

Publicado por Nikko

Soy un diseñador y desarrollador web situado en la Patagonia Argentina. Disfruto testear y conocer nuevos scripts, además de experimentar nuevas técnicas tanto en impresión como en desarrollo web. Como propietario de Patagonia Creative, divido mi tiempo entre la empresa, trabajos para Pymes, ONG y Gob. ////////// Facebook / linkedin / xing

Nikko ha publicado 1142 posts en Xyberneticos - Leer todos mis articulos Nikko

  1. [...] Xyberneticos: Tips and hacks Wordpress Theme [...]

  2. jacborus - Gravatar

    jacborus

    30-11-2008

    Permalink

    Muy bueno!
    Ahora mismo me voy a modificar un par de plantillas. Graciñas

  3. [...] Tips & hacks Wordpress theme [...]

  4. [...] Xyberneticos nos pasa tips y hacks para themes de Wordpress. [...]



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: