Cara mudah membuat theme wordpress responsif dengan bootstrap part 1

25 June 2018 4946

Tidak butuh banyak waktu untuk membuat theme wordpress menggunakan bootstrap, hal ini dikarenakan kita menggunakan resource kerangka template yang sudah ada, kita hanya mengatur posisi dan tampilan saja.

tutorial wordpress with bootstrap part 1

Langkah pertama adalah kita download resource bootstrap disini.

Selanjutnya adalah kita buat kerangka wordpress, beberapa file yang kita butuhkan adalah sebagai berikut :

  1. style.css
  2. header.php
  3. index.php
  4. sidebar.php
  5. footer.php
  6. functions.php
  7. page.php
  8. 404.php
  9. category.php
  10. tag.php
  11. search.php
  12. comments.php
  13. bootstrap.php

File diatas tidak sepenuhnya untuk membuat theme wordpress, akan tetapi untuk tutorial saat ini hanya membahas file tersebut, karena beberapa file lain Anda hanya tinggal mengikuti saja dari contoh diatas.

Buatlah 1 Folder dengan nama “mytheme“, lalu letakan / extrak file bootstrap yang sudah Anda download didalam folder mytheme. Selanjutya kita buat file pendukung templatenya.

file style.css

/*
Theme Name: My Theme
Theme URI: http://www.apanyak.com
Author: Awp Slankers
Author URI: http://www.apanyak.com/
Description: My Theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Header, Footer, Sidebar, Content
Text Domain: apanyak
*/

a {
color:#008be4;
text-decoration:none;
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}
a:visited {
color:#008be4;
}
a:hover,
a:focus,
a:active {
color:#e4003b;
text-decoration:none;
}

.spacebot{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:20px;
}

/*Header*/
.header{
text-align:center;
}
h1.site-title a{
font-size:30px;
font-family: ‘Arial’;
line-height:.2;
color:#333;
}
h3.site-description{
font-size:20px;
line-height:.6;
color:#777;
}

Next kita akan bahas file header.php

Artikel Terkait

Cara mudah untuk membuat custom term dalam wordpress

Dalam wordpress term yang tersedia default adalah category dan tags, langsung saja cara membuat term taxonomy pada wordpress. Langkah pertama adalah masuk pada bagian functions.php, contoh term kali

Solusi untuk icon network atau wifi hilang dari taksbar windows Anda

Icon Network Lan dan wifi terkadang hilang dikarenakan adanya error dalam windows anda, Hal ini dapat dilakukan apabila icon tersebut hilang, Cara memunculkan icon newtwork yang hilang dari
Bootstrap, Tips dan Trik, Tutorial, Wordpress , ,
Belum ada komentar. Anda bisa menjadi yang pertama untuk berkomentar!

Tinggalkan komentar

*
*
-

error: Content is protected !!