Functions.php pada wordpress memiliki banyak kegunaan, secara menyeluruh kegunaan functions.php ini untuk mengatur tampilan, sistemnya dan lain-lain.
Sebelum agan melanjutnya part 4 ini, untuk yang masih proses belajar tema wordpress saya sarankan untuk membaca part 1, part 2, part 3. 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
Di part 4 ini aku akan membahas :
1. Cara mengeload file (berupa style.css, javascript.js) lewat functions.php dan melalui header.php.
2. Mengatur excerpt .
3. Mengelompokkan menu navigasi dengan register_nav_menus().
4. Mengaktifkan Featured Image Pada panel admin. Featured Image adalah gambar pada
postingan yang ditampilkan pada kutipan artikel.
Untuk kode index.php, style.css, header.php, footer.php, content.php mengalami perubahan penambahan kode. Agar agan koding nya berhasil dan agar tutorial ini tidak membingungkan, agan bisa ganti kode dari file tersebut dengan kode baru yang aku sedia in di bagian bawah tutorial ini.
Untuk agan yang tidak sabar ingin meng coding nih kodenya, simpan dengan nama functions.php dan letakkan file tersebut sefolder dengan file-file yang kita buat kemaren pada tutorial sebelumnya atau di C:\xampp\htdocs\wordpress\wp-content\themes\contoh .
functions.php :
<?php
function load_file(){
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'load_file');
register_nav_menus(array(
'main_menu' => 'Menu Utama',
'footer_menu' => 'Menu Footer'
));
function return_excerpt_length(){
return 25;
}
function get_excerpt_more(){
return '...';
}
add_filter('excerpt_more','get_excerpt_more');
add_filter('excerpt_length','return_excerpt_length');
function init_setup(){
register_nav_menus(array(
'main_menu' => 'Menu Utama',
'footer_menu' => 'Menu Footer'
));
add_theme_support('post-thumbnails');
add_image_size('small_thumb', 150, 150, true);
add_image_size('big_thumb', 300, 300, true);
}
add_action('after_setup_theme', 'init_setup');
?>
Penjelasan koding berada dibawah ini:
#mengeload file (style.css, javascript.js) di functions.php
Nah di functions.php ini kita dapat memanggil banyak style.css, *.js dan lain-lain. Bukan hanya di function sih, tetapi juga di header.php juga bisa memanggil banyak script atau style.css.
Untuk memanggil style.css melalui functions.php kita menggunakan fungsi :
function load_file(){
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'load_file');
Nama fungsi load_file bisa agan ganti dengan nama terserah agan.
Didalam function tersebut terdapat wp_enqueue_style() yang berfungsi untuk menambah atau mengantrikan file CSS .
'style' ini adalah nama file CSS nya.
get_stylesheet_uri() berfungsi untuk menampilkan alamat agan menaruh style.css . Ingat ya, kode ini hanya mengeload file css bernama style.css saja.
add_action() berfungsi untuk mengeksekusi suatu fungsi.
'wp_enqueue_scripts' berarti yang dieksekusi adalah script.
'load_file' yang dieksekusi adalah function load_file.
Nah fungsi diatas adalah untuk mengeload file css, untuk mengeload file javascript agan dapat menggunakan :
wp_enqueue_script('user', get_template_directory_uri() . '/js/user.js', array(), '1.0.0');
'user' adalah id nya, jangan sampai sama ya namanya dengan yang lain.
get_template_directory_uri() berfungsi untuk menampilkan alamat tema agan. contoh alamatnya : C:\xampp\htdocs\wordpress\wp-content\themes\contoh
'/js/user.js' untuk nama file javascript yang akan di load.
array() adalah nilai defaultnya, mode ketergantungan css (seperti bootstrap.js yang hanya akan bekerja apabila ada jquery).
'1.0.0' ini adalah versionnya dari javascript tersebut.
Untuk fungsi wp_enqueue_script('user', get_template_directory_uri() . '/js/user.js', array(), '1.0.0'); dapat agan masukkan kedalam function load_file diatas.
#mengeload file (style.css, javascript.js) di header.php
Mengeload file css atau javascript baik di header maupun melalui functions.php sebenarnya sama saja, yang membedakan adalah metodenya. Untuk mengeload melalui header.php agan dapat menggunakan kode :
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style-ui.css" >
get_template_directory_uri() berfungsi untuk masuk ke folder theme agan. Dikode tersebut aku mengeload style-ui.css .
#mengatur excerpt di functions.php
excerpt ini berfungsi untuk menampilkan hanya beberapa kata saja dalam suatu postingan. Nah kemarin kita belum menggunakan excerpt, masih menggunakan the_content() .
Untuk mengatur excerpt di functions.php dengan kode :
function return_excerpt_length(){
return 25;
}
function get_excerpt_more(){
return '...';
}
add_filter('excerpt_length','return_excerpt_length');
add_filter('excerpt_more','get_excerpt_more');
return_excerpt_length() adalah suatu function untuk mengatur panjang kata dalam cuplikan postingan di home. Disini ada 25 kata yang ditampilkan dalam cuplikan postingan ku di home. Nama function tersebut bisa agan rubah.
get_excerpt_more() untuk menampilkan '...' sesudah kata terakhir. Contohnya :
Untuk menjalankan atau mengeksekusi kedua function diatas, agan dapat menggunakan fungsi add_filter() . Dimana didalam fungsi tersebut terdapat 2 parameter.
Parameter pertama :
1. 'excerpt_length' berfungsi untuk mengatur panjang excerpt.
2. 'excerpt_more' berfungsi untuk mengatur apa yang ditampilkan sesudah kata
terakhir pada excerpt.
Parameter kedua berfungsi untuk menuliskan fungsi yang akan dijalankan.
Nah kode diatas kan untuk mengatur excerpt nya saja, belum menampilkannya. Untuk menampilkan gunakan kode :
<?php echo get_the_excerpt(); ?>
Kode diatas di taruh di content.php . Jika agan bingung agan dapat melihat script fullnya bagian bawah artikel ini.
Dibawah ini hasilnya :
#Mengelompokkan menu navigasi dengan register_nav_menus().
Untuk memunculkan menu navigasi pada header, menu navigasi pada footer, tombol menu apa saja yang akan ditampilkan di menu navigasi header (misalnya menu home dan profile) dan tombol menu apa yang akan tampil di footer, maka akan dibahas disini.
untuk mengatur pengelompokannya kita memakai register_nav_menus(). Kita akan mengelompokkan menu header dan menu footer. Menu header sebagai menu utama dan menu footer sebagai menu pada bagian footer. Dibawah ini adalah contoh menu header sekaligus hasil dari yang akan kita buat :
Untuk dapat mengelompokkannya gunakan kode dibawah, ( di functions.php ):
register_nav_menus(array(
'main_menu' => 'Menu Utama',
'footer_menu' => 'Menu Footer'
));
register_nav_menus() berfungsi untuk mendaftarkan menu navigasi .
'main_menu' untuk pengelompokkan menu utama. 'main_menu' bisa agan ganti dengan nama terserah agan.
'footer_menu' untuk mengelompokkan menu navigasi pada footer.
Kode diatas hanya untuk mengaturnya saja. Untuk menampilkan nya gunakan kode :
<?php
$args = array('theme_location'=> 'main_menu');
wp_nav_menu($args);
?>
Kode diatas di letakkan di header.php .
wp_nav_menu($args) berfungsi untuk memanggil menu navigasi.
Untuk memasukkan menu (yang kita masukan menu umum dan khusus) sehingga menjadi kelompok Menu Utama dan menu "khusus" dimasukan kedalam kelompok Menu Footer. Lakukan konfigurasi sesuai langkah dibawah :
1. Buka panel admin wordpress agan, kalo saya berada di alamat http://localhost/wordpress/wp-admin/
2. Kemdian login
3. Klik Tampilan dan kemudian klik menu :
4. Isikan "Menu Navigasi Header" pada form nama menu. Kemudian klik Buat menu :
7. Untuk membuat menu yang di footer, pertama buat menu baru :
Maka hasilnya jika kita lihat dari web nya di header akan tampil menu navigasi umum dan khusus, dan di footer terdapat hanya menu khusus saja :
#Mengaktifkan Featured Image .
Featured image ini berfungsi agar suatu postingan mempunyai gambar, contohnya :
Nah pertama kita setting dahulu di functions.php dengan menggunakan kode :
function init_setup(){
add_theme_support('post-thumbnails');
add_image_size('small_thumb', 150, 150, true);
add_image_size('big_thumb', 300, 300, true);
}
add_action('after_setup_theme', 'init_setup');
Penjelasan :
add_theme_support('post-thumbnails') untuk mengaktifkan featured image .
add_image_size('small_thumb', 150, 150, true) berfungsi untuk membuat gambar postingan berukuran 150x 150 dengan nama small_thumb .
small_thumb ini bisa agan rubah, nama ini yang akan dipanggil di content.php nanti.
add_action('after_setup_theme', 'init_setup') berfungsi untuk menjalankan atau mengeksekusi function init_setup.
Pengaturan di functions.php sudah selesai, langkah selanjutnya adalah memanggil gambar thumbnailnya. Caranya agan bisa memasukkan kode dibawah ke content.php :
<?php the_post_thumbnail('small_thumb'); ?>
Fungsi tersebut untuk menampilkan gambar dari postingan, nama ukuran gambarnya small_thumb yaitu berukuran 150x150 pixel.
Jika kode diatas sudah agan terapkan, untuk memberikan suatu postingan memiliki thumbnails gambar, agan perlu juga memilih gambar nya untuk dijadikan gambarnya. Cara nya masuk dulu ke admin wordpress agan. Kemudian klik Pos dan pilih semua pos :
Pilih salah satu postingan dan klik edit postingan tersebut. Kemudian agan scroll ke bawah sampai menemukan seperti gambar dibawah ini (terletak di bagian kanan):
#KODE LENGKAPNYA
File yang kita buat kemaren mengalami perubahan dan penambahan, untuk penambahannya saya berikan markup kuning . Sebaiknya agan bisa ganti kode kemarin dengan kode yang baru sesuai dibawah ini :
style.css :
/*
Theme Name: Mada's theme
Theme URI: https://mada-education.blogspot.co.id/
Author: mada
Author URI: https://mada-education.blogspot.co.id/
Description: Belajar membuat theme wordpress
Version: 0.1
License: GNU General Public License v2 or later
License URI: gnu.org/licenses/gpl-2.0.html
Text Domain: Mada's theme
*/
.clear{
clear:both;
}
body{
font-family: 'Open Sans', sans-serif;
padding:0px; margin:0px;
background: #EEE;
}
#container{
background: #FFF;
width: 1100px;
margin: 0px auto;
height: 100%;
}
#header{
height: 140px;
background: #1ed8c9;
}
.menu-header{
background:#f1f1f1;
padding:5px;
border-radius:3px;
text-decoration:none;
color:#000;
margin-left:20px;
border-bottom:4px solid #cfcfcf;
}
#content{
width: 700px;
padding:10px;
float:left;
margin-left:50px;
}
#content .daftar-posting{
font-size:13px;
border-bottom: 1px solid #CCC;
margin-bottom: 10px;
}
#content .daftar-posting h1{
font-size:22px;
}
#sidebar{
float:right;
width:300px;
padding:10px;
height:100%;
}
#footer{
background: #333;
color:#FFF;
font-size: 12px;
text-align: center;
padding:10px;
}
#footer a{
color:#FFF;
}
/* mengatur header mulai */
nav#nav-header{
margin-top:-40px;
margin-left:40px;
}
nav#nav-header ul.menu li{
list-style:none;
display:inline-block;
background:#f1f1f1;
padding:5px;
border-radius:3px;
margin-left:20px;
border-bottom:4px solid #cfcfcf;
}
nav#nav-header ul.menu li a{
text-decoration:none;
color:#000;
}
/* mengatur header selesai */
/* mengatur footer dibawah */
#footer ul.menu li{
list-style:none;
display:inline-block;
}
/* mengatur footer selesai*/
header.php :
<!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>
<!-- #header END -->
footer.php :
<div id="footer">
<?php
$args = array('theme_location'=> 'footer_menu');
wp_nav_menu($args);
?>
Copyright © 2018| <a href="http://www.contoh.com">contoh.com</a>
</div>
<br></div><br>
</body>
</html>
content.php :
<?php
if(is_single()) { ?>
<h1><?php the_title(); ?></h1> <br/>
<?php the_time('F jS, Y'); ?> pada <?php the_time('g:i a'); ?> <br />
Author : <a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"><?php the_author(); ?></a>
, Kategori : <?php the_category(' , '); ?>
<br/><br/>
<?php the_post_thumbnail('big_thumb'); ?>
<?php the_content(); ?>
<?php
} else { ?>
<br>
<div class="daftar-posting">
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> <!-- mencetak judul posting -->
<h4>Posted on <?php the_time('F jS, Y') ?> at <?php the_time('g:i a'); ?>
<br/>
Author : <a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"><?php the_author(); ?></a>
, Kategori : <?php the_category(' , '); ?>
</h4> <!-- mencetak tanggal posting -->
<?php the_post_thumbnail('small_thumb'); ?>
<p>
<?php echo get_the_excerpt(); ?> <a href="<?php the_permalink(); ?>">readmore</a> <!-- menampilkan cuplikan/headline posting -->
</p>
<br>
</div>
<?php
}
?>
#Hasilnya
Sekian, terimakasih sudah datang ke blogku.
Lanjut ke part 5 : Memberikan Logo dan Membuat Search Pada Tema Wordpress
Bagikan
Part 4 : Membuat Functions.php Pada Wordpress
4/
5
Oleh
Bayu Ambika
Silahkan berkomentar secara bijak dan sesuai dengan topik pembahasan ...
Untuk menyisipkan kode pendek, gunakan <i rel="code"> ... KODE ... </i>
Untuk menyisipkan kode panjang, gunakan <i rel="pre"> ... KODE ... </i>
Untuk menyisipkan gambar, gunakan <i rel="image"> ... URL GAMBAR ... </i>