PDF Thumb - Easy download link

Un plugin WordPress qui ajoute un bloc Gutenberg pour afficher des PDF avec des miniatures personnalisées et des liens de téléchargement stylisés.

Informations du Plugin

• Version : 1.0.0
• Auteur : Eoxia
• Licence : GPL v2 ou ultérieure
• WordPress : 5.0+
• PHP : 7.4+
• Bloc : PDF Thumb - Download

Installation et Compilation

Prérequis

• Node.js et npm
• WordPress 5.0+
• PHP 7.4+

Étapes d'installation

1. Placez le plugin dans /wp-content/plugins/pdf-thumb

2. Installez les dépendances

cd pdf-thumb
npm install

3. Compilez le block

npm run build

Ou en mode développement (avec hot-reload) :

npm run start

4. Activez le plugin dans l'administration WordPress

Utilisation

Ajouter le bloc à une page

1. Allez dans Pages/Articles → Ajouter une page
2. Cliquez sur le "+" pour ajouter un bloc
3. Recherchez "PDF Thumb - Download"
4. Sélectionnez le bloc
5. Choisissez un fichier PDF dans la médiathèque
6. (Optionnel) Personnalisez les paramètres :
   • Nom affiché : Titre personnalisé pour le PDF
   • Image de couverture : Sélectionnez une image personnalisée
   • Texte du bouton : Personnalisez le libellé du bouton
   • Couleur du bouton : Changez la couleur de fond
   • Couleur du texte : Changez la couleur du texte

Options du bloc

Le bloc propose les attributs suivants :

Attribut	Type	Défaut	Description
pdfId	number	0	ID du fichier PDF
displayName	string	""	Nom affiché (utilise le nom du fichier si vide)
coverImageId	number	0	ID de l'image de couverture personnalisée
buttonLabel	string	"Télécharger"	Texte du bouton
buttonBgColor	string	"#0073aa"	Couleur de fond du bouton
buttonTextColor	string	"#ffffff"	Couleur du texte du bouton

Structure du projet

pdf-thumb/
├── pdf-thumb.php              # Fichier principal du plugin
├── package.json               # Configuration npm avec scripts
├── README.md                  # Ce fichier
├── src/
│   ├── index.js              # Composant bloc Gutenberg (React)
│   ├── index.scss            # Styles de l'éditeur
│   ├── block.json            # Configuration du bloc
│   ├── render.php            # Rendu du bloc en frontend
│   └── debug-helper.php      # Utilitaires de débogage
├── build/                     # Fichiers compilés (généré)
│   ├── index.js              # Code JavaScript compilé
│   ├── index.css             # Styles compilés
│   ├── style-frontend.css    # Styles frontend compilés
│   ├── index.asset.php       # Dépendances WordPress
│   ├── block.json            # Configuration du bloc pour l'enregistrement
│   └── render.php            # Rendu compilé
└── languages/                # Fichiers de traduction (gettext)

Scripts npm

Commande	Description
npm start	Lance le build en mode watch avec hot-reload (développement)
npm run build	Compile pour la production
npm run build:sass	Compile uniquement les fichiers SCSS
npm run clean	Supprime le dossier build
npm run lint:js	Vérifie et reporte les erreurs JavaScript
npm run lint:css	Vérifie et reporte les erreurs CSS/SCSS

Fonctionnalités

Éditeur Gutenberg

• Interface intuitive pour sélectionner un PDF
• Aperçu en temps réel du PDF et de l'image
• Contrôles de couleur pour personnaliser le bouton
• Support complet du contrôle d'inspection

Frontend

• Génération automatique de miniatures PDF via WordPress/Imagick
• Fallback sur image personnalisée si fournie
• Fallback sur icône SVG si aucune image disponible
• Lazy loading des images
• Lien de téléchargement direct
• Design responsive

Affichage des miniatures

Ordre de priorité pour l'affichage des miniatures :

1. Image de couverture (si fournie par l'utilisateur)
2. Thumbnail WordPress (généré automatiquement par Imagick si disponible)
3. Images attachées (images enfants du PDF)
4. Icône PDF (fallback, SVG personnalisé)

Dépendances

Production

• Aucune dépendance externe pour le frontend

Développement

• @wordpress/scripts - Outils WordPress pour la compilation
• @wordpress/blocks - API WordPress pour les blocs
• @wordpress/block-editor - Composants de l'éditeur Gutenberg
• @wordpress/components - Composants WordPress réutilisables
• @wordpress/element - React personnalisé WordPress
• @wordpress/api-fetch - Utilitaire pour les appels API
• @wordpress/i18n - Gestion de l'internationalisation
• sass - Compilateur SCSS
• rimraf - Suppression récursive de répertoires
• concurrently - Exécution de plusieurs commandes en parallèle

Architecture

Bloc Gutenberg (ReactJS)

Le composant principal (src/index.js) gère :

• Sélection du fichier PDF via le sélecteur de médias
• Récupération des données du PDF via l'API WordPress REST
• Affichage et suppression de l'image de couverture
• Panneau d'inspection pour la personnalisation
• Gestion de l'état du chargement et des erreurs

Rendu Frontend (PHP)

Le fichier src/render.php :

• Récupère les attributs du bloc
• Valide l'existence du fichier PDF
• Gère la priorité d'affichage des miniatures
• Génère le HTML avec sécurité (escaping)
• Supporte le lazy loading
• Fournit un fallback SVG

Enregistrement du bloc

Le fichier principal (pdf-thumb.php) :

• Enregistre le bloc via register_block_type()
• Charge les textes du domaine pour la traduction
• Intègre les styles frontend

Internationalisation (i18n)

Le plugin utilise les fonctions WordPress de traduction :

• Domain: pdf-thumb
• Chemin des traductions: /languages
• Textes à traduire: labels, boutons, messages

Pour créer un fichier de traduction, utilisez les outils comme Poedit.

Sécurité

• Validation et escaping de tous les contenus
• Utilisation de fonctions WordPress sécurisées (sanitize_*, esc_*)
• Vérification de type pour les IDs et fichiers
• Support du CORS via l'API WordPress REST

Débogage

Utilisez src/debug-helper.php pour les utilitaires de débogage.

Vérifiez la console du navigateur (F12) pour les erreurs JavaScript.

Licence

GPL v2 ou ultérieure

Auteur

Eoxia https://www.eoxia.com