febrero 19, 2009
Publicado en Artículos,CSS,Desarrollo Web,Diseño,Maquetación,Wordpress | No comments
Tips & hacks WordPress theme
Aqui les dejo unos 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
1. 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)
2. Hacer referencia a las imágenes desde nuestra plantilla:
HTML:
Poner el nombre de la página actual seguido por un guión.
PHP:
<?php wp_title(‘ – ‘,true,‘right’);?>Freelance Web Design
3. Tags fantasías:
4. Configure su lista de etiquetas:
PHP:
<?php the_tags(‘<ul class=”tags clearfix”><li>’, ‘</li><li>’, ‘</li></ul>’);
5. Lograr algo como:
PHP:
<ul class=“tags”>
<li><a rel=“tag” href=“http://www.leemunroe.com/tags/cms/”>CMS</a></li>
</ul>
<li><a rel=“tag” href=“http://www.leemunroe.com/tags/cms/”>CMS</a></li>
</ul>
6. 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;
}
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 que separa a su post. En su index.php, donde dice:
PHP:
<?php the_content(); ?>
8. Coloque el texto que usted desea para su enlace:
PHP:
<?php the_content(‘Read this article’); ?>
9.Aplicar algunos estilo CSS para la misma:
CSS:
.more-link{
padding:10px;
background:#3c3028;
font-weight: bold;
float: right;
}
padding:10px;
background:#3c3028;
font-weight: bold;
float: right;
}
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’); ?>
CSS:
.more-link{
padding:10px;
background:#3c3028;
font-weight: bold;
float: right;
}
padding:10px;
background:#3c3028;
font-weight: bold;
float: right;
}
Destacar comentarios del autor
Añadir Authcomment estilo.
CSS:
.authcomment{ background:#fff; }
comments.php tiene una línea como esta:
PHP:
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…
/* 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