planet-libre

WordPress Twenty Eleven Child Theme : Solarized

Guillaume

Guillaume

— 7 min read

Voici quelques manipulations que j’ai faites afin de modifier mon installation du thème par défaut de WordPress : Twenty Eleven.

Pour plus d’informations quant à l’édition du thème Twenty Eleven, que j’estime très souple et complet, je vous conseille les quelques pages suivantes :

C’est parti pour l’édition de Twenty Eleven et, grande nouveauté pour moi, lui donner quelques couleurs !
  • Créer un thème enfant afin de ne pas devoir refaire les manipulations à chaque mise à jour du thème ;
Assez simple au demeurant, créez le dossier twentyelevenchild à côté de celui de votre thème, c’est à dire dans /wp-content/themes/. Dedans, créez le fichier style.css dont les premières lignes seront celles-ci : 
/*
Theme Name:     Twenty Eleven Child
Theme URI:      http://theme.wordpress.com/themes/twentyeleven/
Description:    Child theme for the Twenty Eleven theme
Template:       twentyeleven
Version:        42
*/

/* We must first include the original css from the parent theme */

@import url("../twentyeleven/style.css");

  • Utiliser Cantarell (la police par défaut de Gnome depuis la version 3.0) comme police d’affichage ;
Pour avoir tout ce dont j’avais besoin, j’ai téléchargé le @font-face kit sur Font Squirrel, avec le subset francophone. 
/*Place the webfonts from font-squirrel in /wp-content/themes/your_theme/fonts/ */
@font-face {
        font-family: 'Cantarell';
        src:    url('fonts/Cantarell-Regular.woff') format('woff'),
                url('fonts/Cantarell-Regular.ttf') format('truetype'),
                url('fonts/Cantarell-Regular.svg#CantarellRegular') format('svg');
}

@font-face {

font-family: 'Cantarell';

src:    url('fonts/Cantarell-Oblique.woff') format('woff'),

url('fonts/Cantarell-Oblique.ttf') format('truetype'),

url('fonts/Cantarell-Oblique.svg#CantarellOblique') format('svg');

font-style: italic;


}


@font-face {

font-family: 'Cantarell';

src:    url('fonts/Cantarell-Bold.woff') format('woff'),

url('fonts/Cantarell-Bold.ttf') format('truetype'),

url('fonts/Cantarell-Bold.svg#CantarellBold') format('svg');

font-weight: bold;


}


@font-face {

font-family: 'Cantarell';

src:    url('fonts/Cantarell-BoldOblique.woff') format('woff'),

url('fonts/Cantarell-BoldOblique.ttf') format('truetype'),

url('fonts/Cantarell-BoldOblique.svg#CantarellBoldOblique') format('svg');

font-weight: bold;

font-style: italic;

}

  • Modification du footer.php pour supprimer le « Fièrement propulsé par WordPress » ;
Recopiez footer.php dans le dossier de votre thème enfant, et supprimez les lignes entre div id="site-generator" et sa balise de fermeture.
  • Modification du header.php afin de cacher la barre de recherche et améliorer l’intégration de Yoast’s SEO Plugin ;
Recopiez header.php dans le dossier de votre thème enfant, et supprimez le get_search_form(); repris par deux fois.

Pour WordPress SEO, encore plus simple : remplacez tout ce que vous trouverez dans entre les balises du title par la balise reprise dans la FAQ (wp_title('');).

  • Intégration automatique de Yourls au bas des articles
Pour cela, je vous redirige sur cet article de ma plume, où j’expose mon intégration de la chose.
  • Remplacement de la navigation des pages par WP-PageNavi
En deux temps, il s’agit de créer une fonction spéciale remplaçant la navigation par défaut par WP-PageNavi lorsqu’il est activé, ou retournant à la disposition par défaut en cas de problème de ce côté là. La fonction est simple, je vous renvoie à cet article que je n’ai fait qu’appliquer.

Comme indiqué, il ne reste plus qu’à modifier dans index.php la fonction twentyeleven_content_nav par twentyeleven_child_content_nav :

Pour ne pas avoir de redondance en début de page, j’ai aussi supprimé l’occurence du content_nav en début de fichier (et ainsi ne plus avoir le sélecteur qu’en bas de page).

Le thème employé est un que j’ai gentiment été « piquer » sur ce blog, utilisé afin de remplacer le style par défaut qui est particulièrement hideux. Il va sans dire que j’ai désactivé Use pagenavi-css.css dans la configuration de l’extension.

/* Pagination */
.wp-pagenavi{ font-family:Arial,sans-serif; height:28px; margin-top:20px; position:relative; text-shadow:none;}
.wp-pagenavi a,
.wp-pagenavi span{ background:#fff; border-radius:3px; float:left; font-size:14px; font-weight:bold; height:28px; line-height:28px; margin-right:4px; padding:0 10px;}
.wp-pagenavi a{ border-color:#fff; color:#2aa198;}
.wp-pagenavi a:hover{ background:#839496; border-color:#839496; color:#fff; text-decoration:none;}
.wp-pagenavi span{ background:#839496; border-color:#839496; color:#fff;}
.wp-pagenavi .extend{ display:none;}
.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink{ position:absolute; font-size:15px; top:0;}
.wp-pagenavi .nextpostslink{ margin-right:0; right:0;}
.wp-pagenavi .previouspostslink{ margin-right:0; right:32px;}
  • Affichage de la barre de widgets pour les articles seuls
Relativement simple, cette manipulation nécessite d’éditer les documents single.php et functions.php, le premier forçant l’affichage de la barre, le second permettant de passer outre les réglagles par défaut de WordPress.

Il s’agit d’ajouter get_sidebar avant get_footer dans single.php, plus une fonction afin de passer outre les fonctions par défaut de Twenty Eleven – appliquées après celles du thème enfant. Pour ce faire, j’ai suivi cet article.

  • Un joli WP-Syntax
Utilisant le plugin WordPress WP-Syntax, je trouvais ce dernier un poil trop brutal et marqué, ne s’intégrant pas facilement à la page. Puis j’ai relu le code de Minisch par Schoewilliam et lui ai piqué les lignes suivantes : 
.wp_syntax {
  background-color: rgba(150, 150, 150, 0.06) !important;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.13) !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05) inset;
  	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.05) inset;
  	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.05) inset;
  	-o-box-shadow: 0 0 8px rgba(0, 0, 0, 0.05) inset;
  width: 99%;
}
.wp_syntax .line_numbers {
  background-color: #FFF !important;
  color: #AAAAAA !important;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
  • Du joli code
Quitte à repiquer un peu partout de bonnes idées qui me plaisent, cette fois-ci c’est auprès de Jérôme Mahuet que j’ai été faire le plein de bonnes idées, plus particulièrement sur son blog Phollow dont j’ai retenu, moyennant modification : 
code {
    background: #fdf6e3;
    color: #657b83;
    border: 1px solid #eee8d5;
    padding: 1px 3px;
    border-radius: 3px 3px 3px 3px;
}
  • De jolies couleurs et une jolie disposition
Étant tombé amoureux de Solarized, j’ai voulu en mettre quelques touches sur mon blog, ce qui s’est soldé par ce bout de code, agrémenté d’une justification de tout le bordel. 
/* font size to 14px, automatic justification and hyphenation */
body, input, textarea {
        font:14px;
	hyphens:auto;
	-moz-hyphens:auto;
        -webkit-hyphens:auto;
        -ms-hyphens:auto;
        -o-hyphens:auto;
        text-align:justify;
}

body, input, textarea, .entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6,.entry-title,.entry-title a,.entry-comment h1,.entry-comment h2,.entry-comment h3,.entry-comment h4,.entry-comment h5,.entry-comment h6,section.recent-posts .other-recent-posts a[rel="bookmark"] {

color:#586e75;

font-family:'Cantarell',Verdana,Arial,Helvetica,sans-serif;

}


/Justify the text in the widget column/

.widget {

text-align:justify;

}


.widget a {

color: #6c71c4;

}


.textwidget a {

color: #dc322f;

}


.entry-meta a {

color: #2aa198;

}


.commentlist a {

color: #cb4b16;

}


::-moz-selection{background:#FF5E99;color:#fff;text-shadow:none}

::selection{background:#FF5E99;color:#fff;text-shadow:none}


blockquote {

background-position: left top;

background-repeat: no-repeat;

display: block;

font-style: italic;

margin-bottom: 24px;

margin-left: 1.5em;

min-height: 5px;

padding: 0 0.7em;

text-align: left;

position: relative;

border-left: 2px solid #859900;

}

  • Un menu centré et collé en haut de page
Dans ma guerre à l’espace perdu inutilement, le menu est quelque chose qui m’a longtemps taraudé. Après quelques recherches et quelques tests, heureusement, j’ai pu me départir de cet ennui. 
/* Top centered menu */
#access {
	text-align:center;
	float:inherit;
	line-height: 0;
	margin:auto;
	background:linear-gradient(#002b36,#073642) repeat scroll 0 0 transparent;
	background:-moz-linear-gradient(#002b36,#073642) repeat scroll 0 0 transparent;
	background:-o-linear-gradient(#002b36,#073642) repeat scroll 0 0 transparent;
	background:-webkit-linear-gradient(#002b36,#073642) repeat scroll 0 0 transparent;
	background:-ms-linear-gradient(#002b36,#073642) repeat scroll 0 0 transparent;
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#002b36), to(#002b36));
}
#access ul { display:inline-block;}
#access div {margin: 0 0 0 0;}
#branding {padding-bottom:0;}
#branding .only-search + #access div {padding-right: 0;}
body {padding: 0 0;}
  • Quelques coups de balais afin de supprimer l’espace perdu et maximiser l’affichage
/*Increase the widht of the page for big screens*/
#page {max-width: 100%;margin:auto;}

/center the featured posts/

.featured-posts {

margin: 0 0 0 0;

max-width: 100%;

}


/* Allows space for the sidebar */

.singular #primary {

margin: 0 -26.4% 0 0;

}


/* Don't place the meta information at the top of the article */

.singular .entry-header .entry-meta {

position: relative;

}


/* Removes redundant whitespace to the top of the article */

.singular .hentry {

padding: 0;

}


/* Allows the content to take up the majority of the space available */

.singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {

width: 100%;

}


/* So the content doesn't overlap the sidebar */

.singular #content, .left-sidebar.singular #content {

margin: 0 34% 0 7.6%;

}


/*  Removes redundant whitespace to the top of the article */

.singular article .entry-title {

padding-top: 0;

}


/* Moves the "Edit" link for admins. */

.singular .entry-meta .edit-link a {

right: 0;

top: 0;

left: auto;

}


/Removes the grey line above header/


branding {


    border-top: none;



}


/Make the comments wider because the avatars are hidden/


respond {


    width: auto;



}


.commentlist {

width: auto;

}


.commentlist > li.comment {

margin-left: 20px;

width: auto;

}

  • Cadeau de la part de Schoewilliam, un joli bouton que je lui pique
a.button {
    background: linear-gradient(#63A2E0 0%, #4183C4 100%) no-repeat scroll center top #4183C4;
    background: -webkit-linear-gradient(#63A2E0 0%, #4183C4 100%) no-repeat scroll center top #4183C4;
    background: -moz-linear-gradient(#63A2E0 0%, #4183C4 100%) no-repeat scroll center top #4183C4;
    background: -o-linear-gradient(#63A2E0 0%, #4183C4 100%) no-repeat scroll center top #4183C4;
    background: -ms-linear-gradient(#63A2E0 0%, #4183C4 100%) no-repeat scroll center top #4183C4;
    background-color: #4183C4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    display: inline-block;
    padding: 2px 15px;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 105%;
    text-decoration: none;
    transition: all 0.5s;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     -ms-transition: all 0.5s;
}
a.button:hover {
    background-position: 0 -50px !important;
}
a.button:active {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.2);
     -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.2);
     -o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.2);
}
a.button strong {
    font-size: 17px;
}
C’est tout ! Vous voilà aux commandes d’un thème WordPress minimaliste qui s’affiche bien.

Read more