Home Code Wordpress Step by Step Membuat Wordpress Template Sederhana

Step by Step Membuat Wordpress Template Sederhana

Diterbitkan
Tags
Views
Langsung saja mari kita buat template sederhana untuk wordpress.


  1. Buat folder baru dalam wp-content->themes untuk menampung template yang akan dibuat, disini kami menamai folder dengan "untheme".
  2. Buat lagi folder dan file didalam folder untheme yang tadi kita buat seperti gambar dibawah.
  3. Mari kita isi file-file yang telah kita buat.

Isi file template

  1. header.php
    file ini akan dipanggil di semua tampilan blog, isi header.php seperti berikut.
    <?php
/**
 * The header for the theme
 *
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
 <meta charset="<?php bloginfo( 'charset' ); ?>">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
 
<a class="screen-reader-text" href="#content">Skip to content</a>

<header class="site-header">
 <div class="logo">
 <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    <p class="description"><?php bloginfo('description'); ?></p>
 </div>
 
 <nav class="main-navigation">
  <?php
  wp_nav_menu( array(
   'theme_location' => 'menu-1',
   'menu_id'        => 'primary-menu',
  ) );
  ?>
 </nav>
</header>

<div id="content" class="site-content">
  2. footer.php
    file ini juga dipanggil disemua tampilan blog, isi footer.php seperti berikut.
    <?php
/**
 * The template for displaying the footer
 *
 */

?>

</div>

<footer class="site-footer">
Copyright © <?php echo date('Y'); ?> <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a>
</footer>

<?php wp_footer(); ?>

</body>
</html>
  3. index.php
    file ini akan tampil di homepage blog, isi index.php seperti berikut.
    <?php
/**
 * The main template file
 */

get_header();
?>

<main id="main" class="site-main" role="main">

<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();

  get_template_part( 'template-parts/content-excerp', get_post_type() );

 endwhile;

 the_posts_pagination( array(
  'prev_text' => __( 'Previous page' ),
  'next_text' => __( 'Next page' ),
 ) );

endif;
?>

</main>

<?php
get_sidebar();
get_footer();
  4. single.php
    file ini untuk menampilkan sebuah posting blog, isi single.php seperti berikut.
    <?php
/**
 * The template for displaying all single posts
 *
 */

get_header();
?>

<main id="main" class="site-main" role="main">

 <?php
 while ( have_posts() ) : the_post();

  get_template_part( 'template-parts/content', get_post_type() );

  // If comments are open or we have at least one comment, load up the comment template.
  if ( comments_open() || get_comments_number() ) :
   comments_template();
  endif;

 endwhile;
 ?>

</main>

<?php
get_sidebar();
get_footer();
  5. functions.php
    file ini mengelola berbagai function yang dijalankan pada template, isi sederhana functions.php sebagai berikut.
    <?php
/**
 * Functions and definitions
 *
 */

/*
 * Let WordPress manage the document title.
 */
add_theme_support( 'title-tag' );

/*
 * Enable support for Post Thumbnails on posts and pages.
 */
add_theme_support( 'post-thumbnails' );

/*
 * Switch default core markup for search form, comment form, and comments
 * to output valid HTML5.
 */
add_theme_support( 'html5', array(
 'search-form',
 'comment-form',
 'comment-list',
 'gallery',
 'caption',
) );

/** 
 * Include primary navigation menu
 */
function untheme_nav_init() {
 register_nav_menus( array(
  'menu-1' => 'Primary Menu',
 ) );
}
add_action( 'init', 'untheme_nav_init' );

/**
 * Register widget area.
 *
 */
function untheme_widgets_init() {
 register_sidebar( array(
  'name'          => 'Sidebar',
  'id'            => 'sidebar-1',
  'description'   => 'Add widgets',
  'before_widget' => '<section id="%1$s" class="widget %2$s">',
  'after_widget'  => '</section>',
  'before_title'  => '<h2 class="widget-title">',
  'after_title'   => '</h2>',
 ) );
}
add_action( 'widgets_init', 'untheme_widgets_init' );

/**
 * Enqueue scripts and styles.
 */
function untheme_scripts() {
 wp_enqueue_style( 'untheme-style', get_stylesheet_uri() );
 wp_enqueue_style( 'untheme-custom-style', get_template_directory_uri() . '/assets/css/style.css' );
 wp_enqueue_script( 'untheme-scripts', get_template_directory_uri() . '/assets/js/scripts.js' );
}
add_action( 'wp_enqueue_scripts', 'untheme_scripts' );

function untheme_create_post_custom_post() {
 register_post_type('custom_post', 
  array(
  'labels' => array(
   'name' => __('Custom Post', 'untheme'),
  ),
  'public'       => true,
  'hierarchical' => true,
  'supports'     => array(
   'title',
   'editor',
   'excerpt',
   'custom-fields',
   'thumbnail',
  ), 
  'taxonomies'   => array(
    'post_tag',
    'category',
  ) 
 ));
}
add_action('init', 'untheme_create_post_custom_post'); // Add our work type
  6. page.php
    file ini akan tampil saat membuka sebuah page blog, isi page.php sebagai berikut.
    <?php
/**
 * The template for displaying all pages
 *
 */

get_header();
?>

<main id="main" class="site-main" role="main">

 <?php
 while ( have_posts() ) : the_post();

  get_template_part( 'template-parts/content', 'page' );

  // If comments are open or we have at least one comment, load up the comment template.
  if ( comments_open() || get_comments_number() ) :
   comments_template();
  endif;

 endwhile; 
 ?>

</main>

<?php
get_sidebar();
get_footer();
  7. style.css
    file ini untuk mempercantik tampilan blog juga berisi deskripsi template yang kita buat, file style.css sebagai berikut.
    /*!
Theme Name: untheme
Author: Cah Nggalek
Author URI: https://ragelem.blogspot.com
Description: Base theme for development fom https://github.com/taniarascia/untheme
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: untheme
*/

/* Text meant only for screen readers. */
.screen-reader-text {
 clip: rect(1px, 1px, 1px, 1px);
 clip-path: inset(50%);
 height: 1px;
 width: 1px;
 margin: -1px;
 padding: 0;
 border: 0;
 overflow: hidden;
 position: absolute !important;
 word-wrap: normal !important;
}
  8. comments.php
    file ini akan menampilkan comment dalam post ataupun page jika diijinkan untuk berkomentar, file comments.php sebagai berikut.
    <?php
/**
 * The template for displaying comments
 * 
 */

if ( post_password_required() ) {
 return;
}
?>

<div id="comments" class="comments-area">

 <?php
 if ( have_comments() ) : ?>
  <h2 class="comments-title">Comments</h2>

  <?php the_comments_navigation(); ?>

  <ul class="comment-list">
   <?php
   wp_list_comments( array(
    'short_ping' => true,
   ) );
   ?>
  </ul>

  <?php
  the_comments_navigation();

  // If comments are closed and there are comments, let's leave a little note, shall we?
  if ( ! comments_open() ) : ?>
   <p class="no-comments">Comments are closed</p>
  <?php
  endif;

 endif;

 comment_form();
 ?>

</div>
  9. sidebar.php
    file ini untuk menampilkan custom sidebar blog, isi sidebar.php sebagai berikut.
    <?php
/**
 * The sidebar containing the main widget area
 *
 */

if ( ! is_active_sidebar( 'sidebar-1' ) ) {
 return;
}
?>

<aside class="widget-area">
 <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
  10. search.php
    file ini untuk menampilkan hasil pencarian di blog, isi search.php sebagai berikut.
    <?php
/**
 * The template for displaying search results pages
 *
 */

get_header();
?>

<main id="main" class="site-main" role="main">

 <?php 
 if ( have_posts() ) : ?>

  <header class="page-header">
   <h1>Results: <?php echo get_search_query(); ?></h1>
  </header>

  <?php
  while ( have_posts() ) : the_post();

   get_template_part( 'template-parts/content', 'search' );

  endwhile;
 
 else: ?>

  <p>Sorry, but nothing matched your search terms.</p>
 
 <?php
 endif;
 ?>

</main>

<?php
get_sidebar();
get_footer();
  11. 404.php
    file ini untuk menampilkan halaman error pada blog, isi 404.php sebagai berikut.
    <?php
/**
 * The template for displaying 404 pages
 *
 */

get_header();
?>

<main id="main" class="site-main" role="main">

 <section class="page-section">
  <header class="page-header">
   <h1>404</h1>
  </header>

  <div class="page-content">
   <p>Page not found.</p>
  </div>
 </section>

</main>

<?php
get_footer();
  12. sekarang mari kita isi folder template-parts dengan file yang akan dipanggil oleh index.php dan single.php untuk menampilkan posting blog.
    • content.php
      file ini akan dipanggil oleh single.php maupun page.php untuk menampilkan isi konten posting, isi content.php sebagai berikut.
      <?php
/**
 * Template part for displaying posts
 */

?>

<article id="post-<?php the_ID(); ?>" class="entry">
 <header class="entry-header">
  <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
 </header>

 <div class="entry-content">
  <?php the_content(); ?>
 </div>
</article>
    • content-excerp.php
      file ini akan dipanggil index.php untuk menampilkan thumbnail dan readmore pada homepage atau bisa juga dipanggil dalam search blog, isi excerp sebagai berikut.
      <?php
/**
 * Template part for displaying posts
 */

?>

<article id="post-<?php the_ID(); ?>" class="entry">
 <header class="entry-header">
  <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
 </header>

 <div class="entry-content">
  <div class="featured-image"><?php the_post_thumbnail(); ?></div>
        <div class="post-excerpt"><?php the_excerpt(); ?></div>
 </div>
</article>
  13. Selanjutnya isi foldes assets untuk menempatkan file js, css, ataupun php sebagai file tambahan.
    Dalam folder assets buat folder lagi css untuk menempatkan file style.css, file ini dipanggil oleh functions.php untuk ditempatkan di blog kita
    • style.css dalam folder assets->css untuk menata dan mempercantik tampilan blog, berisi sebagai berikut.
      *,
*::before,
*::after {
 box-sizing: border-box;
}

body {
 -webkit-font-smoothing: antialiased;
 margin: 0;
 color: #404040;
 background: white;
 font-size: 1rem;
 font-family: sans-serif;
 line-height: 1.6;
}

a {
 color: #3BA9FC;
 text-decoration: none;
}

a:hover {
 color: #F7C243;
}

h1, h2, h3 {
 color: #111;
 line-height: 1.2;
}

h1 {
 margin-top: 0;
}

.site-header {
 max-width: 1000px;
 margin: 0 auto;
 color: #555;
 padding: 20px 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 border-bottom: 1px solid #e8e8f0;
 margin-bottom: 35px;
}

.site-title {
 margin: 0;
 font-size: 1.4rem;
}

.logo h1 {
    line-height: normal;
    margin-bottom: 0;
}

.logo p {
    margin: 0;
}

.main-navigation .menu {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
}

.main-navigation .menu a {
 display: block;
 color: #666;
 padding: 10px;
 text-decoration: none;
 font-weight: 600;
}

.main-navigation .menu a:hover {
 color: #6EDEC4;
}

.site-content {
 max-width: 1000px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 2.5fr 1fr;
 grid-gap: 10px;
 min-height: calc(100vh - 205px);
}

.site-main {
    display: inherit;
}

.featured-image {
    display: inline-block;
    max-width: 200px;
    float: left;
    margin-right: 15px;
}

.featured-image img {
    max-width: 100%;
    height: auto;
}

.site-footer {
 margin: 0 auto;
 padding: 30px 15px;
 background: #F8F8FB;
 border-top: 1px solid #e8e8f0;
 text-align: center;
}

.entry {
 margin-bottom: 35px;
}

.entry-header a {
 color: #111;
 font-size: 2rem;
}

.widget {
 padding: 2rem;
 border-radius: 6px;
 background: linear-gradient(to bottom right, #896EFA, #41A3CD);
 color: white;
 box-shadow: 5px 10px 20px rgba(0,0,0,.1);
 margin-bottom: 20px;
}

.widget h2 {
 margin-top: 0;
 color: white;
 font-size: 1rem;
}

.widget a {
 color: rgba(255,255,255,.8);
}

.comment {
 padding: 20px 0;
 margin: 20px 0;
 border-bottom: 1px solid #e8e8f0;
}

.comment-list {
 list-style: none;
 padding: 0;
 margin: 0;
}

.avatar {
 display: inline-flex;
 margin-right: 15px;
}

.says {
 display: none;
}

.comment-author {
 display: flex;
    align-items: center;
}

.comment-meta {
 display: flex;
 align-items: center;
}

.comment-metadata a {
 padding: 0 0 0 15px;
 color: #888;
 font-size: .9rem;
}

.reply a {
 color: #888;
 font-size: .9rem;
}
  14. Sampai disini temlate kita sudah jadi, hasilnya kurang lebih seperti gambar screnshoot diatas.
  15. semoga bermanfaat

Share to:

Jika Anda merasa "Step by Step Membuat Wordpress Template Sederhana" bermanfaat, jangan ragu untuk membagikannya pada teman Anda melalui sosial media berikut

WhatsApp

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)