Consultant référencement naturel et design : voir et être vu sur le web, par José da Silva, alias Jori Avlis - Tag - thème

Thème pour bbPress en français : bb Liquid Card

Jori — Fri, 02 Oct 2009 01:49:00 +0200

Et hop, une déclinaison de plus du design Liquid Card. Cette fois, c'est un petit thème pour bbPress. Un thème de plus ne peut pas faire de mal!

Pour le télécharger, c'est par ici : http://e-jori.com/etc/bb-darkliquidcard.zip

Il suffira de le dézipper dans votre repertoire "my-templates" de votre install bbPress et l'activer via l'admin, comme pour n'importe quel autre thème.

Pour voir une démo (bien modifiée) supportant AdSense, rendez-vous sur le Forum du Crédit, tout nouveau tout beau. D'ailleurs si vous avez des questions sur l'argent, le crédit, les emprunts, c'est un bon forum pour vous!

Futur template wordpress et dotclear : Fluctuat Nec Mergitur

Jori — Tue, 14 Oct 2008 23:30:00 +0200

Juste un petit aperçu de ce que sera le header d'un futur nouveau blog sur Paris. J'adapterais ensuite son design à un template générique distribué librement avec les licences de creative commons habituelles.

J'aime bien faire ce genre de design "urbain", avec la ville en fond, j'avais déjà fait quelque chose d'approchant pour feu mangastyl avec des persos à la place des bâtiments il y a quelques années, pour dotclear.

Azulejo Portugais, thème pour Wordpress

Jori — Sun, 17 Aug 2008 01:11:00 +0200

Mon nouveau site sur le Portugal et la culture lusophone, Lusitanie.fr; repose sur le thème spécialement créé pour lui, "Azulejo Portugais". Ce thème a pour base graphique les carrelages typiques que l'on voit un peu partout au Portugal, les "azulejos" (sur des maisons de particuliers, sur des églises, sur des mairies, des boutiques... partout). Majoritairement bleu et blanc, un design qui s'adapte à la résolution de l'écran, et qui se veut porteur d'un certain concept portugais de l'esthétisme.

Cette image ci-contre correspond au header - la partie supérieure - du template pour Wordpress. Vous pouvez télécharger le thème pour Wordpress ici : http://e-jori.com/etc/wp-azulejo.zip et l'installer normalement pour votre blog Wordpress : il est compatible avec les widgets, et la barre latérale est sur la gauche. Le template a également été optimisé pour le référencement naturel, qui de toute façon est déjà très bon par défaut sur Wordpress.

Avant que quelqu'un ne le demande, oui, je prépare une version pour Dotclear =) !

Au sujet de Lusitanie.fr : c'est un blog sur lequel je parlerais du Portugal et des cultures héritières, les pays lusophones (Brésil, Angola, Cap-Vert...). Différents aspects de la culture seront abordés, de la musique à la gastronomie, en passant par les monuments ou les coutumes locales. Dans mon premier post, je vous parle de Fado, la musique de la Saudade.

L'image de gauche correspond ici au footer de "Azulejo de Portugal". Chaque fin de post est ponctué d'un coquillage. L'utilisation de la police de caractères "monotype corsiva" pour le titrage est assez "osée", parce que ce n'est pas une police habituelle, mais pourtant ! Il semblerait qu'elle soit disponible dans plus de 80% des systèmes Windows, ce qui en ferait une police encore plus répandue que Times New Roman. Pourquoi s'en priver, surtout qu'elle correspond plus ou moins à la police que je cherchais pour ce design... Il faut savoir qu'au départ, je voulais utiliser sIFR pour ce template, afin d'inclure la police de mon choix. Après avoir réussi à installer sIFR, j'ai été forcé de constater que cette technologie avait trop de désavantages : de nombreux petits bugs, comme le non affichage pur et simple des titres une fois sur deux, une difficulté à configurer et personnaliser la police m'ont donc fait préférer une inclusion classique en CSS de la police de caractères actuelle. J'ai fait le même type de pari pour la police en général du template, "Palatino Linotype" : très répandue également sur les systèmes windows, l'écrasante majorité des lecteurs des blogs utilisant ce thème pour wordpress (et prochainement dotclear) devraient le voir conformément à l'original.

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