Your browser does not support JavaScript!

Gaswad.Com

— Apapun Informasinya Yang Penting Berguna
    Follow :

Tutorial : Cara Membuat Template WordPress – Part 2
Oct 13th, 2017

Tutorial : Cara Membuat Template WordPress – Part 2

Category : Wordpress | Posted by G-admin at at October 13th, 2017 13:48 pm
570 | 0

Artikel ini merupakan sambungan dari artikel pertama, pada artikel sebelumnya kita sudah membahas bagaimana cara mendaftarkan template kita agar terbaca oleh aplikasi WordPress tepatnya di halaman Themes. Jadi bagi kalian yang belum membaca artikel tersebut maka silahkan kalian merujuk ke link berikut.

  1. Intro & Registering Template – Part 1
  2. Frontpage, Header & Footer – Part 2
  3. Single Page – Part 3
  4. Menu Navigasi & Sidebar (Widget)- Part 4
  5. Styling Template – Part 5 (Complete)

Kita langsung saja, pada artikel sebelumnya kita sudah berhasil mendaftarkan dan mengaktifkan template yang sudah kita buat, selanjutnya pada artikel ke dua ini kita akan lanjut untuk proses pembuatan halaman Frontpage (Home), Header dan Footer.

 

2. Frontpage, Header dan Footer

Frontpage merupakan halaman utama yang akan tampil pada saat pertama kali kita membuka sebuah halaman website, sedangkan Header sendiri berfungsi sebagai tempat untuk menampilkan Logo, Navigasi, Site Title, Site Description, dll. Semua konten yang ada di dalam Header akan tampil di semua halaman website. Begitu juga sama halnya dengan Footer, bedanya kalau Footer biasanya hanya menampilkan kredit website seperti Copyright, Website Creator, dll.

Untuk membuat halaman Frontpage, Header dan Footer, lebih jelasnya silahkan kalian ikuti langkah-langkah berikut.

Header dan Footer

  1. Silahkan kalian buka file header.php yang sudah kalian buat pada artikel sebelumnya lalu masukan kode berikut.
    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
      <head>
        <meta charset="<?php bloginfo('charset'); ?>" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="title" content="<?php bloginfo('name'); ?>" />
        <meta name="description" content="<?php bloginfo('description'); ?>" />
        <meta name="keywords" content="<?php bloginfo('description'); ?>" />
        
        <title>
        <?php
          global $page, $paged;
          wp_title('|', true, 'right'); bloginfo('name');
          $site_description = get_bloginfo('description', 'display');
          if ($site_description && ( is_home() || is_front_page() )) echo " | $site_description";
          if ($paged >= 2 || $page >= 2) echo ' | ' . sprintf(__('Page %s', 'pmadvis'), max($paged, $page));
        ?>
        </title>
    
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
        <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
        <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); wp_head(); ?>
      </head>
    
      <body>
        <!--Element-elemen tag <body> tulis disini-->
    
        <header> <!--Section HEADER-->
          <div class="logo">
            <h1><?php bloginfo('name'); ?></h1>
            <h4><?php bloginfo('description'); ?></h4>
          </div>
    
          <div class="navigasi">
            <ul>
              <li><a href="#">HOME</a></li>
              <li><a href="#">BLOGS</a></li>
              <li><a href="#">ABOUT</a></li>
              <li><a href="#">GALLERY</a></li>
              <li><a href="#">CONTACT</a></li>
            </ul>
          </div>
        </header>

    Seperti yang kalian lihat pada kode di atas, di situ kita memasukan section HEADER yang mana di dalam section HEADER terdapat sub-section LOGO dan NAVIGASI, semua section yang di simpan di dalam file header.php akan tampil di semua halaman sebagai Header website.

    Pada kode di atas kita menambahkan kode PHP dengan beberapa fungsi seperti :

    • bloginfo(‘name’), untuk menampilkan nama website (site title).
    • bloginfo(‘description’), untuk menampilkan deskripsi website.
  2. Setelah selesai, silahkan kalian buka file footer.php yang juga sudah kalian buat pada artikel sebelumnya lalu masukan kode berikut.
      <footer> <!--Section FOOTER-->
        <div class="footer">
          <small>&copy; Copyright - Gaswad.Com 2017 | Alright reserved.</small>
        </div>
      </footer>
      
      <?php wp_footer(); ?>
      </body>
    </html>

    Pada file footer.php, disini kita hanya menambahkan section FOOTER yang hanya berisi Copyright pada sub-section-nya. Pada kode tersebut kita menambahkan fungsi ‘wp_footer()‘ yang berfungsi untuk menampilkan toolbar Dashboard admin WordPress.

  3. Selesai, jangan lupa untuk menyimpan perubahan yang sudah kalian lakukan pada ke dua file di atas.

Sampai sini kalian sudah berhasil membuat Header dan Footer template WordPress, langkah selanjutnya tinggal membut halaman Frontpage. Untuk lebih jelasnya silahkan kalian ikuti langlah-langkah berikut.

Frontpage

  1. Silahkan kalian buka halaman index.php yang sudah kalian buat pada artikel pertama, hapus semua isi yang ada di dalam file tersebut lalu silahkan kalian masukan kode PHP berikut untuk memanggil Header yang sudah kita buat pada file header.php.
    <?php get_header(); ?>

    Pastikan kode di atas kalian taruh di paling atas atau di baris pertama halaman. Selanjutnya jangan lupa juga untuk memanggil Footer yang sudah kita buat di file footer.php dengan memasukan kode PHP berikut.

    <?php get_footer(); ?>

    Untuk kode Footer ini pastikan kalian taruh di paling bawah atau di baris terakhir halaman.

  2. Terakhir silahkan kalian masukan kode berikut ke dalam file index.php, tepatnya di antara skrip Header dan Footer di atas.
    <main> <!--Section MAIN BODY-->
      <div class="konten">
        <?php if ( have_posts() ) : ?>
          <?php while ( have_posts() ) : the_post(); ?>
          <small>
            Publish on <?php the_time('F jS, Y'); ?> | Category <?php the_category(', '); ?> <?php comments_popup_link('No Comments &raquo;', '1 Comment &raquo;', '% Comments &raquo;'); ?><?php edit_post_link('Edit'); ?>
          </small>
    
          <h2>
            <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
          </h2>
    
          <p><?php print get_the_excerpt(); ?></p>
          <hr />
          
          <?php endwhile; ?>
        <?php endif; ?>
      </div>
    </main>

    Pada kode di atas ada beberapa fungsi yang kita gunakan untuk menampilkan elemen-elemen artikel yang akan tampil di halaman Frontpage, di antaranya ialah :

    • the_time(‘F jS, Y’), untuk menampilkan tanggal publish dari artikel yang bersangkutan.
    • the_category(‘, ‘), untuk menampilkan semua kategori dari artikel yang bersangkutan.
    • comments_popup_link( ARGS ), untuk menampilkan jumlah komentar dari artikel yang bersangkutan.
    • edit_post_link(‘Edit’), untuk menampilkan linkEdit‘ pada artikel yang bersangkutan.
    • the_permalink(), untuk menampilkan alamat URL dari link yang bersangkutan.
    • the_title(), untuk menampilkan title atau judul artikel.
    • get_the_excerpt(), untuk menampilkan konten artikel sebanyak 500 huruf, jika ingin di tampilkan semua kontennya cukup ubah skrip ‘get_the_excerpt()‘ menjadi ‘the_content()‘.

    Semua fungsi-fungsi di atas berada dalam perulangan ‘while()’, jadi kalau artikelnya ada 10 buah maka akan di tampilkan semuanya.

  3. Selesai, sampai sini kita sudah berhasil membuat halaman Frontpage, untuk melakukan pemeriksaan apakah sudah benar-benar berhasil atau belum silahkan kalian buka halaman website kalian masing-masing, jika sesuai maka kurang lebih tampilannya akan seperti pada gambar berikut.

Semoga dengan adanya artikel ke dua ini bermanfaat dan menambah semangat kalian untuk belajar tentang bagaimana cara membuat template WordPress. Pada artikel berikutnya kita akan lanjut ke proses pembuatan Single Page untuk menampilkan halaman artikel secara penuh.

 

Share social media :



Your response about this article :


Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Tutorial : Cara Membuat Template WordPress – Part 4
Tutorial : Cara Membuat Template WordPress – Part 4
Category : Wordpress | October 20th, 2017
609 | 0
Tutorial : Cara Membuat Template WordPress – Part 3
Tutorial : Cara Membuat Template WordPress – Part 3
Category : Wordpress | October 20th, 2017
500 | 0
11 Cara Meningkatkan Keamanan Pada WordPress
11 Cara Meningkatkan Keamanan Pada WordPress
Category : Wordpress | October 10th, 2017
626 | 0
Tutorial : Cara Membuat Template WordPress – Part 1
Tutorial : Cara Membuat Template WordPress – Part 1
Category : Wordpress | October 9th, 2017
948 | 0
Tutorial : Instalasi WordPress
Tutorial : Instalasi WordPress
Category : Wordpress | September 20th, 2017
563 | 0
Selalu Ke Jendela Login Saat Update WordPress?
Selalu Ke Jendela Login Saat Update WordPress?
Category : Wordpress | June 24th, 2015
449 | 0
Help…! Minta Login FTP Saat Update WordPress??
Help…! Minta Login FTP Saat Update WordPress??
Category : Wordpress | April 6th, 2015
413 | 0
Cara Reset Password Admin WordPress
Cara Reset Password Admin WordPress
Category : Wordpress | June 27th, 2014
402 | 0
Latest Posts

Tutorial : Cara Membuat Template WordPress – Part 3
Tutorial : Cara Membuat Template WordPress – Part 3
Category : Wordpress | October 20th, 2017
500 | 0

Pada artikel kali ini kita akan melanjutkan bagaimana cara membuat template WordPress menyambung artikel sebelumnya. Pada sesi sebelumnya kita sudah berhasil membuat halaman Frontpage, Header dan Footer website, pada artikel kali ini kita akan coba m...

Continue reading
Cara Mendapatkan Uang Dengan Google Adsense
Cara Mendapatkan Uang Dengan Google Adsense
Category : Tutorials | October 16th, 2017
964 | 2

Setelah beberapa waktu lalu di kantor penulis sempat heboh-hebohnya di karenakan fitur dari Google yang bernama Adsense ini, bagaimana tidak karena rekan-rekan penulis yang tadinya cuma browsing-browsing doang, youtube-an, download film, tidur, kesur...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 2
Tutorial : Cara Membuat Template WordPress – Part 2
Category : Wordpress | October 13th, 2017
570 | 0

Artikel ini merupakan sambungan dari artikel pertama, pada artikel sebelumnya kita sudah membahas bagaimana cara mendaftarkan template kita agar terbaca oleh aplikasi WordPress tepatnya di halaman Themes. Jadi bagi kalian yang belum membaca artikel t...

Continue reading
Cara Mendaftarkan Dan Melakukan Verifikasi Domain Di Google Search Console
Cara Mendaftarkan Dan Melakukan Verifikasi Domain Di Google Search Console
Category : Tutorials | October 12th, 2017
1031 | 2

Pada pertemuan kali ini (udah kayak anak kuliahan ajah), penulis ingin berbagi pengetahuan tentang bagaimana cara medaftarkan dan melakukan verifikasi domain kalian di Google Search Console. Bagi kalian yang masih bingung dan tidak tahu bagaimana car...

Continue reading
11 Cara Meningkatkan Keamanan Pada WordPress
11 Cara Meningkatkan Keamanan Pada WordPress
Category : Wordpress | October 10th, 2017
626 | 0

Pada artikel kali ini penulis ingin membagikan beberapa tips seputar keamanan pada website WordPress, yang kebetulan penulis dapat dari hasil searching-searching di Om’ Google. Seperti yang kalian ketahui saat ini WordPress merupakan salah satu...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 1
Tutorial : Cara Membuat Template WordPress – Part 1
Category : Wordpress | October 9th, 2017
948 | 0

Halo para pembaca Gaswad, pada artikel ini penulis ingin membahas tentang bagaimana cara membuat template WordPress. Kenapa penulis membuat artikel ini tidak lain karena ingin berbagi pengetahuan kepada kalian khususnya para pengguna CMS WordPress se...

Continue reading
Pengertian Page View, Visitor Dan Bounce Rate
Pengertian Page View, Visitor Dan Bounce Rate
Category : Others | October 9th, 2017
533 | 0

Sebenarnya pada artikel kali ini penulis ingin membuat tutorial bagaimana cara membuat template WordPress, menimbang WordPress merupakan salah satu CMS yang paling banyak di gunakan saat ini. Tapi berhubung tutorialnya agak panjang dan belum rampung ...

Continue reading
Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 2 (Complete)
Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 2 (Complete)
Category : Tutorials | October 5th, 2017
1710 | 2

Hallo… para pembaca Gaswad yang baik dan budiman, yang ganteng dan yang cantik, yang jelek halo juga deh… Setelah beribu-ribu menit dan detik berlalu, jam demi jam telah kita lewati, dari pagi hari sampai sore hari, akhirnya… sampai...

Continue reading
Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 1
Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 1
Category : Tutorials | September 30th, 2017
3311 | 4

Bootstrap merupakan salah satu CSS Framework yang paling banyak di gunakan oleh para pengembang web saat ini, bagi kalian yang masih belum tau dan mengerti apa yang di maksud dengan Web Framework, maka silahkan kalian merujuk ke link berikut : Apa It...

Continue reading
Cara Mengetahui Kecepatan Page Load Website
Cara Mengetahui Kecepatan Page Load Website
Category : Programmings | September 29th, 2017
677 | 0

Pada artikel kali ini penulis ingin memberikan trick bagaimana cara mengetahui kecepatan Page-Load website kalian, mungkin beberapa dari kalian masih belum tahu seberapa cepat kecepatan website yang kalian miliki pada saat website tersebut di akses a...

Continue reading
​Apa Itu Web Framework?
​Apa Itu Web Framework?
Category : Others | September 29th, 2017
885 | 0

Beberapa dari kalian apalagi yang masih pemula dalam bidang pemrograman website pasti masih awam betul dengan yang namanya Framework. Framework menurut Wikipedia merupakan sebuah aplikasi yang di desain untuk mendukung pengembangan dalam membangun se...

Continue reading
Tutorial : Cara Membuat Web Statis Sederhana Dengan HTML
Tutorial : Cara Membuat Web Statis Sederhana Dengan HTML
Category : Tutorials | September 28th, 2017
14408 | 12

Kali ini kita akan membuat website statis sederhana, kenapa statis? Karena ketika selesai dalam pembuatannya maka konten website yang sudah kita masukan tidak bisa di ubah lagi alias fixed. Loh’, kalo gitu ngga bisa update isi website donk?? Ka...

Continue reading

Wordpress

  • Oct
    24
    2017
    Tutorial : Cara Membuat Template WordPress – Part 5 (Complete)
    Artikel ini merupakan artikel terakhir tentang bagaimana cara membuat template WordPress, bagi ...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 4
    Pada sesi ini kita akan membuat Menu Navigasi dan Sidebar pada halaman template yang sudah kita...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 3
    Pada artikel kali ini kita akan melanjutkan bagaimana cara membuat template WordPress menyambun...
    Read more
  • Oct
    13
    2017
    Tutorial : Cara Membuat Template WordPress – Part 2
    Artikel ini merupakan sambungan dari artikel pertama, pada artikel sebelumnya kita sudah membah...
    Read more
  • Oct
    10
    2017
    11 Cara Meningkatkan Keamanan Pada WordPress
    Pada artikel kali ini penulis ingin membagikan beberapa tips seputar keamanan pada website Word...
    Read more
  • More articles
Tips & Tricks

  • Aug
    14
    2018
    Iklan Adsense Di Website Kamu Ter-klik Sendiri? Nih! Tips-nya
    Hallo guys, akhirnya kita berjumpa lagi setelah sekian lama kita berpisah… Hallah… ...
    Read more
  • Nov
    13
    2017
    Error Reported Attack Page! Waw… Domain Di Blacklist Google??
    Seperti yang kalian lihat pada contoh tampilan gambar di atas, tampilan tersebut merupakan tamp...
    Read more
  • Oct
    24
    2017
    Panduan SEO ala Google
    Kali ini penulis ingin memberikan beberapa tips dan panduan untuk meningkatkan SEO website kali...
    Read more
  • Sep
    15
    2017
    Cara Mudah Download Video Youtube
    Bagi kita-kita yang suka menonton video dari Youtube pasti sering tiba-tiba terbesit seperti in...
    Read more
  • Oct
    29
    2015
    5 Cara Mempercepat Loading Website
    Berbagai macam cara dan usaha yang kita lakukan untuk membuat website kita menjadi benar-benar ...
    Read more
  • More articles
Tutorials

  • Nov
    13
    2017
    Cara Menambah Ads Unit Atau Blok Iklan Adsense
    Halo para pembaca Gaswad yang ganteng dan yang cantik-cantik, yang jelek jangan kesinggung ya. ...
    Read more
  • Oct
    16
    2017
    Cara Mendapatkan Uang Dengan Google Adsense
    Setelah beberapa waktu lalu di kantor penulis sempat heboh-hebohnya di karenakan fitur dari Goo...
    Read more
  • Oct
    12
    2017
    Cara Mendaftarkan Dan Melakukan Verifikasi Domain Di Google Search Console
    Pada pertemuan kali ini (udah kayak anak kuliahan ajah), penulis ingin berbagi pengetahuan tent...
    Read more
  • Oct
    05
    2017
    Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 2 (Complete)
    Hallo… para pembaca Gaswad yang baik dan budiman, yang ganteng dan yang cantik, yang jele...
    Read more
  • Sep
    30
    2017
    Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 1
    Bootstrap merupakan salah satu CSS Framework yang paling banyak di gunakan oleh para pengembang...
    Read more
  • More articles
Others

  • Jun
    05
    2018
    Tutorial : Cara Install Composer
    Apa Itu Composer? Composer adalah suatu aplikasi manajemen paket selain Node.js (npm) dan Ruby ...
    Read more
  • Oct
    31
    2017
    Yang Baru Di Bootstrap 4
    Tidak terasa baru saja beberapa waktu lalu penulis menulis artikel tentang Bagaimana Cara Membu...
    Read more
  • Oct
    09
    2017
    Pengertian Page View, Visitor Dan Bounce Rate
    Sebenarnya pada artikel kali ini penulis ingin membuat tutorial bagaimana cara membuat template...
    Read more
  • Sep
    29
    2017
    ​Apa Itu Web Framework?
    Beberapa dari kalian apalagi yang masih pemula dalam bidang pemrograman website pasti masih awa...
    Read more
  • Feb
    25
    2015
    Cara Memasang Robots.txt Di Website
    Yups! Di jamin pasti banyak yang bingung dengan file robot ini, bagi yang masih awam pasti bera...
    Read more
  • More articles
Page generated in : 653.24 ms