ホームページを作ろう!WordPress編(7)ヘッダーとフッターを作る

0
    JUGEMテーマ:wordpress
    JUGEMテーマ:ホームページ作成

     

    w024

    w025

    WordPressは簡単・便利といいますが、デフォルトのテーマをちょろっとカスタマイズする以上のことをやりたかったら、WordPressにやりたいことを指示する能力、つまり自分で普通にHTMLとCSSでサイトを作る能力(もちろん調べながらでOK!)が必要です。今回はそのサイト作りの基礎的なところは省略している部分がありますので、その点ご了承ください。

    と、前置きをしたところで、早速コードを書いていきましょう。

    今回のサイトは、前にも書きましたが、次の書籍を参考に組み上げたものですので、合わせてそちらも参照いただくことをお勧めします。

    さて、今日のお題の1つ目はこちらです。

    1.header.php

    これはWordPressで決められたファイル名で、サイトのHTMLの最初に書くヘッダー(<head>〜</head>)と、物理的にサイトの上部に表示するものを支持するファイルです。このファイルを全ページから呼び出すことで、画面設計の統一と、維持の容易化を図るというわけです。

    まず、最初に用意すべきheader.phpはこちらになります。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title><?php bloginfo('name'); ?></title>
      <meta name="description" content="<?php bloginfo('description'); ?>" />
      <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="all" />
      <link rel="shortcut icon" href="http://papercraft.techikun.com/images/pe2.ico" />
      <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
      <div id="Screen">
        <div id="Header">
          <h1><a href=""><?php bloginfo('name'); ?></a></h1>
        </div>
        <div id="Contents" class="parallel">
          <div id="Main">
    

    HTML独特の文法の中にWordPress独自の関数が混じっていて少しわかりにくいかもしれません。実はHTML独特の文法については、もう少し省略してもサイトは表示されます。サイト表示に必要な最小限の記載内容については、前述のの参考図書「Webデザイナーのための WordPress入門 3.x対応 (Books for Web Creative) 」をご参照ください。

    では解説に入ります。

    1行目:使用するHTML文法のバージョンを宣言します。

    2行目:言語とネームスペースの宣言です。

    4行目:サイトで使用する文字コードの宣言です。

    5行目:サイトのタイトルを埋め込む一文です。この文章を指定する部分で見慣れないPHPのコマンドが書かれています。このbloginfo()という関数はWordPress独自の関数で、このようにテンプレートファイルの中で使われるものを「テンプレートタグ」と呼びます。bloginfo()というテンプレートタグは、引数に様々なキーワードを指定することで、様々なブログ情報を引き出し、それをテキストにして出力してくれる便利なテンプレートタグです(テキスト出力せずに情報を変数に入れて使いたい場合はget_bloginfo()というテンプレートタグを使います)。全部で20種類のキーワードが用意されています。代表的なものを以下に示します(すべてのリストはWordPress Codex日本語版を参照ください)

    • name :設定→一般→サイト名、の記載内容を読み出します。
    • description:設定→一般→キャッチフレーズ、の記載内容を読み出します。
    • url:設定→一般→サイトアドレス、の記載内容を読み出します。
    • wpurl:設定→一般→WordPressアドレス、の記載内容を読み出します。
    • template_url:現在のテーマフォルダのフルパスを取得します。
    • stylesheet_url:style.cssのURLを取得します。

    今回は'name'を指定していますので、サイトのタイトルがに埋め込まれ、この文章がGoogle検索結果にサイトの説明文として表示されます。なお、以前はこれと併せて検索でヒットしてほしいキーワード等も書いていましたが、やりすぎたせいで最近はGoogleもYahooもこれを見てくれなくなったそうですので、今回は割愛しました。

    6行目:サイトの説明文を埋め込む一文です(最初は無くてもかまいません)。

    7行目:CSSを読み込ませています。先ほど出てきたbloginfo()の'stylesheet_url’が使われています。

    8行目:ブラウザのタブなどに表示される小さなアイコン「ファビコン」を指定します(最初は無くてもかまいません)。これは16×16pxのico形式の画像ファイルです。「ファビコン 作成」等で検索すると簡単な変換ツールが色々公開されているのが見つかります。

    9行目:wp_head()は、プラグインなどがヘッダに何か書き込みたいときに使用するタグです。各所で使われているので、ここはこの通り書いておいてください。

    11行目:bodyタグにbody_class()というテンプレートタグが埋め込まれています。これは表示している画面に応じて適切なCSSのクラスを表示してくれるタグです。まずはこの通り書いておいてください。

    12行目:画面全体をまとめるdiv要素にScreenというidを付けています。このタグはfooter.phpで閉じますので、ここでは対応する</div>はありません。

    13〜15行目:画面上部の共通ヘッダ部分です。h1タグを用いてbloginfo()でサイト名を表示させ、サイトのURLをリンクさせています。これでサイトのどこからでも左上のサイト名をクリックするとトップページに戻れるようにしています。

    16行目:ヘッダより下の実際の中身部分をまとめるdiv要素です。これもfooter.phpで閉じます。ここにはサイドバー、パンくずリスト、メインのコンテンツの開始タグ等が入りますが、今はまだメインコンテンツの開始タグしかありません。

    17行目:メインコンテンツの開始タグです。これもfooter.phpで閉じます。

    続いてこちら。

    2.footer.php

    ここでは、header.phpで開いたdivタグのクローズと、画面下部のコピーライト表示を行います。最終的にはフッター部分にも簡単なナビゲーションメニューを置きますが、それはまた後ほど。

    ではコード行きます。

    </div>
    </div>
    <div id="Footer">
    <div class="copy">&copy;Copyright 2004-<?php echo date("Y") ?> ******, All rights reserved.</div>
    </div>
    </div>
    <?php wp_footer(); ?>
    </body>
    </html>
    

    1行目:ヘッダー最後のid=”Main”のdivタグのクローズです。

    2行目:ヘッダー最後から2番目のid=”Contents”のdivタグのクローズです。

    3〜5行目:コピーライト表示です。「&copy;」は実際は©と表示されます。その少し後ろにある<?php echo date(“Y”) ?>は、現在の年を出力します。echoがテキストをhtmlに出力するコマンド、date(“Y”)が現在の日付を取り出す関数で、引数に”Y”としてやることで年だけを返すことができます。これにより、何年たってもその時点の年までのコピーライト表示を自動的に行うことができるのです。

    6行目:ヘッダーの最初のdivタグ、id=”Screen”を閉じるタグです。

    7行目:wp_footer()は、ヘッダの7行目にあったwp_head()と同様に、プラグインが何かフッターにコードを出したいときに使うテンプレートタグです。特に問題が無ければこのように書いておいてください。

    8〜9行目:ヘッダーで出力したbodyタグとhtmlタグのクローズです。これで、ヘッダーとフッターを合わせてhtmlの様式が整い、すべてのタグがクローズされました。

     

    さて、せっかくここまで書いたので、画面表示を見てみたいと思います。

    まず、今書いたヘッダとフッタの呼び出しを、index.phpに記述します。

    <?php get_header(); ?>
    <?php get_footer(); ?>
    

    1行目がheader.php、2行目がfooter.phpを呼び出すテンプレートタグです、これだけです。
    続いて、cssを書いていきます。

    /*
    Theme Name: for blog
    Theme URL: http://wordpress.techikun.com/
    Description: ブログ記事用の練習テーマ.
    Auther: Tetsuya Nagase
    Auther URL: http://wordpress.techikun.com/
    Version: 1.0
    Tags: CMS
    */
    html,body {
    text-align: center;
    margin: 0 auto;
    background: #000;
    }
    *{
    margin:0;
    padding:0;
    font-family: sans-serif;
    }
    h1 {
    font-weight: normal;
    }
    h1 a{
    text-decoration: none;
    color: #FFF;
    font-size: 24px;
    }
    a{
    text-decoration: none;
    }
    #Header {
    width: 950px;
    margin: 20px auto;
    text-align: left;
    }
    #Footer {
    width: 950px;
    margin: 20px auto;
    text-align: center;
    color: #FFF;
    font-size: 12px;
    font-weight: bolder;
    }
    #Contents {
    min-height: 400px;
    width: 950px;
    margin: 0 auto;
    text-align: left;
    }
    

    1〜9行目:前に書いた、テンプレートの説明等です。
    10〜14行目:htmlとbody全体の体裁を決めます。ここでは仮に中央ぞろえ、マージン上下0、左右自動、背景黒にしています。
    15〜19行目:すべての要素に対して、マージンとパディングの設定をクリアします。
    20〜27行目:ヘッダーでサイトのタイトルに使うh1とaタグの体裁を設定します。
    28〜30行目:その他のaタグの下線を消します。
    31〜35行目:画面上部のヘッダー部の体裁を決めます。中身の幅が950px、マージンは上下20px、左右自動の中央ぞろえ、テキストは左寄せです。
    36〜43行目:画面下部のフッター部の体裁を決めます。幅やマージンはヘッダと同じですが、文字のセンタリングや文字サイズなどが変わっています。
    44〜49行目:ヘッダーとフッターの間に表示される中身、コンテンツの体裁を決めます。まだヘッダーとフッターしか作っていませんが、WordPressは頭のいいことに自動的にid=Contentsのdiv要素を挿入してくれるのです。なのでここでmin-heightなどをせっていすれば、これがヘッダーとフッターの間に空白となって表示されるのです。

    ということで、以上、header.php、footer.php、index.php、style.cssを作ったテーマフォルダに入れたら、管理画面の左上のホームマーク(サイト名を設定してあればサイト名も表示されているはずです)をクリックしてサイトを表示させてみてください。

    どうでしょう、こんな風に表示されれば成功です。

    次回は、サイトの構造を決めて、メニューを作ります。


    コメント
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天