Ce thème WordPress est basé sur le thème “Hackathon” conçu par Phuse dans le cadre du National Day of Civic Hacking 2014. Il a été développé en 2016-2018 à l’université de Bordeaux par Samy Rabih, Thomas Delalbre et Antoine Blanchard.

Il est régi par la licence CeCILL soumise au droit français et respectant les principes de diffusion des logiciels libres. Vous pouvez utiliser, modifier et/ou redistribuer ce programme sous les conditions de la licence CeCILL telle que diffusée par le CEA, le CNRS et Inria.

S’agissant d’un thème adapté d’un développement initialement peu personnalisable, il est distribué tel quel dans l’espoir d’être utile, malgré ses limites présentées ci-dessous.

Ce thème a été conçu pour l’organisation du concours d’innovation étudiant de l’université de Bordeaux “Hacke ta fac - Transforme ton campus”. Il présente plusieurs fonctionnalités adaptées à cet objectif :

• une page d’accueil aérée et visuelle, permettant d’installer une image forte et de poser immédiatement le principe du concours avec des boutons d’action “Soumettre un projet” et “Rejoindre une équipe”, et une mise en avant de quelques défis mis au concours
• de nombreux modèles de page de contenu pour gérer la FAQ, la liste des défis et projets, les relations presse, le formulaire de contact…
• un blog pour rapporter l’actualité du concours et pour guider les porteurs de projet
• un formulaire de soumission de projet déclenchant la création d’un compte auteur sur le site afin que les équipes puissent modifier et compléter leur page jusqu’à la clôture du concours et la mise en ligne de leur pitch vidéo (sur Youtube ou Vimeo)
• des objets (custom post types) Défis et Projets reliés entre eux.

Created with Raphaël 2.1.2DéfisDéfisProjetsProjets0..*0..1Projets soumis par les étudiantsDéfis mis au concours

Dans la mesure du possible, les chaînes de caractère du thème ont été traduites de l’anglais vers le français dans un fichier de traduction fr_FR.po, à l’aide de l’extension Loco Translate. Néanmoins, certaines chaînes de caractère sont toujours codées en dur et doivent être modifiées directement dans le thème si besoin (l’objectif à terme étant qu’elles figurent toutes dans le fichier de traduction).

La page d’accueil repose sur deux modèles (templates) : le modèle before à utiliser pendant le concours et le modèle after à utiliser une fois le concours clos. Créez d’abord votre Page dans l’administration puis assignez lui l’un des deux modèles dans l’encart Attributs de page de la colonne de droite. L’ensemble des champs permettant de renseigner le modèle apparaît alors sous la fenêtre d’édition.

L’image de bandeau (hero image) du thème original contenait une carte géographique mapbox avec la localisation des différents hackathons. A la place, nous avons choisi de mettre une vidéo MP4 en 1024 x 576 ou 1920 x 1080 ou 1280 x 720 (enregistrée dans le dossier …/themes/hacketafac/assets/video/ mais à ne pas réutiliser dans le cadre de la présente distribution). Sur mobile une image s'affiche à la place de la vidéo, qui doit être personnalisée : …/wp-content/themes/hacketafac/images/img_home.jpg.

En voici quelques exemples :

Les paramètres de ce bandeau (hashtag Twitter, page Facebook…) se règlent par les champs figurant sous la fenêtre d’édition. Dans la fenêtre d’édition de la Page proprement dite nous avons seulement ajouté la frise chronologique du concours, une image affichée à l’horizontale sur ordinateur :

et à la verticale sur terminaux mobiles :

en jouant sur les attributs <img class="hide_on_mobile" /> et <img class="show_on_mobile" />.

Pour mettre en avant des défis sur la page d’accueil, il convient de créer la catégorie « featured » dans les défis et cocher cette catégorie pour les trois défis souhaités.

Ce gabarit, que nous n’avons pas adapté, utilise l’image de fond d’origine : images/after-event-bg.jpg.

Le thème propose trois menus :

1. Main Menu (sur fond blanc, en haut de chaque page)
2. Secondary Menu (apparaît sur fond gris au-dessus du Main Menu quand on clique l’icône loupe jaune dans le Main Menu)
3. Footer Menu (simples liens sans mise en forme qui apparaissent centrés au pied de chaque page)

Pour ajouter les icônes de réseaux sociaux et l’adresse de contact dans le pied de page, renseignez les champs dans le menu Apparence > Options du thème.

Les pages de contenu du site web sont de trois types :

Le thème prévoit plusieurs modèles de page, que vous devrez utiliser pour construire les pages suivantes (créer la page avec /wp-admin/post-new.php?post_type=page puis sélectionner le modèle dans le champ Modèle de la colonne de droite) :

• Les défis utilise le modèle Challenges List modifié, à savoir td-challenges-list.php
• Les projets utilise le modèle Projets Actuels à savoir td-projects-list.php
• Edition 2017 utilise le modèle Archives 2017 à savoir td-past-projects-2017.php (exemple : http://hacketafac.u-bordeaux.fr/archives-2017/)
• Contact (nécessite d’utiliser l’extension Contact Form 7 pour créer le formulaire de contact dont le shortcode sera ajouté au champ Contact Form Code)
• Couverture média, pour déposer le dossier de presse, les visuels et faire la revue de presse (exemple : http://hacketafac.u-bordeaux.fr/espace-presse/)
• FAQ (ex. : http://hacketafac.u-bordeaux.fr/faq/)
• Organisateurs, page vers laquelle pointe le bouton “Tous les partenaires” en page d’accueil (ex. : http://hacketafac.u-bordeaux.fr/partenaires/)
• Déposer un projet (ex. : http://hacketafac.u-bordeaux.fr/deposer-un-projet)
• A propos

Ce modèle a fait l’objet d’un traitement spécifique qui renforce l’intérêt du thème. Non seulement le formulaire de soumission est très complet (choix du défi auquel le projet répondu, lien vers une démo en ligne / un dépôt de code source / une vidéo, profil de l’équipe jusqu’à 25 membres…) mais en plus il génère automatiquement la page du projet (custom post type Projets) et le compte utilisateur du porteur principal, auquel il assigne les droits d’édition et qu’il notifie par courriel.

Le formulaire est géré par le modèle de page template-submit-project.php et l’enregistrement des utilisateurs est géré par gestion_enregistrement_projet.php. Il faut penser à compléter le champ Thank You Message dans l'interface d'édition de cette page, sinon aucun message de confirmation ne sera affiché aux utilisateurs. A contrario, les messages d'erreur sont déjà paramétrés dans le modèle. Aussi, il faut penser à modifier le message de confirmation envoyé par courriel aux utilisateurs, en éditant la page gestion_enregistrement_projet.php.

Limitation connue : il ne faut pas que l’adresse électronique du porteur de projet soit déjà assignée à une compte utilisateur créé sur le site (en phase de test notamment, pensez à utiliser une autre adresse que votre compte administrateur). Pour la même raison, il ne peut être créé qu’un seul projet par compte utilisateur.

Seul le déposant reçoit un courriel de confirmation, pas les administrateurs, qui peuvent cependant suivre les projets par un flux RSS à l'adresse …/projects/feed/.

Comment faire pour que le dépôt de projet s’arrête à une date et une heure ? Il n’y a pas de manipulation automatique. Il faut désactiver les boutons en page d’accueil ainsi que le formulaire de dépôt de projet. De plus, il faut faire passer le rôle utilisateur des étudiants de « team » à « abonné ». Il faut également mettre à jour l’image de frise chronologique s’il y en a une.

Le modèle Archives 2017, à savoir td-past-projects-2017.php, peut être dupliqué pour créer une archive automatique pour les projets déposés l'année x du concours, en remplaçant toutes les occurrences de 2017 par x. Ensuite, il faut éditer chaque projet et cocher la case Projet inactif dans le bloc Publier à droite de la page d'édition : le modèle range automatiquement les projets inactifs selon leur année de publication. Lorsque vous faites la copie du modèle td-past-projects-2017.php, pensez à modifier à l'intérieur du fichier l'année à deux endroits : template name et = année que vous souhaitez.

Limitation connue : si la case Projet inactif ne fonctionne pas, il faut modifier manuellement l'enregistrement correspondant dans la base de données MySQL (dans la table wp_postmeta, l'enregistrement doit avoir comme post_id l'ID du projet à modifier, comme meta_key la valeur _my_custom_field et comme meta_value la valeur 1). Pour trouver l'ID du projet : allez dans la base de données MySQL et dans la table wp_post. L'Id du projet correspond au texte qui a été posté pour présenter le projet.

Les pages Les défis et Les projets sont générées automatiquement par les templates td-challenges-list.php et td-projects-list.php et accessibles par le chemin /defis/ et /projets/. Pour les ajouter aux menus de navigation il suffit de les ajouter comme lien personnalisé dans Apparence > Menus.

A noter que deux autres custom post types étaient fournis avec le thème d’origine et y figurent encore même s’ils ne sont pas utilisés : Evénements avec archive-event.php (si votre hackathon ou votre concours comprend plusieurs événements que vous voulez décrire avec leur localisation pour y rattacher ensuite les projets) et Jeux de données avec archive-data.php (si votre hackathon ou votre concours repose sur des jeux de données que vous voulez décrire pour y rattacher ensuite les projets). Voir la documentation du thème d’origine pour en savoir plus.

Le Modèle par défaut crée des pages simples, sur une seule colonne. Les pages filles que vous y ajoutez apparaîtront dans un menu de navigation secondaire sous le titre. Utilisez la fonction Image à la Une pour en changer l’image de bandeau.

• Fluid Video Embeds - Rend vos vidéos Vimeo et Youtube responsive sur terminaux mobiles et ne pas casser la mise en page du site
• User Role Editor - A configurer pour créer le rôle Team et lui attribuer les capacités suivantes :
  • edit_private_projects
  • edit_projects
  • edit_published_projects
  • publish_projects
  • read
• Easy WP SMTP - A configurer pour envoyer des courriels de confirmation aux candidats

• Comment Form 7 - Pour votre formulaire de contact
• Loco Translate - Pour améliorer ou personnaliser la traduction française du thème
• Modèles d’Email - Pour améliorer l’aspect visuel des messages automatiques envoyés notamment aux porteurs qui soumettent un projet

En conclusion, après installation du thème, vous pourrez être amenés à faire les modifications suivantes pour l'adapter à votre situation.

Dans l'arborescence de fichiers :

• Remplacer le logo baseline blanc transforme ton campus
• Remplacer le fichier 404
• Remplacer le logo de Bordeaux
• Remplacer la vidéo de la page d’accueil
• Remplacer l’image home fixe pour version mobile

Dans l’éditeur de fichiers /wp-admin/theme-editor.php :

• Dans le fichier du thème Feuille de styles, remplacer le logo de Bordeaux
• Dans le fichier du thème En tête du thème, changer le lien qui pointe vers le logo
• Dans le modèle de page Submit project, changer Université de Bordeaux et Antoine Blanchard

Pour changer la phrase « les services de l’université de Bordeaux » en page d’accueil, il faut installer l’extension Loco translate, sélectionner le thème hackathon, aller dans « french », puis trouver la phrase « a curated…», et remplacer Bordeaux par Strasbourg.