ブログの説明文

[php]

<meta name="description" content="（ブログの説明文）" />

[/php]

ブログの説明を書きます。Google検索時に表示される部分になります。【head】内に記入します。

記事タイトル｜ブログタイトル

[php]

<title><?php bloginfo(‘name’); wp_title(‘ − ‘, true, ‘right’); wp_title(); ?></title>

[/php]

タイトル表示タグです。記事タイトルとブログタイトルの間を縦棒（｜）で区切ってます。タブのところとかに表示される文字になります。【head】内に記入します。

WEBフォント

[php]

<link href=’http://fonts.googleapis.com/css?family=Maven+Pro’ rel=’stylesheet’ type=’text/css’>

[/php]

今回使用したのは Google Fonts になります。ヘッダーでURLを読み込んで、CSSで指定するだけなのでラクですが、英数字オンリーです。今回このブログでは3種類のフォントを使わせて貰ってます。【head】内に記入します。

CSSファイル読み込み

[html]

<link href="<?php bloginfo(‘template_url’); ?>/reset.css" rel="stylesheet" type="text/css">
<link href="<?php bloginfo(‘template_url’); ?>/single.css" rel="stylesheet" type="text/css">
<link href="<?php bloginfo(‘template_url’); ?>/category.css" rel="stylesheet" type="text/css">
<link href="<?php bloginfo(‘stylesheet_url’); ?>" rel="stylesheet" type="text/css">

[/html]

このブログではCSSファイルは合計４つ読み込んでます。本当は一つにまとめてトラフィックを抑えたいんですが、チョコチョコ修正が入るとこの方が管理しやすいので分けてます。トップページ用と記事用、その他カテゴリー別など、で分けてます。

ちなみにWordPressで【style.css】以外のCSSファイルを読み込むときは<?php bloginfo(‘template_url’); ?>/（ファイルのルート）で指定できます。style.cssは<?php bloginfo(‘stylesheet_url’); ?>でOKです。全て【head】内に記入します。

ファビコン指定

[html]

<link rel="shortcut icon" href="<?php bloginfo(‘template_directory’); ?>/（ファビコンのファイルへのルート）" />

[/html]

タブに表示される小さいアイコンです。これがあると覚えて貰いやすかったり、RSSリーダーで表示されたり（ファビコン取得機能がある場合）、他のWEBキュレーションサービスでも表示されル場合もあり、とちょっとしたメリットがあります。【head】内に記入します。

JavaScriptファイルの読み込み（jQuery使用）

[php]

<?php wp_enqueue_script(‘（ハンドル名）’, get_bloginfo(‘template_url’) . ‘（/script/スクリプトのファイル名）’, array(‘jquery’)); ?>

[/php]

【ハンドル名】は重複しないようにしたら好きな名前で。 ただし、一部予約語として使用不可な名前もあります。 詳細は wp_enqueue_script:WordPress私的マニュアル で確認を。

Google Analyticsコード

アクセス解析は必須です。 Google アナリティクス公式サイト – ウェブ解析とレポート機能 – Google アナリティクス からGoogleアカウントでログインして登録したら、あとはコードを貼るだけです。

ちなみに僕は アクセス解析をPC前でガリガリやるよりも、iPhoneでチョイチョイ見てる派です。いろいろいろいろとアプリを試しては斬って試しては斬ってした結果、現在毎日使用しているアプリはコレです。

Quicklytics – Google Analytics Appver. 8.2

現在の価格: ￥450
iTunes で見る
iPhone/iPadの両方に対応

※　この価格は記事掲載当時のものです。購入の際は金額のご確認をお願いします。

使っている理由としては、【起動が速い】【見やすい】【同期が早い】【カスタマイズがけっこうできる】【記事ごとのアクセス順で、記事名が日本語表記される】【オシャレっぽい】とかです。
あと、デフォで1週間単位が見れたらラクかな、くらい。

IEをHTML5対応

[html]

<!–[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>

[/html]

【header】とか【footer】とか【nav】とかHTML5用の要素をIE8以下でもむりくり対応させるスクリプトです。が、 html5shiv.jsを使うのをやめることにしました | Webamb | ウェブアンブ といった話もあるのでまぁ、使うかどうかは自己責任にて。【head】内に記入します。

ファビコン指定

[html]

<link rel="shortcut icon" href="<?php bloginfo(‘template_directory’); ?>/image/favicon.ico" />

[/html]

サイトのファビコンはなるべく使いましょう。やっぱり、味気ないものより愛着も湧きます。

コードは【header】内のCSS後くらいにでも記入してください。あと、【/image/favicon.ico】のところをファビコン画像までのルートへ変えて使って下さい。

また、ファビコン作成なら X-Icon Editor がオススメです。ドラッグアンドドロップでサクサク作れますよ！

忘れず！　wp_head()

[php]

<?php wp_head(); ?>

[/php]

おまじないと思って必ず記述を。僕も今回忘れてｗシンタックスハイライトとかコンタクトフォーム７とか、いろんなプラグインで不具合が起こって大変でした。よ。</head>タグの直前くらいでOKです。

ロゴにリンクを

主に タイトルロゴ など、h1タグで囲むロゴにはトップページへのURLが指定してあります。

[php]

<h1>
<a href="<?php bloginfo(‘url’); ?>">
<img src="<?php bloginfo(‘template_url’); ?>/images/LogicA.png" alt="LogicA" width="" height="" />
</a>
</h1>

[/php]

bloginfo(‘url’)でトップページへのリンクを設定します。

画像ファイルの指定は【index.php】があるディレクトリからルートを指定しますが、bloginfo(‘template_url’)でトップのディレクトリを指定しないとエラーが出ます。なので必ずimgタグなどではこれを書いて下さい。そのあとに画像ファイルまでのルートを書いたらOKです。

ナビゲーション

[php]

<nav>
<div id="nav"><a id="toTop" href="#（ページ全体を囲っている要素のID）"></a>
<ul>
<li>
<a href="<?php echo get_category_link(‘3’);?>">WordPress</a>
</li>
<li>
<a href="<?php echo get_category_link(‘4’);?>">jQuery</a>
</li>
<li>
<a href="<?php echo get_category_link(‘5’);?>">HTML,CSS</a>
</li>
</ul>

</div><!– #nav –>
</nav>

[/php]

このブログではナビにはカテゴリー別のリンクを指定しています。特定のカテゴリーのリンクは<?php echo get_category_link(‘カテゴリーID’);?>で取得できます。

カテゴリーIDの調べ方は、WordPressのダッシュボードから【投稿】→【カテゴリー】→【調べたいカテゴリ名】と順にクリックすると、URLにIDが出ます。URLのなかに【category&tag_ID=ほにゃらら】とあるので、このほにゃららの数値がカテゴリーIDです。

また、ナビゲーションバーの何もないところをクリックすると【トップへ戻る】ようにしてみました。ナビ要素にリンクを付け、ページ全体を囲っている要素のIDを指定しています。

※ これだけだとページのトップに瞬間移動してしまうので、スルスルっとスクロールさせたい場合は 見出しを自動で目次化して クリックするとスムーズにスクロールさせる（スムーズスクロール編） を併用してもらうとカンタンにできますのでご参考まで。

サイドバーもここで呼んでます

ウチのブログはサイドバーを隠してます。ナビバーの右端の【≡】をクリックしてみてください。ニョキンって出て来ます。
なのでheader.phpで読み込んでます。

[php]

<?php get_sidebar(); ?>

<button id="sideBt">≡</button>

[/php]

サイドバーのニョキンっていうアニメーションはjQueryでやってます。こんどHowToしてみます。

header.phpは以上でした！