Membuat Template – Memecah File Index.php

Spread the love

Halo sobat, kali ini ane mau share tentang tutorial untuk bikin theme wordpress (bisa juga sih dipake di model lain) *coz ini cuman basicnya ajah…
untuk mempermudah pembuatan website, biasanya kita memecah konten html menjadi beberapa bagian secara fisik dan kemudian pada saat menampilkan kita gabungkan lagi menjadi satu.
Ini bukan kurang kerjaan loh.. tapi malah menghemat kerja 🙂
soalnya kita gak perlu menulis berulang-ulang mengenai bagian yang muncul di halaman web kita secara terus menerus.
woke, disini kita memerlukan beberapa file
– header.php (untuk bagian atas)
– index.php (untuk bagian dinamis, halaman depan)
– sidebar.php (untuk bagian menu samping)
– footer.php (untuk bagian bawah)
– content.php

contoh basic file htmlnya

<html>
<head>
<title>HACE WEBSITE</title>
</head>
<body>
<div id="container">
<div id="header">
Ini akan menjadi header.php
</div>
<div>
<div>
Ini akan menjadi index.php etc
</div>
</div>
<div>
Ini akan menjadi Sidebar.php
</div>
<div>
Ini akan menjadi Footer.php
</div>
</div>
</body>
</html>

woke lanjot…
1. kita buat header.php
mari comot elemen html dari <html> sampai </div> diatas konten

<html>
<head>
<title>HACE WEBSITE</title>
</head>
<body>
<div id="container">
<div id="header">
Ini akan menjadi header.php
</div>

2. bikin file sidebar.php

<div>
Ini akan menjadi Sidebar.php
</div>

3. bikin footer.php

<div>
Ini akan menjadi Footer.php
</div>
</div>
</body>
</html>

kalo file html udah dipreteli menjadi beberapa bagian yaitu header.php,sidebar.php,footer.php
maka sekarang kita tinggal menggabungkannya lagi menggunakan index.php/ halaman dinamis lainnya, namun jangan lupa untuk memasukan file tadi dengan perintah php include.

index.php

<?php
include "header.php";
?>

<div>
<div>
Kamu bisa meletakkan isi artikel dimari
</div>
</div>

<?php
include "sidebar.php";
include "footer.php";
?>

yap itulah bagaimana cara memecah file html untuk templating yang masih sangat-sangat-super-duper sederhana, wokelah ane kasih contoh cara memecah template secara nyata.

monggo download dimari

ane sertakan juga file htmlnya buat perbandingan  :))


Spread the love

8 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *