Sejauh ini kita sudah memahami file-file template dan file fungsi yang digunakan untuk membuat WordPress theme.
Sejauh ini desain tampilan belum kita sentuh. Karena ini bukan tutorial tentang web design, maka tidak akan dibahas proses desain.
Bila Anda sudah memiliki file statis desain html, silakan implementasikan kedalam file template yang sudah kita bahas sebelumnya.
Jika Anda belum memiliki desain yang hendak diimplementasikan, dapat gunakan file yang tersedia di github. Silakan download di github atau disini.
Tutorial akan menggunakan file dari github. Ada beberapa file pendukung seperti images, css dan javascript yang perlu dicopy ke folder themes.
index.php
Buka file html statis yang didownload dari github. Copy html mulai dari tag <div class=”page-banner”> sampai ke bagian </div> sebelum footer.
Yang perlu diperhatikan disini adalah, kita menggunakan fungsi get_theme_file_uri(‘lokasi image yang akan diload’), ini adalah fungsi dari WordPress untuk mengambil path dari file yang ditunjukan oleh pada parameter.
PERHATIAN Pada modul ini, kita baru implementasikan desain kedalam theme files WordPress. Untuk menampilkan konten dinamis blogpost akan dibahas pada modul berikutnya.
<?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>
<div class="event-summary">
<a class="event-summary__date t-center" href="#">
<span class="event-summary__month">Mar</span>
<span class="event-summary__day">25</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">Poetry in the 100</a></h5>
<p>Bring poems you’ve wrote to the 100 building this Tuesday for an open mic and snacks. <a href="#" class="nu gray">Learn more</a></p>
</div>
</div>
<div class="event-summary">
<a class="event-summary__date t-center" href="#">
<span class="event-summary__month">Apr</span>
<span class="event-summary__day">02</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">Quad Picnic Party</a></h5>
<p>Live music, a taco truck and more can found in our third annual quad picnic day. <a href="#" class="nu gray">Learn more</a></p>
</div>
</div>
<p class="t-center no-margin"><a href="#" 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>
<div class="event-summary">
<a class="event-summary__date event-summary__date--beige t-center" href="#">
<span class="event-summary__month">Jan</span>
<span class="event-summary__day">20</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">We Were Voted Best School</a></h5>
<p>For the 100th year in a row we are voted #1. <a href="#" class="nu gray">Read more</a></p>
</div>
</div>
<div class="event-summary">
<a class="event-summary__date event-summary__date--beige t-center" href="#">
<span class="event-summary__month">Feb</span>
<span class="event-summary__day">04</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">Professors in the National Spotlight</a></h5>
<p>Two of our professors have been in national news lately. <a href="#" class="nu gray">Read more</a></p>
</div>
</div>
<p class="t-center no-margin"><a href="#" 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();
?>
header.php
copy dari file statis html dari badian <header class=”site-header”> hingga </header>
<!DOCTYPE html>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
<header class="site-header">
<div class="container">
<h1 class="school-logo-text float-left"><a href="#"><strong>Fictional</strong> University</a></h1>
<span class="js-search-trigger site-header__search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
<i class="site-header__menu-trigger fa fa-bars" aria-hidden="true"></i>
<div class="site-header__menu group">
<nav class="main-navigation">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Campuses</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
<div class="site-header__util">
<a href="#" class="btn btn--small btn--orange float-left push-right">Login</a>
<a href="#" class="btn btn--small btn--dark-orange float-left">Sign Up</a>
<span class="search-trigger js-search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
</div>
</div>
</div>
</header>
footer.php
Copy dari file statis html dari bagian <footer class=”site-footer”> sampai ke </footer>.
<footer class="site-footer">
<div class="site-footer__inner container container--narrow">
<div class="group">
<div class="site-footer__col-one">
<h1 class="school-logo-text school-logo-text--alt-color"><a href="#"><strong>Fictional</strong> University</a></h1>
<p><a class="site-footer__link" href="#">555.555.5555</a></p>
</div>
<div class="site-footer__col-two-three-group">
<div class="site-footer__col-two">
<h3 class="headline headline--small">Explore</h3>
<nav class="nav-list">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Campuses</a></li>
</ul>
</nav>
</div>
<div class="site-footer__col-three">
<h3 class="headline headline--small">Learn</h3>
<nav class="nav-list">
<ul>
<li><a href="#">Legal</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Careers</a></li>
</ul>
</nav>
</div>
</div>
<div class="site-footer__col-four">
<h3 class="headline headline--small">Connect With Us</h3>
<nav>
<ul class="min-list social-icons-list group">
<li><a href="#" class="social-color-facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#" class="social-color-twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#" class="social-color-youtube"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
<li><a href="#" class="social-color-linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="#" class="social-color-instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
functions.php
Yang perlu diperhatikan disini, saat load file javascript, fungsi WordPress yang digunakan adalah wp_enqueue_script. Dengan parameter:
param pertama: Silakan isi dengan string yang sesuai makna dan tujuan.
param kedua: lokasi file javascript yang akan diload.
param ketiga: dependency file, NULL jika tidak ada.
param keempat: version, silakan isi bebas, sesuai versi dari script Anda.
paramter kelima: true bila Anda ingin load javascript di bottom html sebelum </body>.
<?php
function skillplus_files(){
wp_enqueue_script('skillplus_js', get_theme_file_uri('/js/scripts-bundled.js'), NULL, '1.0', true);
wp_enqueue_style('google_font', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
wp_enqueue_style('font_awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_style('skillplus_main_style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'skillplus_files');
?>
Hasil akhir setelah desain diimplementasikan kurang lebih seperti berikut
