nyaou.com

WordPress での自作テーマ作成まとめ

2012-12-16 14:56:22

WordPress で当サイトを作成するにあたって、色々行ったことまとめ。

どんなテーマを作成したいか

まずは、WordPress のテーマを作成するにあたり、私のしたいことを以下に明記します。

• WordPress を CMS として使用したい
• レスポンシブ Web デザインにしたい
• IE7 くらいまで対応させたい
• HTML5 + CSS3 で、角丸やアニメーションを実現したい
• SEO をある程度取り組んでいきたい

で、これらの条件を満たすために私が使用した JavaScript やプラグインが以下となります。

WordPress を CMS として使用したい

サイトの内容はいろんな物のレビューなので、ブログっぽい作りではあるんですが、ブログみたいにカレンダーとかコメントとかは必要なく、あくまで個人サイトっぽい感じに作りたかったのです。

やったこととしては、カテゴリーを固め、トップカテゴリーをメインメニューとして扱い、あとはパンくずリストつけたり、シングルページをシンプルにしたりと、そんなところです。

その際、以下の手順で実現しました。

01. サイドバー追加およびウィジェットのタイトル非表示

ウィジェットのタイトル非表示については、全ウィジェットのタイトルが非表示となるかと思うので、特定のウィジェットのみ表示させない場合は別途手を加える必要があると思います。

function.php

// サイドバー追加
if ( function_exists('register_sidebar') )
    register_sidebar(array(
    	'name'          => 'menu',
        'before_widget' => '',
        'after_widget'  => '',
        'before_title'  => '',
        'after_title'   => '',
    ));

// ウィジェットのタイトルを表示させない
function hiddenWidgetTitle($t) {
    return null;
}
add_filter( 'widget_title' , 'hiddenWidgetTitle' );

sidebar.php

	<!--?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('menu') ) : ?-->
	ウィジェットが設定されていません。
	<!--?php endif; ?-->

02. プラグインMy Category Order でカテゴリ順を操作。

使い方については、下記サイトが分かりやすいと思います。
簡単にプラグインの説明をすると、まず自分の好きな順にカテゴリーを入れ替えられます。
また、指定したカテゴリの表示・非表示も可能。
トップカテゴリのみ表示。という事も可能。
当サイトでは、メニューとフッターに使用しています。

• My Category Order ? カテゴリーを自由に並び替える

03.サイドバーを表示。

あとは、上記で設定したサイドバーをサイト上から確認するだけです。

04.プラグイン Breadcrumb NavXT でパンくずリスト表示。

使い方については、下記サイトが分かりやすいと思います。

• Breadcrumb NavXTでパンくずリストを表示

レスポンシブ Web デザインにしたい

今流行ですね。こちらはまとめサイトも豊富で、かなり助かりました。
特に下記サイトがわかり易かったです。

• CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

IE7 くらいまで対応させたい

今回、HTML5 + CSS3 で作成したので、それの対応になりますね。
こちらは以下の必須とも言える JavaScript を使用しました。
また、上記で紹介したサイトにも記載されていますが、レスポンシブ Web デザインにしたい場合は css3-mediaqueries.js の使用も必須ですね。

• html5shiv
  IE8以前のブラウザにHTML5を適用させる。
• IE9.js
  IE8以前のブラウザをモダンブラウザと同じ挙動にする。上記URLをそのまま設定。
• css3-mediaqueries.js
  CSS3のMedia QueryをIE8以前でも使用可能にする。

なので、WordPress でこれらの設定を行う場合は、下記のような記述を header.php に記載すれば良いかと思います。

header.php

	<!--[if lt IE 9]>
	<script src='<?php echo bloginfo('template_directory'); ?>/JS/html5shiv.js'></script>
	<script src='http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js'></script>
	<script src='<?php echo bloginfo('template_directory'); ?>/JS/css3-mediaqueries.js'></script>
	<![endif]-->

HTML5 + CSS3 で、角丸やアニメーションを実現したい

今回は、以下の JavaScript 等を使用しました。
どれもカッコイイ！！

• jQuery Masonry
• 画像なんていらない!! fontelloとCSS3を使って3Dボタンを作ってみた
• CSS3 Animated Bubble Buttons
• CSS3 PIE.htc

最後の CSS3 PIE.htc については、IE6 ～ IE8 に CSS3 の以下の要素を適用できるようになる。というもの。

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image

とても便利なのですが、場合によって使用できなくなったりと扱いづらい面もあるので、動かなくなったら一度ググる事をオススメします。

また、WordPress で使用する場合は、PIE.htc、PIT.php をテーマフォルダ直下に配置し、CSS ファイルには以下のように記述する事で、パスを気にすること無く全ページで利用できます。

Style.css

behavior: url(PIE.php);

SEO をある程度取り組んでいきたい

とりあえずソーシャルリンクは設置したかったので、以下のようにまとめて設置しました。

functions.php

//ソーシャルボタン表示
function viewSocialBar() {
?>
	<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none; width: 20px; height: 20px;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
	<a href="https://twitter.com/share" class="twitter-share-button" data-dnt="true" data-count="none" data-via="Twitterユーザ名">Tweet</a>
	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
	<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=button_count&show_faces=false&width=85&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:21px;" allowTransparency="true"></iframe>
<?php
}

single.php

<!--?php viewSocialBar(); ?-->

次にプラグイン All in One SEO Pack をインストール。
使用方法については、以下のサイトが分かりやすいと思います。

• 基本的な内部SEO対策　All in One SEO Pack

最後に、Google ウェブマスターツール の設定。
これは簡単なので、実際にウェブマスターツールのページに行って手順通り行えばいいと思います。

その他

共通 JavaScript

jQuery は WordPress の組み込みのものを使わず、Google APIs のものを使用しました。
その際、function.php には下記のように記載。

// 共通 JavaScript 登録
function registerScripts() {
	wp_deregister_script('jquery');
	wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js');
	wp_enqueue_script('masonry', get_template_directory_uri() . '/JS/jquery.masonry.min.js', array('jquery'), '2.1.01');
}
add_action('wp_enqueue_scripts', 'registerScripts');

google の CDN を使用する場合、 /1.6.1/ の部分を /1/ とすることで、最新版を読み込めます。私は最新版にしたら jQuery masonry が動かなくなったので、1.6.1を使用中。

add_action の第一引数を wp_enqueue_scripts とすることで、管理画面では読み込まれません。

アイキャッチ設定

また、今回はアイキャッチも使用したかったので、アイキャッチを使用可能にするべく、以下の1行を function.php に追加。

// 	アイキャッチを使用可能に
add_theme_support( 'post-thumbnails' );

転送設定

WordPress はサブディレクトにインストールしたので、デフォルトで WordPress にアクセスする場合は www.nyaou.com/サブディレクトリ/としないといけません。

これを、 www.nyaou.com とアクセスすると、サブディレクトリにアクセスできるように、設定しました。

手順としては、こちらのサイトに記載されていますが、ちょっとわかりづらいです。
予め、設定のパーマリンク設定を一度更新しておくとやりやすそうです。

• 既存のサブディレクトリをルートディレクトリとして表示する場合

要は、一般設定の「サイトアドレス（URL)」をルートディレクトリのアドレスに変更し、サブディレクトリ内にある .htaccess、index.php をルートディレクトリにコピー（移動ではなくコピーであることに注意！）
index.php を以下のように変更。

index.php

require('./wp-blog-header.php');

↓

require('./サブディレクトリ/wp-blog-header.php');

ルートディレクトリに index.php をコピー時、index.html などがある場合はこれを削除した方が良いです。
優先順位敵に index.php より index.html の方が優先される場合が多いため。

今までの管理画面に移動し、ログインする。
パーマリンク設定を更新する。

最後に

以上が、自作テーマを作成した上でのまとめです。
WordPress や HTML5 + CSS3 については、凄く沢山の解説ページがあり、大変わかり易かったです。
ただ、やはり間違った事や、不要な事まで書かれているサイトもちらほらありますので、自分なりに理解して作らないとだめですね。

また、レスポンシブ Web デザイン対応ってことで書きましたが、実は実機確認してなくて…（私はいまだにガラケーです）
実際にどう表示されるのか不安です。

Tweet