Coding WordPress untuk tema sendiri
1. content.php
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<header class="entry-header">
<?php if ( is_single() ) : ?>
<h3 class="entry-title"><?php the_title(); ?></h3>
<?php else : ?>
<h3 class="entry-title">
<a href="<?php the_permalink(); ?>" rel="bookmark">
<?php the_title(); ?></a>
</h3>
<?php endif; ?>
<div class="entry-meta">
<?php edit_post_link( __( 'Edit', 'temasendiri' ),
'<span class="edit-link">', '</span>' ); ?>
</div>
</header>
<div class="entry-content">
<?php
the_content( sprintf(
__( 'Selengkapnya', 'temasendiri' ),
the_title('<span class="read-more">', '</span>', false)
) );
?>
</div>
</article>
2. footer.php
<footer role="footer">
<div class="container">
<div class="row">
<p class="text-center">Copyright © <a href='http://rumahgemilang.com' title='Rumah Gemilang Indonesia' target='_blank'>RGI</a> | Desain oleh: <a href='http://http://ahmad.medianewsonline.com' title='firda sofia' target='_blank'>ahmad</a></p>
</div>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
3. functions.php
<<?php
function temasendiri_enqueue(){
wp_enqueue_script('bootstrap', get_template_directory_uri().'/js/bootstrap.min.js', array('jquery'));
}
add_action('wp_footer', 'temasendiri_enqueue');
// wp_enqueue_script(), digunakan untuk menambahkan skrip kedalam parameter tema. Parameter pertama di dalam kurung adalah nama skripdan parameter kedua adalah letak file javascript. Karena file bootstrap.min.js merupakan plugin jQuery , maka parameter ketiga ditulis array('jquery'), untuk memastikan file jQuery dipanggil sebelum file tersebut. Perlu diperhatikan, kita tidak perlu memanggil file jQuery, karena wordpress sudah memanggilnya.
// get_template_directory_uri(), digunakan untuk mendapatkan folder tema.
// add_action(), digunakan untuk menambahkan fungsi kedalam bagian tertentu
4. header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title('|', true, 'right'); ?></title>
<link rel="pingback"
href="<?php echo bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" type="text/css"
href="<?php echo bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header role="banner">
<div class="container">
<div class="row header">
<div class="col-md-12">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<h1><?php bloginfo( 'name' ); ?> <br> <small>
<?php bloginfo( 'description' ); ?></small></h2>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav id="site-navigation" class="navbar navbar-inverse"
role="navigation">
<div class="navbar-header">
<button class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#menuku">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="menuku">
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'nav navbar-nav',
'menu_id' => 'primary-menu' ) ); ?>
</div>
</nav>
</div>
</div>
</div>
</header>
5. index.php
<?php get_header(); ?>
<div class="section">
<div class="container" role="main">
<div class="row">
<div class="col-md-8">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : ?>
<?php the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
<div class="col-md-4">
<?php get_sidebar(); ?>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>
6. sidebar.php
<?php
if (is_active_sidebar( 'kanan' ) ) :
dynamic_sidebar( 'kanan' );
endif;
?>
7. style.css
/*
Theme Name: temasendiri
Theme URI: https://firdasosa.blogspot.co.id
Author:firda
Author URI: https://firdasosa.blogspot.co.id
Description: cara membuat ema sendiri agar lebih mudah
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: temasendiri
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@import url(". .css/bootstrap.min.css");
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<header class="entry-header">
<?php if ( is_single() ) : ?>
<h3 class="entry-title"><?php the_title(); ?></h3>
<?php else : ?>
<h3 class="entry-title">
<a href="<?php the_permalink(); ?>" rel="bookmark">
<?php the_title(); ?></a>
</h3>
<?php endif; ?>
<div class="entry-meta">
<?php edit_post_link( __( 'Edit', 'temasendiri' ),
'<span class="edit-link">', '</span>' ); ?>
</div>
</header>
<div class="entry-content">
<?php
the_content( sprintf(
__( 'Selengkapnya', 'temasendiri' ),
the_title('<span class="read-more">', '</span>', false)
) );
?>
</div>
</article>
2. footer.php
<footer role="footer">
<div class="container">
<div class="row">
<p class="text-center">Copyright © <a href='http://rumahgemilang.com' title='Rumah Gemilang Indonesia' target='_blank'>RGI</a> | Desain oleh: <a href='http://http://ahmad.medianewsonline.com' title='firda sofia' target='_blank'>ahmad</a></p>
</div>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
3. functions.php
<<?php
function temasendiri_enqueue(){
wp_enqueue_script('bootstrap', get_template_directory_uri().'/js/bootstrap.min.js', array('jquery'));
}
add_action('wp_footer', 'temasendiri_enqueue');
// wp_enqueue_script(), digunakan untuk menambahkan skrip kedalam parameter tema. Parameter pertama di dalam kurung adalah nama skripdan parameter kedua adalah letak file javascript. Karena file bootstrap.min.js merupakan plugin jQuery , maka parameter ketiga ditulis array('jquery'), untuk memastikan file jQuery dipanggil sebelum file tersebut. Perlu diperhatikan, kita tidak perlu memanggil file jQuery, karena wordpress sudah memanggilnya.
// get_template_directory_uri(), digunakan untuk mendapatkan folder tema.
// add_action(), digunakan untuk menambahkan fungsi kedalam bagian tertentu
4. header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title('|', true, 'right'); ?></title>
<link rel="pingback"
href="<?php echo bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" type="text/css"
href="<?php echo bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header role="banner">
<div class="container">
<div class="row header">
<div class="col-md-12">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<h1><?php bloginfo( 'name' ); ?> <br> <small>
<?php bloginfo( 'description' ); ?></small></h2>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav id="site-navigation" class="navbar navbar-inverse"
role="navigation">
<div class="navbar-header">
<button class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#menuku">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="menuku">
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'nav navbar-nav',
'menu_id' => 'primary-menu' ) ); ?>
</div>
</nav>
</div>
</div>
</div>
</header>
5. index.php
<?php get_header(); ?>
<div class="section">
<div class="container" role="main">
<div class="row">
<div class="col-md-8">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : ?>
<?php the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
<div class="col-md-4">
<?php get_sidebar(); ?>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>
6. sidebar.php
<?php
if (is_active_sidebar( 'kanan' ) ) :
dynamic_sidebar( 'kanan' );
endif;
?>
7. style.css
/*
Theme Name: temasendiri
Theme URI: https://firdasosa.blogspot.co.id
Author:firda
Author URI: https://firdasosa.blogspot.co.id
Description: cara membuat ema sendiri agar lebih mudah
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: temasendiri
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@import url(". .css/bootstrap.min.css");
Komentar
Posting Komentar