improvement: refonte page articles
This commit is contained in:
parent
6f5b37029d
commit
05848519af
5 changed files with 74 additions and 11 deletions
|
@ -1,19 +1,22 @@
|
||||||
<?php include(TEMPLATEPATH . '/components/article/breadcrumb.php'); ?>
|
|
||||||
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
|
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
|
||||||
|
|
||||||
<?php include(TEMPLATEPATH . '/components/article/flags.php'); ?>
|
<?php include(TEMPLATEPATH . '/components/article/flags.php'); ?>
|
||||||
|
|
||||||
<article class="article container-article" id="post-<?php the_ID(); ?>">
|
<article class="article container-article mb-1" id="post-<?php the_ID(); ?>">
|
||||||
<?php if ($haveTitle) { ?>
|
<?php if ($haveTitle) { ?>
|
||||||
<h1 class="page-title"><?php the_title(); ?></h1>
|
<h1 class="page-title"><?php the_title(); ?></h1>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
|
|
||||||
|
<div class="thumbnail mb-half" aria-hidden="true">
|
||||||
|
<?php the_post_thumbnail( ); ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="article-entry">
|
<div class="article-entry">
|
||||||
<?php the_content(); ?>
|
<?php the_content(); ?>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<section class="card card-noheader">
|
<section class="card card-noheader article-meta">
|
||||||
<div class="author-area">
|
<div class="author-area">
|
||||||
<?php echo get_avatar( get_the_author_meta('user_email'), $size = '120'); ?>
|
<?php echo get_avatar( get_the_author_meta('user_email'), $size = '120'); ?>
|
||||||
<div class="author-metadata">
|
<div class="author-metadata">
|
||||||
|
@ -22,14 +25,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php include(TEMPLATEPATH . '/components/article/description.php'); ?>
|
|
||||||
|
|
||||||
<div class="article-category">
|
<div class="article-category">
|
||||||
<?php include(TEMPLATEPATH . '/components/article/terms.php'); ?>
|
<?php include(TEMPLATEPATH . '/components/article/terms.php'); ?>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<?php comments_template(); ?>
|
|
||||||
|
|
||||||
<?php endwhile; ?>
|
<?php endwhile; ?>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
|
@ -2,18 +2,18 @@
|
||||||
if (has_category('chapters')) {
|
if (has_category('chapters')) {
|
||||||
$romans = get_the_terms($post->ID, 'roman');
|
$romans = get_the_terms($post->ID, 'roman');
|
||||||
foreach( $romans as $roman ) {
|
foreach( $romans as $roman ) {
|
||||||
echo "<a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='btn-small btn-primary'><i class='fa fa-book'></i> " . $roman->name . "</a>";
|
echo "<a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='badge btn-primary'><i class='fa fa-book'></i> " . $roman->name . "</a>";
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
$categories = get_the_category();
|
$categories = get_the_category();
|
||||||
foreach( $categories as $category ) {
|
foreach( $categories as $category ) {
|
||||||
echo "<a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='btn-small btn-primary'><i class='fa fa-folder'></i> " . $category->cat_name . "</a>";
|
echo "<a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='badge btn-primary'><i class='fa fa-folder'></i> " . $category->cat_name . "</a>";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
$tags = get_the_tags();
|
$tags = get_the_tags();
|
||||||
if ($tags) {
|
if ($tags) {
|
||||||
foreach( $tags as $tag ) {
|
foreach( $tags as $tag ) {
|
||||||
echo "<a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='btn-small btn-secondary'><i class='fa fa-tag'></i> " . $tag->name . "</a> ";
|
echo "<a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='badge btn-secondary'><i class='fa fa-tag'></i> " . $tag->name . "</a> ";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
|
@ -4,3 +4,4 @@
|
||||||
|
|
||||||
@import 'custom/global';
|
@import 'custom/global';
|
||||||
@import 'custom/previews';
|
@import 'custom/previews';
|
||||||
|
@import 'custom/article';
|
37
scss/custom/_article.scss
Normal file
37
scss/custom/_article.scss
Normal file
|
@ -0,0 +1,37 @@
|
||||||
|
.article {
|
||||||
|
img {
|
||||||
|
max-width:100%;
|
||||||
|
height:auto;
|
||||||
|
margin:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail img {
|
||||||
|
width:100%;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-meta {
|
||||||
|
.author-area {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: $lineheight / 2;
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-radius: 9999px;
|
||||||
|
width: $lineheight * 3;
|
||||||
|
height: auto;
|
||||||
|
margin: 0;
|
||||||
|
margin-right: $lineheight / 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-category {
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: $lineheight / 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
26
style.css
26
style.css
|
@ -2775,3 +2775,29 @@ footer {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
line-height: 1.25rem;
|
line-height: 1.25rem;
|
||||||
color: rgba(33, 37, 41, 0.8); }
|
color: rgba(33, 37, 41, 0.8); }
|
||||||
|
|
||||||
|
.article img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin: auto; }
|
||||||
|
|
||||||
|
.article .thumbnail img {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
border-radius: 8px;
|
||||||
|
object-fit: cover; }
|
||||||
|
|
||||||
|
.article-meta .author-area {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.8rem; }
|
||||||
|
.article-meta .author-area img {
|
||||||
|
border-radius: 9999px;
|
||||||
|
width: 4.8rem;
|
||||||
|
height: auto;
|
||||||
|
margin: 0;
|
||||||
|
margin-right: 0.8rem; }
|
||||||
|
|
||||||
|
.article-meta .article-category .badge {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 0.4rem; }
|
||||||
|
|
Reference in a new issue