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

Cet article est la suite de l’épisode 1, qui s’axe sur la recherche d’inspiration et de définition des objectifs.

Après quelques heures de dessin et d’essais, voici mon résultat, à mi chemin entre low-res et high-res : 

En termes de couleurs, on s’en tiens à 3 pour ne pas perdre les utilisateurs, on essaye de rester dans la tendance avec du offset avec « l’oeuf » sur le #Recap, et le background un peu excentré sur le titre de l’article, sans oublié l’effet vague sur le pied de page.

Etape 4 : Le développement

Alors, et maintenant ? Il faut avoir son WordPress installé en local, je vais pas vous faire un tuto ici,  il en existe des TAS !

Une fois tout ça installé, il nous faut récupérer un thème « blank » ou « à nu » si vous préférez. Pour cela : https://underscores.me/ , à télécharger (n’oubliez pas de valider l’option SCSS si possible) puis à installer sur votre WP.  Et du coup, ça donne à peu près ça : 

Oui voilà, c’est pauvre, c’est le but ! Maintenant, ouvrez votre plus bel éditeur PHP / SCSS, comme PHPStorm : 

Notre thème est bien installé, nous avons nos éléments bien séparé (voir Atomic Design ) et pour générer nos éléments, configurez votre Phpstorm via ce tuto : lien.

function get_stylesheet_uri() {
	$stylesheet_dir_uri = get_stylesheet_directory_uri();
	$stylesheet_uri = $stylesheet_dir_uri . '/sass/style.css';

Petite étape subsidiaire : je rajoute la librairie Bulma pour ne pas avoir à réinventer la roue et aussi parce que c’est une très bonne librairie CSS.

Je l’utilise ainsi afin de redonner la structure prévue dans le sketch design : 

CREATION DU MENU

Afin de faire coller le menu à ma bibliothèque CSS, j’ai du créer un Walker Personnalisé pour dire à WordPress de ne pas générer de liste <ul><li> mais bien de se conformer à la disposition comme suit : 

class Nav_Footer_Walker extends Walker_Nav_Menu
{
	function start_lvl(&$output, $depth = 0, $args = array())
	{
		$indent = str_repeat("\t", $depth);
		$output .= "\n$indent\n";
	}

	function end_lvl(&$output, $depth = 0, $args = array())
	{
		$indent = str_repeat("\t", $depth);
		$output .= "$indent\n";
	}

	function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
	{
		$indent = ($depth) ? str_repeat("\t", $depth) : '';
		$class_names = $value = '';
		$classes = empty($item->classes) ? array() : (array)$item->classes;
		$classes[] = 'menu-item-' . $item->ID;
		$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
		$class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
		$id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args);
		$id = $id ? ' id="' . esc_attr($id) . '"' : '';

		$is_current_item = array_search('current-menu-item', $item->classes) != 0 ? ' active' : '';


		$output .= $indent . '';
		$attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
		$attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
		$attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
		$attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';

		$description = (!empty ($item->description) and 0 == $depth)
			? '<small class="nav_desc">' . esc_attr($item->description) . '</small>' : '';

		$title = apply_filters('the_title', $item->title, $item->ID);
		if($args->walker->has_children) {
			$count = 1;
			$count++;
			$menu = $args->theme_location; // Getting the menu calling the walker from the array.
			$menu_items = wp_get_nav_menu_items($menu); // Getting the menu item objects array from the menu.
			$menu_item_parents = array_map(function($o) { return $o->menu_item_parent; }, $menu_items); // Getting the parent ids by looping through the menu item objects array. This will give an array of parent ids and the number of their children.
			$children_count = array_count_values($menu_item_parents)[$item->ID]; // Get number of children menu item has.

			/*if($children_count == $count) {
				var_dump("Je suis le dernier ! " . $count);
			}*/
			$item_output = $args->before;
				/*var_dump('<pre>');
				var_dump($args);
				var_dump('</pre>');*/
			$item_output .= '<div class="navbar-item has-dropdown is-hoverable"><a' . $attributes . ' class="navbar-link '.$is_current_item.'">';
			$item_output .= $args->link_before . $title . $args->link_after;
			$item_output .= '</a><div class="navbar-dropdown is-boxed">';
			$item_output .= $args->after;
		} else {
			$item_output = $args->before;
			$item_output .= '<a' . $attributes . ' class="navbar-item '.$is_current_item.'" >';
			$item_output .= $args->link_before . $title . $args->link_after;
			$item_output .= '</a>';
			$item_output .= $args->after;
		}

		$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
	}

	function end_el(&$output, $item, $depth = 0, $args = array())
	{
		$output .= "\n";
	}
}

Avec plusieurs arrangement CSS, l’ajout de mes fonts, voici le résultat pour le moment : 

ça commence à ressembler à quelque chose …

LES ARTICLES

Comme vous le voyez sur l’image précédente, j’ai appliqué un début de thème sur l’article, mais il manque le « colonnage » avec le menu latéral : 

Suffit de passer son index.php avec des colonnes

Prochaines étapes : L’article « sticky » (récap) et le menu latéral ! 

Code source du thème : https://github.com/Epistol/EpiBlog-WP-Theme