.png)
Cara Membuat template wordpress sendiri
Wordpress merupakan CMS yang paling banyak digunakan diinternet, wordpress pun sangat mudah digunakan dan dikustomisasi. template-template wordpress yang premium lumayan harganya, pada postingan kali ini kita akan membahas bagaimana cara membuat template wordpress dari awal.
Pertama-tama anda buat folder baru di wp-content/themes dengan nama folder terserah anda nantinya nama folder tersebut akan menjadi nama thema wordpress anda untuk membuktikannya anda masuk ke wordpress di browser kemudian dibagian dashboard pilih tab thema akan muncul thema anda jika thema barunya diaktifkan muncul blank putih karena kita belum membuat apa-apa di themanya
kemudian di folder baru tadi buat file index.php file ini akan menjadi halaman utama wordpress anda isi file nya sebagai berikut:
<?php get_header();?>
<div class="content">
<main>
<?php
if( have_posts() ):
while( have_posts() ): the_post();
get_template_part('content', get_post_format());
endwhile;
else:
echo "Tidak ada Post!";
endif;
?>
</main>
<asside>
<?php dynamic_sidebar('sidebar1'); ?>
</asside>
<div class="clear"></div>
</div>
<?php get_footer();?>
lalu content.php
<?php
if(is_single()):?>
<h3><?php the_title(); ?></h3>
<?php the_post_thumbnail('big_thumb'); ?>
<p><?php the_content(); ?></p>
<?php elseif(is_page()): ?>
<h3>Halaman <?php the_title(); ?></h3>
<p><?php the_content(); ?></p>
<?php else: ?>
<h3><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h3>
<p>
<?php the_post_thumbnail('small_thumb');
the_excerpt(); ?>
<a class="read" href="<?php the_permalink(); ?>">Lanjut baca...</a>
</p>
<p class="info_meta">
<?php echo "ditulis oleh : ";?>
<a href="<?php echo get_author_posts_url(get_the_author_meta('ID'));?>">
<?php the_author();?></a>
<?php echo " pada tanggal "; the_time('j F, Y'); ?> jam <?php the_time('g:i a');
echo " dalam Kategory : "; the_category(', ');
?>
</p>
<?php endif; ?>
lalu buat file header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="<?php echo bloginfo('author'); ?>">
<meta name="keyword" content="<?php echo bloginfo('keyword'); ?>">
<meta name="description" content="<?php echo bloginfo('description'); ?>">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body>
<header>
<h1><a href="<?php echo home_url(); ?>"> <?php bloginfo('name'); ?> </a></h1>
<h3><?php bloginfo('description'); ?> </h3>
<nav>
<?php
$args = array('theme_location' => 'main_menu');
wp_nav_menu($args);
?>
</nav>
<div id="search_form">
<?php get_search_form(); ?>
</div>
<div class="clear"></div>
</header>
dan file footer.php
<footer>
<nav>
<?php
$args = array('theme_location' => 'footer_menu');
wp_nav_menu($args);
?>
</nav>
<center>Copyrights © <?php echo date('Y ')." - "; bloginfo('name'); ?> | design by <a href="http://giviews.id">Juanas Smith</a> | Powered by <a href="http://wordpress.org">Wordpress</a>
</footer>
<?php wp_footer(); ?>
</body>
</html>
nantinya file index, header.php, content.php dan footer.php akan menjadi satu halaman
lalu buat function.php. file ini yang akan menyambungkan dengan style.css dan untuk mensuport themanya agar bisa membuat pos gallery atau video. ada beberapa macam post di wordpress ada aside, link, gallery, video dll.
<?php
//load script
function load_file(){
wp_enqueue_style('style', get_stylesheet_uri() );
}
add_action('wp_enqueue_scripts', 'load_file');
register_nav_menus(array(
'main_menu' => 'Menu Utama',
'footer_menu' => 'Menu Footer'
));
//the excerpt
function get_excerpt_length(){
return 50;
}
function return_excerpt_text(){
return '';
}
add_filter('excerpt_more', 'return_excerpt_text');
add_filter('excerpt_length', 'get_excerpt_length');
function init_setup(){
register_nav_menus(array(
'main_menu' => 'Menu Utama',
'footer_menu' => 'Menu Footer'
));
//add featured image
add_theme_support('post-thumbnails');
add_image_size('small_thumb', 150, 150, true);
add_image_size('big_thumb', 450, 250, true);
add_theme_support('post-formats', array('aside', 'gallery', 'video', 'link', 'audio', 'chat', 'image', 'quote', 'status') );
}
function widget_setup(){
register_sidebar(array(
'name' => "Sidebar Pertama",
'id' => "sidebar1",
'before_widget' => "",
'after_widget' => "",
'before_title' => "<h3>",
'after_title' => "</h3><hr>"
));
register_sidebar(array(
'name' => "Sidebar Kedua",
'id' => "sidebar2",
'before_widget' => "",
'after_widget' => "",
'before_title' => "<h3>",
'after_title' => "</h3><hr>"
));
}
add_action('widgets_init', 'widget_setup' );
add_action('after_setup_theme','init_setup');
?>
lalu buat style.css untuk mengatur tampilan themanya
/*
Thema Name : Thema sekolah koding
Thema URL : http://sekolahkoding.com
Author : Juanassmith
Author URI : http://giviews.id
Description : tema pertama saya
*/
* {
margin: 0;
padding: 0;
}
body{
margin: auto;
margin-top: 0px;
width : 80%;
font-family: arial;
background-color: #0022aa;
background-image: url(city.jpg), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding-top: 0px;
}
a {
text-decoration: none;
color:rgb(72, 143, 217);
}
.form {
padding: 5px;
border: 1px solid blue;
}
.form:focus {
padding: 5px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.btn {
color: blue;
display: inline-block;
background-color: #fff;
padding: 5px;
border: 1px solid blue;
}
.btn:hover {
color: #fff;
display: inline-block;
background-color: blue;
padding: 5px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
h1 {
margin-bottom:0px;
}
h1 a{
padding: 5px;
color: #fff;
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em darkblue;
}
h2 {
margin-top:0px;
}
li {
list-style:none;
}
nav ul {
padding-left: 0px;
}
nav li{
display: inline-block;
margin-right: 10px;
color: green;
}
.sub_judul {
font-weight: bold;
font-size: 20px;
}
header {
padding: 10px;
}
header nav {
float : left;
width: 50%;
}
#search_form{
float: right;
margin-top: 10px;
}
.clear {
clear: both;
}
.gallery{
background-color: rgb(0, 255, 110);
}
header nav li a{
border: 0;
color: green;
font-weight: bold;
display: inline-block;
height: 35px;
line-height: 40px;
position: relative;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
}
li a:hover {
color: green;
border-bottom: 5px solid green;
}
header nav li a.active {
border-bottom: 5px solid green;
}
header {
margin-top:0px;
padding-top:0px;
border-bottom: 1px solid #333;
background-color:#cfab00;
}
main {
background-color: #fff;
padding: 10px;
width: 75%;
float: left;
margin-top: 20px;
margin-right: 2%;
}
.content {
background-color: #fff;
width: 100%;
}
.custom_post a {
display: inline-block;
width: 27%;
margin:0 1.5%;
background-color:rgb(214, 125, 112);
text-align: center;
padding: 5px;
color: #333;
}
asside {
width: 20%;
margin-top: 20px;
background-color: #fff;
float: left;
}
footer {
padding: 10px;
border-top: 1px solid #333;
background-color: #ddd;
}
.img {
width: 100%;
height: auto;
}
Ok sekianlah tutorial kita kali ini, tentang cara membuat template wordpress sederhana terimakasih. semoga membantu.
0 komentar :