Créer un thème (WP) en 2018 – 3/3

Cet article est la suite de l’épisode 2, qui s’axait sur la mise en page du thème et l’installation du design.

Suite et grosse fin de notre série sur le développement d’un thème simple pour WordPress : 

Notre thème majoritaire est conçu, on va s’attaquer à l’article « Sticky », celui qui reste en haut de la page sur une période définie, et qui sera pour moi un petit article dans la veine de Korben pour faire une mini news récapitulative de la semaine et d’autres trucs.

STICKY ARTICLE

Dans mon dossier Template Parts, je créé un nouveau template « sticky » pour pouvoir le charger différement de content.php dans notre index.php : 

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package Epistol_Blog
 */

get_header();
?>

<?php
if(have_posts()) :
	if(is_home() && !is_front_page()) :
		?>
        <header>
            <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
        </header>
	<?php
	endif;

	/* Start the Loop */
	while(have_posts()) :
		the_post();
		if(is_sticky()) {
			// On charge notre nouveau template sticky
			get_template_part('template-parts/sticky', get_post_type());
		}

	endwhile;
	the_posts_navigation();
else :
	get_template_part('template-parts/content', 'none');
endif;
?>
    <div class="columns">
        <div class="column is-8 ">
            <div id="primary" class="content-area">
                <main id="main" class="site-main">

					<?php
					if(have_posts()) :
						if(is_home() && !is_front_page()) :
							?>
                            <header>
                                <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
                            </header>
						<?php
						endif;

						/* Start the Loop */
						while(have_posts()) :
							the_post();

							if(!is_sticky()) {
// si l'article n'est pas sticky : 
								get_template_part('template-parts/content', get_post_type());

							}
						endwhile;
						the_posts_navigation();
					else :
						get_template_part('template-parts/content', 'none');
					endif;
					?>

                </main><!-- #main -->
            </div><!-- #primary -->
        </div>
        <div class="column">
			<?php get_sidebar();
			?>
        </div>
    </div>


<?php
get_footer();

Afin de faire correspondre l’image mis en avant avec le design créé dans Adobe XD, on va utiliser le mask-clip css sur notre image :

.mask {
	-webkit-mask-image: url(../img/mask.svg);
	mask-image: url(../img/mask.svg);
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}

Bon, éventuellement j’aimerais bien l’animer un peu mais on verra plus tard, pour l’instant on à ça : 

Pas très organisé encore

On rajoute « sticky » en tant que class css à tout les élements voulu et l’image en position absolute, et voilà : 

Nice

Tout n’est pas encore parfait, mais c’est des finitions qui viendront plus tard, on va d’abord s’attaquer au menu latéral pour finir par le footer.

Menu latéral : peu de chose à changer, des couleurs et du padding.

FOOTER

Au début, je voulais tenter un svg mask mais pour préserver la compatilibité de tout les navigateurs, on va juste faire un svg en tant qu’image chargée juste avant le footer et remonter le footer avec un margin négatif : 

</div><!-- #page -->
<img src="<?= get_template_directory_uri()?>/img/footer-01.svg" />

<footer id="colophon" class="site-footer">
footer#colophon {
  background: #FF7254;
  position: absolute;
  margin-top: -1rem;
  color: white;
  padding: 1rem;
  z-index: 0;
  min-height: 20vh;
  width: 100%;
 
}

Et voilà, la majorité du thème est réalisé, petite finitions à droite  à gauche, et calquer le thème index sur les autres templates mais enfin en gros, tout est réalisé. 

Merci d’avoir suivi ce tuto, n’hésitez pas à commenter et partager cet article !

NB : Thème disponible sur Github