formations:wordpress

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
formations:wordpress [23/01/2022 14:14] – Écriture des rappels de la formation Wordpress alouradouformations:wordpress [21/03/2022 09:48] (Version actuelle) – [Introduction] adiouf
Ligne 1: Ligne 1:
 +====== Formation Webmaster - Wordpress ======
 +
 +===== Introduction =====
 +Il existe de multiples manières de créer un site web. Parmi elles, des solutions partiques et toutes faites comme Wix, d'autres qui nécessites des compétences qui s'aquièrent au fil des [[formations:devweb_1|Devweb du GInfo]] ou encore des gestionnaires de contenu comme Shopify, Drupal, Joomla ou **Wordpress**. C'est de dernier auquel nous allons nous intéresser !
 +
 +<note important>**Prérequis** : Demander à votre prédecesseur les identifiants de connexion au site de votre asso !</note>
 +
 +===== HTML =====
 +==== Notre première page ====
 +<note tip>Rappel de [[formations:devweb_1]]. La base d'une page html</note>
 +
 +<file html index.html>
 +<!DOCTYPE html>
 +<html>
 +    <head>
 +        <meta charset="utf-8" />
 +        <title>Un titre de page</title>
 +    </head>
 +
 +    <body>
 +    <!-- Un commentaire -->
 +        Bonjour.<br /> Ceci est mon contenu
 +    </body>
 +</html>
 +</file>
 +
 +Si vous enregistrez le fichier et que vous ouvrez le fichier avec un navigateur, vous devriez voir ceci.
 +
 +{{:formations:capture_d_e_cran_2017-10-26_a_23.32.55.png?200|}}
 +
 +-> La ligne contenant **<!DOCTYPE html>** explique au navigateur que la page contient du html répondant à la norme HTML5
 +
 +-> La balise **<head>** contient diverses informations qui ne seront pas vues par l'utilisateur directement, mais qui pourront être utile au navigateur pour interpréter la page; ici on peut voir que la balise contient le titre de la page et le codage du texte (UTF-8).
 +
 +-> La balise **<body>** contient tout le contenu de la page. Vous aurez deviné que la balise **<br>** est une balise permettant de sauter une ligne, elle est dite de balise de structuration de texte.
 +
 +==== Les balises ====
 +<file html balises.html>
 +Modifier une police : <b> Texte en gras </b>   <i> Texte en italique </i>
 +Mettre une image : <img src="image.jpg"  /> 
 +Mettre une musique : <embed src="musique.mp3" autostart="true" loop="true" hidden="true">
 +Mettre une vidéo : <iframe width= “425” height=”344” src= “http://www.youtube.com/…″></iframe>
 +Mettre un lien : <a href="page.html"> Lien cliquable </a>
 +Créer un bloc : <div id="jeSuisUnique" class="PasUnique"> Un bloc </div>
 +Créer un paragraphe : <p> Contenu paragraphe </p>
 +Créer un titre :<h1> Le titre les + important </h1>… <h6> Le titre les - important  </h6>
 +Importer un fichier de style (css) : <link rel=”stylesheet” href=”votreFichier.css” />
 +Passer une ligne : <br />
 +</file>
 +
 +Rappel sur [[https://fr.w3docs.com/apprendre-html/mise-en-forme-html.html|W3School]]
 +
 +===== CSS =====
 +
 +==== Sélection des éléments HTML ====
 +<note tip>Rappel de [[formations:devweb_1]] & [[formations:devweb_2]]. Voyons rapidement ensemble les bases du CSS !</note>
 +
 +Pour sélectionner un élément, vous aurez besoin des id et des classes
 +<file html id_class.html>
 +<div id="identifiantUniqueDuBloc">Bloc 1</div>
 +<div class="classePartagee">Bloc 2</div>
 +<div class="classePartagee">Bloc 3</div>
 +</file>
 +
 +Ici, Le bloc 2 et le bloc 3 hériteront du même style car le sélecteur "class" est identique.
 +
 +**Mais au fait... comment on écrit du style ?**
 +==== Écrire du style ====
 +Trois façons de faire :
 +  - Dans un fichier externe
 +  - Dans la balise HTML avec l'attribut : style=""
 +  - Dans une balise <style> dédiée
 +
 +<file html styles.html>
 +1. <link href= "style.css" rel="stylesheet " />
 +2. <div style="color:red;">Texte en rouge</div>
 +3. <style>.classePartagee { color: red; }</style>
 +</file>
 +
 +
 +===== Wordpress - Partie pratique =====
 +
 +==== Créer et modifier une page ====
 +
 +=== Connectez vous à votre site WordPress ===
 +
 +L'adresse URL de votre site associatif est de la forme **nom_association.asso.centrale-marseille.fr** 
 +
 +Pour modifier votre site WordPress ajoutez '/wp-admin' à la fin de l'URL : **nom_association.asso.centrale-marseille.fr/wp-admin**
 +
 +{{ :tutoriels:identification_wp.png?nolink |}}
 +
 +Identifiez vous à l'aide de votre identifiant/adresse mail et de votre mot de passe ou avec la connexion via My.
 +
 +<note tip>Si vous n'avez pas vos identifiants, contactez vos prédécesseurs !</note>
 +<note important>Si vos prédécesseurs ont définitivement perdus vos identifiants, contactez le GInfo, et/ou en particulier le président ou le respo réseau de ce dernier</note>
 +
 +=== Sélectionnez la page à modifier dans votre espace d'administration WordPress ===
 +
 +Vous êtes maintenant dans l'interface de gestion de votre WordPress.
 +
 +Dans le menu principal de gauche, cliquez sur l'onglet "Pages". La liste de toutes les pages de votre site apparaît alors.
 +
 +{{ :tutoriels:pages_wp.png?nolink |}}
 +=== Créer une page vierge ===
 +=== Dupliquer une page existante de votre asso ===
 +==== Modifier un utilisateur ====
 +==== Changer le thème ====