Con el fin de darle orden y tener más facilidad de reutilizar el código, y tratando de implementar la guía GD1-Clase de Bloque y Variantes de Color para WordPress, se crea la presente para formalizar dicho concepto.

 

Uno de los factores que hace perder más tiempo y que produce muchos errores innecesarios, es la discrepancia entre los nombres de clases CSS y sus elementos, y entre el nombre de la clase CSS y los campos personalizados, por tal motivo se adoptarán las siguientes prácticas:

 

1. En cada componente se crearán una variable llamada $class_name, el cual contendrá el nombre del componente.

$class_name = 'banner-full-widht';

 

2. El nombre de los campos personalizados serán iguales al nombre que se usa en BEM. Es decir, los nombres compuestos en los campos personalizados, que anteriormente se unían con raya baja “_”, ahora se nombraran con raya media (como se hace en BEM).

 

3. Para obtener el campo personalizado se usará directamente la variable $class_name:

* Ejemplo 1:

$class_name = 'table-fields';

 

* Ejemplo 2:

$item_name = $class_name . '-item';

$card_name = $class_name . '-card';

También se usará para la construcción de otras variables como $item_name o $card_name.

 

4. Para obtener los subcampos se usará la clase $class_name, concadenando(en PHP se concatena con “.”) con su complemento:

<?php
global $tax_types_posts;
$post_id = $post->ID;
$post_type = get_post_type();
$taxonomy = $tax_types_posts[$post_type];
$type_content = get_the_terms($post_id, $taxonomy);
$type_content_name = $type_content[0]->name;
$category = get_the_category()[0];
?>

5. Para las clases de CSS, en vez de escribir la clase directamente, se imprimirá la variable $class_name.

*Ejemplo:

if ($downloads) :
    while (have_rows($class_name)) : the_row(); ?>
    <?php if(get_sub_field($item_name)): ?>
        <section class="<?php echo $class_name ?> p-0 reset-transition mt-5">
            <h2 class="<?php echo $class_name ?>__title">
                Anexos
            </h2>
            <ul class="<?php echo $item_name ?> py-1 px-3">
                <?php
                while (have_rows($item_name)) : the_row();
                    get_template_part('cards/' . $item_name, NULL, [
                        'item_name' => $item_name,
                    ]);
                endwhile; ?>
            </ul>
        </section>
    <?php endif ?>
    <?php endwhile; ?>
<?php endif ?>