WordPress投稿編集画面へGoogleやアマゾン,bing,楽天のキーワードサジェストツールを設置してSEO対策する方法

公開日: : 最終更新日:2016/02/02 カスタマイズ

wordpress投稿画面seoサジェスト記事入力の下に表示される場合

今回の投稿記事は、WordPressの「投稿の編集」画面にGoogle APIやBing API,楽天 API,Amazon APIを利用してキーワードサジェストツールを設置する方法を紹介したいと思います。

サジェストツールは既にgoodkeywordなどのサイトで利用できますが、WordPress投稿記事入力作業中に素早く手軽にアクセスできたらいいなと思いfunction.phpでカスタマイズしてみました。出来上がりは上記の画像のような感じになります。

キーワードサジェストツールをWordPress投稿画面で作成していてWordPress使用者だけってのは需要はあるのかなと思い始めていますがしかも他のエディタで作成してからって人も多いのかな、goodkeywordなどのようにいろんな人が利用できるわけじゃないですしね。まぁ、とりあえず自己満足でも作成手順を紹介していきます。

スポンサーリンク

主な作成手順

サジェストキーワードツールをWORDPRESSの投稿画面に設置するには以下の作業手順で行います。
1. function.phpにサジェスト検索用のメタボックスを作成する
2. 検索用表示関数を作成する。
3. jQuery,Ajaxを使用して検索処理を対応(google,bing,amazon,楽天などのapiを利用)
4. 表示出力結果を作成する

WordPress投稿編集画面にサジェスト検索用のメタボックスを追加

wordpress投稿画面にキーワードサジェスションの検索メタボックスを追加

編集画面セクションの設定をsideにしていて画面幅が広い場合はこの画像のように記事入力横あたりに表示されます。これは好みの表示位置に変更は可能かと。

機能としては、各タブを選択すればサジェスト検索したいapiが切り替わる。関連キーワードが知りたい単語などを入力し、検索ボタンをするとサジェストの検索結果が表示され多い場合はスクロールで調べられます。SEO対策や記事の書き方を決める、記事リライトや校正時の効率化が可能ですね。


	// コールバック設定
	add_action("admin_menu", "RegisterMetaBoxesForChanceKeywordSuggestion");	// メタボックス作成用

	// メタボックスの作成
	function RegisterMetaBoxesForChanceKeywordSuggestion()
	{
		// とりあえず投稿画面に新しいメタボックスを追加
		add_meta_box(
			"chance_keyword_suggest_post",				// メタボックスであるdivタグのid属性値を指定
			"Chance Seo Keyword Suggest",				// メタボックスのタイトル
			"DisplayMetaBoxForChanceKeywordSuggest",	// メタボックスの内容を表示する関数名を指定
			'post',										// ページの種類として'post'、'page'、'link'、'dashboard'、カスタム投稿タイプ名の何れかを指定
			'side', 									// 編集画面セクションが表示される部分(メタボックスの種別として'normal'、'advanced'、'side'の何れかを指定)
			'high' 										// ボックスが表示される優先度(メタボックスの優先度として'high'、'core'、'default'、'low'の何れかを指定)
		);
	}

サジェスト検索対象の設定

//検索対象を増やしたい場合、以下に追加(ChanceKeywordSuggest_getSuggestionの検索処理も)
	$search_name 	  = array("google","bing","amazon","rakuten");
	$search_txt_name  = array("Google","Bing","Amazon","楽天");
	// assertってどういう終了の仕方するんだっけ?数合わない場合のチェックしていないです。
	assert(count($search_name) == count($search_txt_name));

いろんな箇所を毎回変更しなく済むように、配列で定義しておきます。
今回はgoogle,bing,amazon,rakutenを検索対象としました。しかし、新たに追加するさいは検索処理については別の所で記述する必要あり・・・

表示出力functionとタブ切り替えの処理

//表示出力
	function DisplayMetaBoxForChanceKeywordSuggest()
	{
		// 変数の使用範囲のおまじない
		global $search_name;
		global $search_txt_name;
	?>
	<style type="text/css">
		/* タブの見た目に */
		#tabs ul {overflow:hidden; height:auto; list-style:none; border-bottom:1px solid #cccccc;}
		#tabs li {float:left; display:inline; margin-left:10px; padding:5px; border:1px solid #ccc; border-bottom:none; border-radius:10px 10px 0 0;}
		/* 最初はパネルは非表示 */
		#tabs .panel {display:none;}
	</style>
	<script type="text/javascript">
	jQuery(function() {
		jQuery('#tabs a[href^="#panel"]').click(function(){
			//一旦消す
			jQuery("#tabs .panel").hide();
			//押された要素のみ表示
			jQuery(this.hash).fadeIn();

			// テキスト定義
			<?php
			$search_type_name = "";
			for( $i = 0; $i < count($search_txt_name); $i++ )
			{
				$search_type_name .= '"'.$search_txt_name[$i].'で検索"';
				if( $i < (count($search_txt_name) - 1) )
				{
					$search_type_name .= ',';
				}
			}
			echo 'var a_search_type =['.$search_type_name.'];';
			?>
			// 押したタブの番号を取得
			var index = jQuery('#tabs a[href^="#panel"]').index(this);
//			console.log(index);
			// 検索ボタンの名称を変更
			jQuery("#find_chance_keyword_suggestion_button").val(a_search_type[index]);

			return false;
		});
		//デフォルト設定は一つ目
		jQuery('#tabs a[href^="#panel"]:eq(0)').trigger('click');
	})
	</script>

検索対象を切り替えをタブで実装しました。タブをクリックするとグーグル、ビング、アマゾン、楽天のサジェスト検索に切り替わります。ついでに検索ボタンの表示名もわかりやすくするためvalメソッドを使用して変更。

タブ切り替えの実装はSoftelさんの「 【Javascript】jQueryだけでタブ切り替えの例(また)」を参考にさせていただきました。

編集画面に表示する部分のhtml処理実装


	<div id="tabs">
		<ul>
			<?php
				// タブ表示
				for( $i = 0; $i < count($search_txt_name); $i++ )
				{
					echo '<li><a href="#panel'.($i+1).'">'.$search_txt_name[$i].'サジェスト</a></li>';
				}
		 	?>
		</ul>
		<table>
			<thead>
				<tr>
					<td><label for="keyword">キーワード:</label>
					<input type="text" id="keyword" name="キーワード" value=""/></td>
				</tr>
				<tr>
					<td colspan="100%">
						<div style="text-align:left;">
							<input type="button" class="button button-primary" id="find_chance_keyword_suggestion_button" value="" />
						</div>
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" id="check_search_all" name="check_search_all" value="1" >[a-zあ-んが-ぽ]を付加して検索</td>
				</tr>
				<tr>
					<td colspan="100%">
						<div style="text-align:left; font-size:12px;">
							<span>Created by <a href="http://istudyenglish.therightmistakes.com" target="_blank">nao</a></span>
						</div>
					</td>
				</tr>
			</thead>
			<tbody>
			<tr>
				<td colspan="100%">
					<?php
					// 検索結果表示箇所
					for( $i = 0; $i < count($search_name); $i++ )
					{
						echo '<div id="panel'.($i+1).'" class="panel">';
						echo '	<div id="'.$search_name[$i].'_keyword_suggest_result"></div>';
						echo '</div>';
					}
					?>
				</td>
			</tr>
			</tbody>
		</table>
	</div>

タブ表示やキーワード入力部、検索ボタン、検索結果表示箇所の実装になります。

検索用表示を作成

<script type="text/javascript">
		jQuery("#find_chance_keyword_suggestion_button").on("click", function() {
			var a_button = jQuery(this);
			var a_type = "";
			var a_search_all = "";

			// 変数定義
			<?php
			$search_type_name = "";
			for( $i = 0; $i < count($search_name); $i++ )
			{
				$search_type_name .= '"'.$search_name[$i].'"';
				if( $i < (count($search_name) - 1) )
				{
					$search_type_name .= ',';
				}
			}
			echo 'var a_search_type =['.$search_type_name.'];';
			?>
			a_search_type.some(function(val,index){
				var panel_name = '#panel' + (index+1);
//				console.log(panel_name);
				// ローディング表示
				if (jQuery( panel_name ).css('display') == 'block') {
					// 表示されている場合の処理
					var result_name = "#" + a_search_type[index] + "_keyword_suggest_result";
//					console.log(result_name);
					jQuery(result_name).html("<img src='<?php echo get_stylesheet_directory_uri(); ?>/images/gif-load.gif'/>");
					a_type = a_search_type[index];

					// いずれか一つだけなのでループ自体を中断
					return true;
					//return true;	trueを返せばループ自体を中断、falseはcotinue
				} else {
					// 非表示の場合の処理
				}
			});
			// チェックボックス
			if (jQuery('#check_search_all').is(':checked')) {
				// 指定した単語+[a-zあ-んが-ぽ]で検索
				a_search_all = "true";
			} else {
				// 指定した単語だけで検索
				a_search_all = "false";
			}

			a_button.prop("disabled", true);					// ボタン操作を禁止
			jQuery('#check_search_all').prop("disabled",true);	// チェックボタンも禁止

			jQuery.ajax({
				type: 'POST',
				url: '<?php echo admin_url(); ?>admin-ajax.php',
				data: {
					action: 'chance_keyword_suggestion',
					keyword: jQuery("#keyword").val(),
					search_type: a_type,
					search_all: a_search_all
				},
				success: function(data, status, xhr){
					// ローディング終了のためクリア
					a_search_type.some(function(val,index){
						var panel_name = '#panel' + (index+1);
						if (jQuery( panel_name ).css('display') == 'block') {
						    // 表示されている場合の処理
							var result_name = "#" + a_search_type[index] + "_keyword_suggest_result";
							jQuery( result_name ).empty();
							jQuery( result_name ).html(data);

							// いずれか一つだけなのでループ自体を中断
							return true;
						} else {
						    // 非表示の場合の処理
						}
					});

					// ボタン系許可
					a_button.prop("disabled", false);
					jQuery('#check_search_all').prop("disabled",false);
				},
				error: function(xhr, status, errorTh){
					// 表示クリア処理
					a_search_type.some(function(val,index){
						var panel_name = '#panel' + (index+1);
						if (jQuery( panel_name ).css('display') == 'block') {
						    // 表示されている場合の処理
							var result_name = "#" + a_search_type[index] + "_keyword_suggest_result";
							jQuery( result_name ).empty();

							// いずれか一つだけなのでループ自体を中断
							return true;
						} else {
						    // 非表示の場合の処理
						}
					});

					// ボタン系許可
					a_button.prop("disabled", false);
					jQuery('#check_search_all').prop("disabled",false);
				}
			});
		});
	</script>
	<?php
	}

サジェスト関連キーワードを検索している間のローディング表示の実装。検索ボタン、チェックボックスの操作禁止、許可。jQueryのajaxを使って、非同期に検索が行えるようにし成功したら出力結果をhtmlに反映。

ローディング画像の置き場所は<img src='<?php echo get_stylesheet_directory_uri(); ?>/images/gif-load.gif’/>で指定しています。お好みの場所に。

jQuery,Ajaxを使用して検索処理対応。グーグル、ビング、アマゾン、楽天などのAPIを利用する

投稿画面にサジェストツールを設置しようと考えたのは、寝ログさんの「自分のWordPressサイトにGoogleキーワードサジェストツールを設置する方法」の記事を見ていて固定ページに作成していたのですが、投稿の編集画面でサジェスト検索できると効率的に記事が書けると考えたから。

参考にしたのはgoogleサジェスト検索処理の部分だけになりましたが、手軽にアクセスできSEO対策に効果があるかわかりませんが、記事を書く際の指標にはなるかなと。なにかサジェスト検索が利用できなくなるとかの記事も見かけた気がしますが、グーグルだけでなくBing,amazon,楽天の関連キーワード検索も同様に追加してみました。

表示出力結果を作成する

function ChanceKeywordSuggest_getSuggestion()
	{
		global $search_name;
		global $search_txt_name;

		// POST経由でAjaxのリクエストデータを取得する
		$my_input_word		= array_key_exists("keyword", $_POST) ? $_POST['keyword'] : "";
		$select_search_type	= array_key_exists("search_type", $_POST) ? $_POST['search_type'] : "";
		$is_search_all		= array_key_exists("search_all", $_POST) ? $_POST['search_all'] : "";

		if (empty($my_input_word))
		{
			echo '<p>キーワードが入力されていません</p>';
			exit;
		}

		// 出力する表示結果を準備
		$str_html = "".$select_search_type." キーワード: '".$my_input_word."'";

		// 検索付加するか。
		if( $is_search_all == "true" )
		{
			$added_letters_array= array("","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","あ","い","う","え","お","か","き","く","け","こ","さ","し","す","せ","そ","た","ち","つ","て","と","な","に","ぬ","ね","の","は","ひ","ふ","へ","ほ","ま","み","む","め","も","や","ゆ","よ","ら","り","る","れ","ろ","わ","を","ん","が","ぎ","ぐ","げ","ご","ざ","じ","ず","ぜ","ぞ","だ","ぢ","づ","で","ど","ば","び","ぶ","べ","ぼ","ぱ","ぴ","ぷ","ぺ","ぽ");
			echo 'all search:';
		}
		else {
			$added_letters_array= array("");
			echo 'search:';
		}
		$str_html .= '<div style="clear:left"></div>';
		$str_html .= '<table class="tableForChanceKS">';
		$str_html .= '  <thead class="scrollHeadforChanceKS" style="display:block;">';
		$str_html .= '	<tr>';
		$str_html .= '	  <th>サジェスト元</th>';
		$str_html .= '	  <th>キーワード</th>';
		$str_html .= '	</tr>';
		$str_html .= '  </thead>';
		$str_html .= '  <tbody class="scrollBodyforChanceKS" style="display:block;overflow-y:scroll;width:100%;height:100px;">';
		foreach ($added_letters_array as $added_letter)
		{
			$my_input_word_added_letter=$my_input_word.$added_letter;
			if( $select_search_type == "google")
			{
				// hl:言語 output:toolbar xml取得 q:キーワード ie:input encoding oe:output encoding
				$url = "http://www.google.com/complete/search?hl=ja&output=toolbar&ie=utf_8&oe=utf_8&q=".urlencode($my_input_word_added_letter);

				$toplevel = simplexml_load_file($url);
	//			if (empty($toplevel)) {
	//				echo '<li>' . sprintf("simplexml_load_fileからのレスポンスエラー").'</li>';
	//				exit;
	//			}
				foreach ($toplevel->CompleteSuggestion as $completeSuggestion)
				{
					$suggest_word_array[] = $completeSuggestion->suggestion->attributes()->data;
					$str_html .= "<tr><td class=\"keywordforGKS\" style=\"table-layout:fixed;width:40%;\">".$my_input_word_added_letter."</td>\t<td class=\"resultforGKS\" style=\"table-layout:fixed;width:60%;\">".
					$completeSuggestion->suggestion->attributes()->data."</td></tr>\n";
				}
			}
			else if( $select_search_type == "bing")
			{
				// bing
				$url = "http://api.bing.com/qsonhs.aspx?mkt=ja-JP&q=".urlencode($my_input_word_added_letter);
				$json_decode_str = file_get_contents( $url );
				$toplevel = json_decode( $json_decode_str , true ) ;
//				var_dump($toplevel);
				foreach ($toplevel["AS"]["Results"][0]["Suggests"] as $field => $completeSuggestion)
				{
					$str_html .= "<tr><td class=\"keywordforGKS\" style=\"table-layout:fixed;width:40%;\">".$my_input_word_added_letter."</td>\t<td class=\"resultforGKS\" style=\"table-layout:fixed;width:60%;\">".
					$completeSuggestion["Txt"]."</td></tr>\n";
				}
			}
			else if( $select_search_type == "rakuten")
			{
				// rakuten
				// rid,sidは0にしていて問題ないの?問題あればrakutenは凍結する
				$url = "http://api.suggest.search.rakuten.co.jp/suggest?cl=dir&rid=0&sid=0&ie=utf_8&oe=utf-8&cb=cb&q=".urlencode($my_input_word_added_letter);
				$json_decode_str = file_get_contents( $url );
				$json_decode_str = preg_replace('/cb\((.+)\)/', '$1', $json_decode_str );	//取り出し方がわからないので、省いてデコード
				$toplevel = json_decode( $json_decode_str , true ) ;
//				var_dump($toplevel["result"]);
				foreach ($toplevel["result"] as $field => $completeSuggestion)
				{
					$str_html .= "<tr><td class=\"keywordforGKS\" style=\"table-layout:fixed;width:40%;\">".$my_input_word_added_letter."</td>\t<td class=\"resultforGKS\" style=\"table-layout:fixed;width:60%;\">".
					$completeSuggestion[0]."</td></tr>\n";
				}
			}
			else if( $select_search_type == "amazon")
			{
				// amazon
				$url = "http://completion.amazon.co.jp/search/complete?search-alias=aps&mkt=6&q=".urlencode($my_input_word_added_letter);
				$json_decode_str = file_get_contents( $url );
				$toplevel = json_decode( $json_decode_str , true ) ;
				//var_dump($toplevel);
				foreach ($toplevel[1] as $field => $completeSuggestion)
				{
					$str_html .= "<tr><td class=\"keywordforGKS\" style=\"table-layout:fixed;width:40%;\">".$my_input_word_added_letter."</td>\t<td class=\"resultforGKS\" style=\"table-layout:fixed;width:60%;\">".
					$completeSuggestion."</td></tr>\n";
				}
			}
//			break;
		}
		$str_html .= '  </tbody>';
		$str_html .= '</table>';

		echo $str_html;
		exit;
	}

	add_action("wp_ajax_chance_keyword_suggestion", "ChanceKeywordSuggest_getSuggestion");//ログインしているユーザーの場合


楽天のapiのrid,sidを0にしているんだけど、問題ないのかな。資料が見つけられなかったのと、参考にしたサイト(すみません、いろいろ調べていてどこか忘れてしまいました。)には細かいこととか書かれてなかったので、問題あれば楽天の検索は削除したほうがいいのかもしれない。

・PR

サジェストツールの動作確認

検索したいキーワードを入力後、検索ボタンを押すとローディング表示になります。時間がかかる場合があります。ローディング画像は「Loader Generator」を利用させていただきました。お好みで変更してください。
wordpress投稿画面検索中

google suggestionの検索結果。表示範囲が狭いのでスクロールできます。
wordpress投稿画面googleサジェストの検索結果

チェックボックスのON/OFFで入力した単語単体または[a-zあ-んが-ぽ]を付加して検索。
wordpress投稿画面seoキーワードサジェスト指定単語に検索ワード追加した検索結果

楽天サジェストを使用した検索結果例。
wordpress投稿画面楽天サジェスト検索結果

・PR


by A8.net

まとめ

上記の画像のような感じで、GoogleやBing,アマゾン、楽天のキーワードサジェストツールが作れました。そもそも文章力がないので、こういったツールを上手く活用できないかもしれませんが、ブログの記事タイトルや記事の書き方やコツやSEO対策に少しでも捗るとよいなぁと。

そして、わざわざサイトを移動したりなど手間をかけずに時間がかかる作業を少しでも減らし他の作業に割きたいですよね。

SPONSORED LINK
SPONSORED LINK

おすすめの商品を紹介しています。

no image

今まではToeflというと海外の大学留学への登竜門として利用されてきた英語試験だったかと思います

レビューを読む

同義語とあわせて覚えるTOEFLテスト頻出英単語4000 (TOEFL iBT Test パーフェクト対策シリーズ)

見出し語に対しての同義語、類義語が載っているのがプラス点だが、不満な点もありました。どういっ

レビューを読む

ETS TOEIC 公式実践書 LC+RC 1000 最新傾向 (教材+解説集)【韓国版】

・わからない英単語一覧 調べて更新英単語・熟語の意味を書き出していく。英単語帳代わりにして暗記し

レビューを読む



当ブログの人気エントリ一覧。おすすめです

  コメント

0
入力フォームを隠す

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


 
PAGE TOP ↑