Excerpt adalah summary dari isi post. Daripada menampilkan summary dengan mengambil beberapa kata diawal artikel, tentu menggunakan summary yang ditulis akan lebih informatif.
Untuk menggunakan excerpt pada post type default seperti page dan post sangat mudah. Anda tinggal isi field excerpt pada saat membuat post.
Untuk custom post type, kita perlu tambahkan dukungan excerpt saat melakukan registrasi. Lihat bagian ‘supports’ => array(‘title’, ‘editor’, ‘excerpt’).
<?php
function post_types(){
register_post_type('event', array(
'supports' => array('title', 'editor', 'excerpt'),
'rewrite' => array('slug' => 'events'),
'has_archive' => true,
'public' => true,
'labels' => array(
'name' => 'Events',
'add_new_item' => 'Add New Event',
'edit_item' => 'Edit Event',
'all_items' => 'All Events',
'singular_name' => 'Event'
),
'menu_icon' => 'dashicons-calendar-alt'
));
}
add_action('init', 'post_types');
?>
Setelah dukungan excerpt diregistrasi, kita dapat mengedit isi excerpt melalui editor. SIlakan tambahkan excerpt untuk kebutuhan tutorial ini.
Setelah masing-masing post dibuat excerpt. Kita akan gunakan excerpt untuk ditampilkan pada front-page.php. Code dibawah adalah bagian untuk menampilkan post-type event. Fungsi has_excerpt() untuk memeriksa apakah post memiliki excerpt, bila ada tampilkan excerpt dengan fungsi get_the_excerpt(). Bila tidak ada, gunakan fungsi wp_trim_words().
Challenge, ubah juga untuk bagian yang menampilkan blogs.
<h2 class="headline headline--small-plus t-center">Upcoming Events</h2>
<?php
$homeEvents = new WP_Query(array(
'post_per_page' => 2,
'post_type' => 'event'
));
while($homeEvents->have_posts()){
$homeEvents->the_post();
?>
<div class="event-summary">
<a class="event-summary__date t-center" href="<?php the_permalink();?>">
<span class="event-summary__month"><?php the_time('M'); ?></span>
<span class="event-summary__day"><?php the_time('d'); ?></span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink();?>"><?php the_title();?></a></h5>
<p><?php
if (has_excerpt()){
echo get_the_excerpt();
}else{
echo wp_trim_words(get_the_content(), 15) ;
}
?> <a href="<?php the_permalink();?>" class="nu gray">Learn more</a></p>
</div>
</div>
<?php
}
?>
<p class="t-center no-margin"><a href="<?php echo get_post_type_archive_link('event'); ?>" class="btn btn--blue">View All Events</a></p>
Berikut tampilan home page setelah menggunakan excerpt.
Full code dari front-page.php
<?php
get_header();
?>
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('images/library-hero.jpg'); ?>);"></div>
<div class="page-banner__content container t-center c-white">
<h1 class="headline headline--large">Welcome!</h1>
<h2 class="headline headline--medium">We think you’ll like it here.</h2>
<h3 class="headline headline--small">Why don’t you check out the <strong>major</strong> you’re interested in?</h3>
<a href="#" class="btn btn--large btn--blue">Find Your Major</a>
</div>
</div>
<div class="full-width-split group">
<div class="full-width-split__one">
<div class="full-width-split__inner">
<h2 class="headline headline--small-plus t-center">Upcoming Events</h2>
<?php
$homeEvents = new WP_Query(array(
'post_per_page' => 2,
'post_type' => 'event'
));
while($homeEvents->have_posts()){
$homeEvents->the_post();
?>
<div class="event-summary">
<a class="event-summary__date t-center" href="<?php the_permalink();?>">
<span class="event-summary__month"><?php the_time('M'); ?></span>
<span class="event-summary__day"><?php the_time('d'); ?></span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink();?>"><?php the_title();?></a></h5>
<p><?php
if (has_excerpt()){
echo get_the_excerpt();
}else{
echo wp_trim_words(get_the_content(), 15) ;
}
?> <a href="<?php the_permalink();?>" class="nu gray">Learn more</a></p>
</div>
</div>
<?php
}
?>
<p class="t-center no-margin"><a href="<?php echo get_post_type_archive_link('event'); ?>" class="btn btn--blue">View All Events</a></p>
</div>
</div>
<div class="full-width-split__two">
<div class="full-width-split__inner">
<h2 class="headline headline--small-plus t-center">From Our Blogs</h2>
<?php
$homePosts = new WP_Query(array(
'posts_per_page' => 2
));
while($homePosts->have_posts()){
$homePosts->the_post();
?>
<div class="event-summary">
<a class="event-summary__date event-summary__date--beige t-center" href="<?php the_permalink(); ?>">
<span class="event-summary__month"><?php the_time('M'); ?></span>
<span class="event-summary__day"><?php the_time('d'); ?></span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
<p><?php
if (has_excerpt()){
echo get_the_excerpt();
}else{
echo wp_trim_words(get_the_content(), 15) ;
}
?> <a href="<?php the_permalink(); ?>" class="nu gray">Read more</a></p>
</div>
</div>
<?php
}
wp_reset_postdata();
?>
<p class="t-center no-margin"><a href="<?php echo site_url('\blog') ?>" class="btn btn--yellow">View All Blog Posts</a></p>
</div>
</div>
</div>
<div class="hero-slider">
<div class="hero-slider__slide" style="background-image: url(<?php echo get_theme_file_uri('images/bus.jpg'); ?>);">
<div class="hero-slider__interior container">
<div class="hero-slider__overlay">
<h2 class="headline headline--medium t-center">Free Transportation</h2>
<p class="t-center">All students have free unlimited bus fare.</p>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
</div>
</div>
</div>
<div class="hero-slider__slide" style="background-image: url(<?php echo get_theme_file_uri('images/apples.jpg'); ?>);">
<div class="hero-slider__interior container">
<div class="hero-slider__overlay">
<h2 class="headline headline--medium t-center">An Apple a Day</h2>
<p class="t-center">Our dentistry program recommends eating apples.</p>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
</div>
</div>
</div>
<div class="hero-slider__slide" style="background-image: url(<?php echo get_theme_file_uri('images/bread.jpg') ?>);">
<div class="hero-slider__interior container">
<div class="hero-slider__overlay">
<h2 class="headline headline--medium t-center">Free Food</h2>
<p class="t-center">Fictional University offers lunch plans for those in need.</p>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
</div>
</div>
</div>
</div>
<?php
get_footer();
?>