afficher du code dans un contenu wordpress

par | 15 Nov 2014 | Plugin (extension) WordPress

Le plugin que j’utilise ici

J’utilise Crayon Syntax Highlighter.

crayon-syntax-highlighter

En mode texte <pre class= »lang:php decode:true » title= »Testing »>$table_prefix = ‘wp_’;</pre> deviendra :

$table_prefix = 'wp_';

On peut aussi utiliser d’autres langages tels que xhtml pour html ou xml, css, js pour javascript, mysql ou pgsql pour SQL, perl, sh pour shell, Unix ou bash  . La liste complète des langages est disponible dans réglages / crayon puis en cliquant sur la liste des langages.

<pre class="lang:php decode:true" title="Testing">du code ici</pre>
<pre class="lang:xhtml decode:true" title="Testing">du code ici</pre>
<pre class="lang:css decode:true" title="Testing">du code ici</pre>
<pre class="lang:js decode:true" title="Testing">du code ici</pre>
<pre class="lang:mysql decode:true" title="Testing">du code ici</pre>
<pre class="lang:perl decode:true" title="Testing">du code ici</pre>
<pre class="lang:sh decode:true" title="Testing">du code ici</pre>

On peut également charger des fichiers. Voir les détails ici.

Note

L’auteur du thème que j’utilises ici préconise l’extension SyntaxHighlighter Evolved  mais je n’ai pas réussi à le faire fonctionner…

Pour l’utiliser, il suffit de taper des shortcodes de type [language],

Par exemple 

code ici

ou 

code là

, ou 

code ici

ou 

code là

Si on utilise , il n’y a pas de couleurs selon le vocabulaire.

Pour visualiser tous les langages qu’on peut utiliser : http://en.support.wordpress.com/code/posting-source-code/

 

Modèles d’icones

Modèles d’icones

par | 15 Nov 2014 | Illustrations, photos et autres médias

Dashicons (cf liste des icones ici)

Voir ce site pour ajouter les icones dashicon si nécessaire (en principe, sont déjà intégrées à wordpress).


&lt;div data-code="f307" class="dashicons dashicons-groups"&gt;&lt;/div&gt;

&lt;div data-code="f237" class="dashicons dashicons-share"&gt;&lt;/div&gt;

&lt;div data-code="f325" class="dashicons dashicons-networking"&gt;&lt;/div&gt;

Affichera

font awesome (cf liste des icones ici)

Elles ne sont pas initialement intégrées à wordpress. Il faut « enqueue » le style. Ce sera l’objet d’une autre note.


&lt;i class="fa fa-laptop"&gt;&lt;/i&gt;

&lt;i class="fa fa-mobile"&gt;&lt;/i&gt;

<i class= »fa fa-laptop »></i>

<i class= »fa fa-mobile »></i>

bootstrap 3 glyphicons (cf liste des icones ici)

on peut acheter des icones Glyphicons pour $59 (ou $25. Une partie est gratuite et inclue dans tout thème fondé sur bootstrap 3 (comme ce thème)

Exemple 

&lt;i class=" glyphicon glyphicon-adjust " style=""&gt;


Round icons (cf liste ici)

Identifiées suite à un article de smashing magazine. De belles icones, dont certaines sont gratuites. On peut acheter les 6500 icones pour $99 actuellement (novembre 2014).

Icomoon Icons

Voir le site Ico Moon

&lt;</code><code class="xml keyword">i</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"glyphicon ipt-icon-home"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">i</code><code class="xml plain">&gt;


par | | Non classé

par | | Non classé