Webの記録

WordPressでオリジナルテーマ作りにチャレンジ3【header・footer編】

投稿日:2011年10月28日 更新日:

この記事は約 10 分で読めます。

オリジナルテーマのイメージ画像WordPressのオリジナルテーマ作りにチャレンジしています。

手順を数回に分けてメモしています。今回はその3回目です。
前回は、コーディングしたものを貼り付けた「index.php」 の中身を「header.php」「sidebar.php」「footer.php」に切り分けました。

今回は「header.php」「footer.php」部分を、PHP・テンプレートタグに置き換えていきます。

 
※今回、私が作成しようとしているテーマのグローバルナビゲーションは、固定ページとカテゴリが含んだものとなっています。
【2015.8.15追記】jQueryのライブラリをWordPressで使えるようにする「作業7」を追加しました。



オリジナルテーマの制作の流れ。

  1. html+cssで作ったサイトをWordpressへアップする
  2. html+cssをWordpressへアップしたものをパーツテンプレートへ切り分ける
  3. header・footerを作成 ←今回はココ。
  4. index.phpで各ページのベースを作成
  5. sidebar.phpでサイドバーを作成
  6. single.phpで記事の個別ページを作成
  7. page.phpで固定ページを作成
  8. トップページを作ってみる

 

コーディング内容はサイトによって違いますし、記述の仕方も人によって様々なので、これは参考程度に見て下さい。
初めてオリジナルテーマ作りをする為、もしかしたら別な方法でした方が良い場合もあるかと思います。その場合は、教えて頂けると助かります!

 

ひとまず、「header.php」と「footer.php」を以下の通りに書き換えていきます♪

 

作業1  「header.php」を書き換える

エンコードの種類の部分を以下に置き換えます。

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title>部分を以下に置き換えます。(「ページタイトル|ブログタイトル」という形式で表示されるようにした場合)

<title><?php wp_title('|', true, 'right'); ?> <?php bloginfo('name'); ?></title>

ロゴや<h1>、ホームのリンクのaタグのhref部分を以下に置き換え。home_urlがブログのurl出力となる。(以下はロゴに対してサイトのホームURLをリンクした場合の記述例。)

<a href="<?php echo home_url(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/rogo_img.png" width="129" height="109" alt="Motoshige" /></a>

<h1>の後のブログの説明文をコーディングで<p>タグの中に書いていたので、この部分の文章を以下に置き換えします。

<p><?php bloginfo('description'); ?></p>

 
プラグイン等を使えるようにするために、headの閉じタグ直前に以下を記述します。

//</head>の直前に記述する
<?php wp_head(); ?>

 

作業2  「footer.php」を書き換える

コピーライトの名前部分を、ブログの情報を取得する「bloginfo」に置き換え、下記のように記述します。

&copy; 2011 <?php bloginfo('name'); ?> All Rights Reserved.

プラグイン等を使えるようにするために、body閉じタグ直前に以下を記述します。

//</body>の直前に記述する
<?php wp_footer(); ?>

 

作業3  「functions.php」ファイル作成。

空の「functions.php」を作って、ローカルのWordpressの中に入れ込む(入れ込む手順は前回までの方法と同じ)

 

作業4  「カスタムメニューを有効にする」設定をします。

WordPressの管理画面の「外観」を見ると、今の段階では「ウィジェット」や「メニュー」が無いので、「テーマ編集」で「functions.php」を開き以下の分を記述します。記述が終わったら、「ファイルを更新」ボタンを押して保存させます。

<?php

//ウィジット

register_nav_menus(array(

'g_navi' => 'メニューバー'

));

?>


作業5  メニューを作成します。

「mainmenu」タブ作成画面

管理画面の「外観」→「メニュー」画面を開き、右上のメニューの名前を「mainmenu」とし、「メニューを作成」ボタンを押します。

画面左下の「固定ページ」と「カテゴリー」の中でグローバルナビに必要な項目にチェックを入れて、右上の「mainmenu」タブの中に追加していきます。順番はドラッグして移動させる事が出来ます。

左上の「テーマの場所」でプルダウンから「mainmenu」を選択して保存します。

作業6 「header.php」にメニュー出力の記述をする。

グローバルナビゲーションの<li>タグがあった部分を全部消し、以下の1行を記述すると自動的に<li></li>のhtmlが出力されるようになる。

<?php wp_nav_menu(array('theme_location' => 'g_navi')); ?>

ここで、「ファイルを更新」ボタンを押して保存させると・・・。
テキストでナビゲージョンがブラウザ表示されます。下記出されたhtmlは以下のようになりました。

<div class="menu-mainmenu-container">
<ul id="menu-mainmenu" class="menu">
	<li id="menu-item-40" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-40"><a href="http://localhost/wordpress/archives/category/gallery">作品集。</a></li>
	<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://localhost/wordpress/about">プロフィール</a></li>
	<li id="menu-item-39" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39"><a href="http://localhost/wordpress/archives/category/study-notebook">Web雑記帳。</a></li>
	<li id="menu-item-38" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-38"><a href="http://localhost/wordpress/archives/category/diary">つぶやき。</a></li>
	<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://localhost/wordpress/contact">お問い合せ</a></li>
</ul>
</div>
&nbsp;

style.cssでデザイン崩れなどを修正をして、うまく表示が出来たらOKです。
今の段階ではコンテンツが変わりませんが、ナビが機能してそれぞれのページにうまく移動出来ていれば今回分完成です。

※今回、私はフッターにもナビゲーションを付けたいので「functions.php」に、あと1行追加して下記のように記述しました。

<?php

//ウィジット

register_nav_menus(array(

'g_navi' => 'メニューバー',

'foot_navi' => 'フッターバー'

));

?> 

 

作業7 jQueryをWordPressで使えるようにする

jQueryの素敵なライブラリを見つけたので、WordPressでも使えるようにしたいという場合。
jQueryは既にWordPressの中にあるので、二重に読み込んだり不具合が起きたりします。
そんなわけで、WordPressのデフォルトのjQueryを利用するのに、ちょっとだけ作業があります。


header.phpの中でjQueryを読み込む

//<?php wp_head(); ?>の前に以下を記述
<?php wp_enqueue_script('jquery'); ?>

これで最新のjQueryを読み込んでくれます。
読み込まれたjquery


あとは、ライブラリのファイル自体にも少々手を加えます。
「$」と書かれている部分を全て「jQuery」に置き換えます。(書き換え前と、書き換え後のファイルイメージは以下の通り)

//書き換え前のファイルイメージ
$(function(){
//書き換え後のファイルイメージ
jQuery(function(){

これを制作したテーマの中でjQueryが動作するようになります。


今回はWordPress本体にあるjQueryを使ってみたのですが、これでうまくいかないこともあるようです。
まだ私は遭遇していませんが、もし遭遇した場合のために別の方法を説明されているブログをリンクします。
【参考ブログ】



次回は、コンテンツ部分にチャレンジしていきます♪
headerとfooterは、まだ残っている部分が少しありますが・・・これはコンテンツサイドバー部分が終わってからにします。

-Webの記録
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Facebookで友達が始めたアプリのリクエストをブロックする方法

この記事は約 1 分で読めます。 Facebookで友達が何かのアプリを始めた時、関係のない自分にまでリクエストがくる事があります。 よく言われる「スパムアプリ」なんだけれど、最近特に多いのが「マイカ …

no image

Worepress 前後の記事へリンクをつけたい時。

この記事は約 1 分で読めます。 記事の下に「古い記事へ」「新しい記事へ」という前後の記事へのリンクを表示しています。 単純に投稿順で前後の記事へリンクをさせるのか、または開いている記事と同じカテゴリ …

no image

フッターをブラウザの下部に固定する方法

この記事は約 1 分で読めます。 コンテンツが少ない場合、フッターの下に余白が出来てしまいます。 さすがに、ちょっと気になる・・・ってワケで、今回はフッターをブラウザの下部に固定する方法をいろいろ試し …

no image

苦手なJavaScriptをイチから勉強してみる【基本準備編】

この記事は約 1 分で読めます。今更なんですが、実はJavaScriptはちょっと苦手です。。。 jQueryのライブラリーを使って、部分的にいじる事はあっても・・・何となく「JavaScript」っ …

no image

画像最適化に便利な4つのツール

この記事は約 1 分で読めます。スマホを意識したWebページを作っていると、避けて通れない「画像最適化」。 昨年あたりから少しずつ使っていますが、見た目は変わらないのに軽量になるから不思議です! 私が …