WordPressCat

Avui remenant enllaços per fer un projecte nou he anat a parar a CSS-Tricks, una web sobre trucs de CSS i altres codis molt útils a l’hora de fer webs. Precisament a aquesta web he trobat una entrada sobre com crear una pàgina per les darreres actualitzacions a Twitter, i m’ha semblat que estaria bé compartir-la aquí.

El codi que fa servir és el següent:

1
2
3

<div id="twitter_div"><ul id="twitter_update_list"></ul></div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/usuari.json?callback=twitterCallback2&count=1"></script>

El codi és molt senzill. Fent servir l’API de Twitter, enllaça a un arxiu .js i a un de .json, que mostren el nombre d’actualitzacions de Twitter d’un cert usuari. El div i la llista desordenada (ul) els heu de posar tal i com estan escrits, sense modificar els artibuts id. Simplement, modifiquen el resultat amb una mica de CSS i ja està, ja teniu el últimament tan preuat Twitter al vostre blog.

Per què mostri el vostre Twitter, canvieu, a la línia 3, usuari pel vostre nom i l’1 de count=1 pel nombre d’actualitzacions que voleu que mostri.

Espero que us sigui útil!

A Docs4Beto posen un codi per mostrar les entrades que s’han publicat en el dia en què estiguem. Per fer-ho, crea un nou loop (línies 1 i 2) i iguala (línies 3) la data actual (línia 3) i la data de l’entrada (línia 4). En cas que les dates siguin iguals, les emmarca amb un div post-new o, si no ho són, amb un div post.

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

< ?php if (have_posts()) : ?>
    < ?php while (have_posts()) : the_post(); ?>
        $currentdate = date('Y-m-d');
        $postdate = get_the_time('Y-m-d');
        if ($postdate==$currentdate) {
            echo '<div class="post new">';
        } else {
            echo '<div class="post">';
        } ?>
        <a href="<?php the_permalink() ?>" rel="bookmark">
        < ?php the_title(); ?></a>
        < ?php the_time('j F Y'); ?>
        </div>
    < ?php endwhile; ?>
< ?php endif; ?>
</div>

A partir d’aquí només cal modificar una mica el CSS i ja estarà.

Aquest codi, a més, es pot modificar per mostrar només les entrades d’avui amb text, i les altres només el títol.

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

< ?php if (have_posts()) : ?>
    < ?php while (have_posts()) : the_post(); ?>
        $currentdate = date('Y-m-d');
        $postdate = get_the_time('Y-m-d');
        if ($postdate==$currentdate) {
               // Codi per les entrades
        } else {
               echo '<h2><a href="'the_permalink();'" rel="bookmark" title="Enlla&ccedil; permanent a 'php the_title();'">'php the_title();'</a></h2>';
        } ?>
        <a href="<?php the_permalink() ?>" rel="bookmark">
 
    < ?php endwhile; ?>
< ?php endif; ?>
</a>

A Xyberneticos veig avui la traducció d’una part de l’article publicat a Lee Munroe amb petits codis per millorar el tema de WordPress que facis servir. Alguns d’aquests ja els havíem posat aquí, però de tota manera sempre val la pena repassar aquest tipus de recopilacions, perquè a vegades trobes el que fa molt que busques…

És molta la gent que fa servir els enllaços permanents de les seves entrades del tipus elmeublog.com/2008/11/14/hola-mon, com ara nosaltres, però la veritat és que si t’interessa allò del SEO els més apropiats són els del tipus elmeublog.com/hola-mon.

El problema és que si canviem els enllaços permanents un cop hem començat a publicar, tots els enllaços externs cap a les nostres entrades es perdran. Per evitar-podem modificar el famós arxiu htacces i posar-hi això:

RedirectMatch 301 /([0-9]+)/([0-9]+)/([0-9]+)/(.*)$ http://www.domini.com/$4

Recorda que has de posar el domini del teu blog!

Els de Sentido Web han creat un curiós plugin anomenat Feel the comments, que permet que l’autor d’un comentari especifiqui l’estat d’ànim o la seva opinió respecte una entrada al blog. El funcionament és bastant senzill, i instal·lar-lo també (tot i que s’han de fer canvis a l’arxiu style.css del tema que fem servir…):

Per fer-ho, hem de posar al nostre arxiu comments.php el codi següent on vulguem:

< ?php if (function_exists('feel_the_comments_draw_select')) feel_the_comments_draw_select(); ?>

A més, haurem de modificar l’arxiu style.css al nostre gust i recuperar l’estil que hem d’aplicar de la següent manera:

<li id="comment-<?php comment_ID() ?>" class="< ?php echo feel_the_comments_get_class(); ?>"></li>

Si sou usuaris de la Viquipèdia, potser heu vist que diferencia els enllaços externs dels interns amb un color diferent i una imatge. Si voleu posar aquest efecte al vostre blog, simplement heu de seguir els passos següents.

Per començar, hauríeu de posar aquest codi dins de les etiquetes HTML :

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

<script type="text/javascript">
    function init(){
        var links = document.getElementsByTagName('a');
        for(var i=0 ; i < links.length; i++){
            var link = links[i];
            if(link.href.indexOf('elteublog.cat') == -1){
                //  és un enllaç extern
                link.style.paddingRight = "10px";
                link.style.backgroundImage = "url(images/aoutside.gif)";
                link.style.backgroundPosition = "right center";
                link.style.backgroundRepeat = "no-repeat";
            }
        }
    }
</script></script>

ATENCIÓ! No sé perquè, però em crea dos tancaments de l’etiqueta script. N’heu d’esborrar un!

Aquest codi crea la funció init(), que busca totes les etiquetes que enllacin a una web diferent de la especificada a la línia 6 i li aplica un estil diferent (línies 8-11). La imatge que fa servir està definida a la línia 9.

Un cop enganxat el codi, heu de canviar l’etiqueta per i ja funcionarà.

Teniu més informació sobre això al blog Sofá Naranja.

En Joan Barrios ens ha enviat un correu a través del formulari de contacte preguntant quin servei podia fer servir per posar música al seu blog. La solució és GoEar.com, una espècie de YouTube dels arxius MP3. Té llicència de la SGAE per reproduir cançons amb copyright, o sigui que s’hi pot trobar de tot, des de la Tina Turner cantant una cançó del Bruce Springsteen a una cançó de Les Tres Bessones, passant per entrevistes i altres només cal saber-lo combinar amb altres serveis.

Quan pujem una cançó o n’escoltem una, podem trobar el codi HTML necessari per posar-la a la nostra web… El què passa és que aquest codi no és vàlid. Llavors és quan entra en acció una ment (que no deu ser la meva) capaç de convertir l’horrorós codi que ens dóna en un de vàlid, com ara aquest:

1
2
3
4

<object type="application/x-shockwave-flash" style="width:353px;height:132px"
data="http://www.goear.com/files/external.swf?file=XXXXXXXX">
<param name="movie" value="http://www.goear.com/files/localplayer.swf?file=XXXXXXXX" />
</object>

Ara només hem de canviar XXXXXXX per la ID de la cançó, que podem trobar al final de la URL de la cançó (per exemple, http://www.goear.com/listen.php?v=b34bbcb), i ja tindrem el nostre codi funcionant perfectament.

I, si no voleu recordar-vos del codi, sempre podeu crear un botó per l’editor HTML seguint el tutorial que vam fer fa un temps.

D’aquesta manera podem aconseguir una bonica biblioteca musical o el que la vostra imaginació us digui. Espero que us sigui útil!

L’Albert ha fet al seu blog docs4beto, un petit però molt útil tutorial per moure una instal·lació de  WordPress a una nova carpeta sense perdre els enllaços interns i externs i les imatges de les entrades, simplement fent servir el desconegut però molt útil arxiu .htaccess.

Podeu donar-li un cop d’ull des d’aquí.