Tutorial Persediaan API Carian Google Custom

Tutorial ini menunjukkan kepada anda bagaimana untuk mengintegrasikan API carian Google tersuai ke dalam blog atau laman web anda, menawarkan pengalaman carian yang lebih halus daripada fungsi carian tema WordPress standard. Ia menghairankan mudah! Anda akan dapat menyekat carian ke laman web anda dan menyesuaikan paparan untuk memadankan estetika laman web anda.

inilah cara melakukannya:

1. Dapatkan kekunci API Google anda: Ini adalah kunci pengesahan anda.
2. Mengintegrasikan kekunci anda: Masukkan kekunci ke dalam kod JavaScript di bawah.
3. Sesuaikan carian: Nyatakan nama domain anda untuk carian yang terhad tapak.
4. Gaya Carian: Laraskan CSS untuk memadankan reka bentuk laman web anda.
5. Nikmati carian anda yang dipertingkatkan!

Kod JavaScript:

google.load("search", "1", {"language" : "en"});

function initialize() {
  var searchControl = new google.search.SearchControl();

  // Site-restricted web search
  var siteSearch = new google.search.WebSearch();
  siteSearch.setUserDefinedLabel("jquery4u.com"); // Replace with your domain
  siteSearch.setUserDefinedClassSuffix("siteSearch");
  siteSearch.setSiteRestriction("jquery4u.com"); // Replace with your domain
  searchControl.addSearcher(siteSearch);

  // Add other search types (Web, News, Blog, Image, Book, Video)
  searchControl.addSearcher(new google.search.WebSearch());
  searchControl.addSearcher(new google.search.NewsSearch());
  searchControl.addSearcher(new google.search.BlogSearch());
  searchControl.addSearcher(new google.search.ImageSearch());
  searchControl.addSearcher(new google.search.BookSearch());
  searchControl.addSearcher(new google.search.VideoSearch());
  // Optional: LocalSearch, PatentSearch

  // Tabbed display
  var drawOptions = new google.search.DrawOptions();
  drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
  searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
}
google.setOnLoadCallback(initialize);

kod html:

<div id="searchcontrol"></div>

kod CSS:

#searchcontrol, .gsc-control, .gsc-results { width: 600px; }
.gsc-input { width: 200px; } /* Increased input width for better usability */
.gsc-branding { display: none; } /* Hide "powered by Google" */
.gs-title a { color: orange; font-weight: bold; }
#searchcontrol a { color: orange; }

ingat untuk menggantikan

dengan nama domain sebenar anda. CSS yang lebih baik ini juga meluaskan kotak input carian untuk menaip lebih mudah. ​​"jquery4u.com"

FAQ AJAX API API Google: Bahagian ini menjawab soalan umum mengenai penggunaan AJAX API Carian Google. Butiran mengenai pelaksanaan, faedah, batasan, penggunaan komersial, penyelesaian masalah, penyesuaian, pengoptimuman, harga, dan sokongan disediakan dalam artikel asal.

Atas ialah kandungan terperinci Tutorial Persediaan API Carian Google Custom. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!