Cara Membuat Tema WordPress Sederhana

Hallo sahabat dumenity berjumpa lagi dalam tutorialÂ kursuswebdesign,Â pada tutorial kali ini saya akan membahas tentang Cara Membuat Tema WordPress Sederhana. Membuat tema khusus WordPress minimal sederhana. Dalam tutorial ini mari kita ikuti langkah-langkah untuk membuat tema WordPress.

Buat folder tema baru.
Buat file khusus tema WordPress seperti header, footer, dan stylesheet.
Tambahkan CSS ke tema baru.

Sebelum memulai dengan langkah-langkah ini, lebih baik memiliki pengaturan lokal WordPress.

1. Buat Folder Tema Baru

Pertama, kita harus membuat folder baru untuk tema tersebut. Saat Anda menginstal tema di WordPress, folder ini harus ditempatkan di,

<Wordpress root directory>/wp-content/themes/

1	<Wordpress root directory>/wp-content/themes/

2. Buat File Tema-Khusus WordPress

Untuk tema WordPress sederhana kita cukup membuat file-file berikut .

header.php – untuk menambahkan judul, skrip sisi klien, gaya, dan lain-lain.
footer.php – untuk menambahkan menu footer jika ada, informasi hak cipta, feed, dll.
index.php – halaman rumah untuk memposting daftar artikel.
styles.php – untuk menambahkan gaya untuk tema

Mari kita lihat konten file PHP di atas sebagai contoh. Anda dapat menggunakannya saat membuat tema Anda sendiri.

header.php

<html>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php bloginfo('name'); ?><?php wp_title( '|', true, 'left' ); ?></title>
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

	<?php wp_head();  ?>	
</head>
<body>
	<div align="center">
		<div id="inner">
	<header>
		<a href="<?php echo home_url( '/' ); ?>" title="<?php echo bloginfo('name'); ?>" rel="home">
		<h1><?php bloginfo( 'name' ); ?></h1>
		</a>
	</header>

<html>

<head>

<?php wp_head(); ?>

</head>

<body>

<a href="<?php echo home_url( '/' ); ?>" title="<?php echo bloginfo('name'); ?>" rel="home">

</a>

</header>

footer.php

	<footer>
				<div id="footer">Â© <?php date('Y'); ?> <?php bloginfo('name'); ?> Theme is copyrighted to Vincy.</div>
			</footer>
		</div>
	</div>
	<?php wp_footer(); ?>
</body>
</html>

<div id="footer">Â© <?php date('Y'); ?> <?php bloginfo('name'); ?> Theme is copyrighted to Vincy.</div>

</footer>

</div>

<?php wp_footer(); ?>

</body>

</html>

index.php

<?php
get_header(); ?>
<div id="contentArea">
<div id="mainContent">
<?php while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title() ?></a></h2>
<?php the_content() ?>
<?php endwhile; ?>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

<?php

get_header(); ?>

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

<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title() ?></a></h2>

<?php the_content() ?>

<?php endwhile; ?>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

while loop iterates atas array dari tulisan yang tersedia. Fungsi WordPress the_title () dan the_content () mencetak judul dan deskripsi posting masing-masing. fungsi the_permalink () menyediakan tautan ke judul posting.
3. Tambahkan Styles untuk Theme

Sambil menambahkan kita perlu memberikan informasi Tema seperti Nama Tema, Tema URI, Versi dan sebagainya di atas stylesheet.

styles.css

/*
Theme Name: SharpEdge
Theme URI: http://localhost:85/wordpress/themes/sharpEdge
Version: 0.1
Author: Vincy
Author URI: https://phppot.com/
Description: A Minimal WordPress Theme.
Tags: minimal, simple, responsive, light-weight
Text Domain: sharpEdge
*/
a {
color: #A0A0A0;
text-decoration: none;
}
#inner {
width: 778px;
text-align: left;
}
#contentArea {
border-top: #CCCCCC 2px solid;
overflow:hidden
}
#mainContent {	
float:left;
width: 70%;
}
#sidebar {
float: right;
width: 28%;
padding-left: 3px;
padding-bottom:100%; 
margin-bottom:-100%;
background-color: #DDDDDD;	
}
#footer {
clear:both;
padding: 2px;
color: #DDDDDD;
background-color: #000000;	
}

Theme Name: SharpEdge

Theme URI: http://localhost:85/wordpress/themes/sharpEdge

Version: 0.1

Author: Vincy

Author URI: https://phppot.com/

Description: A Minimal WordPress Theme.

Tags: minimal, simple, responsive, light-weight

Text Domain: sharpEdge

a {

color: #A0A0A0;

text-decoration: none;

}

#inner {

width: 778px;

text-align: left;

}

#contentArea {

border-top: #CCCCCC 2px solid;

overflow:hidden

}

#mainContent {

float:left;

width: 70%;

}

#sidebar {

float: right;

width: 28%;

padding-left: 3px;

padding-bottom:100%;

margin-bottom:-100%;

background-color: #DDDDDD;

}

#footer {

clear:both;

padding: 2px;

color: #DDDDDD;

background-color: #000000;

}

Untuk Mengaktifkan Tema

Kita harus login di panel admin WordPress, untuk memilih tema yang baru dibuat sebagai tema blog WordPress kita saat ini. Dan kemudian, kita harus pergi dengan Penampilan panel kiri-> Tema untuk mengelola tema.

Jika semuanya baik, tema yang baru dibuat akan muncul di panel admin WordPress.

Klik tautan Aktifkan di bagian bawah tema yang baru Anda buat untuk memilihnya sebagai tema saat ini. Untuk menampilkan snapshot tema di panel admin, kita perlu membuat tangkapan layar tema dan menempelkannya ke folder wp-content / themes. Oke itulah tadi pembahasan saya tentang Cara Membuat Tema WordPress Sederhana semoga bermanfaat.

Facebook DUMET School

Categories