wordpressのヘッダーを編集

wordpressは基本的にヘッダー、メイン、サイドバー、フッターといった領域で構成されています。このうちサイドバーは、右か左に配置されています。よく2カラムや3カラムといった表現をしますが、これはサイドバーが一つだと2カラム、二つだと3カラムという意味になります。カラムとは表形式の列のことをいいます。ヘッダー部は、ページの上側のことを指していて、wordpressだと大抵はHTMLタグのBODY前後から上側の領域のことです。前後と表現したのは、wordpressのテーマによっては、BODY直下にメニューを配置しているヘッダーのテンプレートもあるからです。また、HTMLではHEADタグもあり、本来ヘッダーといえばHEADタグで囲まれた範囲のことをいいます。

wordpressのヘッダーの中身

本来のHTMLではDOCTYPE宣言から始まりますが、wordpressのヘッダー（header.phpのこと。以下ヘッダーと呼びます）では、DOCTYPE宣言の上に「session_start」や「cookie」に関わるphpコードなどを追記する場合があります。一般的なテンプレートだとコメントが入っていることと思いますが、自作や外注など特別仕様のwordpressテンプレートを使っている場合はゴニョゴニョ入れたり、記述されていることがあります。

DOCTYPE宣言の次には、HEADタグがあり、その中にTITLEやMETA、LINK、script、styleタグ、そしてwordpressの独自関数である「wp_head」といったものがいれられ、HEADを閉じたところでその次にBODYタグが記述されます。この下にもdivやnav、headerなどがゴニョゴニョはいり、メイン部の直前で終了というのがwordpressのヘッダー部のパターンとなります。

wp_head

wordpressのwp_headには、wordpressが自動的に選択したものがはいります。例えばCSSやjavascript、RSSフィードリンク、また外部からjQueryなどのライブラリを引っ張っていることもあります。ただ、wordpressの標準だと必要のないコードが入ることもあるため、こういったケースでは、「functions.php」へremove_action関数を記述することで特定のアクションフックに付加されている関数を取り除くことができます。remove filterというものもありますが、remove_actionの別名で、どちらを使っても同じ結果を出力します。

削除用remove_actionのつかいかた

第一引数にフック名、第二引数に取り除きたい関数名、第三引数に優先度を設定。四つ目もありますが、こちらは関数が受入れる引数の数を指定します。うまく削除されない場合、第三引数の優先度を変えることで正常に動作することがあります。

ヘッダーのjqueryをフッターに移動

以下はwordpressのアクションフックで無名関数（クロージャ）を用いており、テーマの「functions.php」へ記述します。また、「is_admin」を否定して条件分岐しており、こうすることでwordpressの管理画面においては適用されないようにしています。その他、②と③を省いて①だけにすると、単純にjqueryだけが削除されます。②の部分でURLが置き換わり、③を記述することでヘッダーのjqueryがフッターへ移動します。ただ、jqueryを下側へもっていくと上手く動作しないこともあるので、その場合はヘッダーで出力して下さい。

編集

wordpressのヘッダー部はHTMLを直接入力できます。編集したい場合は、phpのコードを削除しないように追記や削除をすればよいだけです。また、wordpressのテーマは大抵、cssやjavascriptを外部ファイルとしていますが、ヘッダー部に直接書込むこともできます。ただ、量が多い場合は「style.css」などに追記するか、外部ファイル化したほうが管理しやすくなります。

筆者の場合、必要に応じてphpファイルをテーマに放り込んでインクルードすることが多いため、cssであろうとjavascriptであろうと、そのファイルに直書きします。wordpressの「style.css」に書込んでたら、変更したい時に一々スタイルシートを確認しなければならず、仮にコメントをいれて分かりやすくしていても探すのに手間がかかるためです。wordpress初心者のかたは別として、ちょっとした量ならインラインで記述したほうが管理面で合理的のような気がします。

画像

本来は管理画面から変更するべきなのですが、筆者はあまりこれをしません。ヘッダーの画像って利用していても変更することがほとんどないからです。そのため、画像を利用するときは、images（テーマによって異なる可能性もある）ディレクトリへ用意した画像をアップロードして「img」の「src」属性を変更します。そもそも画像が必要なければ該当部分の「src」属性を含む「img」タグを削除します。その際、空のボックスの高さがおかしくなったら、cssのをインライン直書きで、marginをマイナス指定するという力業もお薦め。

プラグイン

ヘッダーやフッターにコードを挿入する「Insert Headers and Footers」といったwordpress用のプラグインもあります。テーマを頻繁に変更するならプラグインを使ったほうが管理しやすくなります。初心者のかたはプラグインを利用しながらスキルを磨いたほうが良いかもしれませんね。しかし、自分でワードプレスのテンプレートを作り出すようになると、こういったものはまず使いません。

ワードプレスのプラグインは基本的に様々な条件下で利用できるよう、余分な処理が入っています。該当するディレクトリ内を確認したら分かると思いますが、複数のファイルに分割されて、長々とコードが記述されていることも多いです。そのため、幾つもインストールしていくと、だんだんワードプレスの動作が重くなっていきます。最終的にワードプレスを使いこなすようになると必要のないものはインストールせず、「functions.php」へ関数を書いて簡単にすませよう、という衝動にかられるようになることとおもいます。多分。特にワードプレスのバージョンアップでアップデートされず、きちんと動作しない放置されているプラグインが出てくると、きっとそうおもいます。

まとめ

ワープレのヘッダー部で弄ることが多い部分は、初心者のかただと画像やメニューかも知れません。しかし、ある程度ワープレになれてくると、今度はヘッダーのソースコードに余計なものが挿入されていて、これがだんだん気になっていきます。つかわないものが結構あるからです。また、そのせいで「レンダリングを妨げるリソース」といったように、スピードテストで表示されることもあります。不要でしかも除外できるのであれば、除外したほうが良いのは確かなことです。必要なものはヘッダーからフッターへ移動させてしまいましょう。レンダリングとは英数字などで分かりにくいデータをプログラムで可視化することを言います。