Acabo de hacer pequeños cambios en el diseño (del tema Genkitheme de WordPress), y los voy a postear por 2 razones: para acordarme yo mismo y para que cualquiera lo pueda hacer.
Además, creo que son aplicables en cualquier theme.
1. Justificar el texto
En el archivo style.css, en el apartado #content he añadido la justificación del texto, quedando ahora así:
#content {
font-size: 1em;
margin-right: 440px;
overflow:hidden;
padding: 15px 20px 10px 20px;
text-align: justify;
}
Al verlo he visto que las imágenes se pegaban al texto, así que las he separado un poco del texto. Para hacerlo, he añadido márgenes a la parte de img del style.css, así (lo he mirado aquí :b):
img {
border: 0;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 2px;
}
2. Mostrando número de comentarios y etiquetas debajo del título…
Antes iban debajo del contenido del post. Ahora, he movido el siguiente código del archivo index.php y del single.php, debajo del lugar donde van las etiquetas:
<div class=”entrybody”>
<?php the_content(’Leer el resto de la entrada »’); ?>
</div>
Además, prefiero como se muestran las tags en el home que en las entradas individuales. Para mostrarlas iguales en ambos he copiado el código de las tags del index.php al single.php
<?php the_tags(”Etiquetas: “,”, “,”<br />”);?>
y he puesto entre comentarios <!—-> el anterior código
<?the_tags(”<a class=’comentmeta’>Etiquetas: </a>”,”,”,”");?>
También he borrado un <br /> que había por allí suelto en el single.php, debajo del título, que daba demasiado espacio entre el título y etiquetas. También he puesto el siguiente código entre commillas porque he creído que no hacía falta mostrar un link para los Comentarios RSS, aunque quedase bonito con la imagen de class=”commentrss”:
<a class=”commentrss” href=”<?php echo comments_rss(); ?>” rel=”nofollow”>Comentarios RSS</a>
En el index.pxp y en el single.php he añadido el autor del post antes de las etiquetas, con este código:
| Autor: <?php the_author() ?>
Y más tarde le he añadido el link así:
| Autor: <a href=”author/<?php the_author(); ?>”><?php the_author() ?></a> |
Y le he quitado el palito a la opción de Editar la entrada, porque sino en modo administración salían 2:
<?php edit_post_link(’Editar’, ‘ | ‘, ‘ | ‘); ?>
ha pasado a ser
<?php edit_post_link(’Editar’, ‘ ‘, ‘ | ‘); ?>
3. Famfamfam Icons
Después de haber subido las imágenes de Famfamfam que me interesaban a la carpeta images del theme,
En el style.css he modificado las imágenes que quería, y he añadido esto para poner la imagen de las tags:
.tagblue {
background: #fff url(images/tag_blue.png) no-repeat;
margin-left: 2px;
padding-left: 20px;
}
Y para hacerlo efectivo he cambiado el código en que se muestran las tags (en el single.php y en el index.php). También he borrado el nombre de etiquetas, porque si ya hay la imagen no hace falta ponerlo por escrito. Así:
<?php the_tags(”<a class=’tagblue’> </a>”,”, “,”<br />”);?>
Y antes era así:
<?php the_tags(”Etiquetas: “,”, “,”<br />”);?>
4. Última Modificación
He añadido la última modificación de cada entrada (también debajo del título) con este código, después de las etiquetas en el single.php
<?php $u_time = get_the_time(’U');
$u_modified_time = get_the_modified_time(’U');
if ($u_modified_time != $u_time) {
echo “<a class=’modificat’> </a>“;
echo “Última Modificación: “;
the_modified_time(’j \d\e F \d\e\l Y’);
echo ” a las “;
the_modified_time();
echo “, “; } ?>
También le he puesto Famfamfam Icons. Para hacerlo, he puesto lo que está en negrita en el código de arriba para cambiarlo, y el siguiente código en el style.css:
.modificat {
background: #fff url(images/shape_square_edit.png) no-repeat;
margin-left: 2px;
padding-left: 20px;
}
5. Eliminar “Entrada Previa” y “Entrada Posterior”
Antes, debajo de los posts tenía mucha información, la mayoría no era para nada práctica. Para solucionarlo un poco, simplemente he puesto entre <!– –> este código del single.php:
<br />
<div class=”navigation”>
<?php previous_post(’Previo: %’, ”, ‘yes’); ?>
<br />
<?php next_post(’Siguiente: %’, ”, ‘yes’); ?>
</div>
6. Compártelo! (el ShareThis! español)
He activado este plugin para poder compartir mejor el contenido
En la sección de Plugins de la administración sale que “hay una nueva versión” pero no, se refiere a la inglesa… así que nada
7. Entradas Relacionadas
Antes usaba 2 modos para mostrar las entradas relacionadas (de mi propia) de mis entradas. Las 2 las uso mediante el plugin Simple Tags, un gran plugin con el que manejo mis etiquetas (o debería). He borrado mi Tag Managing Thing porque con el anterior plugin ya tengo suficiente.
>> Una es un widget (Related Posts en inglés, se obtiene mediante Simple Tags), que sale sólo cuando se visita una entrada (no en el home) y que muestra una lista de entradas relacionadas con ese contenido según las etiquetas, y si no hay no se muestra el widget
>> Una es mostrar automáticamente, al final de cada entrada, una lista de un máximo de 5 entradas relacionadas, según las etiquetas. Esta opción la he desactivado desde el menú principal de Simple Tags por no ocupar demasiado espacio al final de cada post
8. Blockquotes bonitas
No se a vosotros, pero a mi la mayoría de blockquotes no me gustan. Pero la del theme BlueK2 (un gran theme, lástima que ya no se actualice) me encanta, así que me la copio en mi style.css del theme:
(obviamente, cuando llamo a parrafo-quote.png es porque antes he subido la imagen a la carpeta raíz del theme)
PD: en el theme K2 basta con ponerlo en k2/style.css, de modo que prevalezca sobre cualquier estilo de K2.
blockquote {
width: 425px;
background: #F0F4FF url(’parrafo-quote.png’) 10px 20px no-repeat;
min-height: 35px;
padding: 5px 20px 5px 55px;
color: #666!important;
-moz-border-radius: 15px;
}
9. Cambio de Anuncios
Mediante AdMan, he movido este código de “Ad-Code to appear on homepage only, before your first post” a “Ad-Code to appear before your post content”. Así, el anuncio no sale en el home, pero sale más veces porque sale en toda entrada de forma individual. Pongo el código para mí, si lo queréis copiar para mí perfecto, porque cobraría yo 
<script type=”text/javascript”><!–
google_ad_client = “pub-xxxxxxxxxxxxxxxx”;
/* Dalt Posts 728×15, creado 15/03/08 */
google_ad_slot = “7657084513″;
google_ad_width = 728;
google_ad_height = 15;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
Como he dicho, quería sacar información del final de los posts, y allí también tenía anuncios. Así que he movido el siguiente código de “Ad-Code to appear after your post content” a “Ad-Code to appear in the middle (calculated) or where you specify <!– adman –>”
<script type=”text/javascript”><!–
google_ad_client = “pub-xxxxxxxxxxxxxxxx”;
/* Final de Posts 468×15, creado 15/03/08 */
google_ad_slot = “8361160997″;
google_ad_width = 468;
google_ad_height = 15;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
Además, para no poner tanto anuncio he quitado el widget de la campaña de AdSense del Chiki Chiki. Este anuncio me gustaba mucho, pero creo que prefiero mantener el blog más limpio:
<br>
<script type=”text/javascript”><!–
google_ad_client = “pub-xxxxxxxxxxxxxxxx”;
/* Kaos Chiki 160×600, creado el 15/03/08 */
google_ad_slot = “7702817399″;
google_ad_width = 160;
google_ad_height = 600;
google_cpa_choice = “”; // on file
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
10. Información Extra
Ya para daros todo mi código xd, aquí os dejo con el código del widget donde nos presentamos. Al haberlo toqueteado 1000 veces, me gusta publicarlo para tenerlo fácilmente.
<div align=”center”><a href=”http://feeds.feedburner.com/kaosklub”><img src=”http://ginapol.kaosklub.com/descargas/rss_logo2.png” alt=”Suscripción a KaosKlub” />
<br>¡Suscríbete a este blog!</a></div>
Somos 2 estudiantes de <a href=”http://es.wikipedia.org/wiki/Barcelona”>BCN</a>:
<br><br><img class=”alignleft” style=”float: left;” src=”../other/polkaos.jpg” alt=”" />
<a href=”../author/pol/”>Pol Smeith</a><br>
Estudiante de 2o de Comunicación Audiovisual<br><br>
<div><img class=”alignleft” style=”float: left;” src=”../other/aguskaos.jpg” alt=”" /></div>
<a href=”../author/brainx”>Agustain Soleir</a><br>
Estudiante de 4o de Informática<br><br>
Popularity: 55% [?]
¡Compártelo!
En esta entrada utilicé un menú, de modo que haciendo click a los títulos se va directamente a la sección de la entrada deseada. ¿Como poner enlaces a una misma entrada? Os lo explico a continuación.
Últimos Comentarios