- Cara Convert HTML ke WordPress One Page
- Download template HTML terlebih dahulu di https://startbootstrap.com/theme/creative, kemudian ekstrak file tersebut.
- Buka folder wordpress yang telah di pindah ke directory xampp dengan menggunakan editor text (vscode / sublime):
- Untuk mulai membuat sebuah design tema baru, kita harus membuka wordpress terlebih dahulu dan masuk ke dalam dashboard menu appearance (Tampilan).
- Buat folder baru untuk membuat design baru dan masukan file-file penting yaitu : file header.php, footer.php, functions.php, index.php, dan style.css seperti :
- header.php :
Dalam file header.php ini berisikan file html yang ditempatkan pada header seperti berupa navigation bar dan menu :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Creative - Start Bootstrap Theme</title>
<?php wp_head(); ?>
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="#page-top">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto my-2 my-lg-0">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
- footer.php :
Dalam file footer.php ini berisikan file tampilan content yang berada di bawah:
<!-- Footer-->
<footer class="bg-light py-5">
<div class="container px-4 px-lg-5"><div class="small text-center text-muted">Copyright © 2022 - Company Name</div></div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
- function.php :
Dalam file functions ini berfungsi sebagai tempat menyimpan file-file penting yang nantinya akan digunakan dalam file tertentu seperti pemanggilan file css dan js (java script) supaya terlihat dan tertata rapi sehingga nanti dapat dipanggil kapan saja, dikarenakan bahasa pemrogramannya php, maka pemanggilan file nya juga berubah.
<?php
function add_wave_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'tooplate', get_template_directory_uri() . '/css/tooplate-wave-cafe.css', array(), '1.0', 'all');
wp_enqueue_style('fontawesome', get_template_directory_uri() . '/fontawesome/css/all.min.css', array(), '1.0', 'all');
wp_enqueue_script( 'main', get_template_directory_uri() . '/js/jquery-3.4.1.min.js', array ( 'jquery' ), 1.0, true);
}
add_action( 'wp_enqueue_scripts', 'add_wave_scripts' );untuk directori filenya adalah ‘/css/style.css’ :
- index.php :
Dalam file index.php ini berisikan content utama html yaitu content header, content body, dan content footer. Untuk content header dan footer hanya tinggal memanggil di dalam file index yaitu, dengan menggunakan perintah: get_header() dan get_footer() dan untuk content body akan berada di tengah-tengah content header dan footer, jika gambar tidak tampil maka, ubah src="assets/img/ipad.jpg" menjadi src="<?php echo get_theme_file_uri ('assets/img/ipad.png')?>" :
<?php
get_header();
?>
<!-- Masthead-->
<header class="masthead">
<div class="container px-4 px-lg-5 h-100">
<div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center text-center">
<div class="col-lg-8 align-self-end">
<h1 class="text-white font-weight-bold">Your Favorite Place for Free Bootstrap Themes</h1>
<hr class="divider" />
</div>
<div class="col-lg-8 align-self-baseline">
<p class="text-white-75 mb-5">Start Bootstrap can help you build better websites using the Bootstrap framework! Just download a theme and start customizing, no strings attached!</p>
<a class="btn btn-primary btn-xl" href="#about">Find Out More</a>
</div>
</div>
</div>
</header>
<!-- About-->
<section class="page-section bg-primary" id="about">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="text-white mt-0">We've got what you need!</h2>
<hr class="divider divider-light" />
<p class="text-white-75 mb-4">Start Bootstrap has everything you need to get your new website up and running in no time! Choose one of our open source, free to download, and easy to use themes! No strings attached!</p>
<a class="btn btn-light btn-xl" href="#services">Get Started!</a>
</div>
</div>
</div>
</section>
<!-- Services-->
<section class="page-section" id="services">
<div class="container px-4 px-lg-5">
<h2 class="text-center mt-0">At Your Service</h2>
<hr class="divider" />
<div class="row gx-4 gx-lg-5">
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#F4623A" class="bi bi-gem" viewBox="0 0 16 16">
<path d="M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4
15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6l3-4zm11.386 3.785-1.806-2.41-.776 2.413
2.582-.003zm-3.633.004.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495 8
13.366l2.532-7.876-5.062.005zm-1.371-.999-.78-2.422-1.818 2.425 2.598-.003zM1.499
5.5l5.113 6.817-2.192-6.82L1.5 5.5zm7.889 6.817 5.123-6.83-2.928.002-2.195 6.828z"/>
</svg>
</div>
<h3 class="h4 mb-2">Sturdy Themes</h3>
<p class="text-muted mb-0">Our themes are updated regularly to keep them bug free!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#F4623A" class="bi bi-laptop" viewBox="0 0 16 16">
<path d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5 0 0 1 .5-.5h11zm-11-1A1.5 1.5 0 0 0 1
3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2h-11zM0 12.5h16a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5z"/>
</svg>
</div>
<h3 class="h4 mb-2">Up to Date</h3>
<p class="text-muted mb-0">All dependencies are kept current to keep things fresh.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#F4623A" class="bi bi-globe" viewBox="0 0 16 16">
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887
1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1
.597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958
6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495
12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99
0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552
1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268
9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0
1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745
12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204
1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65
13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312
2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024
7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966
7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
</svg>
</div>
<h3 class="h4 mb-2">Ready to Publish</h3>
<p class="text-muted mb-0">You can use this design as is, or you can make changes!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#F4623A" class="bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314
4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542
6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8
15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1
.176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
</div>
<h3 class="h4 mb-2">Made with Love</h3>
<p class="text-muted mb-0">Is it really open source if it's not made with love?</p>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio-->
<div id="portfolio">
<div class="container-fluid p-0">
<div class="row g-0">
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="<?php echo get_theme_file_uri('/assets/img/portfolio/fullsize/1.jpg');?>" title="Project Name">
<img class="img-fluid" src="<?php echo get_theme_file_uri('/assets/img/portfolio/thumbnails/1.jpg');?>" alt="..." />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="<?php echo get_theme_file_uri('/assets/img/portfolio/fullsize/2.jpg')?>" title="Project Name">
<img class="img-fluid" src="<?php echo get_theme_file_uri('/assets/img/portfolio/thumbnails/2.jpg')?>" alt="..." />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="<?php echo get_theme_file_uri('/assets/img/portfolio/fullsize/3.jpg')?>" title="Project Name">
<img class="img-fluid" src="<?php echo get_theme_file_uri('/assets/img/portfolio/thumbnails/3.jpg')?>" alt="..." />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="<?php echo get_theme_file_uri('/assets/img/portfolio/fullsize/4.jpg')?>" title="Project Name">
<img class="img-fluid" src="<?php echo get_theme_file_uri('/assets/img/portfolio/thumbnails/4.jpg')?>" alt="..." />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="<?php echo get_theme_file_uri('/assets/img/portfolio/fullsize/5.jpg')?>" title="Project Name">
<img class="img-fluid" src="<?php echo get_theme_file_uri('/assets/img/portfolio/thumbnails/5.jpg')?>" alt="..." />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="<?php echo get_theme_file_uri('/assets/img/portfolio/fullsize/6.jpg')?>" title="Project Name">
<img class="img-fluid" src="<?php echo get_theme_file_uri('/assets/img/portfolio/thumbnails/6.jpg')?>" alt="..." />
<div class="portfolio-box-caption p-3">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Call to action-->
<section class="page-section bg-dark text-white">
<div class="container px-4 px-lg-5 text-center">
<h2 class="mb-4">Free Download at Start Bootstrap!</h2>
<a class="btn btn-light btn-xl" href="#">Download Now!</a>
</div>
</section>
<!-- Contact-->
<section class="page-section" id="contact">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-8 col-xl-6 text-center">
<h2 class="mt-0">Let's Get In Touch!</h2>
<hr class="divider" />
<p class="text-muted mb-5">Ready to start your next project with us? Send us a messages and we will get back to you as soon as possible!</p>
</div>
</div>
<div class="row gx-4 gx-lg-5 justify-content-center mb-5">
<div class="col-lg-6">
<!-- * * * * * * * * * * * * * * *-->
<!-- * * SB Forms Contact Form * *-->
<!-- * * * * * * * * * * * * * * *-->
<!-- This form is pre-integrated with SB Forms.-->
<!-- To make this form functional, sign up at-->
<!-- https://startbootstrap.com/solution/contact-forms-->
<!-- to get an API token!-->
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<!-- Name input-->
<div class="form-floating mb-3">
<input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
<label for="name">Full name</label>
<div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
</div>
<!-- Email address input-->
<div class="form-floating mb-3">
<input class="form-control" id="email" type="email" placeholder="name@example.com" data-sb-validations="required,email" />
<label for="email">Email address</label>
<div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
<div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
</div>
<!-- Phone number input-->
<div class="form-floating mb-3">
<input class="form-control" id="phone" type="tel" placeholder="(123) 456-7890" data-sb-validations="required" />
<label for="phone">Phone number</label>
<div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
</div>
<!-- Message input-->
<div class="form-floating mb-3">
<textarea class="form-control" id="message" type="text" placeholder="Enter your message here..." style="height: 10rem" data-sb-validations="required"></textarea>
<label for="message">Message</label>
<div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
</div>
<!-- Submit success message-->
<!---->
<!-- This is what your users will see when the form-->
<!-- has successfully submitted-->
<div class="d-none" id="submitSuccessMessage">
<div class="text-center mb-3">
<div class="fw-bolder">Form submission successful!</div>
To activate this form, sign up at
<br />
<a href="#"></a>
</div>
</div>
<!-- Submit error message-->
<!---->
<!-- This is what your users will see when there is-->
<!-- an error submitting the form-->
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
<!-- Submit Button-->
<div class="d-grid"><button class="btn btn-primary btn-xl disabled" id="submitButton" type="submit">Submit</button></div>
</form>
</div>
</div>
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-4 text-center mb-5 mb-lg-0">
<i class="bi-phone fs-2 mb-3 text-muted"></i>
<div>+1 (555) 123-4567</div>
</div>
</div>
</div>
</section>
<?php
get_footer();
?>
- style.css
Dalam file style.css berfungsi untuk mengatur keindahan dalam tampilan content yang tertera dalam WordPress seperti deskripsi dari design tersebut, untuk file style.css :
/*
Theme Name: Website Portofolio
Author: Arsy_Maulana
Author URI: https://wordpress.org/
Version: 1.0
Description: Theme untuk belajar biasa
*/
- Tambahkan berupa gambar (img) sehingga nanti akan muncul dengan tampilan thumbnail yang di inginkan. File gambar harus bernama screenshot.png :
- Tampilan detail :
- Setelah proses di atas selesai dilakukan sekarang, selanjutnya untuk membuka file tersebut di WordPress dengan cara aktifkan design tersebut :
- Apabila sudah aktif kemudian klik menu username WordPress anda yang berada pada kiri atas :
- Berikut adalah tampilan jika sudah berhasil :
- Cara convert HTML ke WordPress All Page
- Download template html terlebih dahulu di https://templatemo.com/tm-539-simple-house, kemudian ekstrak file tersebut.
- Langkah – langkahnya sama dengan convert html to wordpress one page (yang diatas ) agar konten tidak terlalu panjang maka saya akan menjelaskan bagian mana yang berbeda dari tatacara membuat convert html to wordpress one page (yang diatas )
- Menambahkan file – file halaman baru yang akan ditambahkan :
- header.php
Alasan saya merubah file header.php adalah karena di dalam file tersebut mencantumkan perintah code untuk berpindah halaman perintah untuk berpindah halaman jika di htmlhref="about.php"namun jika pada wordpressshref="<?= site_url('about')?>"
*perhatikan line 47 - template-about.php
Dalam tag get_header(): definisikan nama template seperti //Template Name:about kemudian setelah tag get_header(); ditutup masukkan isi konten dari halaman about
*perhatikan line 2(nama template), line 6-28(isi konten) - template-blog.php
Dalam tagget_header():definisikan nama template seperti //Template Name:blog kemudian setelah tagget_header();ditutup masukkan isi konten dari halaman blog
*perhatikan line 2(nama template), line 5-55(isi konten) - template-contact.php
Dalam tagget_header():definisikan nama template seperti //Template Name:contact kemudian setelah tagget_header();di tutup masukkan isi konten dari halaman contact:
*perhatikan line 2(nama template), line 6-34(isi konten) - template-repair.php
Dalam tagget_header():definisikan nama template seperti //Template Name:repair kemudian setelah tagget_header(); di tutup masukkan isi konten dari halaman repair :
*perhatikan line 2(nama template), line 5-12(isi konten) - functions.php
Dalam file ini kita hanya menambahkan :function nicoTheme() {register_nav_menu('top_menu','Menu atas');}add_action('after_setup_theme','nicoTheme');
*perhatikan line 28-32
- header.php
- membuat bagian halaman di wordpress agar bisa muncul di wordpress
- Masuk ke bagian halaman (page)
- Klik pada bagian tambah baru
- Tambahkan judul sesuai nama halaman
- Pilih template sesuai judul halaman
- Kemudian klik terbitkan
Ulangi langkah tersebut dan ulangi sesuai jumlah halaman yang anda butuhkan
- Masuk ke bagian halaman (page)
- Tampilan halaman jika sudah berhasil
- about
- blog
- repair
- contact us
- about