Ajout d’un calendrier

Le calendrier choisi est « All in one event calendar ». Pour la simple raison que c’est celui qui est sorti en premier sur cette article :

http://www.wpbeginner.com/plugins/which-is-the-best-wordpress-calendar-plugin/

Et que quand j’ai installé, il correspondait à ceux que je voulais d’un calendrier.

Tous les évènements se gèrent dans une rubrique spéciale :

Le calendrier lui-même peut se rajouter sur le menu :

Il s’affiche directement sur une page :

Et propose même un Widget avec les prochains événements à venir :

Modification des CSS

D’habitude je préfère modifier le CSS directement dans un fichier (comme j’ai fait pour le pied de page), mais les consignes demandent de modifier dans l’éditeur de WordPress. Donc c’est parti …

Avec la mise en page proposé, j’aime bien avoir un style arrondi sur les éléments du site. Et au cas où je décide de changer l’image d’arrière-plan, un petit ombrage en plus.

Il y avait également un hic avec les images mis en avant sur la page d’accueil. J’ai donc surcharger la hauteur de l’image avec un Max-height.

Donc voici la modification apportée au CSS :

Ou en code brut :

 

Ce n’est pas grand-chose mais je ne vois pas trop ceux qu’il y a à ajouter en plus pour un site basique.

Personnaliser l’aspect du site

Dans l’entête du site, j’ai voulu prendre une image qui peut s’étendre jusqu’à l’infini (seamless) sur le plan horizontal. Cela permet à l’image de s’adapter à n’importe quelle résolution d’ecran. J’ai donc pris une photo à 360° de Prague.

https://thenextweb.com/wp-content/blogs.dir/1/files/2015/06/Prague_Getty.jpg

La personnalisation de l’entête se fait dans Apparence / personnaliser puis naviguer jusqu’à « En-tête du média » :

Mettre un image en-tête

Je n’aime pas non plus le gris de l’arrière-plan, j’ai donc ajouter un image plus sombre :

Image Dark !

Le thème Radiate permet la mise en avant de 3 articles ou pages. J’ai donc profiter de cette option pour mettre en avant les 3 articles Lorem Ipsum :

En avant Lorem !!

Le pied de page

C’est ici que les choses se compliquent, mon thème à un pied de page pré-remplis. En général je me contente de masquer ce pied de page avec du CSS, mais ici il va falloir modifier le theme directement.

  • J’ai donc crée un thème enfant OpenClassrooms_radiate-child en suivant les instructions ici : https://codex.wordpress.org/fr:Th%C3%A8mes_Enfant
  • J’ai copier le fichier footer.php du thème radiate dans mon propre dossier (ce fichier est appelé par tous les pages pour générer le pied de page)
  • J’ai configuré le fichier functions.php pour ajouter un zone ContactBar
  • J’ai modifié le fichier footer.php pour ajouter le code d’affichage du nouveau widget
  • J’ai modifier le fichier functions.php pour inclure la feuille de style FontAwsome et ajouter un peu de CSS dans style.css pour éviter que les icones se collent au texte

J’ai décrit tous les modifications dans la page Annexe à la fin de ce document.

Il suffit ensuite d’ajouter un Widget HTML dans notre nouveau contact bar comme ceci :

Widget du pied de page

Pour nous donner ce pied de page :

Le pied de page sur le site

Menu de navigation supérieur

N’étant pas du tout inspiré pour un thème, j’ai décidé de faire des pages de Lorem Ipsum et baser le thème du site autour de ce fameux faux-texte.

Il y a donc un page Home, 3 pages de Lorem Ipsum puis un page blog.

Voici comment se présente le menu :

Structure du menu dans l’interface d’administration

Aspect du menu sur l’espace public

Le Thème WordPress

Le thème choisi est Radiate :

https://wordpress.org/themes/radiate/

Theme Radiate

J’ai choisi ce thème pour les possibilités de modification et de personnalisation déjà intégrer. Il est extrêmement stable et flexible et a un très bon rendu sur Mobile. C’est aussi le thème que j’utilise sur mon blog donc pas besoin d’apprendre un autre outils J.

Et en plus, ce n’est *pas* Sidney…

Pour avoir plus de flexibilité (je n’ai pas de pied de page modifiable avec ce thème), j’ai créé un thème enfant appelé « starbugstoneForOc » basé sur le thème Radiate. J’expliquerai les modifications fait plus loin.

L’hébergement

Malheureusement, l’hébergement de ThemeCloud ne propose qu’un hébergement gratuit pendant 48h. Pour cette exercice, ce n’est pas possible de créer un site, appliquer les modifications demandées et envoyer le tout aux correcteurs dans ce laps de temps.

J’ai donc pris un hébergement gratuit chez

www.000webhost.com

Ils proposent une installation automatique de WordPress, un accès FTP et pas de pub. L’inconvénient est qu’ils demandent de mettre le site en « sommeil » pendant 4h pour libérer des ressources (ou plutôt pour vous motiver à prendre leur pack payant).

CE SITE SERA DONC INDISPONIBLE ENTRE 3H00 ET 7H00

A part ce « sommeil » forcé, l’hébergement est rapide et semble fiable. Parfait pour ceux que nous allons faire.

L’adresse du site est :

https://starbugstonetesting.000webhostapp.com/

Demande de l’exercice

Votre site WordPress doit :

Comporter au moins 3 pages différentes avec au moins 5 lignes de contenu pour chacun.

Vous devez envoyer :

  • Des captures d’écran de chacune des pages de votre site.
  • Une capture d’écran du plugin de calendrier.
  • Un fichier de texte contenant un résumé des changements que vous avez effectués. Vous devrez décrire en détail comment vous avez fait ces changements. Vous devrez expliquer comment vous avez choisi un thème en particulier, ce sur quoi vous avez cliqué et ce que vous avez changé dans le personnaliseur, le CSS exact que vous avez changé dans l’éditeur, et le plugin de calendrier que vous avez choisi.

 

Important : Vous devrez rassembler ces fichiers dans un fichier .zip que vous enverrez.