Membuat Search Engine Gambar di WordPress

Katanya satu gambar bisa menunjukkan seribu bahasa, bagaimana kalo banyak gambar dalam halaman pencarian blog WordPress kamu? Wah bisa menunjukkan berapa bahasa yah?!

Setelah sebelumnya ada tutorial membuat search engine ebook dalam format PDF dengan menggunakan API search engine Bing, sekarang kita buat mesin pencari dalam format gambar to’ di halaman pencarian WordPress. Skrip kali ini agak berbeda dengan skrip auto-generated content, tapi fungsinya sama saja, kode ini meng-generate image dengan memanfaatkan API suatu search engine. Kita pake API Bing saja yah

Cara membuat search engine gambar di halaman search result wordpress, berikut langkahnya: (Saya pake WordPress Theme Default sebagai contoh penempatan kode)

  1. Masuk search.php theme WordPress kamu
  2. Kopas kode berikut dan tempatkan sebelum kode <?php endwhile; ?> dan sesudah kode <?php else : ?>:
    function CleanFileNameBan( $result ){
    	$bannedkey = array( 'lorem', 'ipsum', 'dolor' ); //masukkan kata kunci satu persatu untuk menghindari kata-kata yang tidak diinginkan.
    	$result    = str_replace( $bannedkey, '', $result );
    	$result    = trim( $result );
    
    	return $result;
    }
    
    function hilangkan_spesial_karakter($result) { //fungsi hilangkan semua spesial karakter
    	$result = strip_tags($result);
    	$result = preg_replace( '/&.+?;/', '', $result );
    	$result = preg_replace( '/\s+/', ' ', $result );
    	$result = preg_replace( '|%([a-fA-F0-9][a-fA-F0-9])|', ' ', $result );
    	$result = preg_replace( '|-+|', ' ', $result );
    	$result = preg_replace( '/&#?[a-z0-9]+;/i','',$result );
    	$result = preg_replace( '/[^%A-Za-z0-9 _-]/', ' ', $result );
    	$result = trim( $result, ' ');
    
    	return $result;
    }
    
    if ( isset( $s ) ) {
    	$request =
    	'http://api.search.live.net/json.aspx?Appid=KODEAPIBING&sources=image&Image.Count=5&query=' . urlencode( $s ); $response  = file_get_contents($request );
    	$jsonobj  = json_decode( $response );
    
    	echo( '<div id="post">' );                     
    
    	foreach( ( array ) $jsonobj->SearchResponse->Image->Results as $value ) {
    		echo( '<h2 class="title">' . CleanFileNameBan( hilangkan_spesial_karakter( $value->Title) ) . '</h2>' );
    		echo( '<div class="entry"><a target="_blank" rel="nofollow" href="' . $value->Url . '">' );
    		echo( '<img style="border:none" src="' . $value-/>Thumbnail->Url . '" /></a></div>' );
    		echo( '<p style="color:#777777">Sumber: ' . $value->Url . '</p>' );
    	}
    }
    
  3. Ganti kata KODEAPIBING dengan kode API dari BING di line 22 (daftar di http://www.bing.com/developers/createapp.aspx). Gambar dalam bentuk Thumbnail yang jumlahnya (angka 5), bisa ganti dengan jumlah yang diinginkan pada kode line 22 ...Image.Count=5...

Selesai!

Silahkan modifikasi sendiri kode html yang ada untuk menyesuaikan dengan theme WordPress kamu. Selamat mencoba sob!

Update 28 April 2010

  • Pada Line 34 kode sebenarnya seperti ini echo(‘</div>’);
  • Ada penambahan kode (array) pada line 26 untuk menghilangkan kode error Invalid argument supplied for foreach()

Please Note
Ternyata gambarnya bisa juga di-index oleh search engine :mrgreen:
Jangan lupa pasang atribusi Bing untuk hasil pencariannya.
Penempatan kode tergantung dari theme yang dipakai. Silahkan berkreasi sendiri.
Kasi tau yach kalo ada error.

28 Replies to “Membuat Search Engine Gambar di WordPress”

  1. hallo om jev.. mau tanya apakah bisa juga jika hanya…

    hallo om jev.. mau tanya apakah bisa juga jika hanya ingin menampilkan semua related searches dari bing?? jadi semacam longtail keyword..

    trims

  2. hahay, akhirnya ane berhasil bikin theme auto wallpapers pake ni…

    hahay, akhirnya ane berhasil bikin theme auto wallpapers pake ni script. tinggal 1 langkah lagi om. mengganti bagian <a href na ngga lari ke source aslinya, tapi ngga juga muter2 di search result…tapi larinya ke 404 atau single.php dengan menampilkan gambar dalam ukuran penuh.

    mungkin bikin nya seperti membuat pdf engine.

    Klo ada masukan monggo om hehehe.

  3. halo om jev. balik terus ane :)) suka ma blog…

    halo om jev.
    balik terus ane :))
    suka ma blog om jev.
    byk masukan dan byk enovasi dech buat AGC ane :)
    setidaknya ane byk uprek AGC ane menurut versi ane :))

    om jev. nanya neh (duch selalu nanya :hammer:)
    om ane dah berhasil tuch edit scrip AGC image dengan ngelink ke hal search itu sendri (sumber di kill :)) ). dan ane percantik dengan slider berjalan.

    namun ane pengen buat berupa tabel yang nntinya ane terapkan pada wallpaper. kan cantik tuch om :)

    ini masalhnya ane hanya bisa buat 1 baris aja om :((
    di perbnyak pencarian tetep jadi baris aja. colomnya jadi byk :((.

    om gmn caranya bisa mematenkan fungsu colom.
    contoh ane pngen hanya 3 kolom aja.
    bila generate byk ampe 15-20 gmbar jadi ke baris berikutnya. mohon saran om :)

    maap kepanjngan tnyanya :)

    ————klo boleh ane tambah minta request AGC yang mengkill searchnya om —–
    jadi langsung http://namadomain/key-key.html
    mohon bimbingannya :)

  4. gan, kalo di kombinasikan dengan wallpaper search yang otomatis nentuin…

    gan, kalo di kombinasikan dengan wallpaper search yang otomatis nentuin resolusi wallpaper gimana caranya gan?
    bingunga nyari referensinya gan buat nambah filter.
    mohon bantuannya gan, email juga boleh gan ;)

    makasih sebelumnya

  5. om jev, klo ane mau pasang script ini di single.php…

    om jev, klo ane mau pasang script ini di single.php apa ada yang harus di rubah ? soal nya pas ane coba pasang skript di single.php bawah title ga keluar gambar nya, padahal di search.php dengan script yang sama gambarnya muncul. terimakasih om :)

    • skripnya agak beda tuh. Kamu bisa pake kode ini untuk…

      skripnya agak beda tuh. Kamu bisa pake kode ini untuk di single post, kopas aja dan simpan di single.php di bahwa kode &lt;?php endif; ?> (kalo pake twenty theme)

      <?php function CleanFileNameBan($result){
      $bannedkey = array("key","key","key"); //masukkan kata kunci satu persatu untuk menghindari kata-kata yang tidak diinginkan.
      $result = str_replace($bannedkey, '',$result);
      $result = trim($result);
      return $result;
      }
      function hilangkan_spesial_karakter($result) { //fungsi hilangkan semua spesial karakter
      	$result = strip_tags($result);
      	$result = preg_replace('/&.+?;/', '', $result); 
      	$result = preg_replace('/\s+/', ' ', $result);
              $result = preg_replace('|%([a-fA-F0-9][a-fA-F0-9])|', ' ', $result);
      	$result = preg_replace('|-+|', ' ', $result);
              $result = preg_replace('/&#?[a-z0-9]+;/i','',$result);
              $result = preg_replace('/[^%A-Za-z0-9 _-]/', ' ', $result);
      	$result = trim($result, ' ');
      	return $result;
      }
      function ambiljudul($title){
         $title = get_the_title();
         $title = trim($title);
          return ($title);
      }
      ?>
      <?php 
      $request = 
      'http://api.search.live.net/json.aspx?Appid=KODEAPIBING&sources=image&Image.Count=5&query=' . urlencode(ambiljudul($title)); $response  = file_get_contents($request); 
      $jsonobj  = json_decode($response); 
      echo('<div ID="post">');                     
       
      foreach((array)$jsonobj->SearchResponse->Image->Results as $value) 
      {
      echo('<h2 class="title">'.CleanFileNameBan(hilangkan_spesial_karakter($value->Title)).'</h2>'); 
      echo('<div class="entry"><a target="_blank" href="' . $value- rel="nofollow">Url . '''>'); 
      echo('<img style="border:none" src="' . $value-/>Thumbnail->Url. '''></a></div>');
      echo('<p style="color:#777777">Sumber: ' . $value->Url. '
      '); 
       
      } 
      ?>
      
  6. mas, dimana referensi yang mudah dipelajari kalo untuk belajar fitur2…

    mas, dimana referensi yang mudah dipelajari kalo untuk belajar fitur2 WP bagi pemula seperti saya ini, maklum mas newbie yang haus ilmu nih.

    • Kamu bisa mulai dari sini <u>codex.wordpress.org/Main_Page</u> :)

      Kamu bisa mulai dari sini codex.wordpress.org/Main_Page :)

  7. ass…. salam kenal y. wah msh bnyk y belum sya…

    ass….
    salam kenal y.
    wah msh bnyk y belum sya ktahui..
    gmn sih mas biar cpat bisa nge blog di wordpress..
    slm ini y aku tau cm posting tulisan di wp…tu pun

    trus trang sy sangat tertarik n pengen bisa tntang
    Membuat Search Engine Gambar di WordPress..
    tp sy buat masuk ke —
    1. Masuk search.php theme WordPress kamu..

    blum tau….tlong dong master mau bantuin sy….gmn cr-a….sy kepengen bisa n ingin se x bljar……
    wassalam…(tlong di jawab)…

    • Keknya sudah jelas kok tutorial di atas. Kalo mengenai fitur-fitur…

      Keknya sudah jelas kok tutorial di atas. Kalo mengenai fitur-fitur yang ada di WP, harus belajar basic wp-nya dulu, belajarnya pelan2 aja. Ntar kalo sudah kenal fiturnya, pasti gampang ikutin tutorial ini. Thanks sudah mau belajar :)

  8. mantep om…kode error Invalid argument supplied for foreach() udh teratasi.…

    mantep om…kode error Invalid argument supplied for foreach() udh teratasi. tengyu om…. oiya… klo gak keberatan tolong hapus url blog ane yang udh ane tulis sebelumnya om.. tengkyu

  9. wokeh om, work. Source yg ini mungkin akan sangat bermanfaat…

    wokeh om, work. Source yg ini mungkin akan sangat bermanfaat untuk situs wallpaper :) ane punya ide untuk yang 1 ini, tapi ngga terlalu ngerti buat implementasi script nya T_T. Maklum anak farmasi yang nyasar ke dunia script hahaha. Klo uda nemu cara nya ntar ane share di sini juga. intinya bisa bikin sejajar ky google image, trus ntu gambar pas d klik ngga lari ke web yg mpunya gambar, tapi lari ke singel post seakan2 ntu gambar berada asli di blog kita. karena keuntungan script ini seperti yg om jevuska bilang bisa terindeks google juga :) ( menghayal mode on, sambil nyari2 bahan :P )

    • wets anak farmasi toh mas ibenk, hehehe Keep work! :)

      wets anak farmasi toh mas ibenk, hehehe
      Keep work! :)

  10. Sedikit meralat ( bukan maksud sok2an ), masalah sidebar saya…

    Sedikit meralat ( bukan maksud sok2an ), masalah sidebar saya yang turun. pada line 34 penambahan character echo(‘’); diganti echo(“”);

    buat temen2 yang mau lihat hasil dari AGC tanpa akhir, Search Engine Gambar, silahkan jalan2 ke blog saya hxxp://www.ibenkirawan.com. dan silahkan klik recent post atau popular post yg ada di bagian paling bawah blog.
    Ane jg minta izin ke om jevuska buat masang link back ke blog ini klo boleh :)

    Masih bersabar menunggu kelanjutan tutorial om jevuska :)

    • nggak masalah. Masalah error Invalid argument supplied for foreach() dan…

      nggak masalah. Masalah error Invalid argument supplied for foreach() dan sidebar yang turun sudah teratasi. Silahkan lihat update postnya.

  11. @ om ibenk: iya, itu karena hasil search gambar di…

    @ om ibenk: iya, itu karena hasil search gambar di bing tidak ditemukan.. cuma ngatasinnya gimana ya…. menanti petunjuk master jevuska atau master2 yang lain hihihi….

    ide om ibenk bagus juga kalau hasil pencarian kaya di google search image… tambah keren dah..hehehe…..

  12. menjawab om @adadeh tentang Invalid argument supplied for foreach() in…

    menjawab om @adadeh tentang Invalid argument supplied for foreach() in /home/palatar1/public_html/….dst, itu kemungkinan karena dari hasil result gambar dari bing sendiri tidak di temukan.
    karena saat eror itu muncul dan saya coba buka bing untuk mencari gambar dgn keyword yg sama, hasil dari bing memang tidak mendapatkan gambar tersebut. buat menghindari error tersebut muncul karena tidak ada result yg di dapat, mungkin om jevuska bisa kembali membantu hehehe :)

  13. wah.. master lagi sibuk ya.. blm dijawab nih… contoh error…

    wah.. master lagi sibuk ya.. blm dijawab nih…

    contoh error disini mas : (kalau kata kunci tidak ditemukan)
    —-Url dihapus atas permintaan pemilik—-

    ini contoh yang ga errornya:
    —-Url dihapus atas permintaan pemilik—-

    newbie mohon pencerahan

  14. doble pos again om, tolong cek web saya. hal ini…

    doble pos again om, tolong cek web saya. hal ini saya memakai cara yang seperti comment saya sebelumnya. tapi masalah na, sidebar di blog saya malah ikutan turun. gambar result dah muncul. cuma masalah sidebar yg turun ntu, adakah solusi ? karena bila saya ngikutin seperti yg tertulis di artikel om akan muncul malasah yg sama seperti om @adadeh :)

    • masalah sidebar yang turun, emang karena ada kode yang hilang…

      masalah sidebar yang turun, emang karena ada kode yang hilang line 34 harusnya seperti ini echo(‘</div>’);

  15. setelah ane coba ( ini khusus buat teman2 yang uda…

    setelah ane coba ( ini khusus buat teman2 yang uda masang auto generate di search php.

    letakkan kode ini :

    < ?php
    if (isset($s)) {
    $request =
    'http://api.search.live.net/json.aspx?Appid=KODEAPIBING&sources=image&Image.Count=5&query=' . urlencode($s); $response = file_get_contents($request);
    $jsonobj = json_decode($response);
    echo('’);

    foreach($jsonobj->SearchResponse->Image->Results as $value)
    {
    echo(”.CleanFileNameBan(hilangkan_spesial_karakter($value->Title)).”);
    echo(‘<a>Url . ‘”>’);
    echo(‘Thumbnail->Url. ‘”></a>’);
    echo(‘Sumber: ‘ . $value->Url. ”);

    }
    echo(“”);
    } ?>

    dibawah kode A pada artikel “konten tak berujung dan berputar”
    mohon di koreksi bila ada salah ( mungkin karena perbedaan template ). dan sekalian kita sama2 oprek lagi biar tampilan gambarnya sejajar dari kiri ke kanan ( model kaya google search image ), ngga dari atas ke bawah. Hayoo, siapa yg mau bantu :)

    (maaf om jevus, klo komen na kepanjangan :) )

  16. kode nya ini berarti di pasang 2x ya mas? di…

    kode nya ini berarti di pasang 2x ya mas? di dan sesudah kode :

  17. mantap tutornya master.. ane dari kemari nongkrong tambah betah aja…

    mantap tutornya master.. ane dari kemari nongkrong tambah betah aja nih… tapi ada error bos… yaitu jika kata kunci didalam gambar tidak ditemukan maka akan keluar seperti ini :

    Warning: Invalid argument supplied for foreach() in /blabla/blablabla/public_html/wp-content/themes/blablabla/search.php on line 118

    gimana solusinya master…maklum newbie.. thx

    • @adadeh:masalah hasil yang nggak muncul, bisa diakali kok. sori belum…

      @adadeh:masalah hasil yang nggak muncul, bisa diakali kok. sori belum sempat coding untuk yang satu ini, saya juga lupa ngecek kalo nggak ada gambar :) ditunggu yah sob! Sabar… :)

  18. hihihi.. master memang mantep bener….dari kemarin ane nongkrong disini tambah…

    hihihi.. master memang mantep bener….dari kemarin ane nongkrong disini tambah betah aja. tengkyu master, besok ane cobain

  19. kalo di jadikan satu dengan auto kontent bisa kan mas?.soal…

    kalo di jadikan satu dengan auto kontent bisa kan mas?.soal nya belum coba ,karna saya hari gak mampir ke blog jevuska ,ternyata ada lagi yg bagus keg gini

Leave a Reply

*

*