Part 5 : Memberikan Logo dan Membuat Search Pada Tema Wordpress

Selamat hari raya idul fitri,

Memberikan logo pada tema memang penting untuk memberikan identitas dari tema agan. Yang dimaksud memberikan logo disini, yaitu memberikan gambar pada tema yang berlokasi di appearance/themes wp-admin agan.

Pertama sediakan gambar yang berukuran 1200 x 900 pixel, berformat PNG, dan dinamai dengan nama "screenshot" tanpa tanda petik. Untuk gambarnya tersebut taruh di sefolder dengan file yang kemarin kita buat atau di xampp\htdocs\WP\wp-content\theme\tema_agan\

Dari langkah-langkah diatas aku memberikan gambar dengan teks bernama "#MTP" maka gambar akan muncul seperti berikut :

Nah kita telah berhasil memberikan gambar/logo pada tema kita, selanjutnya akan aku bahas cara membuat pencarian pada wordpress.

Sebelum agan melanjutnya part 5 ini, untuk yang masih proses belajar tema wordpress saya sarankan untuk membaca part 1, part 2, part 3, part 4. Karena tutorial wordpress ini dipelajari secara berurutan. Ini Link nya ya gan :

Part 1 : Persiapan Membuat Tema Wordpress
Part 2 : Membuat Header.php , Sidebar.php, Style.css, Footer.php dan Index.php
Part 3 : Membuat Halaman Content.php , Archive.php Dan Single.php Di Themes Wordpress
Part 4 : Membuat Functions.php Pada Wordpress

#Membuat Halaman Search Pada Tema Wordpress
Buat terlebih dahulu search.php lalu taruh halaman tersebut satu folder dengan file yang kemarin atau ditaruh pada wordpress\wp-content\themes\tema_agan\ . Lalu pastekan kode dibawah :

<?php get_header(); ?>
<?php get_sidebar(); ?>
    <div id="content">
        <?php

            if(have_posts()){

                while(have_posts()) : the_post();
                    if($post->post_type == "page") continue;
                    get_template_part('content');
                endwhile;
            } else {
                echo "Tidak ada postingan.";
            }
        ?>
    </div>
<?php get_footer(); ?>

Penjelasan :
<?php get_header(); ?> berfungsi untuk memanggil header.php . Desain header agan di simpan di header.php ini.

<?php get_sidebar(); ?> berfungsi untuk memanggil sidebar.php .Desain dan isi dari side bar disimpan di sidebar.php ini

have_posts() berfungsi untuk mengecek apakah mempunyai postingan atau tidak.

the_post() berfungsi untuk menampilkan postingan dimana kode ini yang melatar belakangi agar suatu postingan dapat tampil entah itu yang tampil tanggalnya, gambarnya, atau teksnya .

$post->post_type == "page" berfungsi untuk mengecek apakah postingan adalah halaman(page) atau bukan. Jika halaman maka akan dikembalikan nilai TRUE . Jenis postingan itu dapat dibagi menjadi beberapa macam :
a. jika postingan berupa artikel maka post_type nya post
b. jika postingan berupa halaman(page) maka post_type nya page
c. jika postingan berupa media atau gambar maka post_type nya attachment
dll

Ketika post_type nya adalah halaman atau page, maka akan dilanjutkan ke kode berikutnya, ini adalah fungsi dari continue.

get_template_part('content'); berfungsi untuk memanggil content.php

get_footer() berfungsi untuk memanggil footer.php . Desain dari footer ini disimpan di footer.php .

Ketika halaman search.php sudah agan buat, maka tidak ada perubahan apapun terhadap web agan. Itu karena kita belum menampilkan kotak pencariannya di header.php . Untuk menampilkan kotak pencarian kita menggunakan kode :

<?php get_search_form(); ?>

Letakkan kode tersebut di header.php . Contoh nya bisa agan letakkan kode nya seperti dibawah, bagi yang kemarin terlanjur koding header.php bisa ditambahkan kodingnya atau ganti semua kode di header.php dengan kode (yang di mark kuning kode yang baru) :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> <?php bloginfo('title'); ?> </title>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
        <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style-ui.css" >
    </head>
    <body>
    <div id="container">
        <div id="header">
            <div style="font-size:22px;color:#090909;padding-top:20px;padding-left:20px;">
                <b><?php bloginfo('name'); ?></b>
            </div>
            <div style="font-size:18px;color:#3a3a3a;padding-left:20px;">
                <?php bloginfo('description'); ?>
            </div><br/>
            <a href="<?php bloginfo('url');?>" class="menu-header">Home</a>
            <nav id="nav-header">

            <?php
                $args = array('theme_location'=> 'main_menu');
                wp_nav_menu($args);
            ?>
            </nav>

            <div style="float:right;margin-top:-100px;">
                <?php get_search_form(); ?>
            </div>

            </div>
        

#Mendesain Kotak Search/Pencarian Wordpress
Ketika agan sudah berhasil membuat kotak pencarian seperti petunjuk diatas, kotak pencariannya tidak langsung jadi dengan desain menarik, melainkan masih sangat sederhana . Untuk mendesainnya buat terlebih dahulu searchform.php dan letakan sefolder dengan kode yang tadi kita buat. Kode nya seperti ini :

<form action="<?php echo home_url('/'); ?>" method="get">

    <input name="s" placeholder="Search" type="text" id="search" value="<?php the_search_query(); ?>" />

    <input type="image" alt="search" src="<?php bloginfo('template_url'); ?>/images/search.png" style="width:25px;margin-bottom:-16px;margin-left:-5px;padding:7.8px;background:#efefef;" />

</form>

Penjelasan :

home_url('/') berfungsi untuk mendapatkan link url home. Action dari form pencarian diarahkan ke url home. Bingung? kenapa kok malah diarahkan ke home bukan ke search.php , jawabannya adalah sudah aturannya wordpress . Nah ini contoh url pencarian :

the_search_query() berfungsi untuk menampilkan value atau isi variabel permintaan pencarian.

bloginfo('template_url') berfungsi untuk mendapatkan alamat tema agan di wordpress. Contoh alamatnya : http://localhost/wordpress/wp-content/themes/contoh . Kode ini biasanya digunakan untuk mengambil gambar atau file lainnya yang ingin ditampilkan pada web wordpress .

#Tambahkan Kode di style.css
Agar kotak pencarian memiliki desain yang menarik, tambahkan kode dibawah ini di file style.css :

#search{
    padding:10px;
    background:#96edd3;
    border:none;
    width:150px;
}

#Hasil
Nah dari atas sampai bawah kita koding, maka didapat hasil seperti berikut :

Sekian tutorial kali ini, terimakasih sudah berkunjung ke blog ku. Tutorial ini masih berlanjut ke part selanjutnya.

Part 5 : Memberikan Logo dan Membuat Search Pada Tema Wordpress

4/ 5

Oleh Bayu Ambika

June 14, 2018 Komentar

Mas Mada

Thursday, June 14, 2018