Guillemets (blockquotes) en WordPress

guillemets - blockquotes wpLes différents guillemets, également nommé "Quotation Mark" :

  • « Guillemet français ouvrant
  • » Guillemet français fermant
  • Guillemet double ouvrant (anglais)
  • Guillemet double fermant (anglais)
  • " Guillemet double droit (dactylo)


 
 

1. Changer les guillemets

Pour changer les guillemets français aux guillemets double droits (dactylo) dans les articles, sur les pages, dans les titres et dans les commentaires, ouvrez le fichier functions.php de votre thème et rajoutez le code suivant en bas de la page :

remove_filter ('the_content', 'wptexturize');
remove_filter('comment_text', 'wptexturize');
remove_filter('the_excerpt', 'wptexturize');
remove_filter('the_title', 'wptexturize');

Ça va remplacer automatiquement les guillemets, même dans les articles déjà créés.

 

2. Façonner le texte entre les guillemets

Six styles à façonner le texte entre les guillemets (la section entière), ouvrez votre style.css et cherchez quelque chose comme blockquote {font-style: italic;padding-left: 30px;} :

2a. couleurs et bordures

blockquote {
margin: 1em 3em;
color: #3299bb;
border-left: 2px solid #3299bb;
padding-left: 1em;
}

Résultat entre <blockquote> et </blockquote> sur la page :

Le web design désigne la conception de l'interface web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation dans le site web.

 

2b. couleur du fond, bordure et contrôle de la distance du paragraphe

blockquote {
margin: 1em 3em;
padding: .5em;
color: #ffffff;
border-left: 5px solid #ffffff;
background-color: #3299bb;
}
blockquote p {
margin: 20px 0; /* distance haut et bas */
}

Résultat entre <blockquote> et </blockquote> sur la page :

Le web design désigne la conception de l'interface web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation dans le site web.

Il s’agit d’une phase essentielle dans la conception d’un tel site. La conception d'un design web tient compte des contraintes spécifiques du support Internet, notamment en termes d’ergonomie, d’utilisabilité et d’accessibilité.

 

2c. image du fond, type et style de police (italic)

blockquote {
margin: 1em 20px;
padding-left: 50px;
font-family: Arial, Verdana, sans-serif;
font-style: italic;
background: transparent url("http://www.votre-site.com/images/votre-image.png") left top no-repeat;
}

Résultat entre <blockquote> et </blockquote> sur la page :

Le web design désigne la conception de l'interface web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation dans le site web.

Il s’agit d’une phase essentielle dans la conception d’un tel site. La conception d'un design web tient compte des contraintes spécifiques du support Internet, notamment en termes d’ergonomie, d’utilisabilité et d’accessibilité.

 

2d. première lettre et ligne du texte

blockquote {
margin: 1em 2em;
padding-left: 1em;
font-family: Arial, Verdana, sans-serif;
border-left: 1px dashed #AAAAAA;
}
blockquote p:first-letter {
float: left; /* évitez le float pour les mobiles */
margin: .2em .3em .1em 0;
font-family: Georgia, Arial, sans-serif;
font-size: 220%;
font-weight: bold;
}
blockquote p:first-line {
font-variant: small-caps;
}

Résultat entre <blockquote> et </blockquote> sur la page :

Le web design désigne la conception de l'interface web :
l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation dans le site web.

Il s’agit d’une phase essentielle dans la conception d’un tel site.
La conception d'un design web tient compte des contraintes spécifiques du support Internet, notamment en termes d’ergonomie, d’utilisabilité et d’accessibilité.

 

2d. première lettre et ligne du texte

blockquote {
font-family: Arial, Verdana, sans-serif;
font-style: italic;
margin: 1em 3em;
}
blockquote p:before {
content: '"';
font-family: Georgia, Arial, sans-serif;
font-size: 250%;
font-weight: bold;
}
blockquote p:after {
content: '*';
color: #cccccc;
font-family: Georgia, Arial, sans-serif;
font-size: 150%;
font-weight: bold;
}

Résultat entre <blockquote> et </blockquote> sur la page :

Le web design désigne la conception de l'interface web :
l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation dans le site web.

Il s’agit d’une phase essentielle dans la conception d’un tel site.
La conception d'un design web tient compte des contraintes spécifiques du support Internet, notamment en termes d’ergonomie, d’utilisabilité et d’accessibilité.

Plus d'information concernant les pseudo-éléments ::before et ::after, allez sur le site de CSS3 Create : cliquez ici

Les commentaires sont fermés.