このサイトで配布しているEnhancing CSSプラグインとEnhancing JSプラグインは、それぞれ外部CSSと外部JavaScriptをWordPressに添付するプラグインです。

今回の記事では、これらのプラグインを使ってTwenty Tenテーマをカスタマイズする方法をご紹介します。

カスタマイズ例

以下の画像はTwenty TenテーマにEnhancing CSS及びEnhancing JavaScriptを使用して、外部CSS及びJavaScriptでカスタマイズした事例です。

CSSとJavaScript以外はメニューの設定も含めて全て同じです。もちろんテーマファイルの書き換えも一切行っていません。

はじめに

以下のサンプルを試す前にプラグインをインストールしてください。

• Enhancing JavaScript
• Enhancing CSS

メニューの位置を変更する

カスタマイズ例ではメニューの位置が画像の上部に変更されています。
この修正は、CSSでも可能ですが、JavaScriptにて行ないました。

1. まず、Enhancing JavaScriptの管理画面（外観->拡張JavaScript）を開いて、Enqueue Scriptsの中からprototypeにチェックを入れて保存してください。
   以上の操作でテーマファイル側にprototype.jsが組み込まれます。
2. 以下のソースをコピーしてJavaScriptのエディター内にペーストしてください。

コピー＆ペーストするソース

function init(){
  var oImg = $('branding').getElementsByTagName('IMG')[0];
  if (document.getElementsByTagName('BODY')[0].className.indexOf('home') >= 0) {
    $('masthead').appendChild(oImg);
  } else {
    $('branding').removeChild(oImg);
  }
}

Event.observe(window, 'load', init);

サイトタイトル部分に画像を使用する

1. まず任意のロゴ画像を作成して、WordPressのメディアからアップロードして、画像のURLをコピーしてください。
2. 以下のソースを”外観” -> ”拡張CSS” のCSSエディター内にペーストして、画像のパスの部分をアップロード画像と書き換えてください。（画像の横幅や高さもかえましょう！）

#site-title a
{
  background-image: url(/wp-content/uploads/2010/09/buttonw-grey-8bit.png);
  background-position: left top;
  background-repeat: no-repeat;
  display: block;
  width: 178px;
  height: 58px;
  text-indent: -9999px;
  overflow: hidden;
}

#site-description
{
  text-align: right;
}

サイトを確認してください。
もし、何も表示されていなければ画像のURLに間違いがあります。
また、ロゴ画像の上下左右が欠けている場合は、横幅と高さを調べて上記のソースと差し替えてください。

メニューをカッコよくする

以下のソースを”外観” -> “拡張CSS” のCSSエディター内に追加してください。

/* メニュー全体の背景の設定 */
#access
{
  background-color: #ffffff;
  background-image: url(/wp-content/uploads/2010/09/menu.png);
  background-repeat: repeat-x;
  background-position: left top;
  color: #000000;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 5px;
  padding: 5px 0;
}

/* メニューのリンク文字列 */
#access a
{
  color: #000000;
}

/* メニューの項目別の背景 */
#access li > a
{
  background-image: url(/wp-content/uploads/2010/09/menu-items.png);
  width: 150px;
  height: 40px;
  padding: 0px;
  text-align: center;
  margin-right: 3px;
}

/* メニューの項目別の背景（マウスオーバー及びカレントページ） */
#access ul li.current_page_item > a,
#access li:hover > a
{
  background-image: url(/wp-content/uploads/2010/09/menu-items.png);
  background-position: left bottom;
  color: #666666;
}

/* ポップアップメニューを無効にする */
#access ul li:hover > ul
{
  display: none;
}

まとめ

すごく、ざっとした説明で恐縮ですが、以上のような手順で、JavaScriptによるHTMLの書き換え＋CSSというテクニックを使用すれば、複雑なテンプレートタグを使用しなくても十分に実用的なサイトが作れることがおわかりいただければ幸いです。

参考までにサンプルで使用した画像をおいておきますので、ご利用いただければ上記の事例が簡単に再現できると思います。

サンプル画像のダウンロード