Introduction au CMS WordPress
(Content Management System)
Web Hosting (hébergement web) :
Au lieu d’acheter un ordinateur (serveur) dédié à l’hébergement de votre site web et le garder allumer et connecter à internet tout le temps, des hébergeurs web comme OVH ou HostGator vous proposent d’héberger votre site contre un abonnement mensuel. Cela vous évitera la maintenance du serveur et les hébergeurs vous proposent des outils pour facilement déployer le CMS WordPress. Pour que votre site soit accessible sur internet il vous faut un nom de domaine, par exemple « mondomaine.com ». Ce dernier peut être réservé contre un abonnement annuel sur le site de l’hébergeur.
Installation locale :
Un serveur web (Apache), MySQL et PHP doivent être installés sur votre ordinateur. Vous pouvez installer (LAMP pour avoir les trois ensemble). Ensuite, il faut télécharger WordPress du site «https://wordpress.org/wordpress-5.5.3.zip» et le décompresser. Le répertoire obtenu doit être copié dans le répertoire racine du serveur. Pour accéder à WordPress, il faut ouvrir l’adresse http://localhost:8888/wordpress/ dans votre navigateur.
Lors de la première connexion à WordPress, vous devez le configurer en précisant les identifiants pour accéder à la base de données MySQL (il vaut mieux créer une base de données dédiée à WordPress).
Créer un premier site avec WordPress :
Dans cette section vous allez suivre les instructions pour créer facilement un site avec WordPress et découvrir quelques fonctionnalités de ce dernier. Figure 1 présente la page principale du site. On peut apercevoir dans la page principale les composants suivants :
1. Un Logo
2. Un menu horizontal
3. Un Carrousel avec une image, un titre, une description et un bouton par diapositive 4. Une section appelée « feature area » avec un titre, une description et 4 sous-sections.
5. Chaque sous-section comprend une image avec un lien, un titre et une description.
6. Une section publications récentes (pied de la section feature area)
7. Un pied de page contenant 4 sections (droits d’auteur, liens, tags et moteur de recherche)
Figure 1: Page principale
1. Le thème : il existe des milliers de thèmes gratuits ou payants dans WordPress et vous pouvez développer votre propre thème ou modifier un existant. Un thème est un ensemble de fichiers PHP et CSS qui définissent le modèle du site et ses fonctionnalités. Pour choisir un thème, il faut sélectionner Appearance/Themes/Add new et puis chercher un thème qui vous convient et l’installer. Une fois installé, il faut l’activer.
Installez le thème Traffica et activez-le.
2. Remplir la page principale avec des données (vous pouvez utiliser les images ci-jointes à l’énoncé) :
a. Dans Appearance/customize/Site Title & logo, vous pouvez modifier le Logo, saisir le titre et l’icône du site.
b. Dans Appearance/customize/Slider Settings, vous pouvez remplir le carousel.
c. Dans Appearance/customize/Feature Area settings/Main Heading Setting, vous pouvez changer le titre et le sous-titre de l’entête.
d. Dans Appearance/customize/Feature Area settings, vous pouvez remplir la feature area.
e. Dans Appearance/customize/Menus, vous pouvez créer le menu (il faut d’abord créer les pages et les publications)
f. Dans Appearance/customize/widgets, vous pouvez modifier le pied du site et ajouter des widgets
3. Créer des pages : suivez Pages/add new et puis donnez un titre et un contenu à votre page. Dans attributes, vous pouvez préciser si c’est une sous-page d’une autre et son ordre. Enfin, n’oubliez pas de publier la page. Ajoutez les pages qui n’ont pas de parents dans le menu de la page principale.
Créez les pages suivantes : House Stark, House Lannister, House Baratheon, House Targaryen, about, contact. Pour la page contact, installez le plugin « Contact Form 7 » (plugins/add new, cherchez le plugin, installez-le et activez-le). La page contact doit contenir l’instruction suivante : [contact-form-7 id="88" title="Contact form 1"]
(Figure 2).
4. Lier les images de la feature area aux pages en ajoutant le lien pour chaque page dans Appearance/customize/ Feature Area settings.
5. Créer des posts : suivez Posts/add new et puis donnez un titre et un contenu à votre post. Il faut les mettre dans la même catégorie et leur donner des tags selon leur contenu.
6. Vous pouvez ajouter des widgets aux posts dans Appearance/widgets. Les widgets ne peuvent pas être ajoutées que dans des emplacements spécifiés dans le thème. On peut avoir de nouveaux widgets en téléchargeant des plugins dans plugins/add new.
Téléchargez le plugin « social media feather » et ajoutez dans un post l’instruction suivante pour avoir les boutons de partage aux réseaux sociaux : [feather_share]
7. Ajouter dans le menu un lien (News) aux posts d’une catégorie : Dans Appearance/Menus, ajoutez un lien de catégories pour obtenir une page comme la figure 3. Ajoutez aussi un lien (custom) qui va s’appeler « Great houses » et qui va regrouper les 4 pages créées précédemment.
8. Ajouter le plugin « wp recent views », il va vous permettre d’ajouter un widget qui liste les dernières pages ou publications vues. Ajouter le widget « recent views » aux posts dans « appearance/widgets ».
9. Utilisateurs : Créer des comptes utilisateurs avec différents privilèges : a. L’administrateur possède tous les droits.
b. L’éditeur peut créer et modifier les pages et les publications (posts) mais pas la configuration du site.
c. L’auteur peut modifier seulement ses publications.
d. Le contributeur peut modifier ses publications mais l’administrateur doit les valider avant de les publier.
e. L’abonné peut modifier seulement son profil.
Créez plusieurs utilisateurs avec différents rôles et connectez-vous aux nouveaux comptes pour découvrir les droits de chacun.
Figure 2 : La page contact
Figure 3 : Les posts
Modifier un thème
Un thème est composé de fichiers PHP, CSS et JS. Pour modifier un thème, il faudrait modifier le contenu de ses fichiers en fonction de votre besoin. Ne modifiez jamais les fichiers du thème que vous avez téléchargé car vos modifications peuvent être remplacées si le thème est mis à jour. Il est conseillé d’étendre le thème en créant un répertoire dans wordpress/wp- content/theme/, intitulé « nom_theme_pere-child ».
1. Pour modifier le style du thème père, il faut ajouter un fichier intitulé style.css dans le nouveau répertoire. Le fichier css doit contenir le code suivant :
/*
Theme Name: thème_père extension Theme URI: http://wordpress:8888/
Dexcription: This is a child theme of thème_père Author: jccharr
Author URI: http://wordpress:8888/
Template: thème_père version: 0.1
*/
@import url("../thème_père/style.css");
modifier le css des éléments HTML
Utiliser l’outil « inspect element » dans les outils de développement de google chrome pour découvrir la classe de l’élément HTML que vous voulez modifier.
Modifiez la couleur du fond d’écran de la section « Great Houses » de la page principale qui est située après le carrousel.
2. Pour modifier le contenu de l’entête du site, le pied du site, les pages ou les posts, il faut copier la template correspondante du thème père dans le nouveau répertoire et la modifier. Par exemple, pour modifier l’entête du site, vous devez copier le fichier header.php dans le nouveau répertoire et le modifier. De même vous pouvez modifier le contenu des pages en copiant page.php dans le nouveau répertoire et la modifiant.
Cependant, si vous voulez modifier seulement le contenu d’une page donnée, vous devez renommer le fichier page.php. Pour la page « about », le fichier php doit s’appeler page-about.php et si vous le modifiez, seulement la page « about » va être modifiée. Enfin, si on veut modifier un ensemble de pages, on va créer une page template, par exemple pour des pages sans widgets, la template s’appellera page-no- widgets.php. Puis, ajouter, au début du fichier php, le nom de la nouvelle template de la façon suivante :
<?php /**
*Template Name : No Widgets *
* The template for displaying all pages.
Chaque page dans l’ensemble doit être associée à la template « No Widgets » dans l’éditeur des pages (Page attributes/Template).
a) Supprimez la sidebar dans la page « About » en modifiant and le nouveau répertoire le fichier page.php et en le renommant page-about.php.
b) Supprimez la sidebar dans la page « Contact » en modifiant dans le nouveau répertoire le fichier page.php et en le renommant page-no-sidebar.php. Puis associez la page « Contact » à la template « No Sidebar ».
c) Supprimez pour chaque poste dans News à quelle catégorie appartient la publication. Ex : posted by jccharr in News
3. Pour ajouter un espace pour les widgets dans une page donnée, consulter le lien suivant : https://codex.wordpress.org/Widgetizing_Themes
Supprimez le formulaire de recherche de la primary widget area et ajoutez une widget area à l’entête comme dans la figure suivante :
Il faut d’abord créer dans le répertoire traffica-child un fichier functions.php dans lequel vous ajoutez le code suivant pour enregistrer la nouvelle widget area :
<?php
function traffica_child_widgets_init() { //php function
register_sidebar( array(
'name' => 'Header Widget Area', 'id' => 'header_widget_area',
'before_widget' => '<div class="header_widget">', 'after_widget' => '</div>',
'before_title' => '<h2 class="header_widget_title">', 'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'traffica_child_widgets_init' ); //hook
?>
Ensuite, il faut afficher la widget area dans l’entête. Donc il faut ajouter dans header.php le code suivant :
<?php if ( dynamic_sidebar('header_widget_area') ) : else : endif; ?>
Puis, allez dans widgets et vous devez trouver une nouvelle widget area qui s’appelle Header Widget Area. Ajoutez la widget search à cette dernière.
Enfin, mettez-en forme la widget search, comme dans la figure ci-dessus, en ajoutant des instructions CSS dans le fichier style.css. Utilisez les instructions du fichier style.css du thème traffica et l’image du thème traffica.
4. Pour ajouter un nouvel emplacement pour les menus, il faut l’enregistrer dans le fichier functions.php comme suit :
function traffica_child_register_menu() {
register_nav_menu('left-menu',__('Left Menu')); //id, titre }
add_action('init','traffica_child_register_menu');
Ensuite, il faut l’afficher là où on veut avec l’instruction suivante :
<?php wp_nav_menu(array('theme_location' => 'left-menu' )); ?>
Ajoutez un menu à gauche de la page principale dans la section « feature area »
comme suit:
5. Pour ajouter un script Javascript au nouveau thème, il faut créer un répertoire « js » dans le répertoire du nouveau thème et ajouter le script dedans. Puis, dans le fichier
« functions.php » il faut ajouter le code suivant : function traffica_child_scripts(){
wp_enqueue_script('float-panel js',get_stylesheet_directory_uri().'/js/float-panel.js');
}
add_action('wp_enqueue_scripts','traffica_child_scripts');
Ajoutez le script « float-panel.js » à votre thème afin que le menu vertical soit visible même si on défile la page principale vers le bas. Il faut remplacer dans le script « float- panel » par la classe de la div qui contient votre menu vertical.
