Pense-bête

Sommaire

Liens utiles / Mémo WordPress

Liens utiles

Mémo HTML

Contenu du doc HTML de base :

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Titre</title>
  <link rel="stylesheet" href="stylesheets/application.css" media="screen">
  <script type="text/javascript" src="js/application.js"></script>
</head>
 
<body>
  <div class="container">
    <header>
    </header>
    <main>
    </main>
    <footer>
    </footer>
  </div>
</body>
 
</html>

N.B. : On appelle D’ABORD LES CSS, puis les JS. Priorité d’appel des JS (le premier est lu en premier) :
1) JQuery car tous les autres auront besoin de lui, 2) les plugins, et en dernier 3) nos fichiers de travail car ils ont besoin des JS précédents.

 

Mémo CSS

/* ----- MEDIA QUERY écrans plus étroits -----*/
 
@media all and (max-width:440px) {
.nomdelaclass {
width: 100%;
}


/* ----- APPELER LES AUTRES CSS ----- */
@import url(structure.css);

Installer un slider Flickity :

  • Télécharger
  • Arborescence
  • Appeler les fichiers Link et Script
  • Configurer

Pour faire une div parallaxe :

Code HTML :

<div>
  <div class="parallax">
    <a href="#">
      Coucou tralala j'apparais au hooooveeeer !
    </a>
  </div>

</div>

Avec ce CSS :

/* -----------------------------------------------PARALLAXE !! -------------------------------------------*/

/* IMPORTANT !!
L'image de background doit être plus grande
que la div qui la contient : comme ça il n'y a pas de blanc
qui apparaît en bas de la div ; prévoir donc de cadrer l'image
minimum à 100px de plus que ce que l'on veut voir*/

.parallax {
/* Définir l'image */
    background-image: url("fond.jpg");

/* Spécifier dimensions de div, height OBLIGATOIRE, et width aussi si on est dans un container flex */
    min-height: 500px; 

/* Créer l'effet parallaxe: background "-attachment:fixed" et "-repeat:no-repeat" */
    background-attachment: fixed;
    background-repeat: no-repeat;
  background-position: center;
/* Etirer l'image de fond pour qu'elle couvre la row entière */
    background-size: cover;
}

/* Effet de hover sur le <a> qui fait la taille de la <div .parallax> entière */
.parallax a {
    width: 100%;
    min-height: 500px; /* la même que la div contenant */
/* Centre le contenu de la div en hauteur et longueur */
    display: flex;
    align-items: center;
    justify-content: center;
/* Couleurs du contenu etc */
    background-color: rgba(255, 255, 255, 0.5);
    color: #FFF;
    text-decoration: none;
/* N'est pas visible sans le hover */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    -webkit-transition: opacity 0.2s ease-in-out; /* Safari */
    -moz-transition: opacity .2s ease-in-out;  /* Safari */
}

.parallax a:hover {
    opacity: 1;
}

 

Mémo WordPress

Installation WordPress : mode d’emploi

  1. Ouvrir MAMP, connecter les serveurs : ouvrir page accueil > outils > phpmyadmin
  2. Bases de données : créer > utf8 general ci > nom ok > BIM
  3. Télécharger WordPress dernière version
  4. Copier le dossier WP dans le htdocs (ou « www » sur Windows)
  5. Renommer dossier en “nom_du_site”
  6. Aller sur localhost:8888 (ou « localhost » tout court sur Windows)
  7. Installer le wordpress
  8. Nom DB = nom donné sur phpmyadmin
  9. Mac: root et root // PC: root et *rien*
  10. GO !

Bonnes pratiques pour la mise en place du site :

  1. Installer le WordPress
  2. Créer les pages
  3. Créer les menus
  4. Réglages > Lecture > (choisir page statique, page d’actualités…)
  5. Choisir Thème (ex. Virtue ou Ascend) + télécharger extensions
  6. Créer le Child Theme (voir ci-dessous)
  7. Intégration (placer éléments, CSS)
  8. Plugins (Supercache : Désactivé jusqu’à avoir terminé le site !)

Le thème enfant :

  1. Créer dossier « theme-child » à l’intérieur de wp-content > themes, au même niveau que le thème parent
  2. Mettre à l’intérieur :
  3. Un fichier : style.css comme ceci : 
    • /*
 Theme Name:   Nom de mon thème
 Description:  Description du thème
 Author:       Marie Roumégoux
 Author URI:   https://www.mariegib.fr/
 Template:     nomduthemeparent
 Text Domain:  nomduthemeparent-child
*/
  4. Un fichier : functions.php comme ceci : 
    • <?php
function my_theme_enqueue_styles() {
    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

       

Migrer une base de données + SITE proprement :

  1. Sur Phpmyadmin en local, exporter la BDD en .sql (la mettre dans un dossier nouveausite + créer copie)
  2. Sur Phpmyadmin serveur, créer BDD avec nom nouveausite
  3. Dans Atom, ouvrir la copie de la BDD.
  4. Effectuer un rechercher remplacer : « localhost/anciensite » par « urldu/nouveausite » ; vérifier qu’il ne reste aucune occurrence de « localhost » !
  5. Rechercher remplacer de « utf8mb4_unicode_ci » par « utf8_general_ci » ; puis de « utf8mb4 » par « utf8 ».
  6. Enregistrer sous nouveausite.sql
  7. Editer le wp-config.php du site : changer root/root (mac) ou root/rien (pc) en logs fournis par l’hébergeur. Changer les préfixes de la BDD : « old_ » vers « new_ »
  8. Si nécessaire une fois le WP installé : via le plugin Customizer import export, importer les paramètres de personnalisation du thème  (préalablement exportés depuis l’ancien site)
  9. Idem pour les layouts PageBuilder !

SI VIRTUE : on veut sidebar à gauche : ajouter simplement dans CSS:

 

#content .main {
    float: right;
}