e-Jori, portfolio d'Art et Design de Jori Avlis - thème

LiquidCard pour WordPress

Jori — Sat, 01 Mar 2008 22:53:00 +0100

Je viens de voir que je n'avais pas encore fait de billet pour mon thème LiquidCard pour WordPress, alors que je l'avais décliné sur ce fameux moteur de blog depuis... belle lurette maintenant ¬¬ Donc voila, réparons cette regrettable erreur, en vous mettant à disposition LiquidCard normal (avec les couleurs de mon blog), et l'assez populaire dark LiquidCard (celui tout noir et bleu). Il y a des blogs qui utilisent un peu partout sur le web ces deux thèmes, à vous de taper sur Google les bons mots clefs, j'ai la flemme =D

http://e-jori.com/etc/wp-dark-liquidcard.zip pour la version foncée
http://e-jori.com/etc/wp-liquidcard.zip pour la version normale. Dézippez les dans votre dossier de thèmes, ça devrait marcher.

Optimisation de dotclear 2 pour le référencement

Jori — Mon, 01 Jan 2007 04:12:00 +0000

Il y a quelques temps, j'ai eu l'idée saugrenue de passer à dotclear 2. Ouais. Alors je vais vous dire ce que je pense de cette nouvelle mouture:

c'est bien pour le multiblog

Ce qui n'est pas mon cas, je n'utilise pas cinquante trouze mille blogs u_u

Donc me voilà à trimer parmi des fichiers en tout sens pour adapter mon LiquidCard perso. C'est assez difficile de s'adapter à quelque chose de tout neuf et de fondamentalement différent, mais j'ai fini par y arriver, comme vous pouvez le constater. Quelques nouveautés au programme: Liquid devient en fait Elastic, pour les navigateurs qui sont bien (n'importe quoi de récent sauf IE6 donc). Vous remarquerez donc que mon site varie de largeur selon un paramètre de largeur maximal et un autre minimal (min-width et max-width, propriétés CSS bien pratiques). J'ai aussi corrigé quelques défauts qui trainaient (comme par exemple l'absence d'un clear:both à la fin de chaque billet, ce qui était problématique si on mettait une image avec un float dans notre billet). Il y a aussi eu toutes ces petites subtilités de dc2 qu'il a fallu adapter, pffou. Je vais donc bientôt nettoyer LiquidCard pour dotclear 2 et le mettre à disposition... dès que j'ai récupéré le courage de remettre les mains dans le cambouis =D

Au sujet du référencement de dotclear 2

Que faire pour avoir un site bien référencé? Les règles de base nous disent qu'il faut avoir un beau contenu, de belles urls propres pour y avoir accès, eviter le duplicate content, choisir de bons mots clefs pertinents, rediriger les anciennes urls vers les nouvelles de dotclear... voici en étapes ce que j'ai fait:

- allez hop, mettons un petit nuage de mots, un tag cloud. C'est assez pratique pour associer des mots clefs à nos billets, pour indiquer à google de nouvelles pages pertinentes pour tel ou tel mot, pour aider notre internaute à retrouver vite fait tout les articles en rapport avec un mot clef... bref, en plus c'est joli sur la home du blog.

- rajouter une meta description différente par page du site, comme indiqué sur le forum dotclear. Ceci permet de personnaliser le descriptif de la page que l'on voit dans le SERP (search engine result page) de Google. Ceci permet aussi d'eviter de se retrouver dans les résultats complémentaires (si toutes les pages de votre site ont la même meta description, en plus du titre, il y a de très fortes chances que vos pages se retrouvent en complémentaires, ce qui est mal comme vous comprennez).

- rajouter Google Analytics. Un bon référenceur a un bon outil de stats. Forcément, comment se guiderait-il sinon, comment savoir si ce qu'il fait est bon ou pas? Google Analytics est par ailleurs un bon choix, il est gratuit et ne demande pas de bannière sur notre site, en plus d'être puissant.

- éviter à tout prix le duplicate content, et tant qu'à faire, rediriger les anciennes URLs de dotclear 1 vers les nouvelles (ça serait dommage de perdre le référencement durement gagné des anciennes pages, quand même). Il faut pour celà bidouiller dans le .htaccess.

- mettre mon dotclear à la racine du site (en sortant index.php du dossier où est installé dotclear est en le mettant à la racine, tout en modifiant ce qu'il faut dans index.php pour qu'il retrouve le blog - sans oublier de changer la config dans le tableau de bord pour indiquer la nouvelle URL).

- évitons l'accès de mon site par www. Je ne veux plus que des http://e-jori.com chez moi, à mort les www. un peu de rewriting est nécessaire. Bon j'ai fait un peu n'importe quoi et j'ai quand même eu un bon coup de main.

RewriteEngine On
RewriteOptions inherit

Oké on demarre le bidule

RewriteCond %{HTTP_HOST} ^www.e-jori.com
RewriteCond %{HTTP_HOST} ^e-jori.com/index.php
RewriteRule (.*) http://e-jori.com/$1 [QSA,L,R=301]

Là on lui dit que www, c'est pas bien. On oublie pas la 301.

RewriteCond %{REQUEST_URI} ^/(admin|locales|public|themes)
RewriteRule ^/(.*)$ /dotclear2/$1 [L]

Hum, ça je sais plus, je l'ai piqué chez lui.

ErrorDocument 404 /index.php/404

Et ça c'est important, il faut que vos pages 404 soient jolies. Pour google, qui aime bien avoir un peu de contenu et comprendre que cette url qui ne marche plus n'existe vraiment plus, et pour les internautes, qui ont des liens à suivre pour continuer sur notre site (même chose pour google remarquez).

RewriteRule ^category/(.*)$	/index.php/category/$1
RewriteRule ^post/(.*)$	/index.php/post/$1
RewriteRule ^tag/(.*)$	/index.php/tag/$1
RewriteRule ^feed/(.*)$	/index.php/feed/$1
RewriteRule ^tags(.*)$	/index.php/tags$1
RewriteRule ^archive(.*)$	/index.php/archive$1
RedirectMatch 301 ^/index.php/2006/([0-9]{2}/[0-9]{2}/[0-9][0-9]*-.*)$ /post/2006/$1
RedirectMatch 301 ^/index.php/2005/([0-9]{2}/[0-9]{2}/[0-9][0-9]*-.*)$ /post/2005/$1
RedirectMatch 301 ^/index.php/2006/([0-9]{2}/[0-9]{2})$ /archive/2006/$1
RedirectMatch 301 ^/index.php/2006/([0-9]{2})$ /archive/2006/$1
RedirectMatch 301 ^/index.php/2005/([0-9]{2}/[0-9]{2})$ /archive/2005/$1
RedirectMatch 301 ^/index.php/2005/([0-9]{2})$ /archive/2005/$1
RedirectMatch 301 ^/index.php/(Blog|Art|Design|Geek|Portfolio|About)$ /category/$1
RedirectMatch 301 ^/dotclear/rss.php/$ /feed/rss2$1
RedirectMatch 301 ^/dotclear/atom.php/$ /feed/atom$1

Et là on retire un tas d'index.php moches, on redirige les anciennes URLs vers les nouvelles, etc.

Mais il reste un index.php à retirer. Celui de la home. http://e-jori.com/index.php .

N'ayant pas réussi à le retirer via .htaccess (erreur 500 ou rien du tout...) on va le faire en php, dans le fichier "index.php" (celui qu'on avait mis à la racine). Au tout début, on rajoute juste:

if($_SERVER['REQUEST_URI'] == "/index.php")
{
header("HTTP/1.1 301 Moved Permanently");
header("Location: http://".$_SERVER['HTTP_HOST']."/");
exit;
die("Redirection");
}

Voilà, j'ai bien fait mon geek pendant cette période de fêtes, j'espère que ça vous sera un peu utile =) Il faudrait juste que je personnalise un peu plus les textes descriptifs des catégories, et je serais (un peu) content de mon site. Bonne année 2007 à tous!

edit: hu bizarre il prend pas en compte le code @@ ... je verrais ça plus tard \o/

Comment modifier Liquid Card

Jori — Mon, 16 Jan 2006 17:42:00 +0000

Quelques questions souvent posées, quelques idées pour personnaliser son thème? Voici un petit tuto pour vous aider :)

Tout d'abord, je vous présente le nouveau thème de couleur, en négatif: dark LiquidCard - installeur allez faire un petit tour sur le site démo, les images sont plus explicites que les mots. Ça change :p

Passons au mini tuto.

Comment ajouter un lien dans le menu des catégories supplémentaires, dans la même ligne?

On cherche dans template.php la ligne où se trouve: dcCatList() et on remplace par dcCatList('<ul>%s<li><a href="votre nouveau lien">blabla</a></li></ul>')

Comment rajouter une image en fixe à droite comme sur e-Jori.com?

Ouvrir style.css et rajouter:

#bougepas {

 position: absolute;
 bottom: 0;
 right: 0;
 z-index: 100;

} html>body #bougepas {

 position: fixed;

}

Si vous voulez mettre l'image à gauche, remplacez right par left.

Ensuite, dans template.php, il faut rajouter quelque part (avant <div id="menu"> par exemple).

Ah je veux mon menu en fixe, pour pas qu'il bouge, comment je fais?

C'est le même principe que pour la question précédente. Sauf que comme les liens ne vont pas bouger, il vaut mieux intervertir les positions avec le header, donc:

dans template.php, on prend

et on le met avant

On vient donc de mettre l'élément du menu avant l'élément du header. Maintenant, on veut que ce menu ne scrolle pas (j'avertis tout de suite que ça ne marche pas sous IE, comme d'habitude, mais on est habitués :)

On ouvre style.css, on trouve

#menu { margin: -7px 0 -4px 0px; padding: 0; }

après padding: 0; (et avant le } ) on rajoute:

 position: relative;
 z-index: 90;

} html>body #menu {

 position: fixed;

Voilà, ça devrait marcher. Bon courage, si vous avez des questions, hésitez pas :)

Petit bonus: images sans plantes pour ceux qui veulent personnaliser un maximum Liquid Card. Oubliez pas de retirer le gAMA de votre fichier png avec tweakPNG, comme ça Internet Explorer affichera correctement les couleurs.

Mozaik, pour dotclear

Jori — Sun, 08 Jan 2006 12:53:00 +0000

J'ai fini l'adaptation en thème dotclear d'un ancien design que j'avais fait pour PHPBB, Mozaïk. J'éspère qu'il vous plaira, il est liquide (adaptable à toute résolution) et facilement personnalisable.

Pour l'installer: installeur

Les fichiers archivés si l'installeur ne fonctionne pas: archives

Et enfin deux petites prévisualisations: visualiser header et visualiser bottom

À propos, le dessin utilisé pour le header est Flores Latinas, que vous pouvez voir sur deviantART dans son intégralité : deviantART, libre à vous de remplacer cette illustration par votre header personnalisé ;)

Thème LiquidCard

Jori — Thu, 29 Dec 2005 10:56:00 +0000

J'ai enfin fini l'adaptation du thème de mon petit site :) Le design s'adapte à votre résolution, ainsi, quelque soit votre résolution, le site ne paraitra jamais minuscule :p (bon en dessous de 800*600 avec Internet Explorer, ça bugue un peu à cause du calendrier...). Un LiquidCard simplifié, sans flash, mais en revanche un header liquide aussi, comme le reste des éléments qui composent ce thème.

A vous de le personaliser ;)

Si vous utilisez ce thème, merci de me l'indiquer (en commentant ce billet, par exemple), que je puisse vous lier.

Une petite capture d'écran

Une petite démo

Installeur:

http://e-jori.com/etc/dc_themes/theme-LiquidCard-0.1.pkg.gz

Version rar, si l'installeur ne marche pas:

http://e-jori.com/etc/dc_themes/LiquidCard.rar

Variantes de couleur:

Pink Liquid Card

installeur | archive | visualiser

green Liquid Card