Seguimos con el cuarto de los tutoriales para el tema gratuito Zerif Lite: hoy vamos a aprender a usar una imagen en lugar de los cuatro ítems que enumeran habilidades, ya que puede ocurrir que no necesitemos este tipo de presentación.

Zerif Lite - Sección de habilidades

Para realizar este cambio, es necesario usar un tema hijo. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.

En primer lugar, deberá crear una carpeta llamada /sections/ dentro de la carpeta del tema hijo. Luego, copie el archivo /sections/about_us.php de la carpeta del tema padre y péguelo en la carpeta /sections/ del tema hijo.

Con un editor de texto (recomendado: Notepad++) abra el archivo about_us.php del tema hijo y busque el siguiente código:

<li class="skill skill_1">

                    <?php

                        if( !empty($zerif_aboutus_feature1_nr) ):

                            echo '<div class="skill-count">';

                                echo '<input role="presentation" type="text" id="' . ( !empty($zerif_aboutus_feature1_title) ? sanitize_title($zerif_aboutus_feature1_title) : '' ) . '" value="'.esc_attr( $zerif_aboutus_feature1_nr ).'" data-thickness=".2" class="skill1" tabindex="-1">';

                            echo '</div>';

                        endif;

                        if( !empty($zerif_aboutus_feature1_title) ):
                            echo '<div class="section-legend"><label for="' . sanitize_title($zerif_aboutus_feature1_title) . '">'.wp_kses_post( $zerif_aboutus_feature1_title ).'</label></div>';
                        elseif ( is_customize_preview() ):
                            echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
                        endif;

                        if( !empty($zerif_aboutus_feature1_text) ):
                            echo '<p>'.wp_kses_post( $zerif_aboutus_feature1_text ).'</p>';
                        elseif ( is_customize_preview() ):
                            echo '<p class="zerif_hidden_if_not_customizer"></p>';
                        endif;

                    ?>

                </li>

                <?php endif; ?>

                <!-- SKILL TWO -->

                <?php
                    if( !empty($zerif_aboutus_feature2_nr) || !empty($zerif_aboutus_feature2_title) || !empty($zerif_aboutus_feature2_text) ):
                ?>

                <li class="skill skill_2">

                    <?php

                        if( !empty($zerif_aboutus_feature2_nr) ):

                            echo '<div class="skill-count">';

                                echo '<input role="presentation" type="text" id="' . ( !empty($zerif_aboutus_feature2_title) ? sanitize_title($zerif_aboutus_feature2_title) : '' )  . '" value="'.esc_attr( $zerif_aboutus_feature2_nr ).'" data-thickness=".2" class="skill2" tabindex="-1">';

                            echo '</div>';

                        endif;



                        if( !empty($zerif_aboutus_feature2_title) ):
                            echo '<div class="section-legend"><label for="' . sanitize_title($zerif_aboutus_feature2_title) . '">'.wp_kses_post( $zerif_aboutus_feature2_title ).'</label></div>';
                        elseif ( is_customize_preview() ):
                            echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
                        endif;

                        if( !empty($zerif_aboutus_feature2_text) ):
                            echo '<p>'.wp_kses_post( $zerif_aboutus_feature2_text ).'</p>';
                        elseif ( is_customize_preview() ):
                            echo '<p class="zerif_hidden_if_not_customizer"></p>';
                        endif;

                    ?>

                </li>

                <?php endif; ?>

                <!-- SKILL THREE -->
                <?php
                    if( !empty($zerif_aboutus_feature3_nr) || !empty($zerif_aboutus_feature3_title) || !empty($zerif_aboutus_feature3_text) ):
                ?>
                <li class="skill skill_3">

                    <?php

                        if( !empty($zerif_aboutus_feature3_nr) ):

                            echo '<div class="skill-count">';

                                echo '<input role="presentation" type="text" id="' . ( !empty($zerif_aboutus_feature3_title) ? sanitize_title($zerif_aboutus_feature3_title) : '' ) . '" value="'.esc_attr( $zerif_aboutus_feature3_nr ).'" data-thickness=".2" class="skill3" tabindex="-1">';

                            echo '</div>';

                        endif;

                        if( !empty($zerif_aboutus_feature3_title) ):
                            echo '<div class="section-legend"><label for="' . sanitize_title($zerif_aboutus_feature3_title) . '">'.wp_kses_post( $zerif_aboutus_feature3_title ).'</label></div>';
                        elseif ( is_customize_preview() ):
                            echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
                        endif;

                        if( !empty($zerif_aboutus_feature3_text) ):
                            echo '<p>'.wp_kses_post( $zerif_aboutus_feature3_text ).'</p>';
                        elseif ( is_customize_preview() ):
                            echo '<p class="zerif_hidden_if_not_customizer"></p>';
                        endif;

                    ?>

                </li>

                <?php endif; ?>

                <!-- SKILL FOUR -->
                <?php
                    if( !empty($zerif_aboutus_feature4_nr) || !empty($zerif_aboutus_feature4_title) || !empty($zerif_aboutus_feature4_text) ):
                ?>

                <li class="skill skill_4">

                    <?php

                        if( !empty($zerif_aboutus_feature4_nr) ):

                            echo '<div class="skill-count">';

                                echo '<input role="presentation" type="text" id="' . ( !empty($zerif_aboutus_feature4_title) ? sanitize_title($zerif_aboutus_feature4_title) : '' ) . '" value="'.esc_attr( $zerif_aboutus_feature4_nr ).'" data-thickness=".2" class="skill4" tabindex="-1">';

                            echo '</div>';

                        endif;

                        if( !empty($zerif_aboutus_feature4_title) ):
                            echo '<div class="section-legend"><label for="' . sanitize_title($zerif_aboutus_feature4_title) . '">'.wp_kses_post( $zerif_aboutus_feature4_title ).'</label></div>';
                        elseif ( is_customize_preview() ):
                            echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
                        endif;

                        if( !empty($zerif_aboutus_feature4_text) ):
                            echo '<p>'.wp_kses_post( $zerif_aboutus_feature4_text ).'</p>';
                        elseif ( is_customize_preview() ):
                            echo '<p class="zerif_hidden_if_not_customizer"></p>';
                        endif;

                    ?>

                </li>

Reemplácelo por completo por el siguiente código:

<li class="skill">
    <img src="//ruta-completa-a-la-imagen.jpg" alt="descripciondelaimagen" />
</li>

Donde http://ruta-completa-a-la-imagen.jpg será la URL completa del archivo de imagen y descripciondelaimagen un texto que describa la foto. Guarde el archivo y listo.

Zerif - Sección "Quiénes somos" con foto

También se pueden agregar dos fotos de menor altura. Para eso, cada foto debe formar parte de la lista sin ordenar, con la clase skill. El código sería el siguiente:

<li class="skill">
     <img src="//su-sitio-wordpress.com/wp-content/uploads/revslider/kenburns_fullwidth/kenburns1.jpg" alt="Foto 1" />
</li>
<li class="skill">
     <img src="//su-sitio-wordpress.com/wp-content/uploads/revslider/kenburns_fullwidth/kenburns3.jpg" alt="Foto 2" />
</li>

Zerif - Sección "Quiénes somos" con dos fotos

Tutorial original en inglés: How to replace Skills section with an image in Zerif

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web