ホームページ ウェブフロントエンド jsチュートリアル WordPress_javascript スキルに Google 検索機能を追加する簡単な手順

WordPress_javascript スキルに Google 検索機能を追加する簡単な手順

May 16, 2016 pm 03:22 PM
google javascript wordpress 検索

Google カスタム検索を WordPress に統合する方法については、インターネット上に多くの記事がありますが、v2 コードを統合する方法について言及している記事はほとんどありません。今日は、実際のテストを通じて、WordPress に Google カスタム検索を統合する方法を説明します。の。

Google カスタム検索コードを取得
「http://www.google.com/cse/
」と入力します Google アカウントのすべてのシリーズはユニバーサルです。
したがって、Gmail をお持ちの場合は、このカスタム検索システムに正常にアクセスできます
一連の登録とログインが完了すると、CSE のメイン インターフェイスが表示されます。インターネットの速度は時々非常に遅いので、我慢する必要があります。
メインインターフェースに入り、「新しい検索エンジン
」をクリックします。 以下に示すように内容を入力します:

201614173911886.jpg (453×640)

ボックスにチェックを入れて契約に同意し、[次へ] をクリックして
好みに応じてスタイルを選択すると、すぐ下にデモンストレーションが表示されます。
「次へ」をクリックするとコードが表示されます。
皆さん、コードは持っていますか?取得したコードは次のとおりです:

<!-- 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>
ログイン後にコピー

検索ページを追加
エイリアス検索を使用して WordPress に新しいページを作成します
固定接続が設定されており、このページのアクセスアドレスが
であると仮定します。 http://pangbu.com/google-search-in-wordpress
HTML 編集モードを使用して、取得したコードを記事に追加します。
どのような効果があるのか​​知りたいですか?

効果
以下で直接検索して試すことができます。


システム統合
わかりました。すでに検索ページがあります。次に、それを WordPress 検索に統合する必要があります。
トラブル?もちろん面倒ではありません。
テーマの検索ボックスのスタイルを定義するファイル
を見つけます。 通常、searchform.php、
一部のテーマは若干異なる場合があります。
さらに重要な文が 2 つあります。
1 つはフォーム送信アドレス、action="XXX"
1 つはフォームパラメータ名 name="s",
です。 ここのコードはほぼ同じなので、きっと見つかると思います。

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

ログイン後にコピー
action="XXX" と入力します
action="作成した検索ページの URL"
に変更します。
などの http を忘れずに提示してください
action="http://pangbu.com/google-search-in-wordpress"
ログイン後にコピー
name="s" を name="q" に変更します

統合されたコード例
私が変更したトピック検索スタイルのコードは次のとおりです

<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>

ログイン後にコピー

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Google AI、開発者向けに Gemini 1.5 Pro と Gemma 2 を発表 Google AI、開発者向けに Gemini 1.5 Pro と Gemma 2 を発表 Jul 01, 2024 am 07:22 AM

Google AI は、Gemini 1.5 Pro 大規模言語モデル (LLM) を皮切りに、拡張コンテキスト ウィンドウとコスト削減機能へのアクセスを開発者に提供し始めました。以前は待機リストを通じて利用可能でしたが、完全な 200 万トークンのコンテキストウィンドウが利用可能になりました

Googleアプリのベータ版APK分解により、Gemini AIアシスタントに新たな拡張機能が追加されることが明らかになりました Googleアプリのベータ版APK分解により、Gemini AIアシスタントに新たな拡張機能が追加されることが明らかになりました Jul 30, 2024 pm 01:06 PM

最新アップデート (v15.29.34.29 ベータ版) の APK 分解を考慮すると、Google の AI アシスタント Gemini はさらに高性能になる予定です。このテクノロジー巨人の新しい AI アシスタントには、いくつかの新しい拡張機能が追加される可能性があると伝えられています。これらの拡張機能は

Pixel 9 Pro XL の Google Tensor G4 は 原神 で Tensor G2 に遅れをとっています Pixel 9 Pro XL の Google Tensor G4 は 原神 で Tensor G2 に遅れをとっています Aug 24, 2024 am 06:43 AM

Googleは最近、Pixel 9ラインのTensor G4に関するパフォーマンスの懸念に対応しました。同社は、このSoCはベンチマークを上回るように設計されていないと述べた。代わりに、チームは Google が求めている分野でパフォーマンスを向上させることに重点を置きました。

Google Pixel 9スマートフォンは7年間のアップデート契約にもかかわらずAndroid 15では発売されない Google Pixel 9スマートフォンは7年間のアップデート契約にもかかわらずAndroid 15では発売されない Aug 01, 2024 pm 02:56 PM

Pixel 9 シリーズは、8 月 13 日のリリースが予定されており、もうすぐ登場します。最近の噂によると、Pixel 9、Pixel 9 Pro、Pixel 9 Pro XLは、128 GBのストレージから始まるPixel 8とPixel 8 Pro(Amazonで現在749ドル)をミラーリングします。

Google Pixel 9 Pro XLはデスクトップモードでテストされる Google Pixel 9 Pro XLはデスクトップモードでテストされる Aug 29, 2024 pm 01:09 PM

Google は、Pixel 8 シリーズで DisplayPort 代替モードを導入しており、新たに発売された Pixel 9 ラインナップにも搭載されています。これは主に、接続された画面でスマートフォンのディスプレイをミラーリングするためにありますが、デスクトップにも使用できます。

新しい Google Pixel デスクトップ モードは、Motorola Ready For と Samsung DeX の代替として新鮮なビデオで紹介されています 新しい Google Pixel デスクトップ モードは、Motorola Ready For と Samsung DeX の代替として新鮮なビデオで紹介されています Aug 08, 2024 pm 03:05 PM

Android Authority が、Google が Android 14 QPR3 Beta 2.1 内に隠していた新しい Android デスクトップ モードをデモンストレーションしてから数か月が経過しました。 Google が Pixel 8 と Pixel 8 に DisplayPort Alt Mode サポートを追加することに追随して登場

Google、AI Test Kitchen & Imagen 3 をほとんどのユーザーに公開 Google、AI Test Kitchen & Imagen 3 をほとんどのユーザーに公開 Sep 12, 2024 pm 12:17 PM

Google の AI Test Kitchen には、ユーザーが遊べる一連の AI 設計ツールが含まれており、現在、世界 100 か国をはるかに超える国のユーザーに公開されています。この動きにより、世界中の多くの人が Imagen 3、Google を使用できるようになるのは初めてです。

流出した Google Pixel 9 の広告には、「Add Me」カメラ機能を含む新しい AI 機能が示されています 流出した Google Pixel 9 の広告には、「Add Me」カメラ機能を含む新しい AI 機能が示されています Jul 30, 2024 am 11:18 AM

Pixel 9 シリーズに関連するさらなるプロモーション資料がオンラインに流出しました。参考までに、新たなリークは、91mobiles が Pixel Buds Pro 2 と Pixel Watch 3 または Pixel Watch 3 XL も紹介した複数の画像を共有した直後に到着しました。この時

See all articles