finish sample

le processus a faire : 

Aller dans WP Code :

1. Où mettre le PHP (dans WPCode)

Une fois que vous êtes dans l’extension WPCode :

  1. Cliquez sur « Ajouter un extrait ».

  2. Choisissez « Ajouter votre code personnalisé (nouveau) ».

  3. Donnez un titre (ex: « Mes blocs Finitions »).

  4. À droite, dans « Type de code », sélectionnez « Extrait PHP ».

  5. Dans la grande zone en bas, copiez uniquement le code PHP (celui qui commence par function... et finit par add_shortcode...).

  6. En haut à droite, basculez l’interrupteur sur « Activer ».

  7. Cliquez sur « Enregistrer l’extrait ».

Note : Le PHP est maintenant « vivant » sur votre site, il attend juste que vous l’appeliez.

2. Où mettre le CSS (dans le personnalisateur)

Le CSS ne va pas dans WPCode, il va dans votre thème pour que WordPress sache comment styliser les blocs :

  1. Allez dans votre menu WordPress : Apparence > Personnaliser.

  2. Cliquez sur « CSS additionnel » (tout en bas).

  3. Copiez tout le code CSS que je vous ai donné plus haut (celui qui commence par .finish-grid { ... }).

  4. Cliquez sur « Publier » en haut.

3. Comment faire apparaître les blocs sur votre page de test

Maintenant, allez sur votre page de test :

  1. Créez ou modifiez votre page de test dans l’éditeur WordPress.

  2. Cliquez sur le bouton « + » pour ajouter un bloc.

  3. Cherchez le bloc nommé « Code court » (Shortcode).

  4. Dans la case, écrivez simplement :

    01 / FINISH

    Matt Finish

    Non-reflective surface that provides a clean, sophisticated, and minimalist aesthetic.

    • • Smooth texture
    • • Ultra-matte look
    • • Perfect for clean spaces
    Learn more about Matt →
    02 / FINISH

    Satin Finish

    Elegant, soft sheen that adds a delicate warmth and smooth texture.

    • • Subtle reflectivity
    • • Silky appearance
    • • Luxurious feel
    Learn more about Satin →
    03 / FINISH

    Glossy Finish

    High-reflectivity surface that expands visual space and adds dynamic light.

    • • Mirror-like reflectivity
    • • Water repellent
    • • 32 designer colors
    Learn more about Glossy →
    04 / FINISH

    Translucent Finish

    Designed to diffuse light softly, creating glowing, ambient ceiling effects.

    • • Soft light diffusion
    • • For backlit designs
    • • Ideal for modern lighting
    Learn more about Translucent →
    05 / FINISH

    Printed Finish

    Customizable with any high-resolution image to turn ceilings into unique art.

    • • Fully customizable
    • • High-resolution prints
    • • Durable patterns
    Learn more about Printed →
    06 / FINISH

    Fiber Optic Star Finish

    Transforms ceilings into a stunning, twinkling night sky with integrated lights.

    • • Realistic star effects
    • • Twinkling lights
    • • Breathtaking visuals
    Learn more about Fiber Optic →

  5. Enregistrez et prévisualisez la page.

 

Ca cest le code php :

 

function display_six_finish_cards() {
$finishes = [
[‘num’ => ’01’, ‘title’ => ‘Matt Finish’, ‘desc’ => ‘Non-reflective surface that provides a clean, sophisticated, and minimalist aesthetic.’, ‘features’ => [‘Smooth texture’, ‘Ultra-matte look’, ‘Perfect for clean spaces’], ‘link’ => ‘Matt’, ‘class’ => ‘card-matt’],
[‘num’ => ’02’, ‘title’ => ‘Satin Finish’, ‘desc’ => ‘Elegant, soft sheen that adds a delicate warmth and smooth texture.’, ‘features’ => [‘Subtle reflectivity’, ‘Silky appearance’, ‘Luxurious feel’], ‘link’ => ‘Satin’, ‘class’ => ‘card-satin’],
[‘num’ => ’03’, ‘title’ => ‘Glossy Finish’, ‘desc’ => ‘High-reflectivity surface that expands visual space and adds dynamic light.’, ‘features’ => [‘Mirror-like reflectivity’, ‘Water repellent’, ’32 designer colors’], ‘link’ => ‘Glossy’, ‘class’ => ‘card-glossy’],
[‘num’ => ’04’, ‘title’ => ‘Translucent Finish’, ‘desc’ => ‘Designed to diffuse light softly, creating glowing, ambient ceiling effects.’, ‘features’ => [‘Soft light diffusion’, ‘For backlit designs’, ‘Ideal for modern lighting’], ‘link’ => ‘Translucent’, ‘class’ => ‘card-translucent’],
[‘num’ => ’05’, ‘title’ => ‘Printed Finish’, ‘desc’ => ‘Customizable with any high-resolution image to turn ceilings into unique art.’, ‘features’ => [‘Fully customizable’, ‘High-resolution prints’, ‘Durable patterns’], ‘link’ => ‘Printed’, ‘class’ => ‘card-printed’],
[‘num’ => ’06’, ‘title’ => ‘Fiber Optic Star Finish’, ‘desc’ => ‘Transforms ceilings into a stunning, twinkling night sky with integrated lights.’, ‘features’ => [‘Realistic star effects’, ‘Twinkling lights’, ‘Breathtaking visuals’], ‘link’ => ‘Fiber Optic’, ‘class’ => ‘card-fiber’]
];

ob_start(); ?>
<div class= »finish-grid »>
<?php foreach ($finishes as $f) : ?>
<div class= »f-card <?php echo $f[‘class’]; ?> »>
<span class= »f-num »><?php echo $f[‘num’]; ?> / FINISH</span>
<h3><?php echo $f[‘title’]; ?></h3>
<p><?php echo $f[‘desc’]; ?></p>
<ul>
<?php foreach ($f[‘features’] as $feat) : ?><li>• <?php echo $feat; ?></li><?php endforeach; ?>
</ul>
<a href= »# »>Learn more about <?php echo $f[‘link’]; ?> →</a>
</div>
<?php endforeach; ?>
</div>
<?php
return ob_get_clean();
}
add_shortcode(‘finish_cards’, ‘display_six_finish_cards’);

 

 

Ca cest le code CSS : 

.finish-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.f-card { padding: 30px; border-radius: 20px; color: #1a1a1a; font-family: sans-serif; }
.f-card h3 { font-size: 1.5rem; margin: 10px 0; }
.f-card .f-num { font-size: 0.8rem; font-weight: bold; color: #555; }
.f-card ul { list-style: none; padding: 0; margin: 20px 0; }
.f-card a { font-weight: bold; color: #000; text-decoration: underline; }

/* Couleurs par bloc */
.card-matt { background: #d1d1d1; }
.card-satin { background: #b7e4c7; }
.card-glossy { background: #90caf9; }
.card-translucent { background: #ffcc80; }
.card-printed { background: #f8bbd0; }
.card-fiber { background: #311b92; color: #fff; }
.card-fiber a { color: #fff; }

01 / FINISH

Matt Finish

Non-reflective surface that provides a clean, sophisticated, and minimalist aesthetic.

  • • Smooth texture
  • • Ultra-matte look
  • • Perfect for clean spaces
Learn more about Matt →
02 / FINISH

Satin Finish

Elegant, soft sheen that adds a delicate warmth and smooth texture.

  • • Subtle reflectivity
  • • Silky appearance
  • • Luxurious feel
Learn more about Satin →
03 / FINISH

Glossy Finish

High-reflectivity surface that expands visual space and adds dynamic light.

  • • Mirror-like reflectivity
  • • Water repellent
  • • 32 designer colors
Learn more about Glossy →
04 / FINISH

Translucent Finish

Designed to diffuse light softly, creating glowing, ambient ceiling effects.

  • • Soft light diffusion
  • • For backlit designs
  • • Ideal for modern lighting
Learn more about Translucent →
05 / FINISH

Printed Finish

Customizable with any high-resolution image to turn ceilings into unique art.

  • • Fully customizable
  • • High-resolution prints
  • • Durable patterns
Learn more about Printed →
06 / FINISH

Fiber Optic Star Finish

Transforms ceilings into a stunning, twinkling night sky with integrated lights.

  • • Realistic star effects
  • • Twinkling lights
  • • Breathtaking visuals
Learn more about Fiber Optic →
Retour en haut