Rumah > hujung hadapan web > tutorial js > Langkah mudah untuk menambah fungsi carian Google pada kemahiran WordPress_javascript

Langkah mudah untuk menambah fungsi carian Google pada kemahiran WordPress_javascript

WBOY
Lepaskan: 2016-05-16 15:22:00
asal
1954 orang telah melayarinya

Terdapat banyak artikel di Internet tentang cara mengintegrasikan Carian Tersuai Google dalam WordPress, tetapi hanya sedikit yang menyebut cara menyepadukan kod v2 Hari ini, melalui ujian sebenar, saya akan menerangkan kepada anda cara mengintegrasikan Carian Tersuai Google dalam WordPress. daripada.

Dapatkan Kod Carian Tersuai Google
Masukkan http://www.google.com/cse/
Semua siri akaun Google adalah universal,
Jadi jika anda mempunyai gmail, anda boleh berjaya memasuki sistem carian tersuai ini
Selepas beberapa siri pendaftaran dan log masuk, anda akan memasuki antara muka utama cse Kelajuan Internet kadangkala agak perlahan, jadi semua orang mesti bersabar.
Masukkan antara muka utama dan klik Enjin Carian Baharu
Isikan kandungan seperti yang ditunjukkan di bawah:

201614173911886.jpg (453×640)

Tandakan kotak untuk bersetuju menerima perjanjian, kemudian klik Seterusnya,
Pilih gaya mengikut keutamaan anda, dan demonstrasi akan muncul terus di bawah.
Klik Seterusnya dan kod akan muncul.
Kawan-kawan, adakah anda mendapat kod itu? Kod yang saya dapat adalah seperti berikut:

<!-- Put the following javascript before the closing </head> tag. -->
<script>
 (function() {
 var cx = '006739494664361712883:_id_bvfkgey';
 var gcse = document.createElement('script');
 gcse.type = 'text/javascript';
 gcse.async = true;
 gcse.src = (document.location.protocol == 'https:' &#63; 'https:' : 'http:') +
  '//www.google.com/cse/cse.js&#63;cx=' + cx;
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(gcse, s);
 })();
</script>
<gcse:searchbox></gcse:searchbox>
 
<!-- Place this tag where you want both of the search box and the search results to render -->
//下面这一对标签就是谷歌搜索框要显示的标签,
//即,你想把搜索框放哪就把这一对标签放哪。
<gcse:search></gcse:search>
Salin selepas log masuk

Tambah halaman carian
Buat halaman baharu dalam WordPress anda dengan carian alias
Andaikan bahawa sambungan tetap disediakan dan alamat akses halaman ini ialah
http://pangbu.com/google-search-in-wordpress
Gunakan mod penyuntingan html dan tambahkan kod yang baru anda perolehi pada artikel.
Nak tahu apa kesannya?

Kesan
Anda boleh mencari terus di bawah untuk mencuba.


Penyepaduan sistem
Baiklah, anda sudah mempunyai halaman carian, kini kami perlu menyepadukannya ke dalam carian WordPress.
masalah? Sudah tentu ia tidak menyusahkan.
Cari fail yang mentakrifkan gaya kotak carian tema anda,
Biasanya searchform.php,
Sesetengah tema mungkin berbeza sedikit.
Ada dua lagi ayat penting,
Salah satunya ialah alamat penyerahan borang, action="XXX"
Satu ialah nama parameter borang nama="s",
Kod di sini hampir sama, saya pasti anda boleh menemuinya.

<form action="http://pangbu.com" method="get">
<input id="searchtxt" class="textfield searchtip" type="text" name="s" size="24" value="">

Salin selepas log masuk
Letakkan tindakan="XXX"
Tukar kepada action="URL halaman carian yang baru anda buat"
Ingat untuk membawa http, seperti
action="http://pangbu.com/google-search-in-wordpress"
Salin selepas log masuk
tukar nama="s" kepada nama="q"

Contoh kod bersepadu
Kod gaya carian topik saya yang diubah suai adalah seperti berikut

<div id="searchbox" style="display: block;">
 <form action="http://pangbu.com/google-search-in-wordpress" method="get">
 <div class="scontent clearfix">
  <input type="text" id="searchtxt" class="textfield searchtip" name="q" size="24" value="">
  <input type="submit" id="searchbtn" class="button" value="搜索">
 </div>
 </form>
</div>

Salin selepas log masuk

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan