de-Novembre

Advertisements

Mungkin Anda ingin membuat sebuah halaman di magento yang semua berisi special offers atau tawaran-tawaran khusus dari produk Anda, Maka Anda perlu membuat halama itu bisa menampilkan listing products-products, yang Anda inginkan bukan?
Nah untuk melakukan hal tersebut, Anda bisa melakukannya dengan mengikut tutorial video di sini.

Mungkin pengetahuan tentang membuat category dan products sudah Anda kuasai, kuncinya ada pada baris script berikut :


{{block type="catalog/product_list" category_id="22" template="catalog/product/list.phtml"}}

perhatikan pula kata-kata category_id = 22 diatas itu menunjukan category id yang akan ditampilkan

Jangan lupa untuk menon aktifkan category yang berisi product-product khusus tersebut, Agar tidak menyatu dengan products-products umum yang lainnya.

Membuat Panel Administrasi di Back-end WordPress

Sekarang plugin Anda sudah tercantum di list plugin di panel back-end wordpress Anda, dengan demikian wordpress sudah mengetahui dan mengenali plugin yang Anda buat. Namun plugin Anda belum bisa berbuat apa-apa, untuk membuatnya berfungsi silahkan ikuti langkah selanjutnya berikut ini.

  1. Buatlah sebuah fungsi apasaja dengan maksud memberitahu kepada wordpress bahwa fungsi yang pertama dipanggil adalah fungsi tersebut, fungsi ini biasanya berisi perintah untuk menambahkan menu pada panel back-end wordpress Anda, yang selanjutnya akan berfungsi untuk pengaturan plugin Anda.
  2. Untuk membuat fungsi Anda di load secara Automatis saat administrator masuk ke panel Back-end Anda adalah dengan menggunakan baris script berikut :
    <?
    function add_new_admin_menu() {
     add_options_page("RPG-Slideshow", "RPG-Slideshow", 1, "rpg-slideshow", "rpg_slideshow");
    }
    add_action('admin_menu', 'add_new_admin_menu');
    ?>
    
  3. fungsi “add_action” adalah fungsi yang memberitahukan kepada panel back-end wordpress Anda untuk secara automatis meload fungsi “add_new_admin_menu”
  4. Maka fungsi “add_new_admin_menu” pun terload secara automatis.
  5. Di dalam fungsi “add_new_admin_menu” tersebut tersimpan perintah untuk menambahkan options page yang berisi forms / interface untuk pengaturan plugin Anda yaitu baris script : “add_options_page(“RPG-Slideshow”, “RPG-Slideshow”, 1, “rpg-slideshow”, “rpg_slideshow”);” Anda dengan bebas menganti penama’an pada nama-nama diatas sesuai kebutuhan. Hal yang perlu diperhatikan adalah parameter ke 3 dan ke 5, parameter ke 3 harus berisi angka 1 dan parameter ke 5 akan di bahas pada point berikutnya (6)
  6. perhatikan parameter ke 5 itu adalah pemanggilan nama fungsi lain yang akan berisi pemanggilan forms pengaturan plugin Anda.
  7. Kita buat pula fungsi yang Akan dipanggil point no 5:
    <?
    function rpg_slideshow(){
     global $wpdb;
     $action = (isset($_GET['action'])?$_GET['action']:$_GET['action']);
     $rpg_id= (isset($_GET['rpg_id'])?$_GET['rpg_id']:$_GET['rpg_id']);
    
     switch($action){
     default:
     include('rpg-list-slideshow.php');
     break;
    
     case "add":
     include('rpg-add-edit-slideshow.php');
     break;
    
     case "edit":
     include('rpg-add-edit-slideshow.php');
     break;
     }
    }
    ?>
    
  8. Perhatikan pemanggilan include pada file tersebut, itu merupakan interface /forms untuk pengaturan, ini biasanya berisi file yang berformat html.

Berikut ini adalah tampilan lengkap code file tersebut :

<?php
/*
Plugin Name: RPG Slideshow
Plugin URI: http://www.princeoffrog.wordpress.com
Description: The Custome Slidshow Plugins
Author: Rini Puspita Galih
Version: 1.0
Author URI: http://www.princeoffrog.wordpress.com
*/
global $wpdb;
define('RPG_TABLE_NAME', $wpdb->prefix . 'rpg_slideshow');
define('RPG_PATH', ABSPATH . 'wp-content/plugins/rpg-slideshow');
define('RPG_IMAGES_PATH', get_bloginfo('wpurl'). '/wp-content/plugins/rpg-slideshow');
require_once(ABSPATH . '/wp-includes/pluggable.php');

function add_new_admin_menu() {
 add_options_page("RPG-Slideshow", "RPG-Slideshow", 1, "rpg-slideshow", "rpg_slideshow");
}

function rpg_slideshow(){
 global $wpdb;
 $action = (isset($_GET['action'])?$_GET['action']:$_GET['action']);
 $rpg_id= (isset($_GET['rpg_id'])?$_GET['rpg_id']:$_GET['rpg_id']);

 switch($action){
 default:
 include('rpg-list-slideshow.php');
 break;

 case "add":
 include('rpg-add-edit-slideshow.php');
 break;

 case "edit":
 include('rpg-add-edit-slideshow.php');
 break;
 }
}

function install(){
 global $wpdb;
 if ( $wpdb->get_var('SHOW TABLES LIKE "' . RPG_TABLE_NAME . '"') != RPG_TABLE_NAME )
 {
 $sql = "CREATE TABLE IF NOT EXISTS `". RPG_TABLE_NAME . "` (";
 $sql .= "`rpg_slideshow_id` int(11) unsigned NOT NULL auto_increment,";
 $sql .= "`rpg_slideshow_title` varchar(20) NOT NULL default '0',";
 $sql .= "`rpg_slideshow_description` varchar(100) default NULL,";
 $sql .= "`rpg_slideshow_images` varchar(250) NOT NULL,";
 $sql .= "`rpg_slideshow_url` varchar(250) default NULL,";
 $sql .= "PRIMARY KEY  (`rpg_slideshow_id`)";
 $sql .= ") ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;";
 $wpdb->query($sql);
 }
}

function uninstall(){
 global $wpdb;
 $sql = "DROP TABLE `". RPG_TABLE_NAME . "`;";
 $wpdb->query($sql);
}

register_activation_hook(__FILE__, 'install');
register_deactivation_hook(__FILE__, 'uninstall');

add_action('admin_menu', 'add_new_admin_menu');
?>

Tags: ,

Membuat File Plugin

Sekarang kita Akan membahas bagaimana cara membuat sebuah file plugin. Sebelumnya mari kita lihat tampilan pada panel plugin di back-end wordpress Anda, sebagai berikut:

pada tampilan ini terdapat list yang dimana terdapat informasi lengkap tentang nama plugin, deskripsi, author dan lengkap beserta web urlnya. Untuk membuat plugin Anda ada di salah satu list tersebut, hal-hal yang perlu Anda lakukan adalah:

  1. Buatlah file pada directory plugin Anda yang sudah Anda buat sebelumnya di chapter sebelumnya, penama’an nama file bebas atau sesuai kebutuhan.
  2. Selanjutnya perhatikan potongan script comment php dibawah ini:
<?
/*
Plugin Name: RPG Slideshow
Plugin URI: http://www.princeoffrog.wordpress.com
Description: The Custome Slidshow Plugins
Author: Rini Puspita Galih
Version: 1.0
Author URI: http://www.princeoffrog.wordpress.com
*/

?>

Berikut ini adalah parameter yang akan terbaca oleh wordpress sebagai identitas dan kelengkapan biodata plugin Anda, silahkan isikan dengan benar informasi dibelakang tanda : ( “titik dua”).

Dengan menyelesaikan tahap ini maka Anda bisa melihat plugin Anda sudah bertengger pada list plugin di panel back-end wordpress Anda.

Tags: ,

File-file dan Folder-folder

Sebelum kita membuat plugin pada wordpress ada beberapa hal yang perlu diketahui :

  1. Familiar dengan WordPress beserta pengaturannya dan pengertian Plugins pada wordpress itu sendiri.
  2. Perencanaan, sudah banyak plugin yang online dan bisa langsung dipakai. Namun mungkin belum sesuai dengan kebutuhan. Pertama-tama kita harus menentukan dulu perencanaan, kebutuhan dan kegunaan plugin tersebut. Dalam contoh kasus ini saya akan membuat sebuah slideshow yang bisa dinamis dikontrol dari back-end wordpress.
  3. Struktur WordPress, terutama struktur penyusunan file-file dan folder-folder serta kegunaannya pada wordpress.
  4. wordpress telah menyusun pengaturan penempatan untuk plugin pada directory : {magento_path}/wp-content/plugins/
  5. Sekarang silahkan buat folder Anda sendiri, penama’an folder ini akan menjadi nama plugin Anda, gunakan nama yang relevan dengan nama plugin Anda jangan gunakan character-character aneh dan jangan memakai spasi (gunakan tanda “-” / min saja untuk sistem penama’an yang baik).
  6. Untuk pengguna linux pastikan folder Anda rewritable atau dengan akses 777 silahkan gunakan perintah sudo chmod -R 777 nama-folder-plugin-anda.

Folder Plugins

Ada begitu banyak blocks yang terbentuk dari perpaduan antara HTML dan CSS pada wordpress. Mungkin Anda berniat untuk menempatkan salah satu component widgets pada salah satu blocks yang terdapat pada layout wordpress tersebut.

WordPress, menawarkan banyak themes yang bisa Anda download dan install secara gratis dan mudah. Penempatan widgets-widgets ini sangat bergantung pada klasifikasi themes yang Anda pilih. Ini akan mempengaruhi pada sistem penama’an dan penempatan serta pengaturan block-block widget pada template Anda.

Untuk melakukan hal itu Anda perlu mengetahui terlebih dahulu tentang :

  1. Menginstalasi themes secara manual atau copy/paste
  2. Penempatan file-file themes yang Anda pilih
  3. Cara kerja widgets pada wordpress

Langkah-langkah :

  1. Pada folder themes yang Anda pilih pada umumnya terdapat satu file bernama functions.php
  2. Pada file ini terdapat baris script sebagai berikut :
     if ( function_exists('register_sidebar') )
  3. Dibawahnya terdapat baris-baris script seperti berikut :
                     register_sidebar(array(
                 	     'name'=>'top_right',
                         'before_widget' => '<li id="%1$s" class="topright %2$s"><div class="sidebarbox">',
                         'after_widget' => '</div></li>',
                         'before_title' => '<p class="fleft">',
                         'after_title' => '</p>',
                     ));
                 
  4. Ubahlah ‘name’ diatas sesuai dengan kebutuhan dan penama’an yang tepat menurut Anda, apabila Anda menyamakan penama’an pada ‘name’ ini dengan penamaan pada block html pada attribute ‘id’ pada file html Anda, maka dengan ini akan mempermudah dalam koneksi fungsi ini selanjutnya.
  5. Sampai kepada langkah ini Anda sudah bisa sidebar baru pada widgets Anda di back-end / admin panel wordpress Anda
  6. Selanjutnya Anda bisa menambahkan baris script berikut pada html file themes Anda :
                      <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('top_right') ) : ?>
                      <?php endif; ?>
                 
  7. Perhatikan penama’an top_right pada script diatas, ini merujuk pada penama’an di point nomor 3

Apabila Anda ingin memasang blocks-blocks yang dijadikan widgets pada wordpress tanpa mengubah atau membuat blocks menjadi accessible pada widgets Anda dapat kunjungi file-file berikut :

  1. {wordpress_path}/wp-includes/post-template.php
  2. {wordpress_path}/default-widgets.php

Disini terdapat kumpulan fungsi-fungsi yang ada dalam widgets namun tidak dipanggil secara widgets, dalam artian lain tidak bisa di edit pada back-end wordpress / fixed. Anda cukup mencari dengan nama component yang ada pada widgets dan memasang fungsi tersebut pada halaman wordpress themes yang Anda inginkan.

Tags:

Sebelumnya mohon maaf apabila hasil modifikasi masih kurang memuaskan, apabila ada pertanyaan, kritik dan saran yang lebih baik lagi hal ini sangat penulis harapkan.

Apabila Anda bosan dengan sistem menu Catalog pada Magento yang seperti itu saja atau masih standard, dan mempunyai keinginan untuk merubahnya atau mencoba gaya baru. Anda bisa merujuk pada tutorial ini.

Sebelumnya perlu Anda ketahui bahwa Magento sistem tidak secara automatis mendukung javascript jQuery. Permasalahan ini telah dibahas pada tutorial sebelumnya yaitu, Integrasi jQuery pada Magento

Langkah-langkah :

  1. Proses modifikasi dimulai pada “top.phtml” yang terdapat pada {magento_path}/app/design/frontend/default/default/template/catalog/category/navigation/top.phtml
  2. Tambahkan script berikut:
    <script type=”text/javascript”>
    jQuery(document).ready(function(){
    jQuery(‘li.parent > a’).attr(‘href’, ‘javascript:void(0);’);
    //colapse all the submenus at the first load
    jQuery(‘ul#nav-disable ul’).hide(‘fast’);
    //expand the active submenus
    jQuery(‘li.active > ul’).show(‘slow’);
    //expand on click for the parent menu/submenu
    jQuery(‘li.parent’).click(function(){
    //select the child of the selected parent menu/submenu class
    var sGet = jQuery(this).attr(‘class’).split(‘ ‘);
    //expand the child of the selected parent menu/submenu
    jQuery(‘.’+sGet[1]+’ > ul’).show(‘fast’);
    });
    });
    </script>
  3. Langkah selanjutnya Anda bisa berkonsultasi dengan designer web tentang penempatan pada website ini.

Setelah mengikuti langkah-langkah diatas, sebenernya ada tiga bagian penting (dalam design / css / js) yang harus diketahui dari sistem parentheses Catalog strukture Magento yaitu : .parent, .active dan .last. Dengan mengetahui 3 bagian tersebut, Anda bisa memulai untuk mempelajari sifat-sifat dan karakteristik masing-masing identifier, dan selanjutnya Anda bisa custom sistem Anda sendiri.