WordPress – 9-10 avril 2018

WordPress et mise en page

Site de test => lien

Générateur de tableaux => lien
Création de boutons personnalisés => lien

Gestion des DIV + Mise en page

HTML :

<div id=”colonne1″> texte à définir </div>
<div id=”colonne2″> texte à définir </div>
<div id=”centre”>  texte à définir </div>

CSS :

<style type=”text/css”>

div#colonne1 {
 float: left;
 width: 35%;
 height:850px;
 margin-right: 10px;
 background: #cccccc;
 padding:10px;
 font-size:12px;
 text-align:justify; 
}
div#colonne2 {
 float: right;
 width: 35%;
 height:850px;
 margin-left: 10px;
 background: #dddddd;
 padding:10px;
 font-size:12px;
 text-align:justify; 
}
div#centre {
 overflow: hidden;
 background: #eeeeee;
 padding:10px;
 height:850px;
 font-size:12px;
 text-align:justify; 
}
</style>

Gestion des arrondis => Border radius
Gestions des ombres =>

– 1er jour

WordPress niveau 1 : installation, configuration,
installation et configuration d’extensions, explications utilisation des
widgets, personnalisation.

CHOISIR UN THEME

Les thèmes de bases (Tweenty…)
Les thèmes simples (Depuis l’interface WP)
Les Premium (Acheter et configurer)
 
COMPLEMENT D’INSTALLATION
 
Duplicate content
 
<META NAME=”robots” CONTENT=”index,follow”>
<META NAME=”robots” CONTENT=”noindex,follow”>
<META NAME=”robots” CONTENT=”index,nofollow”>
<META NAME=”robots” CONTENT=”noindex,nofollow »>

Passer en Nofollow les Liens inutiles

URLs canoniques

Articles en Rapport (related posts) => YARPP

Les Tags (ne pas en abuser)

Broken Link Checker (éviter les erreur 404)

Google XML Sitemaps (indexation moteurs)

2 – PERFORMANCES D’AFFICHAGE => un site lent est un site mal référencé

Gestion du cache => WP Super Cache

Poids des fichiers média (images) => WP Smush.it

Poids des feuilles de styles CSS et fichiers JS  => WP Minify / WP-Optimize

3 – ET LES RESEAUX SOCIAUX ? Socialise / AddToAny / Juiz Social Post Sharer

4 – OPTIMISER ET SAUVEGARDER => WP-DB-Backup / BackWPup /

5 – SECURITE !!! 

SPAM => > Akismet
A l’installation :
– Nom d’utilisateur, préfixes tables, 
– Supprimer le compte admin par défaut
– Restreindre le nombre de tentatives de connexions => Login Lock Down
 
 
Fichier .htaccess
Bloquer la navigation dans les dossiers WP : 
Options All -Indexes
Protéger le fichier wp-config.php
<FilesMatch ^wp-config.php$>
 deny from all
 </FilesMatch>
 
Protéger le fichier .htaccesse lui-même
<Files .htaccess>
 order allow,deny 
 deny from all 
</Files>
Bloquer les attaques de «  brute force » => Login LockDown
Scanner les failles de sécurité => WP Security Scan
Masquer les erreurs de connexions functions.php
add_filter('login_errors',create_function('$a', "return null;"));
Désactiver l’éditeur de fichiers
define('DISALLOW_FILE_EDIT',true);
Déplacer la partie admin du site => WPS Hide Login
 
Supprimer le fichier readme.html

– 2ème jour

Introduction :
Un site > un code source ? Comprendre
2 langages : HTML + CSS
HTML > contenu de la page
CSS > Mettre en forme
Extension pour navigateur « Webdevelopper  !!!!
Editeur de Textes (Sublim Text)
Les navigateurs Web !
 
 
 
1/ CREATION HTML :
Balises et attributs
Les balises minimum
<!DOCTYPE HTML>
<html>
<head>
<meta charset=“UTF-8 />
<title>Mon titre</title>
</head>
<body>
</body>
</html>
 
 
Les balises <br /> <p> et <H1>
<em> <strong> <mark> et listes <ul> <li> <ol>
Les liens hypertextes : externes (absolu); internes (relatif); attributs (Title, target, mailto:, téléchargement,
Ancres : #ancre et id=« ancre » (ex : <p id=”ancre »>
 
Les images : jpeg (photo), png (autre), gif (animé) + détails
Balise <img src=«  »> + attribut ALT dans un <p> de texte !!!!
Images miniature et large > <img> + <a href>
<figure><figcaption>Blah blah blah</figcaption> </figure>
2/ INSERTION CSS :
Créer un lien vers le fichier CSS
<link rel=”stylesheet” href=”monstyle.css” />
A recommander pour gérer un maximum de page HTML avec un seul fichier CSS externe
 
Ancienne technique <style></style>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p  {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
 
Comprendre les classes
.titre (class)
#titre (id)
<div></div> => notion de blocs pour la mise en page des pages HTML
<span></span>  + class => <span class=”  ” >
#premier {
color: blue;
}
 
.error {
color: red;
}
Quelques balises pour débuter avec les polices:
font-size ! (px, small ? em ?)
font-family ! Quelles polices choisir ?
fontsquirrel.com => webfont @add font face kite
+ ajout des fichiers de polices dans le même répertoires CSS
 
font-style > italique
text-decoration
text-align (droite, gauche, centrer, justifier)
 
ELEMENTS FLOTTANTS
float (left et right) pour gérer texte et images
clear : pour nettoyer les instructions
Couleurs du texte ou fond (color: et background-color:)
16 couleurs simple (red, blue, …)
Hexadecimal #FFCC45 (RVB)
RGB : 0 245 78
 
Images de fond : (relative / absolu)
background-image: url(“images/monimage.jpg”);
background-attachement:fixed
background-repeat:
background-position:
 
TRANSPARENCE
opacity:0 / opacity:1 / opacity:0.6 (autre possibilité la propriété background-color:rgba (5, 15, 57, 0.6);
BORDURES ET OMBRES
border:5px #ff4578 solid; (sur tous les côtés)
border-top
border-bottom
border-right
border-left
border-radius:10px;
box-shadow:5px 8px 3px black; 
text-shadow:5px 8px 3px black;
décalage horizontal / décalage vertical / dégradé / couleur
Apparences dynamique
a: / a:hover / a:active / a:visited
SCHEMA TYPE DE PAGE
<Header> <nav> <section> <aside> <article>
<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″ />
        <title>Zozor – Le Site Web</title>
    </head>
 
    <body>
        <header>
            <h1>Zozor</h1>
            <h2>Carnets de voyage</h2>
        </header>
        
        <nav>
            <ul>
                <li><a href=”#”>Accueil</a></li>
                <li><a href=”#”>Blog</a></li>
                <li><a href=”#”>CV</a></li>
            </ul>
        </nav>
        
        <section>
            <aside>
                <h1>À propos de l’auteur</h1>
                <p>C’est moi, Zozor ! Je suis né un 23 novembre 2005.</p>
            </aside>
            <article>                
                <h1>Je suis un grand voyageur</h1>
                <p>Bla bla bla bla (texte de l’article)</p>
            </article>
        </section>
        
        <footer>
            <p>Copyright Zozor – Tous droits réservés<br />
            <a href=”#”>Me contacter !</a></p>
        </footer>
        
    </body>
</html>
 
 
BALISES BLOC (structure) + INLINE (interieur)
BLOC = > largeur et hauteur : width et height
min-width max-width
marge ext (margin) et marge intérieure (padding)
 
margin et padding / top / right / left / bottom
=> haut droite bas gauche
largeur de bloc + margin auto (centre automatiquement)
overflow : auto, hidden, scroll
word-wrap:break; forcer à aller à la ligne pour respecter la largeur d’un bloc (ex : URL trop longue)
 
 
FLEXBOX !!!!
 
Un conteneur, une instruction => affichage en ligne
Retour colonne avec flex-direction: column;
 #conteneur
{
display: flex;
flex-direction: column;
}
Ordre inversé avec flex-direction: column-reverse; ou flex-direction: row-reverse;
Les blocs vont  à la ligne : flex-wrap: wrap;
Aligner les blocs horizontalement :
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
Aligner les blocs verticalement :
align-items: stretch;
align-items: flex-end;
align-items: flex-start;
align-items: center;   (ligne de base)
 
Centrer aussi depuis l’élément
margin:auto;
 
SI PLUSIEURS LIGNES d’ELEMENTS
Aligner les lignes avec 
align-content: flex-end;
align-content: flex-start;
align-content: space-between;
align-content: space-around;
align-content: stretch;
MODIFIER l’ORDRE des ELEMENTS en CSS
avec :nth-child(x)
et order: 1;
 
ELEMENT ET ESPACE
propriété FLEX



Lire aussi les articles suivants :