Retrouver dans le fichier style.css la ligne 706
@media screen and (min-width: 37.5em) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: flex;
}
}
Changer la valeur du media query
@media screen and (min-width: 300000px) { // pour afficher en permanance le burger menu
.menu-toggle {
display: none;
}
.main-navigation ul {
display: flex;
}
}
Par défaut, votre thème de base (Underscore) affiche dans une catégorie la totalité du contenu de chaque article.
Cela n’est pas très ergonomique si vous avez beaucoup d’articles.
Il serait plus logique d’avoir un extrait du contenu et, si on souhaite en savoir plus: on clique pour obtenir la totalité du contenu de l’article.
Observer le fichier archive.php
/* Start the Loop */ while ( have_posts() ) : the_post(); /* * Include the Post-Type-specific template for the content. * If you want to override this in a child theme, then include a file * called content-___.php (where ___ is the Post Type name) and that will be used instead. */ get_template_part( 'template-parts/content', get_post_type() ); endwhile;
C’est un exemple d’application d’une boucle wordpress (loop). De quoi s’agit-il?
La Boucle (The Loop) est utilisée par WordPress pour afficher chacun de vos Articles. Par l’utilisation de La Boucle, WordPress traite tous les Articles devant être affichés sur la page active et adapte leur présentation en utilisant les critères décrits par les marqueurs de La Boucle. Tous les morceaux de code HTML ou PHP placés entre le début et la fin de La Boucle seront exécutés pour chaque Article.
Référence: https://codex.wordpress.org/fr:La_Boucle
Pour faire simple:
Dans le dossier « template-parts »: Créer une copie de content.php et le renommer content-archive.php et éditez-le comme souhaité.
Exemple:
<?php
/**
* Template part for displaying posts in an archive
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package Fixiecity
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_post_thumbnail('thumbnail'); ?>
<header class="entry-header">
<?php the_title('<h2 class="entry-title">','</h2>'); ?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
</article><!-- #post-<?php the_ID(); ?> -->
Il faut bien entendu, comme il s’agit uniquement d’un résumé, ajouter le(s) lien(s):
<?php
/**
* Template part for displaying posts in an archive
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package Fixiecity
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('thumbnail'); ?>
</a>
<header class="entry-header">
<a href="<?php the_permalink(); ?>">
<?php the_title('<h2 class="entry-title">','</h2>'); ?>
</a>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_excerpt(); ?>
</div><!-- .entry-content -->
</div>
</div>
</article><!-- #post-<?php the_ID(); ?> -->
Et corriger le lien dans archive.php
/* Start the Loop */ while ( have_posts() ) : the_post(); /* * Include the Post-Type-specific template for the content. * If you want to override this in a child theme, then include a file * called content-___.php (where ___ is the Post Type name) and that will be used instead. */ get_template_part( 'template-parts/content-archive', get_post_type() ); endwhile;
Il est possible d’avoir, pour chaque catégorie, une mise en page particulière.
Nous n’utilisons alors plus archive.php mais category-slug.php où slug est le nom informatique de la catégorie (sans accent, espace ou majuscule).
On duplique archive.php et on le renomme selon la catégorie concernée.
On oublie pas de préciser le fichier de contenu.
Exemple: category-actualites.php
/* Start the Loop */ while ( have_posts() ) : the_post(); /* * Include the Post-Type-specific template for the content. * If you want to override this in a child theme, then include a file * called content-___.php (where ___ is the Post Type name) and that will be used instead. */ get_template_part( 'template-parts/content-category-actualites', get_post_type() ); endwhile;
Exemple: content-category-actualites.php
/**
* Template part for displaying posts in category actualites
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package test
*/
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<a href="<?php the_permalink(); ?>">
<?php the_title('<h2 class="entry-title">','</h2>'); ?>
</a>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_excerpt(); ?>
</div><!-- .entry-content -->
</div>
</div>
</article><!-- #post-<?php the_ID(); ?> -->
Vous avez 1 catégorie « shop » avec 3 sous-catégories: « accessoires », « bikes », « clothes ».
Vous créez un fichier « category-shop.php » avec un « content-category-shop » comme expliqué ci-dessus.
Le template s’appliquera (malheureusement) uniquement à la catégorie « shop »; et pas sur les sous-catégories « accessoires », « bikes », « clothes ».
Si vous souhaitez appliquer « category-shop.php » sur les sous catégories, ajouter ce code dans votre fichier functions.php
// force sub categories to use parent category templates
function wcs_force_use_parent_category_template() {
$category = get_queried_object();
$templates = array();
// Add default category template files
$templates[] = "category-{$category->slug}.php";
$templates[] = "category-{$category->term_id}.php";
if ( $category->category_parent != 0 ) {
$parent = get_category( $category->category_parent );
if ( !empty($parent) ) {
$templates[] = "category-{$parent->slug}.php";
$templates[] = "category-{$parent->term_id}.php";
}
}
$templates[] = 'category.php';
return locate_template( $templates );
}
add_filter( 'category_template', 'wcs_force_use_parent_category_template' );
Référence: http://wpcodesnippet.com/force-sub-categories-use-parent-category-templates/
Le fichier single.php
<?php
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', get_post_type() );
the_post_navigation(
array(
...
);
if ( comments_open() || get_comments_number() ) :
...
endif;
endwhile; // End of the loop.
?>
Si un article est trouvé: on cherche de template content.php et on l’affiche
Donc si on désire changer l’affichage de l’article: il faut ouvrir et modifier le fichier content.php
Le fichier content.php
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <?php if ( is_singular() ) : the_title( '<h1 class="entry-title">', '</h1>' ); else : the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); endif; if ( 'post' === get_post_type() ) : ?> <div class="entry-meta"> <?php test_posted_on(); test_posted_by(); ?> </div><!-- .entry-meta --> <?php endif; ?> </header><!-- .entry-header --> <?php test_post_thumbnail(); ?> <div class="entry-content"> <?php the_content( sprintf( wp_kses( /* translators: %s: Name of current post. Only visible to screen readers */ __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'test' ), array( 'span' => array( 'class' => array(), ), ) ), wp_kses_post( get_the_title() ) ) ); wp_link_pages( array( 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'test' ), 'after' => '</div>', ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer"> <?php test_entry_footer(); ?> </footer><!-- .entry-footer --> </article><!-- #post-<?php the_ID(); ?> -->
On peut le simplifier celui- comme suit:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <?php the_title( '<h2 class="entry-title">'</h2>' );?> </header><!-- .entry-header --> <?php test_post_thumbnail(); ?> <div class="entry-content"> <?php the_content( sprintf( wp_kses( /* translators: %s: Name of current post. Only visible to screen readers */ __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'test' ), array( 'span' => array( 'class' => array(), ), ) ), wp_kses_post( get_the_title() ) ) ); wp_link_pages( array( 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'test' ), 'after' => '</div>', ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer"> <?php test_entry_footer(); ?> </footer><!-- .entry-footer --> </article><!-- #post-<?php the_ID(); ?> -->
L’ordre des éléments peut être modifier:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php test_post_thumbnail(); ?>
<header class="entry-header">
<?php the_title( '<h2 class="entry-title">'</h2>' );?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_content(); ?>
</div><!-- .entry-content -->
<footer class="entry-footer">
<?php test_entry_footer(); ?>
</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->
Ou des éléments supprimer, en le commentant (en php: // devant la ligne):
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php // test_post_thumbnail(); ?>
<header class="entry-header">
<?php the_title( '<h2 class="entry-title">'</h2>' );?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_content(); ?>
</div><!-- .entry-content -->
<footer class="entry-footer">
<?php test_entry_footer(); ?>
</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->
Voici les principaux breakpoints de bootstrap:
/* X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap*/
/* sm - Small devices (landscape phones, 576px and up)*/
@media screen and (min-width: 576px) { }
/* md - Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) { }
/* lg - Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) { }
/* xl - X-Large devices (large desktops, 1200px and up)*/
@media screen and (min-width: 1200px) { }
/* xxl - XX-Large devices (larger desktops, 1400px and up)*/
@media screen and (min-width: 1400px) { }
Un premier Shortcode qui affiche les titres des 5 derniers articles
A copier dans votre fichier functions.php
add_shortcode( 'query_shortcode', 'query_shortcode_function' );
function query_shortcode_function() {
ob_start();
get_template_part('template-parts/query_shortcode');
return ob_get_clean();
}
Créer le fichier dans query_shortcode.php dans le dossier « template-parts » de votre thème
<?php
echo 'Mon shortcode';
?>
A insérer là où vous souhaiter le faire apparaître
[query_shortcode]Avec une requête personnalisée
<?php
// 1. On définit les arguments pour définir ce que l'on souhaite récupérer
$args = array(
'post_type' => 'post',
'category_name' => 'films',
'posts_per_page' => 3,
);
// 2. On exécute la WP Query
$my_query = new WP_Query( $args );
// 3. On lance la boucle !
if( $my_query->have_posts() ) : while( $my_query->have_posts() ) : $my_query->the_post();
the_title();
the_post_thumbnail();
endwhile;
endif;
// 4. On réinitialise à la requête principale (important)
wp_reset_postdata();
?>
Références:
<div id='map' style='width: 100%; height: 100vh'></div>
<script>
mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/...',
zoom: 13,
center: [6.1430, 46.2048]
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl(),'bottom-right');
var geojson ={
type: 'FontaineCollection',
features: [{
type: 'Fontaine',
geometry: {
type: 'Point',
coordinates: [6.14091, 46.20634]
},
properties: {
title: 'Fontaine de Saint-Gervais',
description: 'Eglise de Saint-Gervais',
category:'potable'
}
},
{
type: 'Fontaine',
geometry: {
type: 'Point',
coordinates: [6.14921, 46.20035 ]
},
properties: {
title: 'Fontaine du Bourg-de-Four',
description: 'Place du Bourg-de-Four',
category:'potable'
}
},
{
type: 'Fontaine',
geometry: {
type: 'Point',
coordinates: [6.15237, 46.20413]
},
properties: {
title: 'Fontaine des 4 saisons',
description: 'Jardin anglais',
category:'non-potable'
}
}]
};
// add markers to map
geojson.features.forEach(function(marker) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker' + ' ' + marker.properties.category;
// make a marker for each feature and add to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
.addTo(map);
});
</script>
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
font-family: 'Open Sans', sans-serif;
}
Référence: https://docs.mapbox.com/help/tutorials/custom-markers-gl-js/
<div id='map' style='width: 100%; height: 100vh'></div>
<script>
mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/...',
zoom: 13,
center: [6.1430, 46.2048]
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl(),'bottom-right');
</script>
<div id='map' style='width: 100%; height: 100vh'></div>
<script>
mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/...',
zoom: 13,
center: [6.1430, 46.2048]
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl(),'bottom-right');
var geojson ={
type: 'FontaineCollection',
features: [{
type: 'Fontaine',
geometry: {
type: 'Point',
coordinates: [6.14091, 46.20634]
},
properties: {
title: 'Fontaine de Saint-Gervais',
description: 'Eglise de Saint-Gervais',
category:'potable'
}
},
{
type: 'Fontaine',
geometry: {
type: 'Point',
coordinates: [6.14921, 46.20035 ]
},
properties: {
title: 'Fontaine du Bourg-de-Four',
description: 'Place du Bourg-de-Four',
category:'potable'
}
},
{
type: 'Fontaine',
geometry: {
type: 'Point',
coordinates: [6.15237, 46.20413]
},
properties: {
title: 'Fontaine des 4 saisons',
description: 'Jardin anglais',
category:'non-potable'
}
}]
};
</script>
<div id='map' style='width: 100%; height: 100vh'></div>
<script>
mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/...',
zoom: 13,
center: [6.1430, 46.2048]
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl(),'bottom-right');
var geojson ={
type: 'FontaineCollection',
features: [{
type: 'Fontaine',
geometry: {
type: 'Point',
coordinates: [6.14091, 46.20634]
},
properties: {
title: 'Fontaine de Saint-Gervais',
description: 'Eglise de Saint-Gervais',
category:'potable'
}
},
{
type: 'Fontaine',
geometry: {
type: 'Point',
coordinates: [6.14921, 46.20035 ]
},
properties: {
title: 'Fontaine du Bourg-de-Four',
description: 'Place du Bourg-de-Four',
category:'potable'
}
},
{
type: 'Fontaine',
geometry: {
type: 'Point',
coordinates: [6.15237, 46.20413]
},
properties: {
title: 'Fontaine des 4 saisons',
description: 'Jardin anglais',
category:'non-potable'
}
}]
};
// add markers to map
geojson.features.forEach(function(marker) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker' + ' ' + marker.properties.category;
// make a marker for each feature and add to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
});
</script>
Grâce à cet élément el.className = ‘marker’ + ‘ ‘ + marker.properties.category; la catégorie est passée comme classe supplémentaire… et donc il est possible d’attribuer un style différent
.marker {
background-image: url('images/VZA.svg');
background-size: cover;
background-color: white;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
}
.marker.non-potable{
background-color: red;
}
Référence: https://docs.mapbox.com/help/tutorials/custom-markers-gl-js/
<div id='map' style='width: 100%; height: 100vh'></div>
<script>
mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/...',
zoom: 13,
center: [6.1430, 46.2048]
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl(),'bottom-right');
</script>
<div id='map' style='width: 100%; height: 100vh'></div>
<script>
mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/...',
zoom: 13,
center: [6.1430, 46.2048]
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl(),'bottom-right');
// Markers Json
var geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [6.14091, 46.20634]
},
properties: {
title: 'Fontaine',
description: 'Saint-Gervais'
}
}]
};
</script>
<div id='map' style='width: 100%; height: 100vh'></div>
<script>
mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/...',
zoom: 13,
center: [6.1430, 46.2048]
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl(),'bottom-right');
// Markers Json
var geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [6.14091, 46.20634]
},
properties: {
title: 'Fontaine',
description: 'Saint-Gervais'
}
}]
};
// add markers to map
geojson.features.forEach(function(marker) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';
// make a marker for each feature and add to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
});
</script>
.marker {
background-image: url('images/VZA.svg');
background-size: cover;
background-color: white;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
}
Référence: https://docs.mapbox.com/help/tutorials/custom-markers-gl-js/
1) Créer un compte sur mapbox.com
2) Choisissez le type d’API (Application Programming Interface)
3) Copier les liens des scripts et coller-les dans le header de votre fichier html
4) Copier le code d’intégration de votre carte dans le body de votre fichier html.
<script>
mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/...',
zoom: 13,
center: [6.1430, 46.2048]
});
</script>
<script>
mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/...',
zoom: 13,
center: [6.1430, 46.2048]
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl(),'bottom-right');
</script>
<script>
mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/...',
zoom: 13,
center: [6.1430, 46.2048]
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl(),'bottom-right');
// Add markers to the map.
var marker = new mapboxgl.Marker()
.setLngLat([6.14091, 46.20634])
.addTo(map);
</script>
Référence: https://docs.mapbox.com/mapbox-gl-js/api/