ホームページを作ろう!WordPress編(9)メニューを作る

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

     

    w026

    今回は、各サイトの上部に表示される↑みたいなメニューと、サイドバーに表示するリスト形式のカテゴリー/タクソノミーメニューを作成してみます。教科書はいつも通りこちらです。

    ではまず早速ですが、上記メニューに登場する登場人物たち、サイトツリーの2段目にあった固定ページを登録していきましょう。サイトツリーはこんな形でした。

    w028

    この2列目の6枚の「page」で始まるページを、固定ページとして登録していきます。管理画面のメニューから、固定ページ→新規追加を選んでください。以下のようなフォームが表示されるので、冒頭の名前と下のスラッグを記入してください。スラッグは上のツリーで「page-*****.php」となっている「*****」の部分のことです。スラッグ欄が表示されて無い場合は右上の表示オプションを開いてスラッグにチェックを入れてください。出来たら右の赤い更新ボタンをクリックです。

    w037

    ここで、さっきのツリーを見るとブログにはスラッグがありません。これはどうすればいいでしょう?結論は適当なものを入れとけばいいです。たとえばblogと入れておいて、page-blog.phpというファイルを作らなければ次の優先順位にあたるpage.phpが自動的に表示される仕組みなので問題ありません。

    これを必要なページの枚数分繰り返して、固定ページ一覧を開くと、こんな感じにリストアップされているはずです。

    w038

    では次にメニューを作っていきましょう。管理画面でメニューを扱うには、以前作ったfunctions.phpファイルに1行設定してやる必要があります。次の通りです。

    <?php
    add_theme_support('post-thumbnails');
    add_theme_support('menus');
    ?>

    3行目が新たに追加した文で、これがメニューを扱いますという宣言になります。これを書いて「functions.php」を保存してください。そうしたら管理画面をリフレッシュすると「外観」メニューの中に「メニュー」という項目が出現しているはずです。これをクリックすると次の画面が表示されるはずです(されない場合は上部の「新規メニューを作成」リンクをクリックしてください)。

    w039

    ここでメニューの名前に識別名を入れて、「メニューを作成」をクリックします。するとこうなります。

    w040

    そうしたら左の固定ページの欄で、更新情報以外にチェックを入れて「メニューに追加」をクリックします。するとこうなります。

    w041

    あとはメニュー構造の中で項目をドラッグして順番を入れ替えてやったら、「メニューを保存」で保存します。

    同様にサイドバー用のメニューとして、カテゴリーのメニュー(blog-type)、ギャラリータイプ(gyallery-type)、ダウンロードタイプ(download-type)のメニューも作ります。

    出来たら次はグローバルメニューをヘッダに追加していきます。header.phpに以下の15行目を追加してください。

    <!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('url'); ?>"><?php bloginfo('name'); ?></a></h1>
          <div class="parallel"><?php wp_nav_menu('menu=global'); ?></div>
        </div>
        <div id="Contents" class="parallel">
          <div id="Main">

    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: #77543a;
    }
    *{
        margin:0;
        padding:0;
        font-family: sans-serif;
    }
    img{
        border:none;
    }
    h1 {
        font-weight: normal;
    }
    a:link, a:visited {
        color: #77543a;
        text-decoration: none;
    }
    a:hover, a:active {
        color: #574229;
        text-decoration: none;
    }
    h1 a{
        text-decoration: none;
        font-size: 36px;
    }
    #Screen {
        width: 950px;
        background: #fff;
        text-align: left;
        margin: 0 auto;
    }
    #Header {
        padding: 10px 0 15px;
        text-align: left;
    }
    #Header h1 {
        padding: 0 0 10px 20px;
    }
    #Footer .copy {
        color: #666;
        text-align: center;
        font-size: 10px;
    }
    #Contents {
        min-height: 400px;
        margin: 0 auto;
        text-align: left;
    }

    サイト全体の色合いをこげ茶色で統一したいと思い、全体の背景をまず変更しています(13行目)。

    あわせてリンクの色も、通常茶色、ホバー時こげ茶色にしています(26〜33行目)。

    タイトルの文字は少し大きくしました(36行目)。

    サイトのヘッダー、コンテンツ、フッターを束ねた全体divのクラスScreenで全体の幅を定義し、背景を白にしています(38〜43行目)。これに伴い、ヘッダー、フッター、コンテンツのwidth定義は一旦外し、色やマージンなど微調整しています。

    これで一旦画面表示を見てみましょう。こんな感じになっているはずです。

    w042

    作ったグローバルメニューの項目が一応リストアップされているはずです。

    次回は、このグローバルメニューをメニューバーの形にしていきましょう。


    コメント
    コメントする








       

    calendar

    S M T W T F S
        123
    45678910
    11121314151617
    18192021222324
    25262728293031
    << August 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

    楽天ブックス

    楽天