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)

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

Hacer referencia a las imágenes desde nuestra plantilla

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

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

Tags fantasías

2.jpg

Configure su lista de etiquetas.

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

Lograr algo como

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

PLAIN TEXT
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:

PLAIN TEXT
PHP:
<?php the_content(); ?>

Coloque el texto que usted desea para su enlace.

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

Aplicar algunos estilo CSS para la misma.

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

Destacar comentarios del autor

4.jpg

Añadir Authcomment estilo.

PLAIN TEXT
CSS:
.authcomment{ background:#fff; }

comments.php tiene una línea como esta:

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

Cambiar por estas lineas:

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

Delicious / Digg / Barrapunto / Linkk / Technorati / Stumble it!
  1. Varios artículos interesantes 7 | YouZone! - Gravatar

    Varios artículos interesantes 7 | YouZone!

    30-11-2008

    Permalink

    [...] 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. Blogueando en Internet: Semana setenta y uno » Blogueando con Francesc Josep - Gravatar

    Blogueando en Internet: Semana setenta y uno » Blogueando con Francesc Josep

    30-11-2008

    Permalink

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

  4. Enlaces para todos lados | Amatta JM - Gravatar

    Enlaces para todos lados | Amatta JM

    30-11-2008

    Permalink

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



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: