Thème Wordpress Bootstrap

Développer mon thème Wordpress Bootstrap 5
Thème Wordpress Bootstrap 5

Développement de thème Wordpress

PHP | Wordpress | Bootstrap 5

Projet laNAV :

  • Objectif : Répondre aux besoins d'une association artistique en développant un thème léger et rapide.
  • Voir le site avec ce thème
2021
jan
code

Intégration de Bootstrap

Extrait du fichier functions.php

				
				/**
 * laNAV theme support.
 */
function laNAV_supports() {
	add_theme_support( 'title-tag' );
	add_theme_support( 'post-thumbnails' );
	add_theme_support( 'menus' );
	register_nav_menu( 'header', 'menu principal' );
}

/**
 * Registers Bootstrap 5 + Bootstrap JS + default wordpress css
 */
function laNAV_register_assets() {
	wp_register_style( 'bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css' );
	// (script, url, no dependencies, no version, in footer)
	wp_register_script( 'popper','https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js', [], false, true );
	wp_register_script( 'bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js', [], false, true );	
	wp_enqueue_style( 'bootstrap' );
	wp_enqueue_script( 'bootstrap' );
	// and wordpress theme style
	wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css' );
}

/**
 * Nav menu *******************************************************************
 * Ajout des classes BS5
 */

function laNAV_menu_class($classes) {
	$classes[] = 'nav-item me-3';
	return $classes;
}

function laNAV_menu_link_class($attrs) {
	$attrs['class'] = 'nav-link';
	return $attrs;
}

add_filter( 'nav_menu_css_class','laNAV_menu_class' );
add_filter( 'nav_menu_link_attributes','laNAV_menu_link_class' );

// Actions.
add_action( 'after_setup_theme', 'laNAV_supports' );
add_action( 'wp_enqueue_scripts', 'laNAV_register_assets' );

// Register Theme Features
function custom_theme_features() {

	// Add theme support for Custom Header
	$header_args = array(
		'width'					=> 1200,
		'height'				=> 400,
		'flex-width'			=> true,
		'flex-height'			=> true,
		'uploads'				=> true,
		'random-default'		=> true,
		'header-text'			=> true,
		'default-text-color'	=> 'laNAV',
		'wp-head-callback'		=> '',
		'admin-head-callback'	=> '',
		'admin-preview-callback'=> '',
	);
	add_theme_support( 'custom-header', $header_args );
}
add_action( 'after_setup_theme', 'custom_theme_features' );

				
			

Maquette

maquette mobile
Maquette mobile V0

Maquette mobile

Projet : Site wordpress responsive
Freelance @ Brest

  • Approche "mobile first"
  • Très petit format : 320 px
Header hero 2
Maquette desktop V2

Maquette bureau

  • Image de fond "hero" responsive et aléatoire au chargement de la page
  • Rédaction d'une accroche résumant la mission de l'association
  • Mise en place d'un "Call to action"

Sur le thème code voir aussi :