LE CONTEXTE
Vous devrez créer un site (un blog) à partir de l’outil WordPress.
Votre site (blog) devra comporter plusieurs thématiques et notamment :
- une présentation de l’auteur : vous ;
- le contenu de votre formation actuelle et ses débouchés professionnels ;
- votre projet professionnel après le BTS NDRC ;
- vos passions, vos loisirs et leur actualité.
Vous travaillerez particulièrement les textes de votre site, le confort de navigation pour les internautes, le design et enfin l’arborescence (le menu) de votre site.
Enfin et surtout votre site devra être fait de façon très professionnelle et agréable pour les internautes
ACTIVITE N° 1
PREPARER VOTRE SITE : L'ARBORESCENCE DU SITE
Etape 1 – La création de l’arborescence
La création d’un site Internet passe toujours par une réflexion préalable, et donc par l’outil « stylo/papier » !
- Tout d’abord il s’agit de créer votre arborescence de site. Pour davantage d’informations, rendez-vous à cette adresse, qui explique comment créer une arborescence de site internet.
- Réalisez l’arborescence de votre site, en fonction des consignes données plus haut et de ce que vous venez de lire.
Pour ce faire, vous utiliserez un document Word, et insérerez un graphique SMARTART.
Soyez judicieux sur le type de graphique que vous allez créer…
Etape 2 – Distinguer Pages et Articles
Avant toute chose, il s’agit de distinguer deux éléments fondamentaux dans un site/blog WordPress : les pages et les articles.
Pour connaître la différence, rendez vous sur le site NDRCSUPALTA dans la page dédiée à WordPress, puis dans la rubrique « Personnaliser » et visionnez la vidéo « Distinguez Articles et Pages ».
Maintenant que vous connaissez la distinction entre pages et articles :
- sur le document Word de votre arborescence, rédigez une définition d’une page, d’un article et expliquez la distinction. ATTENTION, il ne s’agit de pas copier/coller un extrait de site Internet (un copier/coller vaudra à l’ensemble de votre travail la note de 0, quelle que soit la qualité de celui-ci).
- identifiez dans votre arborescence ce qui relève de pages ou d’articles. Vous utiliserez une couleur différente pour chacun. N’oubliez pas de mettre une légende !
Votre arborescence est donc terminée.
Demandez à votre professeur de valider cette arborescence pour passer à l’étape suivante.
Une fois l’arborescence validée, envoyez-la par mail, enregistrée en format .pdf à l’adresse suivante : a.doligez@slsb.fr
Le document en .pdf devra porter un nom explicite de type : votrenom-arborescence.pdf
Il s’agit d’un e-mail : vous n’oublierez donc pas de :
- mettre un objet à votre mail
- rédiger un texte d’accompagnement de votre fichier joint (qui commence par « Bonjour » et se termine par une formule de politesse)
- signer votre mail
Un mail qui ne respectera pas ces consignes ne sera pas lu.
Vous ne pouvez pas passer à l’étape suivante tant que votre arborescence n’aura pas été validée et le mail envoyé.
ACTIVITE N° 2
COMPRENDRE LES NOTIONS DE BACK-OFFICE (BO) ET DE FRONT-OFFICE (FO)
Vous connaissez maintenant la structure de votre futur site.
Vous allez donc pouvoir le mettre le mettre en place.
Rendez-vous sur votre navigateur internet, et ouvrez DEUX onglets :
- Le Front-Office de votre site (url sur le fichier) : il s’agit de l’interface visible par les visiteurs de votre site.
- Le Back-Office de votre site correspond, quant à lui, à votre interface de travail, non visible par les visiteurs et qui vous permet d’intervenir sur l’apparence de votre site, visible en Front-Office.
Ouvrir deux onglets vous permettra de suivre les modifications que vous ferez sur votre site.
ACTIVITE N° 3
CHOISIR UN THEME ET LE PERSONNALISER
Etape1 – Installer un thème
Rendez-vous sur le BO de votre site.
Rendez-vous sur ce site et suivez le tutoriel du point 1. Sélectionnez un thème proposé dans la bibliothèque WordPress, ou ajoutez-en un en cliquant sur « Ajouter » en haut de la page.
Vous pouvez par exemple installer et activer le thème WK Wow. Vous avez cependant le choix d’utiliser un autre thème. Vérifiez cependant sa compatibilité avec l’extension ELEMENTOR (avec lequel nous allons travailler).
ATTENTION, tous ne le sont pas ! Pour vous en assurer, faites une recherche en tapant ELEMENTOR dans la barre de recherche. Seuls les thèmes dont le descriptif contient le mot ELEMENTOR apparaîtront.
Etape 2 – Nommer votre site et définir un logo
Rendez-vous dans le BO de votre site.
Dans la barre latérale, cliquez sur Apparence => Personnaliser.
Une fois dans la page de personnalisation de votre site, dans la barre latérale, cliquez sur « Identité du site ».
Donnez un nom à votre site, puis un slogan, et enfin mettez en place un logo.
Vous voyez les modifications apparaître instantanément sur la partie droite de votre écran. En fonction du thème choisi, vous pouvez également modifier la police d’écriture, la couleur, etc.
Pour le logo, vous pouvez en choisir un sur un site d’images libres de droits, tels que Pixabay.com ou sur unsplash.com, ou en créer un par exemple en vous rendant sur Canva.
Définissez ensuite une image pour votre bannière, c’est-à-dire l’image supérieure de votre site.
ACTIVITE 4
CREER UN MENU ET REDIGER
Etape 1 – La création du menu de votre site
La création du menu est une opération simple. Suivez la vidéo sur les menus toujours sur le site NDRCSUPALTA.
Créez votre menu en respectant votre arborescence.
Etape 2 – La page d’accueil de votre site
Il s’agit ici de définir quelle sera la page d’accueil de votre site.
Pour cela, cliquez dans la barre latérale gauche de votre BO sur Apparence, puis Personnaliser.
Un écran s’ouvre. Identifiez la rubrique « Réglages de la page d’accueil ». Cliquez, et définissez :
- une page statique comme page d’accueil du site (en principe elle s’appellera Accueil)
- une page des articles de blog (que vous aurez appelée souvent « blog », ou « actualités »)
Pendant que vous êtes sur l’outil de personnalisation, amusez-vous avec cet outil et testez les options qui vous sont proposées.
Elaborez un aspect à votre site qui soit attractif et esthétique.
Vous pouvez aller télécharger des images libres de droit sur Pixabay.com ou sur unsplash.com
Etape 3 – Rédigez !
L’aspect général de votre site est maintenant en place, votre menu est terminé, vous avez donc maintenant tout le loisir de rédiger l’ensemble de vos pages/articles.
Pour cela nous pourrions utiliser Gutenberg, l’outil de rédaction de contenus de WordPress, mais nous disposons d’outils beaucoup plus efficaces. Il s’agit de ce que l’on appelle des « Page Builders ». Ce sont des plugins (en français « extensions ») qui permettent de réellement personnaliser la mise en page de vos articles/pages.
Nous allons donc utiliser ELEMENTOR.
Dans le Back Office de WordPress, cliquez sur Extensions => Ajouter
Dans la barre de recherche, tapez Elementor.
Plusieurs résultats vous sont proposés :
Choisissez Elementor Page Builder. Cliquez sur Installer.
Le plugin s’installe. Vous devez ensuite l’activer : cliquez sur Activer.
Elementor est désormais installé sur votre BO, et vous pouvez l’utiliser.
Pour cela, rendez-vous dans l’onglet de la sidebar dans Pages et choisissez une page (le fonctionnement est le même pour les articles), et cliquez sur modifier.
La page s’ouvre, elle ressemble en principe à cela :
En haut, dans un bouton bleu, vous voyez « modifier avec Elementor ».
Cliquez. Je vous laisse découvrir Elementor par vous-mêmes.
Vous rédigerez ainsi les pages ou articles correspondant à votre arborescence ou menu.
Pour finir, vous installerez, pour chaque page ou article, une image à mettre en avant.
N’oubliez pas d’enregistrer ou publier à chaque fois que nécessaire
ACTIVITE N° 1
PREPARER VOTRE SITE : L'ARBORESCENCE DU SITE
Etape 1 – La création de l’arborescence
La création d’un site Internet passe toujours par une réflexion préalable, et donc par l’outil « stylo/papier » !
- Tout d’abord il s’agit de créer votre arborescence de site. Pour davantage d’informations, rendez-vous à cette adresse, qui explique comment créer une arborescence de site internet.
- Réalisez l’arborescence de votre site, en fonction des consignes données plus haut et de ce que vous venez de lire.
Pour ce faire, vous utiliserez un document Word, et insérerez un graphique SMARTART.
Soyez judicieux sur le type de graphique que vous allez créer…
Etape 2 – Distinguer Pages et Articles
Avant toute chose, il s’agit de distinguer deux éléments fondamentaux dans un site/blog WordPress : les pages et les articles.
Pour connaître la différence, rendez vous sur le site NDRCSUPALTA dans la page dédiée à WordPress, puis dans la rubrique « Personnaliser » et visionnez la vidéo « Distinguez Articles et Pages ».
Maintenant que vous connaissez la distinction entre pages et articles :
- sur le document Word de votre arborescence, rédigez une définition d’une page, d’un article et expliquez la distinction. ATTENTION, il ne s’agit de pas copier/coller un extrait de site Internet (un copier/coller vaudra à l’ensemble de votre travail la note de 0, quelle que soit la qualité de celui-ci).
- identifiez dans votre arborescence ce qui relève de pages ou d’articles. Vous utiliserez une couleur différente pour chacun. N’oubliez pas de mettre une légende !
Votre arborescence est donc terminée.
Demandez à votre professeur de valider cette arborescence pour passer à l’étape suivante.
Une fois l’arborescence validée, envoyez-la par mail, enregistrée en format .pdf à l’adresse suivante : a.doligez@slsb.fr
Le document en .pdf devra porter un nom explicite de type : votrenom-arborescence.pdf
Il s’agit d’un e-mail : vous n’oublierez donc pas de :
- mettre un objet à votre mail
- rédiger un texte d’accompagnement de votre fichier joint (qui commence par « Bonjour » et se termine par une formule de politesse)
- signer votre mail
Un mail qui ne respectera pas ces consignes ne sera pas lu.
Vous ne pouvez pas passer à l’étape suivante tant que votre arborescence n’aura pas été validée et le mail envoyé.
