Pour aller plus loin: Manipuler du code (HTML, CSS)

Créer des blocs pour placer des éléments

La balise

permet de déclarer un bloc de texte. A l'intérieur du bloc on pourra placer n'importe quel contenu. La syntaxe est simple:
Début du bloc: <div>
Fin du bloc: </div>
Attention! l'utilisation des DIV peut parfois être complexe et présenter des difficultés pour les débutants. Ce qui suit ne vise pas à vous faire connaître tout sur le sujet, mais à vous présenter quelques exemples simples qui pourront vous servir de modèle.

Des options de style peuvent être affectées au bloc en utilisant l'attribut style. Celles-ci sont précisées dans un langage nommé CSS.

La syntaxe est à préciser dans la déclaration du bloc:
<div style="Options séparées par des points virgules">Contenu<div>

Exemple1

Dans cet exemple on utilise la balise pour créer un bloc sur fond vert, d'une Largeur de 100 pixels, dans lequel on écrit avec un taille de 15, en Jaune

Contenu du bloc vert

voici la syntaxe:
<div style="background:Green;width:100px;font-size:15px;color:yellow;">Contenu du bloc vert</div>

Exemple2

On peut inclure une image dans un bloc DIV. Dans cet exemple, on voudrait centrer une image sur la page, pour la placer sur un fond vert de largeur 100.

 

L'option "margin" permettra de centrer le cadre sur la page, mais il faut aussi préciser qu'on veut centrer l'image dans le bloc DIV avec l'option "text-align"

voici la syntaxe:
<div style="background: Green; width: 100px; text-align: center; margin: auto;">
<img src="http://wp.pixerecourt.fr/cours-info/wp-content/uploads/sites/39/2015/09/demenage.gif">
</div>

Exemple3

On peut inclure également un bloc dans un autre bloc. Ici on configure les hauteurs, largeur et couleur de chaque bloc

bloc1

Syntaxe:
<div style="background: Red; width: 80px; height: 80px;">
<div style="background: Blue; width: 40px; height: 40px;">bloc1</div>
</div>

Exemple4

On peut inclure également plusieurs blocs dans un autre bloc. Dans ce cas, on place dans un bloc rouge, à l'intérieur duquel on place un bloc bleu, et ensuite un bloc jaune

bloc1
bloc2

Syntaxe:
<div style="background: Red; width: 80px; height: 80px;">
<div style="background: Blue; width: 40px; height: 40px;">bloc1</div>
<div style="background: Yellow; width: 40px; height: 20px;">bloc2</div>
</div>

On peut constater que par défaut, les blocs se superposent.

Exemple5

On peut modifier le comportement de l'exemple précédent, afin de placer un bloc à gauche et un autre à droite, en utilisant l'option "float".
Attention, dans l'exemple qui suit, le total des largeurs des bloc1 et bloc2 ne devront pas dépasser la largeur du bloc rouge. Dans le cas contraire, le bloc2 se placera en dessous du bloc1

bloc1
bloc2

Syntaxe:
<div style="background:Red;Width:80px;Height:80px;">
<div style="background:Blue;Width:40px;Height:40px;Float:Left;">bloc1</div>
<div style="background:Yellow;Width:40px;Height:40px;Float:Right;">bloc2</div>
</div>

Exemple5

On peut concevoir un "tableau" à 2 lignes, 2 colonnes. L'option "clear" permet de demander un retour à la ligne à l'intérieur du bloc Rouge:

Bloc1
Bloc2
Bloc3
Bloc4

Syntaxe:
<div style="background:Red;Width:90px;Height:80px;">
<div style="background:Blue;Width:40px;Height:40px;Float:left;">bloc1</div>
<div style="background:Yellow;Width:40px;Height:40px;Float:right;">bloc2</div>
<div style="background:Pink;Width:40px;Height:40px;Float:Left;Clear:Both;"></div>
<div style="background:Green;Width:40px;Height:40px;Float:Right;">bloc4</div>
</div>

Ici, les largeurs et hauteur sont telles que le bloc rouge est complètement caché par les autres blocs.
Encore une fois, n’hésitez pas à reprendre les syntaxes pour les modifier et les tester.
Vous pouvez aussi tester d'autres options de style CSS. La documentation sur le sujet est conséquente, mais voici une sélection de quelques sites:
http://www.css-faciles.com/proprietes-css-liste-alphabetique.php
http://www.startyourdev.com/html/html-article-styles-css
http://www.hobbesworld.com/css/options.php

Utilisation du langage CSS

Attention: cette partie nécessite les droits administrateur!

les thèmes WordPress:

Comme on l'a vu, les options de configuration d'un thème sont limités, tout du moins sur l'interface de personnalisation. Dans l'absolu, les langages du web offre des possibilités illimitées mais les interfaces de modification qu'offre les thèmes sont souvent trop rudimentaire.

Pour davantage de personnalisation, il faut manipuler, en complément du code HTML, un langage nommé CSS. Ce langage permet de définir des styles à appliquer sur les éléments de la page (paragraphe, images, bloc DIV...). En générale, il est écrit dans des fichiers de texte brut, mais ici vous pourrez l'appliquer directement sur WordPress.

Comme pour l'utilisation des Blocs (voir cette page), l'utilisation du CSS peut être complexe. Cette page n'a pas la prétention de tout vous apprendre sur ce langage, mais de vous montrer quelques applications faciles à tester. Peut-être vous permettront-elles d'effectuer vos propres personnalisations!

Nom de la classe des éléments à modifier:

Pour appliquer des modifications à un ou plusieurs éléments d'une page, vous devez savoir désigner cet élément dans le code qu'on utilisera plus bas. Pour désigner un élément, on pourra utiliser

  • Une "Classe" dont le nom est composé d'un # et d'une chaîne de caractère (exemple: #main).
  • Ou une "Id" dont le nom est composé d'un . et d'une chaîne de caractère (exemple: .monbloc).

Ces noms de classe ou d'Id sont utilisés dans le code HTML qui composé par WordPress, (qui est beaucoup plus complet que le code de votre page!). Vous pouvez, vous aussi, nommer les éléments de votre page en utilisant la balise "Class"

Par exemple , on a vu qu'on pouvait écrire un bloc de cette manière:
<div style="background:Green;Width:100px;Font-size:15px;Color:Yellow;">Contenu du bloc vert</div>

Contenu du bloc vert

On peut affecter une classe à ce bloc, ce qui permettra par la suite d'appliquer un style à la classe, plutôt qu'à l'élément (Très utile quand on à plusieurs "BlocVert" à inclure dans la page!!! )
<div class="blocvert">Contenu du bloc vert</div>

Écriture du code CSS:

Pour appliquer un style à une classe, la syntaxe générale est:
.blocvert {options de style séparées par des points virgules}
Avec les options de style qu'on avait précédemment, ça donne:
.blocvert {background: Green; width: 100px; font-size: 15px; color: yellow;}
Rappel: La documentation sur le sujet est conséquente, mais voici une sélection de quelques sites:
http://www.css-faciles.com/proprietes-css-liste-alphabetique.php
http://www.startyourdev.com/html/html-article-styles-css
http://www.hobbesworld.com/css/options.php
http://stylescss.free.fr/proprietes-categs.php

Ou écrire ce code?

Selon le thème de WordPress qui à été choisi, on pourra trouver une zone ou on pourra ajouter une "CSS personnalisé". Avec le thème "Concept", ou trouvera la personnalisation du CSS dans Apparence/Personnalisation.

Tous les thèmes se présentent pas cette possibilité, dans ce cas, il faudra avoir recourt à l'édition d'un fichier texte!

 

 

Appliquer un code css dans le thème "Concept"

Appliquer un code css dans le thème "Concept"

Autre application: appliquer des modifications de style sur les éléments qui ne sont pas configurable directement dans le thème:

Par exemple, on voudrait changer la couleur du bloc ou se trouve le "fil d'ariane", C'est à dire l'élément en haut de page qui indique à l'internaute à quel endroit du site il se trouve

Fil d'ariane de la page, avec le thème "Concept"

Fil d'ariane de la page, avec le thème "Concept"

Retrouver les noms de classe et d'ID dans le code de WordPress et le code qui est actuellement appliqué

Lorsqu'on visualise une page avec le navigateur Firefox, on peut avoir accès à un "examinateur de style" qui permet de voir le code CSS qui est appliqué. Pour y accéder, aller sur votre site, puis faite un Clic droit/Examiner l'élément:

Examiner le code CSS des éléments d'une page, sous Firefox

Examiner le code CSS des éléments d'une page, sous Firefox

Un volet s'ouvre, en bas de page, présentant le code CSS appliqué à l'élément qui est sélectionné dans la page:

 

Affichage du code CSS appliqué à un élément qui est sélectionné

Affichage du code CSS appliqué à un élément qui est sélectionné

Appliquer une modification sur l'élément:

Modification à faire sur l'examinateur de style, ou sur le thème

Modification à faire sur l'examinateur de style, ou sur le thème

Création des menus

Attention: cette partie nécessite les droits administrateur!

Le menu permettent de faciliter la navigation, puisqu'ils permettent à l'internaute d’accéder aux pages du site. En général, il est généralement placé en haut de page, mais on peut également en placer un en pied de page.

WordPress vous permet de créer plusieurs menus, qui vont pointer vers différentes pages de votre site, ou même vers des sites externes. Il va s'en dire que les pages doivent être crées avant les menus!

Certains thèmes peuvent impliquer de créer des menus à un autre endroit.
(voir cette partie)

Voici la procédure générale:

Création du menu

Création d'un menu

Création d'un menu

Assemblage du menu:

Gérer le contenu du menu

Gérer le contenu du menu

Gérer l'emplacement du menu sur la page:

Gérer les emplacements de menu et résultat

Gérer les emplacements de menu et résultat

Gérer l'apparence du site

Attention: cette partie nécessite les droits administrateur!

les thèmes WordPress:

Les thèmes permettent de profondément changer l’apparence générale d’un site WordPress. En agissant sur le thème, on configure l'emplacement des éléments, les couleurs, les polices etc..

Dans l'ensemble, WordPress est un logiciel Opensource, mais pour des sites de qualité, les thèmes qui y sont utilisés sont développés sur mesure et donc payant. Trouver un thème facilement configurable (et en français!) peut s'avérer parfois difficile.

Choix d'un thème:

Sur cette plate-forme, quelques thèmes simples sont installés et vous pouvez les essayer librement, pour cela, il suffit de les activer. D'autres thèmes pourraient être ajoutés sur demande au service informatique.

Choix d'un thème

Choix d'un thème

Configuration du thème:

Selon le thème choisi, les possibilités de configuration sont différentes. Par exemple, le thème "Concept" est un des plus facile à paramétrer:

Personnalisation du thème "Concept"

Personnalisation du thème "Concept"

Activation d'un autre thème:

Paramètrage du thème "DeStyle"

Paramètrage du thème "DeStyle"