Wordpress themes

10 lindos temas estilo tumblog para tu blog de WordPress

Publicado por Claudia en febrero 16, 2012

Hoy por hoy, tener Tumblr es casi una moda. La gracia de Tumblr es que, como es una plataforma de microblogging, sirve para compartir pequeñas notas, fotos, citas y contenido multimedia (audios, videos) en formato tumblog, identificando claramente cada tipo de post con un formato determinado. Un Tumblr es como un cuaderno de apuntes de todo lo que recogemos en la red.

Tumblr es práctico y simple; sin embargo, tiene algunas limitaciones. Por ejemplo: hay pocos desarrolladores de temas para Tumblr que se distribuyan gratuitamente; la plataforma en sí es limitada, con pocas opciones; no hay muchos tutoriales en la web para aprender a crear y modificar una plantilla Tumblr; no puedes instalarlo en tu propio servidor.

Para hacer uso de las bondades del “tumblogging” y suplir las necesidades de Tumblr, se han creado los “temas estilo tumblog para WordPress“. A simple vista, es como estar en Tumblr, con la misma simpleza de esta popular plataforma de microblogging pero con todo el poder de WordPress: conservas el estilo de los posts de Tumblr, pero puedes manejar y personalizar tu tumblog a tu antojo desde tu blog de WordPress instalado en tu propio servidor.

Aquí tienes 10 lindos temas “Tumblr like” para WordPress recolectados alrededor de la web, todos de libre descarga. Ahora, si te atreves a crear tu propio tema, puedes usar el plugin “WooTumblog” para WordPress.

Quantez

Quantez Tumblog WordPress theme
DEMO Y DESCARGA

Bonpress

Bonpress Tumblog WordPress theme
DEMO Y DESCARGA

Tumblepress

TumblePress Tumblog WordPress theme
DEMO Y DESCARGA

Diavlo

Diavlo Tumblog WordPress theme
DEMO Y DESCARGA

Ubert

Ubert Tumblog WordPress theme
DEMO Y DESCARGA

Casual

Casual Tumblog WordPress theme
DEMO Y DESCARGA

Garuda Di Dadaku

Garuda di dadakuTumblog WordPress theme
DEMO Y DESCARGA

BeFree

BeFree Tumblog WordPress theme
DEMO Y DESCARGA

Quade

Quade Tumblog WordPress theme
DEMO Y DESCARGA

Good

Good Tumblog WordPress theme

DEMO Y DESCARGA

Tags: , ,
Tutoriales

Cómo añadir Google Fonts en tu blog de Blogger o WordPress

Publicado por Claudia en agosto 31, 2011

Añadir fuentes personalizadas es una tendencia en diseño web que quizás nunca pase de moda: está muy en voga, le da un toque personal a tu blog y permite mejorar su estética. Y a la hora de hacerlo, Google Fonts es una de las mejores opciones, porque es fácil y rápido de incorporar y cuenta con una numerosa cantidad de familias de fuentes (actualmente, 247 y creciendo).

google web fonts

Cómo hacerlo, paso a paso:

1. Selecciona una fuente

Ve a Google Fonts y elige la fuente que más te agrade. Si a primera vista no logras decidirte, puedes añadir varias fuentes a tu colección (pulsando el botón “Add to collection“). Una vez que has escogido, haz click en “Use” o “Quick-use“.

2. Obtén el código

Hay fuentes con 1, 2 ó más estilos. Naturalmente, una fuente con más estilos te permite más opciones: normal, negrita, cursiva, etc.

Yo elegí la fuente “Droid Serif“, y seleccioné los 4 estilos que tiene.

El sitio me entregará un código como el siguiente:

1

<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

Dicho código debe ser incorporado exactamente después de <head>. En WordPress, en tu header.php, en Blogger, en Diseño/Edición de HTML (al inicio de tu plantilla).

Antes de guardar, no olvides añadir un slash (/) de cierre antes del signo “mayor que“, de modo que el código a añadir quede de la siguiente forma:

1

<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'/>

3. Modifica los encabezados en tu hoja de estilos

Busca los lugares donde hay encabezados (h1, h2, h3, etc.), e incorpora el nombre de la fuente como normalmente lo harías con cualquier otra fuente, usando la propiedad “font-family“.

Ejemplo:

h1 { 
font-family: 'Droid Serif', Arial, serif; 
font-weight: 400; 
}

Nótese que aquí también se utiliza la propiedad “font-weight“. En este caso, así como en el de muchas otras fuentes, “400″ es normal y “700″ es bold o negrita.

También puedes cambiar el estilo a cursiva (o itálico) con la propiedad “font-style“:

h1 { 
font-family: 'Droid Serif', Arial, serif; 
font-weight: 400; 
font-style: italic;
}

Finalmente, aquí hay otro ejemplo, que incorpora además la propiedad “text-shadow“:

#header h1 {
font-family: 'Droid Serif', Helvetica, arial, sans-serif;
color: #000;
font-size: 40px;
font-weight: 700;
font-style: italic;
text-shadow: 2px 2px 0 #E5E0D0;
}
Tags: , , ,
Sistemas de publicidad

Mostrar anuncios de Adsense sólo a los visitantes de buscadores en WordPress y Blogger

Publicado por Claudia en agosto 24, 2011

Se dice que mostrar Adsense únicamente a visitantes que llegan a tu blog a través de Google y otros buscadores aumenta el CTR (click throughrate: número de clicks dividido en el número de impresiones de un anuncio) -entre otros factores- y por ende tus posibles ganancias, dado que los lectores no habituales son más proclives a hacer click en algún anuncio.

¿Cómo hacerlo?

En WordPress:

En primer lugar, debes añadir la siguiente función en tu functions.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$ref = $_SERVER['HTTP_REFERER'];
$SE = array('/search?', 'images.google.', 'web.info.com', 'search.', 'del.icio.us/search', 'soso.com', '/search/', '.yahoo.');
foreach ($SE as $source) {
  if (strpos($ref,$source)!==false) {
    setcookie("sevisitor", 1, time()+3600, "/", ".TUBLOG.COM"); 
    $sevisitor=true;
  }
}
 
function fromasearchengine(){
  global $sevisitor;
  if ($sevisitor==true || $_COOKIE["sevisitor"]==1) {
    return true;
  }
  return false;
}

Modifica “.TUBLOG.COM” por tu dominio. Ahora, copia lo siguiente en cada lugar donde quieras añadir bloques de anuncios de Adsense:

1
2
3
4

<?php if (function_exists('fromasearchengine')) {
  if (fromasearchengine()) { ?>
    TU CÓDIGO DE ADSENSE
<?php } } ?>

En Blogger:

Busca el siguiente código al inicio de tu plantilla, en Diseño/Edición de HTML:

1

<title><data:blog.pageTitle/></title>

Pega justo debajo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type='text/javascript'>
//<![CDATA[
var ref = document.referrer;
var se = new Array('/search?', 'images.google.', 'web.info.com', 'search.', 'del.icio.us/search', 'soso.com', '/search/', '.yahoo.');
var sevisitor = false;
for (var i = 0; i <= se.length-1; i++) {
    if (ref.indexOf(se[i])!== -1) {
        var expiry = new Date ();
        expiry.setTime(expiry.getTime() + 3600000);
        document.cookie = "sevisitor=1; expires=" + expiry + "; path=/; domain=TUBLOG.COM";
        sevisitor = true;
    }
}
//]]>
</script>

En ese código, reemplaza TUBLOG.COM por tu dominio.

Ahora, pon este código junto a tus anuncios de Adsense:

1
2

var results = document.cookie.match ( '(^|;) ?sevisitor=([^;]*)(;|$)' );
if (sevisitor == true || results[2] == 1) {

Debe verse de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script type='text/javascript'>
//<![CDATA[
var results = document.cookie.match ( '(^|;) ?sevisitor=([^;]*)(;|$)' );
if (sevisitor == true || results[2] == 1) {
    var adsenseString = "<div style=\"float: left;\">\n";
    adsenseString += "<script type=\"text/javascript\"><!--\n";
    adsenseString += "google_ad_client = \"pub-xxxxxxxxxxxxxxxx\";\n";
    adsenseString += "google_ad_host = \"pub-xxxxxxxxxxxxxxxx\";\n";
    adsenseString += "google_ad_slot = \"xxxxxxxxxx\";\n";
    adsenseString += "google_ad_width = 336;\n";
    adsenseString += "google_ad_height = 280;\n";
    adsenseString += "//-->\n";
    adsenseString += "<\/script>\n";
    adsenseString += "<script type=\"text/javascript\"\n";
    adsenseString += "src=\"http://pagead2.googlesyndication.com/pagead/show_ads.js\">\n";
    adsenseString += "<\/script>\n";
    adsenseString += "<\/div>\n";
    document.write(adsenseString);
}
//]]>
</script>

Finalmente, sólo queda reemplazar las xxxxx por los números que aparecen en tu código de Adsense, y modificar el alto y el ancho que corresponden a las dimensiones de tu anuncio (en este ejemplo, 336×280).

Vía | Scratch99.com (1) (2)

Tags: , ,
Tutoriales WordPress

Cómo añadir paginación en WordPress sin plugin

Publicado por Claudia en agosto 6, 2011

Si pensamos en paginación en WordPress, probablemente pensemos en un plugin: WP-Pagenavi. No obstante, también podemos paginar nuestro blog para mejorar la experiencia de los usuarios sin plugin. Ello es especialmente útil a la hora de desarrollar temas para terceros, o simplemente si queremos evitar llenarnos de plugins que pueden no ser indispensables.

Boutros Abichedid enseña cómo hacerlo, en tres simples pasos, y sin necesidad de tener grandes conocimientos de WordPress:

PASO 1: Copiar en el archivo funcions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

<?php
/***** Numbered Page Navigation (Pagination) Code.
      Tested up to WordPress version 3.1.2 *****/
 
/* Function that Rounds To The Nearest Value.
   Needed for the pagenavi() function */
function round_num($num, $to_nearest) {
   /*Round fractions down (http://php.net/manual/en/function.floor.php)*/
   return floor($num/$to_nearest)*$to_nearest;
}
 
/* Function that performs a Boxed Style Numbered Pagination (also called Page Navigation).
   Function is largely based on Version 2.4 of the WP-PageNavi plugin */
function pagenavi($before = '', $after = '') {
    global $wpdb, $wp_query;
    $pagenavi_options = array();
    $pagenavi_options['pages_text'] = ('Página %CURRENT_PAGE% de %TOTAL_PAGES%:');
    $pagenavi_options['current_text'] = '%PAGE_NUMBER%';
    $pagenavi_options['page_text'] = '%PAGE_NUMBER%';
    $pagenavi_options['first_text'] = ('Primera');
    $pagenavi_options['last_text'] = ('Última');
    $pagenavi_options['next_text'] = 'Siguiente &raquo;';
    $pagenavi_options['prev_text'] = '&laquo; Anterior';
    $pagenavi_options['dotright_text'] = '...';
    $pagenavi_options['dotleft_text'] = '...';
    $pagenavi_options['num_pages'] = 5; //continuous block of page numbers
    $pagenavi_options['always_show'] = 0;
    $pagenavi_options['num_larger_page_numbers'] = 0;
    $pagenavi_options['larger_page_numbers_multiple'] = 5;
 
    //If NOT a single Post is being displayed
    /*http://codex.wordpress.org/Function_Reference/is_single)*/
    if (!is_single()) {
        $request = $wp_query->request;
        //intval — Get the integer value of a variable
        /*http://php.net/manual/en/function.intval.php*/
        $posts_per_page = intval(get_query_var('posts_per_page'));
        //Retrieve variable in the WP_Query class.
        /*http://codex.wordpress.org/Function_Reference/get_query_var*/
        $paged = intval(get_query_var('paged'));
        $numposts = $wp_query->found_posts;
        $max_page = $wp_query->max_num_pages;
 
        //empty — Determine whether a variable is empty
        /*http://php.net/manual/en/function.empty.php*/
        if(empty($paged) || $paged == 0) {
            $paged = 1;
        }
 
        $pages_to_show = intval($pagenavi_options['num_pages']);
        $larger_page_to_show = intval($pagenavi_options['num_larger_page_numbers']);
        $larger_page_multiple = intval($pagenavi_options['larger_page_numbers_multiple']);
        $pages_to_show_minus_1 = $pages_to_show - 1;
        $half_page_start = floor($pages_to_show_minus_1/2);
        //ceil — Round fractions up (http://us2.php.net/manual/en/function.ceil.php)
        $half_page_end = ceil($pages_to_show_minus_1/2);
        $start_page = $paged - $half_page_start;
 
        if($start_page <= 0) {
            $start_page = 1;
        }
 
        $end_page = $paged + $half_page_end;
        if(($end_page - $start_page) != $pages_to_show_minus_1) {
            $end_page = $start_page + $pages_to_show_minus_1;
        }
        if($end_page > $max_page) {
            $start_page = $max_page - $pages_to_show_minus_1;
            $end_page = $max_page;
        }
        if($start_page <= 0) {
            $start_page = 1;
        }
 
        $larger_per_page = $larger_page_to_show*$larger_page_multiple;
        //round_num() custom function - Rounds To The Nearest Value.
        $larger_start_page_start = (round_num($start_page, 10) + $larger_page_multiple) - $larger_per_page;
        $larger_start_page_end = round_num($start_page, 10) + $larger_page_multiple;
        $larger_end_page_start = round_num($end_page, 10) + $larger_page_multiple;
        $larger_end_page_end = round_num($end_page, 10) + ($larger_per_page);
 
        if($larger_start_page_end - $larger_page_multiple == $start_page) {
            $larger_start_page_start = $larger_start_page_start - $larger_page_multiple;
            $larger_start_page_end = $larger_start_page_end - $larger_page_multiple;
        }
        if($larger_start_page_start <= 0) {
            $larger_start_page_start = $larger_page_multiple;
        }
        if($larger_start_page_end > $max_page) {
            $larger_start_page_end = $max_page;
        }
        if($larger_end_page_end > $max_page) {
            $larger_end_page_end = $max_page;
        }
        if($max_page > 1 || intval($pagenavi_options['always_show']) == 1) {
            /*http://php.net/manual/en/function.str-replace.php */
            /*number_format_i18n(): Converts integer number to format based on locale (wp-includes/functions.php*/
            $pages_text = str_replace("%CURRENT_PAGE%", number_format_i18n($paged), $pagenavi_options['pages_text']);
            $pages_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pages_text);
            echo $before.'<div class="pagenavi">'."\n";
 
            if(!empty($pages_text)) {
                echo '<span class="pages">'.$pages_text.'</span>';
            }
            //Displays a link to the previous post which exists in chronological order from the current post.
            /*http://codex.wordpress.org/Function_Reference/previous_post_link*/
            previous_posts_link($pagenavi_options['prev_text']);
 
            if ($start_page >= 2 && $pages_to_show < $max_page) {
                $first_page_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pagenavi_options['first_text']);
                //esc_url(): Encodes < > & " ' (less than, greater than, ampersand, double quote, single quote).
                /*http://codex.wordpress.org/Data_Validation*/
                //get_pagenum_link():(wp-includes/link-template.php)-Retrieve get links for page numbers.
                echo '<a href="'.esc_url(get_pagenum_link()).'" class="first" title="'.$first_page_text.'">1</a>';
                if(!empty($pagenavi_options['dotleft_text'])) {
                    echo '<span class="expand">'.$pagenavi_options['dotleft_text'].'</span>';
                }
            }
 
            if($larger_page_to_show > 0 && $larger_start_page_start > 0 && $larger_start_page_end <= $max_page) {
                for($i = $larger_start_page_start; $i < $larger_start_page_end; $i+=$larger_page_multiple) {
                    $page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['page_text']);
                    echo '<a href="'.esc_url(get_pagenum_link($i)).'" class="single_page" title="'.$page_text.'">'.$page_text.'</a>';
                }
            }
 
            for($i = $start_page; $i  <= $end_page; $i++) {
                if($i == $paged) {
                    $current_page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['current_text']);
                    echo '<span class="current">'.$current_page_text.'</span>';
                } else {
                    $page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['page_text']);
                    echo '<a href="'.esc_url(get_pagenum_link($i)).'" class="single_page" title="'.$page_text.'">'.$page_text.'</a>';
                }
            }
 
            if ($end_page < $max_page) {
                if(!empty($pagenavi_options['dotright_text'])) {
                    echo '<span class="expand">'.$pagenavi_options['dotright_text'].'</span>';
                }
                $last_page_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pagenavi_options['last_text']);
                echo '<a href="'.esc_url(get_pagenum_link($max_page)).'" class="last" title="'.$last_page_text.'">'.$max_page.'</a>';
            }
            next_posts_link($pagenavi_options['next_text'], $max_page);
 
            if($larger_page_to_show > 0 && $larger_end_page_start < $max_page) {
                for($i = $larger_end_page_start; $i <= $larger_end_page_end; $i+=$larger_page_multiple) {
                    $page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['page_text']);
                    echo '<a href="'.esc_url(get_pagenum_link($i)).'" class="single_page" title="'.$page_text.'">'.$page_text.'</a>';
                }
            }
            echo '</div>'.$after."\n";
        }
    }
}
?>

*Lo traduje al español.

PASO 2: Reemplazar la navegación por defecto

En el archivo index.php, buscamos la navegación por defecto del theme, algo como esto:

1
2
3
4

<div class="navigation">
<div class="alignleft"><?php previous_posts_link('&laquo; Previous Entries') ?></div>
<div class="alignright"><?php next_posts_link('Next Entries &raquo;','') ?></div>
</div>

Y la reemplazamos por:

1

<div class="navigation"><?php if(function_exists('pagenavi')) { pagenavi(); } ?></div>

Hacemos lo mismo en nuestro archive.php y nuestro search.php.

PASO 3: Estilizando nuestra paginación numerada

Ahora sólo queda copiar el siguiente código en la hoja de estilos (style.css), y modificar los colores y quizás algunas propiedades:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

.pagenavi {
    margin: 0 0 20px 30px;
    padding: 5px 1px 5px;
    float:left;
    width: 98%;
}
.pagenavi a {
    padding: 5px 6px 4px 6px;
    margin: 3px;
    text-decoration: none;
    border: 1px solid #ccc;
    color: #666;
    background-color: inherit;
}
.pagenavi a:hover {
    border: 1px solid #444;
    color: #444;
    background-color: #eee;
}
.pagenavi span.pages {
    padding: 5px 6px 4px 6px;
    margin: 3px;
    color: #825a2d;
    font-weight:bold;
    border: 1px solid #999;
    background-color: inherit;
}
.pagenavi span.current {
    padding: 5px 6px 4px 6px;
    margin: 3px;
    font-weight:bold;
    border: 1px solid #666;
    color: #444;
    background-color: #eee;
}
.pagenavi span.expand {
    padding: 5px 6px 4px 6px;
    margin: 3px;
    border: 1px solid #ccc;
    color: #444;
    background-color: inherit;
}
.pagenavi .first, .pagenavi .last {
    border: 1px solid #aaa;
}
.pagenavi .single_page {
border: 1px dashed #ccc;
}

Eso es todo. Toma menos tiempo que instalar y configurar un plugin.

Tags: , , , , ,
Wordpress

Contactable: Un atractivo plugin jQuery para formularios de contacto

Publicado por Claudia en enero 18, 2010

Contactable es un sencillo plugin (jQuery + PHP) desarrollado por Philip Beel (vía devSnippets) que permite habilitar formularios de contacto o feedback en cualquier página, al estilo UserVoice.
Es una práctica opción (con parámetros configurables) si estás buscando instalar un formulario de contacto en WordPress, recomendable para todo aquel que quiera mejorar la usabilidad de su sitio web.

Más:
Documentación | Instalación en WordPress

Tags: , ,
Página 1 de 41234»