INSTRUCTIONS pour L`INTEGRATION DU SITE

INSTRUCTIONS pour L'INTEGRATION DU SITE
CAMPING LES PINS à ERQUY (22)
LES SOURCES /
Maquettes PSD : sur le FTP dans le répertoire /public_html/SOURCES/
• HOME / 1_lespins_homepage_color.psd
• PAGES INTERNES / 2_lespins_services_color.psd
• LISTE HEBERGEMENTS / 3_lespins_presentation_hebergements_color.psd
• FICHE HEBERGEMENTS / 4_lespins_fiche_hebergement_color.psd
Maquette index.html en JPG : http://www.francecom-projets.fr/camping-erquy.fr/
LOGIN : lespins / MDP : lespins
Thème FCX : thème sur lequel il faut se baser pour intégrer le site.
Il est actuellement en place sur le site.
INTEGRATION / CABLAGE /
>> HEADER
STYLES
Préférer les styles CSS3 aux images.
(bords arrondis, ombres, dégradés, rgba...)
Utiliser la transition pour tous les changements d'état.
FAVICON
Intégrer un favicon en 16x16 et 112x112
BACKGROUND
Récupérer les couleurs de fonds sur la maquette psd
Pour toutes les surfaces rayées : Utiliser le patterne rayure.png
TYPOS
candice : essentiellement pour les h1 et certains éléments de menu
>> utiliser le kit @fontface
snippet : essentiellement pour les contenus texte (p, strong, li...)
>> utiliser la google font
→ cf maquettes
LOGO
En lien qui pointe vers la racine du site
HOVER déplacement en transition vers le bas (environ margin-top=20px;)
DRAPEAUX
Utiliser la fonction icl_get_language de wpml
Type de liste : Personnaliser la liste déroulante de wpml
BOUTONS DE PARTAGE
Utiliser addThis, avec des images personnalisées.
MENUS DU HEADER
Utiliser la fonction wp_nav_menu() pour chaque menu
1/ Nous situer – Contactez nous
HOVER color:#f4c241; (cf maquette : 2_lespins_services_color.psd)
2/ Menus principal
HOVER background bleu rayé (cf maquette : 1_lespins_homepage_color.psd)
SLIDESHOW
Pour le Diaporama, il faut utiliser la fonction carouselSF()
(voir le fichier functs-frontendonly.php) + la metabox "liaison diaporama".
Si aucun diaporama n'est défini pour la page en cours, il faut utiliser l'option de thème "Diaporama
par défaut" (dans apparence > réglages). Cela vaut pour toutes les pages du site.
L'internaute doit pouvoir changer les images du diaporama par les flèches et par le pager. En
l'absence d'action, il défile tout seul les images.
Le pager se présente sous forme de 4 vignettes.
Rendre les autres vignettes invisibles .
Faire la rotation des vignettes en CSS3.
DATES D'OUVERTURE
Rendre dynamique les dates d'ouverture.
>> CONTENU FRONT PAGE / 1_lespins_homepage_color.psd
MODULE DE RESERVATION
Il affiche un formulaire contenu dans un template ('resa.php') à inclure via
get_template_part().
Le formulaire doit pointer vers :
http://resanet.webcamp.fr/resa.php?Camping=pins22&Sflag=resa&SLg=fr&track=callcenter|
siteweb et s'ouvre en <iframe>.
BLOC BIENVENUE
Contenu de la page utilisée en page statique pour la page d'accueil.
Vignette : Image à la une de cette page.
BLOC PROMOTIONS
Affiche le dernier article (posts) de la rubrique Actualités.
Lire la suite : Lien vers la page Promotions (toutes les promotions)
BLOC ACTUALITES
Affiche le dernier article (posts) de la rubrique Promo.
2 vignettes : les 2 images à la une du dernier article (post)
Lire la suite : Lien vers la page Actualités (toutes les actualités)
BLOC FACEBOOK
Il correspond à la Likebox
Utiliser la fonction echo get_option('fcx_facebook'); pour récupérer l'url de la page facebook
administrable dans Apparence > Paramètres (options de thème).
>> FOOTER
MENUS DU FOOTER
Utiliser la fonction wp_nav_menu() pour les menus 1 et 3
1/ Le titre « camping-erquy.fr » est 1 Lien vers la racine du site
2/ Ce menu liste tous les hébergements.
Le titre « Hébergements » est 1 lien vers la page Tous les hébergements
3/ Le titre «Côté pratique » n'est pas 1 lien
BLOC TELECHARGEMENT
Liste la totalité des téléchargements disponibles.
FOOTER JAUNE
Nom du camping – Adresse – Coordonnées : doivent être administrables via les options de thème
(cf le fichier functs-adminonly.php du thème).
Liens /
www.yellohvillage.fr/camping/les_pins : Lien vers http://www.yellohvillage.fr/camping/les_pins
dans une nouvelle fenêtre.
www.camping-erquy.com : Lien vers racine du site.
Picto yellohvillage : Lien vers http://www.yellohvillage.fr/camping/les_pins dans une nouvelle
fenêtre.
BAS DE PAGE
Copyright : Utiliser la fonction the_date('Y'); pour récupérer la date.
Francecom : Lien vers http://www.francecom.fr/ dans une nouvelle fenêtre.
Mentions légales : Lien vers la page
>> PAGES INTERNES /2_lespins_services_color.psd
Le Custom Post Type "galerie photo" n'est pas à utiliser sur ce site.
BLOC CONTENU
Page type (ici services)
• Le titre est un h1
• Prévoir des styles par défaut pour les listes, les liens, les liens survolés, les citations,
les images avec légende...
• La taille du contenu est variable
Bouton J'aime : fb like rattaché à chaque page
>> SIDEBAR
Utiliser sidebar.php
4 cartouches : textes et images administrables
>> cf blocs actu, promo, fb
Cartouche Yelloh Kids : Lien vers page
→ Contenu : extrait de la page
HOVER : léger zoom des images avec ombré
→ exemple : http://test.camping-front-mer.com/location-mobi-home-argeles-sur-mer/
>> PAGES LISTE HEBERGEMENTS / 3_lespins_presentation_hebergements_color.psd
•
•
•
•
Le template page d'archive pour les hébergements : Hébergement correspondant au
Custom Post Type existant dans le thème FCX fourni.
>> il faut utiliser le template locations.php
Liste de tous les hébergements sous forme de vignettes
Récupérer les données dynamiques : image à la une + titre + catégorie du locatif
Etat HOVER : Titre + extrait de la fiche
→ transition et effet flip en css3 pour le changement d'état
EXEMPLE : http://wabeo.fr/blog/
L'ensemble de la vignette est 1 Lien vers la fiche concernée.
>> PAGES FICHE HEBERGEMENTS / 4_lespins_fiche_hebergement_color.psd
CONTENU DE LA FICHE
• Nouveauté ou rien + bouton fb like
• Titre + catégorie
• Description générale du locatif
• Diaporama du locatif : A lier
→ Navigation possible avec le pager
• Descriptif détaillé
• Bouton tarif : Lien vers tarifs au format pdf dans une nouvelle fenêtre.
SIDEBAR POUR AUTRES HEBERGEMENTS
• Lier cette sidebar avec la fonction get_template_part('');
• Liste des hébergements triés par catégories
• Etat hover et current : bouton jaune
>> PAGE CONTACT
Il faut intégrer un formulaire de contact, comme sur le template fourni.
>> PAGE ALENTOURS
Il faut utiliser le plugin "WP-proximity" (pré-installé) et son shortcode [maps] (partir du modèle
« page type»)
>> RESPONSIVE DESIGN
Concernant l'évolution du site en fonction du format des mediums, nous ne pouvons pas vous
donner d'instructions précises.
Nous faisons confiance à votre bon sens et votre sens de l'esthétisme.
J'attire votre attention sur certains points importants :
• Equilibre des blocs
• Ne pas laisser d'espaces vides
• Veiller à la lisibilité des textes
• Attention au chevauchement d'éléments
• Supprimer les flèches de navigation du slideshow dès le 940px
• Mettre des marges left et right sur l'ensemble du site à partir de 940px
• Faire disparaître les vignettes de pager au moment opportun
• Remplacer le module de réservation par un bouton pour le format Iphone
EXEMPLE D'1 DE NOS SITES CAMPING INTEGRE EN RESPONSIVE DESIGN :
http://www.camping-belle-hutte.com/
>> PRECISIONS
•
•
•
•
Sur chaque page du site un carrousel peut être présent (sauf pour les pages de détail et
d'archive des hébergements). Il correspond à un élément "Diaporama" et est associé à la
page en cours via une meta box (liaison diaporama)
Si besoin de plusieurs images à la une pour un cartouche ou autre (comme sur la page de
détail des hébergement), il faut utiliser le plugin multipostthumbnail)
Traductions :
• Tous les termes en dur du thème doivent être inséré via __($chaine,'fcx') et
_e($chaine,'fcx') de manière à pouvoir être traduits par la suite. (pas d'espaces
autour de la virgule).
• Il faut générer un fichier .pot
Pour tous les appels de page/custom-post-type/categories... il faut utiliser les fonctions de
WPML (icl_object_id($id,$type_de_contenu,true))
• par exemple, pour appeler une page :
$page = new WP_Query('page_id='.icl_object_id(12,'page',true)) ;
if($page->have_posts()) : while($page->have_posts()) : $page->the_post() ;
# Show what you want...
endwhile ; endif ;
•
•
•
Il ne faut pas préciser de hauteur, en CSS, aux éléments dont la taille est variable (titres,
listes, bloc de contenu)
Pour les informations telles que l'adresse, le numéro de téléphone, le mail de contact, les
dates d'ouverture... merci d'utiliser les options de thèmes (de façon à ce que cela soit
administrable)
Pas d'utilisation de shortcodes s'il vous plait (sauf précisé dans ce document)
•
•
Normalement vous trouverez tous les exemples de codes nécessaires dans le thème de
démonstration. Contacter Willy Bahuaud [email protected] le cas échéant.
IMPORTANT : Ne pas mettre à jour le plugin Gallery Metabox, il s'agit d'une version
modifiée par nos soins.
>> ACCES
Accès FTP:
ftp : test.camping-erquy.fr
login : camping-erquy
mdp : 37gwNEiD
url de test : http://test.camping-erquy.fr/
Identifiants WordPress (ne pas changer) :
http://test.camping-erquy.fr/wp-login.php
login : francecom
mdp : 37gwNEiD
Si besoin de précisions, n'hésitez surtout pas à contacter [email protected]