wordpress アクションフック

An Introduction to WordPress Action Hooks
function.phpに追加する。

add_action('wp_head', 'insert_some_css');
//以下、関数のコードを追加

第一引数にアクション名、第二引数にアクションフック名を記述する。

要素の情報を表示する

firefoxのwebdeveloperには同じような機能（しかも高機能）がすでにありますが、似たようなものを作ってみました。

var mouseBox = function(element){

 var elem = document.getElementsByTagName(element);
 for(var i=0; i < elem.length; i++)
 {
　　　　　　//すべての要素にイベントを設置
  elem[i].addEventListener('mouseover',function(e){//
  
　　　　　　//わかりやすいよう枠でかこむ 
  this.style.border = '1px solid';
  this.style.borderColor = 'red';
  
　　　　　　//新しくdivを作成し表示場所をつくる。
  var child = document.createElement('div');
  child.id = 'child';
  child.style.border = '1px solid';
  child.style.background = '#FFE4B5';
  
               //css情報の取得  
  var rule = getMatchedCSSRules(this,'');
  var style = rule[rule.length - 1].cssText;
  
　　　　　　//取得した情報を表示
  var text = document.createTextNode(element + '#' + this.id + ' .' + this.className + '  style ' +style);
  this.appendChild(child);
  child.appendChild(text);
  e.stopPropagation();//バブリングをストップ
  },false);
  
　　　　　　//マウスが離れたら表示場所を削除
  elem[i].addEventListener('mouseout',function(e){
  this.style.border = 'none';
  this.style.borderColor = '';
  var child = document.getElementById('child');
  child.parentNode.removeChild(child);
  e.stopPropagation();},false);
 }
}

今回はdivを作ってそこへ情報を流し込んでいますが、ツールチップみたいにしてもよさそうです。あとcssスタイルが改行されてないままテキストで出てるので、ちょっと読みにくいです。