| Compétences visées | B1.2 Répondre aux incidents et aux demandes d’assistance et d’évolution B1.3 Développer la présence en ligne de l’organisation B1.5 Mettre à disposition des utilisateurs un service informatique B2.1 Concevoir et développer une solution applicative B2.2 Assurer la maintenance corrective ou évolutive d’une solution applicative |
| Environnement technologique | Éditeur de code Visual Studio Code Git for Windows Extension SFTP de Natizyskunk Navigateur Mozilla Firefox La dernière version de WordPress (serveur) |
| Ressources fournies | |
| Productions | Productions sur OneDrive (professeurs uniquement) |
| Moyens | J’ai travaillé sur cette réalisation. Durée : |
Contexte
La mission principale de mon stage consiste en la réalisation d’un site et de son thème WordPress crée à partir de rien pour le client MacConsulting, qui propose des services de consultation, d’intervention et de formations à l’utilisation des produits Apple pour des particuliers, des professionnels et des enseignants.
Mission
L’objectif est de créer un thème WordPress sur-mesure, pour que la charte graphique reflète les services et l’entreprise MacConsulting
Le site doit proposer une bonne UX (experience utilisateur)
Les différents composants à mettre en place sur le site sont les suivants :
- Créer un « conteneur » permettant de centrer le contenu du site web et ajouter une ombre autour de ce conteneur
- Mettre en place une barre de navigation supérieure avec le logo du site, des liens, et un bouton d’appel à l’action « Prendre rendez-vous ».
- Concevoir une bannière affichant une image sur toute la largeur du site.
- Élaborer un bas de page (footer) incluant le logo du site, les logos des réseaux sociaux, et trois colonnes personnalisables.
- Insérer des logos cliquables des médias sociaux dans le bas de page.
- Créer une page contact comprenant un formulaire de contact.
- Élaborer des fiches d’information pour la page contact, comprenant un pictogramme, un intitulé, et un champ texte.
- Mettre en place un menu supérieur secondaire (surmenu) avec le numéro de téléphone et les logos des médias sociaux.
- Mettre en place des champs personnalisés, notamment :
- Créer un champ permettant de changer l’URL du logo du site.
- Mettre en place des champs personnalisés pour modifier les URL des réseaux sociaux.
- Créer des champs permettant l’insertion de texte riche dans les deuxième, troisième, et quatrième colonnes du pied de page.
- Élaborer un champ personnalisé pour le numéro de téléphone du surmenu.
- Créer des champs personnalisés pour les fiches d’information de la page contact.
- Concevoir une page d’archive : cette page doit contenir la liste des articles du site par catégorie. L’affichage des articles doit inclure la photo des articles, leur titre, leur date, un extrait du contenu de l’article, ainsi que la ou les catégories des articles.
Production
Création d’un « conteneur » qui permet de centrer le contenu du site web
J’ai crée une classe container, j’incluerais un div contenant cette classe dans toutes les parties de mon site que je souhaiterais voir centrées.
echo '<div class="container fluid container-wrapper content-inner">';
echo '<div class="container">';
// echo get_the_title();
echo the_content();
echo '</div>';
echo '</div>';
.container {
margin:0 auto;
max-width:90%;
width:1100px;
}
.container-wrapper {
position: relative;
background-color: #fff;
border-radius: 20px;
}
J’ai plus tard ajouté un effet ajoutant une ombre sous ma bannière
.container-wrapper::after {
content:'';
width: 100%;
height: 100px;
display: flex;
border-radius: 0px 0px 20px 20px;
box-shadow: 0px 15px 25px -17px rgba(0,0,0,0.5);
}
Création d’une barre de navigation supérieure
framework CSS avec grid
Création d’une bannière
J’ai crée une classe CSS banner qui permet d’afficher une image en plein écran sous la barre de navigation supérieure
.banner {
position: relative;
}
.banner img {
width: 100%;
Cette classe est intégrée dans un élement div dans mes pages qui contient la vignette du post, pour récupérer la vignette j’utilise la fonction PHP WordPress get_the_post_thumbnail_url qui me permet de récupérer mon image a la taille prédéfinie appropriée (cm_image_head_true dans ce cas)
echo '<div class="banner">';
echo '<img src="' . get_the_post_thumbnail_url(get_the_ID(),'cm_image_head_true') . '"/>';
echo '</div>';
Création d’un bas de page (footer)
Le bas de page (footer) d’un site internet permet d’inclure des liens utiles ainsi que des informations sous le contenu de la page.
La structure est choisie pour le bas de page de MacConsulting est celle d’une division en une à quatre colonnes.
La premère colonne comprend le logo du site, en grand, ainsi que les liens vers les médias sociaux, comme ceci :
Le contenu des deuxièmes, troisièmes et quatrième colonnes seront modifiables directement par l’administrateur du site, sans passer par le code à l’aide de la fonction WordPress des « paramètres de thèmes »
Le nombre de colonnes est adapaté dynamiquement selon le fait que les champs dynamiques des deuxièmes à quatrièmes colonnes soient vides ou non.
Le code PHP suivant permet de stocker dans une variable « $nb_colonnes » le nombre de colonnes
<?php
$nb_colonnes = 1; # la colonne logo et réseaux sociaux ne peut pas être vide
if (!empty(get_option('cm_config_theme_footer_2'))) { $nb_colonnes++; }
if (!empty(get_option('cm_config_theme_footer_3'))) { $nb_colonnes++; }
if (!empty(get_option('cm_config_theme_footer_4'))) { $nb_colonnes++; }
?>
Je peux ensuite utiliser la classe CSS grid pour définir numériquement le nombre de colonnes
<div class="grid g-1 g-m-2 g-l-<?php echo $nb_colonnes ?> gt-4 container">
<div>
<img src="<?php echo esc_attr( get_option('siteurl')) . esc_attr( get_option('cm_config_theme_logo')); ?>">
<div class="grid g-1 g-m-2 g-l-3 gt-4 logos">
// liens vers les médias sociaux ...
</div>
</div>
<?php if (!empty(get_option('cm_config_theme_footer_2'))) { echo '<div>' . wpautop(get_option('cm_config_theme_footer_2')) . '</div>'; } ?>
<?php if (!empty(get_option('cm_config_theme_footer_3'))) { echo '<div>' . wpautop(get_option('cm_config_theme_footer_3')) . '</div>'; } ?>
<?php if (!empty(get_option('cm_config_theme_footer_4'))) { echo '<div>' . wpautop(get_option('cm_config_theme_footer_4')) . '</div>'; } ?>
</div>
Le footer inclus aussi un texte de copyright qui comprend le symbole Unicode copyright ©, l’année actuelle et un menu de navigation
<div class="footer-menu">
<div class="container">
<div class="menu-list-footer">
<?php if (date('Y')>2024) $copy = '2024-'.date('Y'); else $copy = date('Y'); ?>
<span> &copy; <?php echo $copy; ?></span>
<?php wp_nav_menu(['menu'=>'footer','theme_location'=>'footer-menu','depth'=> 3,'container'=>'','container_class' => false,'container_id'=>'','items_wrap'=>'<ul>%3$s</ul>']); ?>
</div>
</div>
</div>
Création d’une page contact et d’un formulaire de contact
L’élement principal de ma page de contact est un formulaire de contact HTML. Ce formulaire de contact contient les coordonnées de l’émetteur du message ainsi que son message et les envoie par e-mail au webmaster du site.
Pour pouvoir intégrer facilement des élements dans plusieurs pages, WordPress inclut une fonctionnalité s’appelant les « shortcodes ». Le code de mon fomrmulaire est contenu dans un shortcode nommé « cm_form »
<?php
add_shortcode('cm_form', 'cm_form');
function cm_form() {
$html = '<div class="container cm_form">';
$html .= '<form method="post" action="" class="form grid g-1 g-m-2 gt-4">';
$html .= '<label> Nom ';
$html .= '<small class="fg-alert">*</small>';
$html .= '<input type="text" name="cm_lastname" class="form-input" required>';
$html .= '</label>';
$html .= '<label> Prenom ';
$html .= '<small class="fg-alert">*</small>';
$html .= '<input type="text" name="cm_firstname" class="form-input" required>';
$html .= '</label>';
$html .= '<label> Société ';
$html .= '<input type="text" name="cm_company" class="form-input">';
$html .= '</label>';
$html .= '<label> Téléphone';
$html .= '<small class="fg-alert">*</small>';
$html .= '<input type="text" name="cm_tel" class="form-input" required>';
$html .= '</label>';
$html .= '<label> Adresse e-mail ';
$html .= '<small class="fg-alert">*</small>';
$html .= '<input type="email" name="cm_email" class="form-input" required>';
$html .= '</label>';
$html .= '<label class="gc-m-2"> Message ';
$html .= '<small class="fg-alert">*</small>';
$html .= '<textarea name="cm_message" class="form-message" required></textarea>';
$html .= '</label>';
$html .= '<div><button class="btn-primary form-btn" type="submit" name="cm_submit">Envoyer</button></div>';
$html .= '</form>';
$html .= '</div>';
return $html;
}
J’utilise ensuite la fonction mail de PHP pour transmettre le mail
<?php
$email_webmaster = '';
$message = '';
if (!empty($_POST['cm_submit']) && !empty($_POST['cm_firstname']) ) {
if (!empty($_POST['cm_firstname'])) $cm_firstname = $_POST['cm_firstname']; else $cm_firstname = '';
if (!empty($_POST['cm_lastname'])) $cm_lastname = $_POST['cm_lastname']; else $cm_lastname = '';
if (!empty($_POST['cm_company'])) $cm_company = $_POST['cm_company']; else $cm_company = '';
if (!empty($_POST['cm_tel'])) $cm_tel = $_POST['cm_tel']; else $cm_tel = '';
if (!empty($_POST['cm_email'])) $cm_email = $_POST['cm_email']; else $cm_email = '';
if (!empty($_POST['cm_message'])) $cm_message = $_POST['cm_message']; else $cm_message = '';
if (!empty($cm_message)) {
$to = $email_webmaster;
$subject = 'Macconsulting - Formulaire de contact';
$message = 'Mail de: ' . $cm_firstname . ' ' . $cm_lastname . "\r\n" .
'Numéro de téléphone : ' . $cm_tel . "\r\n";
if (!empty($cm_company)) $message .= 'Société : ' . $cm_company . "\r\n";
$message .= "\r\n" . $cm_message;
$headers = 'From: ' . $cm_email . "\r\n" .
'Reply-To:' . $email_webmaster . "\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
}
}else{
$message = '<p>On a un problème !</p>';
}
?>
Voici à quoi ressemble le formulaire tel qu’il est affiché sur la page d’accueil :
Voici un exemple de mail reçu après l’éxecution de la fonction :
Création de fiches d’information pour la page contact
<div class="container fluid container-wrapper content-inner <?php echo $class_image_null; ?>">
<div class="grid g-1 g-m-2 gt-2 fiches-info">
<div class="fiche-info">
<div class="logo"><img src=<?php echo get_option('cm_config_theme_contact_column_1_picto'); ?> /></div>
<div class="title">
<span><?php echo get_option('cm_config_theme_contact_column_1_label'); ?></span>
</div>
<div class="content"><?php echo wpautop(get_option('cm_config_theme_contact_column_1_text')); ?></div>
</div>
<div class="fiche-info">
<div class="logo"><img src=<?php echo get_option('cm_config_theme_contact_column_2_picto'); ?> /></div>
<div class="title">
<span><?php echo get_option('cm_config_theme_contact_column_2_label'); ?></span>
</div>
<div>
<?php echo wpautop(get_option('cm_config_theme_contact_column_2_text')); ?>
</div>
</div>
</div>
Création d’un menu supérieur secondaire (surmenu)
<div class="secondary-menu">
<div class="container">
<div class="contact-info">
<span class="phone-number">Tel : <a href="tel:<?php echo esc_attr(get_option('cm_config_theme_phone')); ?>"><?php echo esc_attr(get_option('cm_config_theme_phone')); ?></a></span>
</div>
<div class="menu-list logos-header">
<a href=<?php echo esc_attr( get_option('cm_config_theme_x')); ?>" class="notion-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" width="24" height="24"><title>X</title><path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0.5H5.75L9.48421 5.71053L14 0.5H16L10.3895 6.97368L16.5 15.5H11.25L7.51579 10.2895L3 15.5H1L6.61053 9.02632L0.5 0.5ZM12.0204 14L3.42043 2H4.97957L13.5796 14H12.0204Z"></path></svg></a>
<a href="<?php echo esc_attr( get_option('cm_config_theme_linkedin')); ?>" class="notion-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width="24" height="24"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg></a>
<a href="<?php echo esc_attr( get_option('cm_config_theme_facebook')); ?>" class="notion-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width="24" height="24"><title>Facebook</title><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path></svg></a>
</div>
</div>
</div>
Création d’une page d’archive
<?php
if (have_posts()) :
?>
<div class="grid g-1 g-m-2 g-l-3 gt-4 ">
<?php
while (have_posts()) :
the_post();
echo cm_get_the_post();
endwhile;
?>
</div>
<?php
the_posts_pagination(array(
'prev_text' => __('Précédent', 'textdomain'),
'next_text' => __('Suivant', 'textdomain'),
));
else :
echo '<p>' . __('Aucun article trouvé', 'textdomain') . '</p>';
endif;
?>