Menu des pages de navigation

Maison en travaux : faire des travaux de rénovation dans votre maison

Aggregate, thème premium parfait pour votre blog travaux WordPress

Comment modifier le thème premium Aggregate ? Comment créer un site WordPress dédié aux travaux de la maison ? Comment faire un blog sur le bricolage avec WordPress ? Est-ce que le thème Aggregate est compatible pour un site sur les travaux ? Cet article va vous montrer comment créer votre site WordPress dédié aux travaux de rénovation et bricolage maison avec le thème Aggregate.

Sachez qu’il est très simple de lancer un site sur les travaux et le bricolage. Surtout, créer un site WordPress est quasiment gratuit ! Malheureusement, énormément d’artisans et d’entreprises du bâtiment se font avoir et payent très chers pour avoir un site internet.

 

Tout savoir sur Aggregate et les thèmes Elegant themes.

 

Aggregate est un thème qui s’adapte parfaitement à la thématique des travaux et du bricolage. Le meilleur exemple reste Maison en Travaux.

 

Choisir un thème pour votre blog WordPress, un sacré casse-tête :

En développant Maison en travaux, j’ai été confronté au même choix que vous : le thème du blog. Il faut être clair, c’est la jungle !

 

Comme tout nouvel utilisateur WordPress, j’ai commencé ma recherche sur Google.

Quel malheur de voir tous les thèmes disponibles : les gratuits mais livrés avec un code pas super « clean » VS les premium qui sont d’une qualité top mais payants.

Mon choix s’est vite porté sur deux principaux acteurs réputés pour leur qualité : ThemeForest et Elegant Themes. Pour les départager, voici ma réflexion qui n’engage que moi bien entendu 😉  :

  • Comptez en moyenne 40€ pour un thème tendance et abouti sur Themeforest. Si vous êtes sûr de votre choix, c’est parfait car la qualité est au rendez-vous et certains sont directement disponibles en français, pratique !
  • Si vous aimez avoir le choix et pouvoir changer d’avis, visitez le site d’Elegant themes. Tous les thèmes sont de grande qualité et adaptés à tous les goûts. Sans compter les nouveaux thèmes qui sortent tous les 2 ou 3 mois. Et surtout, c’est 39$ (soit 32€ environ) pour avoir accès à tous les thèmes. Qui dit mieux ?

 

Vous l’aurez compris, la 2ème solution m’a totalement conquis et autant vous le dire : j’ai sélectionné le thème wordpress aggregate et c’est sans regret 3 mois après ! Seul petit bémol, les thèmes sont disponibles en anglais mais ne vous inquiétez pas et lisez plus bas.

Les thèmes Elegant Themes que j’apprécie également : StyleShop | Lucid | Chameleon | Nimble (rendez-vous ici pour voir les démos).

 

Installation des thèmes Elegant Themes dont Aggregate.

Voici le tutoriel pour installer le thème Aggregate (ou un autre) sur votre site WordPress.

  1. Connectez-vous sur votre compte Elegant themes.
  2. Téléchargez le thème souhaité (suivre : Thèmes – Download), parmi les 81 disponibles en avril 2013.
  3. Installez le directement via votre back-office WordPress (suivre : Apparence – Thèmes – Installer des thèmes – Envoyer).
  4. N’oubliez pas d’activer votre thème WordPress et c’est bon, votre site est tout beau tout neuf !

Je crois que plus simple, ce n’est presque pas possible et la durée estimée de l’opération : 2 minutes !

À noter que Aggregate ainsi que tous les thèmes d’elegant themes sont livrés avec toutes les options nécessaires et très appréciables : un slider de qualité, une personnalisation des templates quasi illimitée (couleurs et structure), des widgets dont un super outil SEO (bon ok, un peu limité face à WordPress SEO 😉 ).

 

La traduction gratuite du thème Aggregate disponible ici !

Je vous l’ai dis, tout est en anglais avec Elegant Themes mais n’ayez aucune inquiétude. Je propose d’obtenir le thème Aggregate en français et donc de vous transmettre gratuitement par email ma traduction. Qu’en pensez-vous ?

 

Voici la manipulation à faire pour obtenir la traduction gratuite du thème :

  1. Vous laissez un commentaire sur un article à la une du blog Maison en Travaux
  2. Vous m’envoyer ensuite un message en privé
  3. Je vous envoie ma traduction d’Aggregate dans la semaine

 

Pour les autres thèmes, sachez que la traduction est vraiment très simple à faire.

Voici un tutoriel très simple pour traduire son théme en Français avec Poedit.

 

Mes personnalisations du code PHP pour Aggregate :

Pour modifier les fichiers PHP ou CSS de votre thème, vous avez deux possibilités :

  • Via FileZilla, vous téléchargez les fichiers en question sur votre PC et vous les modifiez pour les replacer sur le serveur.
  • Via le back-office de WordPress Dans « Apparence » puis « Editeur », vous aurez accès à tous les fichiers sur votre droite.

 

Comment afficher toutes les catégories dans le slider de votre blog WordPress ?

Quand on installe un thème Elegant themes et que l’on souhaite afficher toutes les catégories du site dans le slider de la homepage, on déchante très rapidement. Une seule catégorie est sélectionnable !

Voici un tuto tout simplement parfait pour pouvoir sélectionner toutes les catégories dans le slider du thème Aggregate et des autres.

Durée totale de l’opération : 3 minutes (simple « copier coller »).

 

Comment mettre en balise H1 (<h1>) le slogan du site sur la homepage :

But : optimiser le SEO / mettre en avant le slogan du blog.

Fichier à modifier : header.php

Le résultat : le slogan passe en H1 sur la homepage et reste en texte normal sur toutes les autres pages (<p>).

 

Recherchez le code php suivant dans votre fichier header.php du thème Aggregate (ligne 82 normalement) :

<p id= »slogan »><?php echo esc_html(get_bloginfo(‘description’)); ?></p>
<?php do_action(‘et_header’); ?>

Et remplacez le par celui-ci :

<?php if ( is_home() ) : ?>
<h1 id= »slogan »><?php echo esc_html(get_bloginfo(‘description’)); ?></h1>
<?php else : ?>
<p id= »slogan »><?php echo esc_html(get_bloginfo(‘description’)); ?></p>
<?php endif;?>
<?php do_action(‘et_header’); ?>

Durée totale de l’opération : 3 minutes (simple « copier coller »).

 

Comment mettre en H1 le nom de la catégorie sur vos pages catégories / index :

But : optimiser le SEO.

Fichier à modifier : index.php (et non category.php ni de fonction is_category() pour Aggregate).

Le résultat : les noms des catégories s’affichent et sont définis en H1 sur toutes les pages catégories.

 

Recherchez le code php suivant dans votre fichier index.php du thème Aggregate (ligne 7 normalement) :

<div id= »entries »>
<?php if ( is_active_sidebar( ‘468_top_area’ ) ) { ?>
<?php if ( !dynamic_sidebar(‘468_top_area’) ) : ?>
<?php endif; ?>
<?php } ?>

<?php get_template_part(‘includes/entry’,’index’); ?>

<?php if ( is_active_sidebar( ‘468_bottom_area’ ) ) { ?>
<?php if ( !dynamic_sidebar(‘468_bottom_area’) ) : ?>
<?php endif; ?>
<?php } ?>
</div> <!– end #entries –>

Et remplacez le par celui-ci :

<div id= »entries »>
<div align= »center »><h1 class= »pagetitle »>
<?php
$blog_title = get_bloginfo(‘name’);
if (is_single()) {
$blog_title = get_the_title();
}
if (is_category()) {
$blog_title = single_cat_title(«  »,false);
}
if (is_page()) {
$blog_title = the_title();
}
?>
<?php echo $blog_title; ?></h1></div><br />
<?php if ( is_active_sidebar( ‘468_top_area’ ) ) { ?>
<?php if ( !dynamic_sidebar(‘468_top_area’) ) : ?>
<?php endif; ?>
<?php } ?>

<?php get_template_part(‘includes/entry’,’index’); ?>

<?php if ( is_active_sidebar( ‘468_bottom_area’ ) ) { ?>
<?php if ( !dynamic_sidebar(‘468_bottom_area’) ) : ?>
<?php endif; ?>
<?php } ?>
</div> <!– end #entries –>

Durée totale de l’opération : 3 minutes (simple « copier coller »).

 

Comment ajouter du texte dans le footer sur toutes vos pages catégories / index :

But : optimiser le SEO / mettre en avant un message.

Fichier à modifier : footer.php

Le résultat : le texte de votre choix s’affiche et est défini en texte normal (<p>) dans le Footer de toutes vos pages.

 

Recherchez le code php suivant dans votre fichier index.php du thème Aggregate (ligne 7 normalement) :

</div> <!– end #footer-widgets –>
<p id= »copyright »><?php esc_html_e(‘Designed by ‘,’Aggregate’); ?> <a href= »http://www.elegantthemes.com » title= »Premium WordPress Themes »>Elegant WordPress Themes</a> | <?php esc_html_e(‘Powered by ‘,’Aggregate’); ?> <a href= »http://www.wordpress.org »>WordPress</a></p>
</div> <!– end .container –>

Et remplacez le par celui-ci en personnalisant le texte :

</div> <!– end #footer-widgets –>

<div id= »siteinfo »>
<strong>Maison en travaux</strong> vous conseille dans la rénovation et l’entretien d’une maison au travers de guides travaux complets.<br/>
Estimer et comparer des devis d’artisans du bâtiment pour vos travaux de rénovation, d’électricité, toiture et couverture, fenêtres, etc…
</div>

<p id= »copyright »><?php esc_html_e(‘Designed by ‘,’Aggregate’); ?> <a href= »http://www.elegantthemes.com/affiliates/idevaffiliate.php?id=19982_0_3_5″ title= »Premium WordPress Themes » target= »_blank »>Elegant Themes</a> | <a href= »http://www.maisonentravaux.fr/ » title= »Le guide travaux Maisonentravaux » target= »_blank »>Le guide travaux Maisonentravaux</a></p>

</div> <!– end .container –>

Durée totale de l’opération : 3 minutes (simple « copier coller »).

 

Comment insérer des icônes dans le menu de navigation du thème Aggregate :

But : ergonomie / navigation simplifiée pour les internautes grâces aux icônes / design.

Fichier à modifier : Aucun / Le lien de l’icône à ajouter dans le menu via le back-office de WordPress.

Le résultat : les icônes dans le menu de votre thème elegant themes améliore la navigation et le design.

  1. Téléchargez l’icône au format 30×26 pour le menu de navigation situé au-dessus du slider ou alors au format 16×16 pour le menu du navigation situé dans le header et / ou le footer.
  2. Récupérez le lien complet de votre icône avec les attributs.
  3. Ouvrez l’image dans la bibliothèque sous Médias.
  4. Affichez la page du fichier attaché.
  5. Clic droit sur l’image puis « Copier l’URL de l’image »
  6. Affichez le code source (Ctrl + u) et rechercher l’URL copiée ci-dessus.
  7. Prenez le code présent entre les balises <img … « /> tel que ci-dessous :

 

  • URL copiée de l’icône :

http://www.maisonentravaux.fr/wp-content/uploads/2013/04/loi-bonus-malus-energie-2013-300×225.jpg

 

  • URL recherchée de l’icône :

<img width= »300″ height= »225″ src= »http://www.maisonentravaux.fr/wp-content/uploads/2013/04/loi-bonus-malus-energie-2013-300×225.jpg » alt= »La loi du bonus malus énergétique de 2013. » />

Enfin, copiez ce morceau de code dans ApparenceMenu puis collez le avant le nom de la catégorie affichée dans le menu.

 

Par exemple, on trouve Electricité dans mon menu de navigation, voici le code présent :

<img width= »30″ height= »26″ src= »http://www.maisonentravaux.fr/wp-content/uploads/2013/02/Icone-travaux-electricite.png » alt= »Rénover l’électricité de la maison » />   Electricité

Durée totale de l’opération : 3 minutes.

 

Comment augmenter la police (le texte) de votre thème Aggregate :

But : ergonomie / lecture simplifiée pour l’internaute.

Fichier à modifier : style.css

Le résultat : la taille du texte de votre thème elegant themes est plus grande et plus facile à lire.

| Tutoriel en cours de test – à venir asap |

 

Le thème premium Aggregate ainsi que ces trois modifications PHP sont en place sur le site actuellement et fonctionnent très bien comme vous pouvez le constater. Bien entendu, sauvegardez chaque fichier avant modification juste au cas où 😉 .

Pour toutes questions, n’hésitez pas à me contacter et j’espère que ces petites astuces vous aideront dans votre projet perso.

 

+Cédric Kocher

13 Commentaires

  1. Bonjour,
    j’ai installé ce theme aggregate pour le blog de mon épouse, je ne suis pas familié avec les codes :-(, mais bon avec des explis claires je pourrais j’espère corriger les choses ;-).
    – Les images du slider home page sont trop grandes : comment mettre une taille limite, genre 300 pixels de haut dans le epanel ?
    – en dessous, les thumbs sont déformées, possible de garder les proportions ?
    – les images des articles plus bas sont trop gdes et certaines dépassent la zone claire …c pas beau :-(, possible de fixer une largeur max ?
    – j’ai des petits carrés blancs ( pourtour ) sur chaque image de post, une idée d’ou cela peut-il venir ?
    – ou changer la couleur de la barre de menu haute et la couleur de la typo au survol/page active ? ( epanel ? )

    Merci si vous pouvez apporter une ou plusieures réponses 🙂
    PIerre

    • Bonjour Pierre,

      Il faut installer l’extension qui se nomme « regenerate Thumbnails ». Une fois le plugin installé, vous allez dans « Média », vous cochez toutes vos photos et vous sélectionnez « Regenerate Thumbnails ».

      Normalement, les soucis liés aux images auront disparus ! Pour la couleur du thème et de la typo, vous faîtes des tests sur le côté avec le petit widget ePanel puis vous allez dans le back-office de WordPress et validez les options dans le ePanel. C’est à ce moment que les modifications seront prises en compte 🙂 .

      Contactez moi par email pour plus d’infos.

      • Salut Pro Elec,

        Merci pour votre réponse, j’ai passé du temps et je commence à comprendre petit à petit !!!
        J’ai bien vu ce petit panneau à gauche, cela change effectivement la couleur de fond… J’aimerai changer la couleur du bandeau marron en haut ainsi que la couleur de la typo texte (jaune doré 🙁 ). Idem pour le texte des nouveaux articles, il est bleu vif 🙁
        comment fait-on pour vous envoyer un message par mail ? 🙂

    • Hello, j’ai traduit 14 thèmes ElegantThemes en français si ça peut vous aider c’est par là : Traduction FR ElegantThemes

      Faites-en bonne usage !

  2. Bonjour,
    Je suis intéressé par votre traduction de ce thème en francais.
    Merci d’avance
    Cordialement

    • Bonjour Yann,

      Pour obtenir la traduction gratuite du thème Aggregate d’Elegant Themes, envoyez moi un message privé 😉

  3. J’ai un problème avec le thème aggregate. Le slider ne fonctionne que sur la page home et à condition de ne pas avoir défini la page d’accueil du site en statique. Je galère depuis trois jours pleins. Avez-vous une idée ? Pour info, j’utilise ce thème pour un autre de mes sites et cela fonctionne très bien mais je n’ai pas installé la dernière version de wordpress. Merci pour votre aide.

    • Le slider est justement un atout pour le contenu récent et donc pour une page dynamique. Pour une page statique, je n’ai jamais essayé malheureusement. Qu’avez-vous sélectionné comme option concernant le slider du thème Aggregate ?

  4. bjr, j’aimerai avoir une aide car j’ai un site déjà traduit mais je n’arrive pas à traduire le slogan de mon site. Merci d’avance.

  5. Bonjour, tout d’abord un grand merci pour ce site qui peut bien éclairer les novices francophones. J’ai téléchargé le thème Aggregate mais je ne trouve pas le modèle de la page avec le slideshow sur toute la largeur de la page. De plus, toutes mes pages sont en 2 colonnes. Pourriez-vous m’aider à y voir plus clair ? Merci beaucoup.

  6. Bonjour,

    J’ai un problème similaire à Pierre : les images miniatures de la première page ne s’affichent soudainement plus… même après avoir installé le plugin & regénérer tous les thumbnails, rien
    si tu as une idée n’hésites pas, c’est vraiment la galère pour moi.

    En tout cas super les explications de cet article!

  7. Bonjour, J’ai fait la manipulation en H1 pour le slogan, mais c’est le titre qui change et se met à la place du slogan. Je n’y comprends rien. J’ai voulu revenir en arrière et j’ai recopié la formule de base, mais le slogan reste en titre. Est-ce possible de revenir à la feuille de style originale quand on a fait des erreurs?

  8. Et j’attends avec impatience votre tuto pour changer la taille de la police 😉

Commenter

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *