Salut, logo-theme_wordpress-5

Lors du dernier article, on a réussi à afficher des articles grâces aux boucles. Le résultat est pour le moment un peu moche, donc je te propose pour cet article de faire une pause avec PHP et de voir comment ajouter des feuilles de style CSS, des librairies comme Font Awesome et Google Fonts.

Il est possible de faire du CSS à l’aide de SASS, comme on le ferait avec n’importe quel autre page web from-scratch.  Je ne m’étendrais pas sur SASS, pour ne pas tout mélanger.

Lorsqu’on a travaillé sur WordPress à la 3WAcademy, il m’a fallu m’adapter un peu, je trouvais perturbant à l’époque d’avoir du HTML et du PHP mélangé sur la même page. Je me demande aujourd’hui ce qui me posait problème, parce qu’il n’y a pas de quoi s’inquiéter! Tu vas voir ça fonctionne exactement de la même façon.

On va utiliser les mêmes sélecteurs CSS que d’habitudes et les mêmes propriétés CSS. L’avantage c’est qu’on aura qu’un seul élément à styliser, les autres passant dans la boucle, suivront le même procédé automatiquement!

 Ajouter un fichier de style personnalisé

Avant d’appliquer du style sur nos éléments, il faut bien évidemment commencer par le début: créer un fichier pour écrire notre CSS!

Créé donc un fichier dans le dossier de ton thème, l’url doit être celle-ci à partir du moment où tu es dans le dossier WordPress:

wp-content/themes/html5blank.

De mon côté j’ai créé dossier « custom »  au sein duquel j’ai  créé un dossier CSS où se trouve un fichier style_perso.css. Ceci a selon moi l’avantage de séparer les fichiers de base de WordPress, de ceux que l’on va créer. Sur un gros projet si tu as pleins de pages PHP plus le CSS et le JS mélangé, bon courage pour t’y retrouver…

Les enqueues de WordPress

Maintenant revenons dans notre fichier function.php. Pour ajouter un fichier CSS, JS, ou autre, il faut ajouter des fichiers dans la file d’attente, appelée enqueue dans WordPress.

Normalement dans le fichier function.php, à la ligne 116, il y a une fonction « html5blank_styles()« . Cette fonction charge 2 fichiers de bases:

  • normalize.css: ce fichier que j’ai découvert à la 3WAcademy, permet d’uniformiser le CSS sur tous les navigateurs. Tu n’es sans doute pas sans savoir que les navigateurs n’implémentent pas tous les propriétés CSS à la même vitesse ou de la même façon, ce fichier est là pour apporter un peu d’uniformisation dans tout ça. Je te conseille d’ailleurs si tu ne le connais pas de jeter un oeil dans les propriétés qu’il contient…
  • style.css: c’est le fichier de base du thème html5blank, il n’a pas beaucoup d’intérêt, je te recommande de le supprimer ou de le commenter.

Pour rajouter le fichier CSS que l’on vient de créer, il faut copier les lignes 118 et 119 :

<?php	   
	//Lignes 118 et 119  permettant d'ajouter le normalize.css dans la file.
	wp_register_style('normalize', get_template_directory_uri() . '/normalize.css', array(), '1.0', 'all');
    wp_enqueue_style('normalize'); // Enqueue it!

?>

Ensuite colle ces lignes en dessous en veillant à bien rester entre les crochets de la fonction. Ensuite il va falloir remplacer ‘normalize’ par le nom de ton fichier, pour ma part, il s’agit de style_perso.

Ensuite point de vigilance sur le chemin d’accès du fichier après l’appel de la fonction « get_template_directory_uri() ». Le fichier normalize est placé à la racine du thème. Pour notre fichier ce n’est pas le cas, il est dans un dossier « custom » puis dans le dossier CSS. Voici ce que j’obtiens dans la fonction PHP, tu devrais avoir quelque chose de semblable, si on a la même arborescence:

// Load HTML5 Blank styles
function html5blank_styles()
{
    wp_register_style('normalize', get_template_directory_uri() . '/normalize.css', array(), '1.0', 'all');
    wp_enqueue_style('normalize'); // Enqueue it!

    //wp_register_style('html5blank', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
    //wp_enqueue_style('html5blank'); // Enqueue it!

    wp_register_style('style_perso', get_template_directory_uri() . '/custom/css/style_perso.css', array(), '1.0', 'all');
    wp_enqueue_style('style_perso'); // Enqueue it!
}

Maintenant pour voir si ça fonctionne, je te propose de mettre une propriété CSS bien kitch et qui permettra de voir tout de suite si ce qu’on vient de faire fonctionne. Je te propose de mettre un background-color : pink; à notre body.  Dès que tu vas recharger la page, tu devrais normalement avoir mal aux yeux… mais c’est bon signe.

 A ce stade tu as tout ce qu’il faut pour ajouter ton CSS.

Vérifier dans la console

Bon c’est bien tout ça mais il n’y a rien de magique, pour preuve, on va vérifier si comme d’habitude on retrouve bien notre balise link avec notre fichier CSS. Ouvre la console de ton navigateur, (F12 sous window, alt+cmd+J sous mac, ou plus simplement clic droit puis inspecter). Je travaille sous Chrome donc je vais dans l’onglet Elements, puis j’ouvre la balise head.

Premier point, dans les articles précédents sur WordPress je n’ai pas parlé de cette balise head, mais tu vois que WordPress l’implémente tout seul, elle se trouve dans le fichier header.php. En fait, grâce à des fonctions PHP, WordPress construit le contenu de cette balise head. C’est notamment le cas pour l’ajout des liens vers les fichiers de styles et JS. Comme tu pourras le voir, il y a beaucoup de choses , notamment JQuery. Maintenant, regarde attentivement, tu devrais trouver ton fichier CSS.

Ajouter la librairie Font-Awesome

Avant de passer au code, on va ajouter la librairie Font-Awesome. Si tu ne connais pas Font-Awesome, c’est une librairie d’icône qui s’ajoute comme une balise HTML et qu’on peut styliser et animer comme n’importe quelle autre élément.

Pour ajouter Font-Awesome, nous avons deux possibilités:

  • utiliser le CDN,
  • importer directement la librairie dans notre projet, c’est ce qu’on va faire, pour continuer à être vigilant sur l’arborescence de nos fichiers…

Donc je te propose de télécharger la librairie sur le site de font-awesome. Une fois téléchargé, décompresse l’archive, et colle le dossier dans le dossier « custom/CSS » que nous avons créé plus tôt dans cet article.

Une fois fait, revenons dans le fichier function.php, puis dans notre fonction à la ligne 116, celle qui nous permet d’ajouter des fichiers de style.

Nous allons faire exactement comme pour l’ajout du fichier CSS. Fait un copié collé des deux lignes de code, comme vu plus haut, et remplace le nom dans les parenthèses des deux fonctions suivantes, comme précédemment :

  • wp_register_style,
  • wp_enqueue_style.

Ensuite il faut faire attention au chemin d’accès que l’on va saisir. On va aller chercher le fichier fontawesome-all.min.css. Voici le chemin que tu devrais avoir : « custom/css/fontawesome-free-5.0.6/web-fonts-with-css/css/fontawesome-all.min.css »

Extrait de mon code, je pense que tu dois avoir la même chose, mais dans le doute :

<?php
// Load HTML5 Blank styles
function html5blank_styles()
{
    wp_register_style('normalize', get_template_directory_uri() . '/normalize.css', array(), '1.0', 'all');
    wp_enqueue_style('normalize'); // Enqueue it!

    //wp_register_style('html5blank', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
    //wp_enqueue_style('html5blank'); // Enqueue it!
    
	// Ajout de Font Awesome
    wp_register_style('fontawesome-free-5.0.6', get_template_directory_uri() . '/custom/css/fontawesome-free-5.0.6/web-fonts-with-css/css/fontawesome-all.min.css', array(), '5.0.6', 'all');
    wp_enqueue_style('fontawesome-free-5.0.6'); // Enqueue it!

	//Ajout de ma feuille de style
    wp_register_style('style_perso', get_template_directory_uri() . '/custom/css/style_perso.css', array(), '1.0', 'all');
    wp_enqueue_style('style_perso'); // Enqueue it!
}



?>

Notre projet est maintenant prêt à intégrer n’importe quelle icône.

Ajouter des Google Fonts

Tout à l’heure pour Font Awesome, on a copié le fichier dans le dossier, on a pas utilisé le CDN. Pour ajouter les Google Fonts nous allons cette fois utiliser le CDN, ou plutôt l’url pour chaque police que nous utiliserons. Pour mon exemple, je vais sélectionner deux polices en même temps : « Nanum Pen Script » et « Permanent Marker« . Tu peux bien sûr prendre autre chose, le principe sera exactement le même!

Pour cela il y a 2 possibilités:

  • Ajouter la balise LINK dans le header.php, dans la balise head,
  • Créer une fonction php qui va ajouter cela à notre place, on va faire ça.

Retour dans notre habituel fichier function.php, et nous allons écrire la fonction suivante en dessous de la fonction qui nous a permis d’ajouter le CSS et Font Awesome. Cette fonction aura besoin de l’URL que l’on récupère sur la page Google Font. Si tu ne sais pas trop comment utiliser les Google Fonts, j’avais fait une partie d’article sur le sujet il y a un bon moment maintenant, si besoin : La propriété font-face.

L’url est celle que tu trouves dans la balise link proposée dans le « panier ».

Voici la fonction, qui va encapsuler une fonction de WordPress que l’on a déjà utilisé : wp_enqueue_style().

<?php

// ADD GOOGLE FONTS
// Ecriture de la fonction
function add_google_fonts() {

wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Nanum+Pen+Script|Permanent+Marker', false );
}
// Execution de la fonction
add_action( 'wp_enqueue_scripts', 'add_google_fonts' );

?>

Le nom placé après « function », est totalement arbitraire, c’est moi qui l’ai donné, tu peux lui donner le nom que tu veux, à condition de bien remettre correctement ce nom entre les parenthèses lors de l’execution de la fonction add_action.

Au sein de cette fonction, tu peux ajouter autant de police que tu veux. L’idéal étant tout de même de faire « son marché » et de toutes les ajouter dans la même url, comme sur mon exemple.

A partir de maintenant on a tout pour faire une belle page CSS. Laisse libre cours à ton imagination, je te laisse ma version, assez simpliste, mais bon c’est juste pour te montrer ce qu’il est possible de faire. Je vais supprimer le background rose, j’ai des photos de street art, donc c’est pas trop la même ambiance…

page_Wordpress_css

Si tu te rappelles de l’article de la semaine dernière (Les boucles de WordPress et la Loop (deuxième partie)), on avait créé un template pour les articles d’une catégorie particulière, et que l’on avait appelé ensuite via la fonction get_template_part(). Je vais créer un fichier CSS à part pour ce template, ce qui permettra de ne pas avoir à rechercher à quel endroit dans la feuille de style générale,  est le code css de cette partie précise. Encore une fois j’aime bien séparer les choses…

Tu me vois arriver, je vais donc refaire l’opération habituelle dans le fichier function.php avec un nouveau fichier CSS.

Voici après 5 articles le résultat que j’obtiens, avec un peu de PHP, HTML, CSS et le moteur de WordPress!

Dernière astuce, qui m’avait fait perdre du temps à la 3WAcademy, n’oublie pas que la fonction get_template_part() retourne du HTML… Tu risques d’avoir des surprises lors de ton positionnement CSS. Veille donc à ce que le contenu que tu appelles avec cette fonction soit bien encapsulé dans une balise (div, section, article, aside, etc)… Par exemple si tu souhaites que ta sidebar soit à droite, veille à ce que tout ce qu’elle contienne soit à l’intérieur d’un bloc, une balise aside par exemple…

Autre chose, J’ai donné une classe CSS à chaque partie (bloc), ce qui permet de cibler les bons éléments, et dans mon cas de n’avoir que le CSS de la sidebar dans le fichier qui correspond à ce bloc là par exemple.

Il manque tout de même une chose importante, ajouter le menu!! Je profiterai de l’ajout du menu pour te montrer comment ajouter un fichier JS, c’est très proche de ce qu’on a fait avec CSS. En plus de ça on finalisera le CSS du Header, et on mettra une petite animation JS.

D’ici là, amuse toi bien!

A bientôt,

Guillaume

Mes fichiers CSS

*J’ai pas fais de responsive, donc pas de média query.

Style général de la page:

/*
gris foncé : #50514F;
violet : #B4ADEA;
blanc/gris : #FDFFF7;
vert : #59FFA0;
jaune : #FFED65;

Titre
font-family: 'Permanent Marker', cursive;
Texte
font-family: 'Nanum Pen Script', cursive;
 */

html{font-size: 62.5%;}/* permet d'avoir une base 10 pour calculer les hauteur de tous les éléments, par défaut base 16... */

body{
  background-color: #50514F;
  font-family: 'Nanum Pen Script', cursive;
  font-size: 1.8rem;
}

*{box-sizing: border-box;}/* Si tu ne connais pas cette propriété regarde dans la doc... très important!! */

h1, h2, h3, h4, h5,h6{
  color :#50514F;
  font-family: 'Permanent Marker', cursive;
}

.flex{
  display: flex;
}

/* MAIN */

main{

  background-color: #59FFA0;
  padding: 1rem 3%;
  margin : 2rem auto;
  width: 70%;
}

h1{
  color: #FDFFF7;
  text-shadow: 2px 2px 2px #B4ADEA;
  font-size: 4rem;
  text-align: center;
}

/* SOCIAL */
.social div{
  justify-content: space-around;
  margin: 2rem auto 5rem;
}

.social h2{
  text-align: center;
  text-shadow: 5px 5px 5px #FFED65;
  font-size: 3rem;
}

.social a{
  color: #FDFFF7;
  text-decoration: none;
}

/* LOOP */

.loop article{
  background-color: rgba(79,81,79,0.4);
  padding: 1rem 2% 0;
}

.loop  h2{
  text-align: center;
  text-shadow: 5px 5px 5px #FFED65;
  font-size: 3rem;
}

.loop article a{
  text-decoration: none;
  color : #50514F;
}

.loop article:nth-child(odd) img{
  float : left;
  margin-right: 2rem;
}

.loop article h3 a{
  color: #B4ADEA;
  font-size: 2.5rem;
}

.loop article:nth-child(odd) h3{
  text-align: left;
}

.loop article:nth-child(even) img{
  float : right;
  margin-left: 2rem;
}

.loop article:nth-child(even) h3, .loop article:nth-child(even) p{
  text-align: right;

}

.loop article a.view-article{
  display: block;
  text-align: center;
  color: #50514F;
  background-color: #FFED65;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 3%;
  font-size: 2.5rem;
}

Style du bloc des catégories, réalisé avec la loop personnalisé: (bloc violet)

.cat_street-art{
  background-color: #B4ADEA;
  box-shadow: 4px 4px 4px #50514F;
  /* border: solid 3px #50514F; */
  border-radius: 10px;
  padding: 1rem 3% 5rem;
  margin: 4rem auto;
}

.cat_street-art div{
  justify-content: space-around;
}

.cat_street-art h2{
  font-size: 4rem;
  text-align: center;
  text-shadow: 5px 5px 5px #FFED65;
  margin: 2rem 1rem;
}

.cat_street-art article{
  width: 45%;
  text-align: center;
  padding: 0.5rem 2%;
  background-color: rgba(79,81,79,0.4);
}

.cat_street-art article h3{
  font-size: 3rem;
  margin: 1rem 1rem;
  text-shadow: 5px 5px 5px #FFED65;

}

.cat_street-art article img{
  max-width: 100%
  border-radius: 20px;
  background-color: rgba(125,125,125,0.7);
}

.cat_street-art article .view-article{
  display: block;
  font-size: 2.5rem;
  font-weight: lighter;
  background-color: #50514F;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 3%;
  color : #FFED65;
}

Style de la sidebar:

.sidebar{
  background: linear-gradient(to top, #59FFA0 60%, #FFED65);
  margin-top: 4rem;
  margin-left: 2rem;
  padding: 1rem 1.5%;
}

.sidebar .search-submit{
  display: block;
  background-color: #FDFFF7;
  border: none;
  margin: 1rem auto;
  padding: 0.5rem 25%;
}

.sidebar h3{
  margin: 0;
}
.sidebar .search-input{
  display: block;
  border: none;
  padding: 0.2rem 0 0.2rem 2%;
}

.sidebar .search-input::placeholder{
  color: #59FFA0;
}