144 lines
4.1 KiB
Markdown
144 lines
4.1 KiB
Markdown
# 🚀 Guide de démarrage rapide
|
|
|
|
## Installation rapide
|
|
|
|
1. Activez le plugin dans WordPress
|
|
2. C'est tout ! Le plugin fonctionne automatiquement 🎉
|
|
|
|
## Utilisation
|
|
|
|
### Pour l'éditeur classique (avec ACF)
|
|
|
|
1. **Éditez un article/page** avec une image mise en avant
|
|
2. **Trouvez la meta box "Image mise en avant"** dans la sidebar
|
|
3. **Le focal point picker apparaît sous l'image** automatiquement
|
|
4. **Cliquez sur l'image** pour définir le point focal
|
|
5. **Enregistrez** votre article
|
|
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ Image mise en avant │
|
|
├─────────────────────────────────┤
|
|
│ [Image de la thumbnail] │
|
|
│ ┌─┴─┐ │
|
|
│ │ + │ ← Point focal │
|
|
│ └───┘ │
|
|
│ │
|
|
│ ───────────────────────── │
|
|
│ Point focal de recadrage │
|
|
│ [Picker interactif] │
|
|
│ Position : 65% / 40% │
|
|
└─────────────────────────────────┘
|
|
```
|
|
|
|
### Pour l'éditeur Gutenberg
|
|
|
|
1. **Définissez une image mise en avant**
|
|
2. **Ouvrez le panneau "Point focal de la miniature"** dans la sidebar
|
|
3. **Cliquez sur l'image** pour définir le focal point
|
|
4. Le point focal est **sauvegardé automatiquement**
|
|
|
|
## Utilisation dans vos templates
|
|
|
|
### Méthode simple
|
|
|
|
```php
|
|
<?php
|
|
// Récupérer la position CSS directement
|
|
$focal_position = get_thumbnail_focal_point_css();
|
|
|
|
// Utiliser avec object-position
|
|
the_post_thumbnail('large', [
|
|
'style' => 'object-fit: cover; object-position: ' . $focal_position
|
|
]);
|
|
?>
|
|
```
|
|
|
|
### Avec background-image
|
|
|
|
```php
|
|
<div style="
|
|
background-image: url(<?php echo get_the_post_thumbnail_url(); ?>);
|
|
background-size: cover;
|
|
background-position: <?php echo get_thumbnail_focal_point_css(); ?>;
|
|
height: 400px;
|
|
">
|
|
<h1><?php the_title(); ?></h1>
|
|
</div>
|
|
```
|
|
|
|
## Fonctions disponibles
|
|
|
|
| Fonction | Retour | Exemple |
|
|
| ----------------------------------------- | ---------------------------- | -------------------------- |
|
|
| `get_thumbnail_focal_point($post_id)` | `['x' => 0.65, 'y' => 0.40]` | Valeurs brutes (0 à 1) |
|
|
| `get_thumbnail_focal_point_css($post_id)` | `"65% 40%"` | Format CSS prêt à l'emploi |
|
|
|
|
**Note** : `$post_id` est optionnel. Si omis, utilise l'article courant.
|
|
|
|
## Exemples de cas d'usage
|
|
|
|
### 1. Cards d'articles
|
|
|
|
```php
|
|
<article class="card">
|
|
<?php
|
|
the_post_thumbnail('medium', [
|
|
'class' => 'card-image',
|
|
'style' => 'width: 100%; height: 200px; object-fit: cover; object-position: ' . get_thumbnail_focal_point_css()
|
|
]);
|
|
?>
|
|
<h2><?php the_title(); ?></h2>
|
|
</article>
|
|
```
|
|
|
|
### 2. Hero banner
|
|
|
|
```php
|
|
<section class="hero" style="
|
|
background-image: url(<?php echo get_the_post_thumbnail_url(null, 'full'); ?>);
|
|
background-position: <?php echo get_thumbnail_focal_point_css(); ?>;
|
|
background-size: cover;
|
|
">
|
|
<div class="hero-content">
|
|
<h1><?php the_title(); ?></h1>
|
|
</div>
|
|
</section>
|
|
```
|
|
|
|
### 3. Grille responsive
|
|
|
|
```php
|
|
<div class="image-grid">
|
|
<?php while (have_posts()): the_post(); ?>
|
|
<div class="grid-item">
|
|
<?php
|
|
the_post_thumbnail('large', [
|
|
'style' => 'object-fit: cover; object-position: ' . get_thumbnail_focal_point_css()
|
|
]);
|
|
?>
|
|
</div>
|
|
<?php endwhile; ?>
|
|
</div>
|
|
```
|
|
|
|
## Format des données
|
|
|
|
Les données sont stockées dans la table `wp_postmeta` :
|
|
|
|
```json
|
|
{
|
|
"x": 0.65,
|
|
"y": 0.4
|
|
}
|
|
```
|
|
|
|
Où :
|
|
|
|
- `x: 0` = gauche, `x: 0.5` = centre, `x: 1` = droite
|
|
- `y: 0` = haut, `y: 0.5` = milieu, `y: 1` = bas
|
|
|
|
## Support
|
|
|
|
Pour plus de détails, consultez le fichier `README.md` ou `example-usage.php`.
|