improvement: ajout featured
This commit is contained in:
parent
05848519af
commit
21d1103c39
8 changed files with 150 additions and 27 deletions
|
@ -4,31 +4,36 @@
|
|||
'post_type' => 'post',
|
||||
'tax_query' => array(
|
||||
array(
|
||||
'taxonomy' => 'category',
|
||||
'terms' => 'blog',
|
||||
'taxonomy' => 'niveau',
|
||||
'terms' => 'featured',
|
||||
'field' => 'slug',
|
||||
)
|
||||
),
|
||||
'orderby' => 'date',
|
||||
'post_count' => '1',
|
||||
'order' => 'DESC',
|
||||
'posts_per_page' => '1'
|
||||
'posts_per_page' => '3',
|
||||
'order' => 'DESC'
|
||||
));
|
||||
|
||||
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
|
||||
|
||||
<div class="card head-primary" id="post-<?php the_ID(); ?>">
|
||||
<div class="card-header"><h1><?php the_title(); ?></h1></div>
|
||||
<div class="flex-that mb">
|
||||
<div class="article-category">
|
||||
<article class="preview-featured">
|
||||
<a href="<?php the_permalink(); ?>" class="preview-link">
|
||||
<div class="preview-item" style="background-image:url('<?php echo get_the_post_thumbnail_url(); ?>');">
|
||||
<div class="preview-overlay">
|
||||
<div class="preview-categories">
|
||||
<?php $category = get_the_category();
|
||||
echo"<a href= '" . esc_url( get_category_link( $category[0]->term_id ) ) . "' class='btn-small btn-info'><i class='fa fa-folder'></i> " . $category[0]->cat_name . "</a>"; ?>
|
||||
echo"<span class='badge bg-primary'>" . $category[0]->cat_name . "</span>"; ?>
|
||||
</div>
|
||||
<time itemprop="datePublished"><em><?php the_time('j F Y') ?></em></time>
|
||||
|
||||
<h2 class="preview-title"><?php the_title();/*3*/ ?></h2>
|
||||
</div>
|
||||
<?php the_excerpt(); ?>
|
||||
<p class="align-center"> <a href="<?php the_permalink(); ?>" class="btn btn-readmore" title="<?php the_title();?>">Lire l'article</a> </p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
|
||||
<?php endwhile; ?> <?php wp_reset_query(); /*4*/ ?>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -26,6 +26,31 @@
|
|||
* Permet d'afficher les niveaux de post pour les post features
|
||||
*/
|
||||
|
||||
/* 2. Niveau support (for featured posts) */
|
||||
|
||||
register_taxonomy(
|
||||
'niveau',
|
||||
'post',
|
||||
array(
|
||||
'label' => 'Niveau',
|
||||
'labels' => array(
|
||||
'name' => 'Niveaux',
|
||||
'singular_name' => 'Niveaux',
|
||||
'all_items' => 'Tous les niveaux',
|
||||
'edit_item' => 'Éditer le niveau',
|
||||
'view_item' => 'Voir le niveau',
|
||||
'update_item' => 'Mettre à jour le niveau',
|
||||
'add_new_item' => 'Ajouter un niveau',
|
||||
'new_item_name' => 'Nouveau niveau',
|
||||
'search_items' => 'Rechercher parmi les niveaux',
|
||||
'popular_items' => 'Niveaux les plus utilisés'
|
||||
),
|
||||
'hierarchical' => false
|
||||
)
|
||||
);
|
||||
|
||||
register_taxonomy_for_object_type( 'niveau', 'post' );
|
||||
|
||||
// 1.1 - Enregistrement de la taxonomy pour le flag
|
||||
register_taxonomy(
|
||||
'flag',
|
||||
|
|
4
home.php
4
home.php
|
@ -9,11 +9,11 @@
|
|||
echo '<h1 class="page-title">' . get_the_title( $page ) . '</h1>';
|
||||
echo '<div>' . $page->post_content . '</div>';
|
||||
}
|
||||
echo '<h1 class="page-title">Dernier article</h1>';
|
||||
echo '<h1 class="page-title"><i class="fa fa-fw fa-star" aria-hidden="true"></i> À la une</h1>';
|
||||
include(TEMPLATEPATH . '/components/featured.php');
|
||||
}
|
||||
?>
|
||||
<h1 class="page-title">Publications</h1>
|
||||
<h1 class="page-title"><i class="fa fa-fw fa-clock-o" aria-hidden="true"></i> Publications</h1>
|
||||
<?php include(TEMPLATEPATH . '/components/preview-grid.php'); ?>
|
||||
|
||||
</main>
|
||||
|
|
|
@ -4,4 +4,5 @@
|
|||
|
||||
@import 'custom/global';
|
||||
@import 'custom/previews';
|
||||
@import 'custom/featured';
|
||||
@import 'custom/article';
|
48
scss/custom/_featured.scss
Normal file
48
scss/custom/_featured.scss
Normal file
|
@ -0,0 +1,48 @@
|
|||
#featured-articles {
|
||||
display:grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
@include xl() {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-featured {
|
||||
font-size: 0.8rem;
|
||||
|
||||
.preview-link {
|
||||
display: block;
|
||||
padding:0;
|
||||
border-radius: $card-radius;
|
||||
overflow: hidden;
|
||||
.preview-item {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16 / 9;
|
||||
background-size:100% auto;
|
||||
background-position: center center;
|
||||
transition: background-size .5s;
|
||||
|
||||
&:hover {
|
||||
background-size: 120% auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-overlay {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
height:100%;
|
||||
color: white !important;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%);
|
||||
padding:$lineheight / 8;
|
||||
|
||||
h2 {
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -33,6 +33,10 @@
|
|||
#page-header {
|
||||
background: $color-primary url('img/background.png');
|
||||
margin-bottom:1.5rem;
|
||||
font-size: 0.8rem;
|
||||
.fa {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
header h1 {
|
||||
|
|
|
@ -59,7 +59,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.preview h2 {
|
||||
.preview h2, .preview-featured h2 {
|
||||
font-size:1.25rem;
|
||||
line-height: 1.5rem;
|
||||
font-family: $titlefont;
|
||||
|
|
46
style.css
46
style.css
|
@ -2558,7 +2558,10 @@ th {
|
|||
/* ------------------ HEADERS ------------------- */
|
||||
#page-header {
|
||||
background: #e33d22 url("img/background.png");
|
||||
margin-bottom: 1.5rem; }
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.8rem; }
|
||||
#page-header .fa {
|
||||
font-size: 1rem; }
|
||||
|
||||
header h1 {
|
||||
border-style: none !important;
|
||||
|
@ -2760,13 +2763,13 @@ footer {
|
|||
aspect-ratio: 16/9;
|
||||
border-radius: 8px; }
|
||||
|
||||
.preview h2 {
|
||||
.preview h2, .preview-featured h2 {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5rem;
|
||||
font-family: Teko, sans-serif;
|
||||
font-weight: 800;
|
||||
height: 3rem; }
|
||||
.preview h2 a {
|
||||
.preview h2 a, .preview-featured h2 a {
|
||||
background-color: transparent !important;
|
||||
color: #212529; }
|
||||
|
||||
|
@ -2776,6 +2779,43 @@ footer {
|
|||
line-height: 1.25rem;
|
||||
color: rgba(33, 37, 41, 0.8); }
|
||||
|
||||
#featured-articles {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: 1.6rem;
|
||||
padding-bottom: 1.6rem; }
|
||||
@media (min-width: 1200px) {
|
||||
#featured-articles {
|
||||
grid-template-columns: 1fr 1fr 1fr; } }
|
||||
.preview-featured {
|
||||
font-size: 0.8rem; }
|
||||
.preview-featured .preview-link {
|
||||
display: block;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden; }
|
||||
.preview-featured .preview-link .preview-item {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16 / 9;
|
||||
background-size: 100% auto;
|
||||
background-position: center center;
|
||||
transition: background-size .5s; }
|
||||
.preview-featured .preview-link .preview-item:hover {
|
||||
background-size: 120% auto; }
|
||||
.preview-featured .preview-overlay {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
color: white !important;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%);
|
||||
padding: 0.2rem; }
|
||||
.preview-featured .preview-overlay h2 {
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); }
|
||||
|
||||
.article img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
|
|
Reference in a new issue