ホームページを作ろう!WordPress編(13)固定ページを作る

0

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

    w056

    今回のサイトでは、固定ページを5つ用意しました。そのうち3つがブログ、ギャラリー、ダウンロードの各投稿タイプのトップページ、残りが準静的なページであるaboutページとリンクページです。まずは前者の代表としてブログコーナーのトップページ作成についてまとめます。

    まずファイル名はpage.php。page-blog.phpの-blogを省略しました。page-blog.phpを探しに行って見つからないと、次の優先順位にあるpage.phpが呼び出されるのでしたね。その分ギャラリーやダウンロードは省略せずにpage-gallery.php、page-download.phpとしています。

    ではまずHTMLを見ていきましょう。

    <?php get_header(); ?>
    <h2>ブログ</h2>
    <?php query_posts('post_type=post&posts_per_page=3&paged='.$paged); ?>
    <?php if(have_posts()): while (have_posts()): the_post(); ?>
    	<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    			<div class="metabox parallel">
    				<time class="post-date" datetime="<?php echo get_the_date("Y-m-j") ?>"><?php echo get_the_date(); ?></time>
    				<div><span>カテゴリー:</span><?php the_category(''); ?></div>
    			</div>
    	<div class="image"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium'); ?></a></div>
    	<?php the_content(); ?>
    <?php endwhile; endif; ?>
    <br/>
    <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
    <br/>
    <?php wp_reset_query(); ?>
    <?php get_footer(); ?>

    1行目、17行目:共通のヘッダーとフッターの出力です。

    2行目:ページタイトルはh2でマークアップです。

    3行目:投稿取得条件を設定するquery_posts()です。ここでは投稿タイプ(=post)、1ページあたりの投稿表示数(=3件)そして現在のページをつないでいます。

    4行目、12行目:メッセージループです。

    5行目:投稿タイトルとパーマリンクを読み出して<h3>でマークアップしています。

    6〜9行目:記事のタイトル下に、投稿年月日とカテゴリーを読み出してきて表示しています。日付はget_the_date()、現在のカテゴリーはthe_category()です。「カテゴリー:」を<span>でマークアップしているのは、後でCSSでこれを左にfloatで送り、カテゴリー名を右側に流し込んで表示させるためです。

    10行目:アイキャッチ画像を、こんどは中間の大きさのmediumで表示し、これにもパーマリンクを貼っています。

    11行目:投稿本文を表示します。

    14行目:これはWP-PageNaviというプラグインで、プラグインをいれて、この1行を書くだけで、全ページへのリンクを表示するページナビゲーションを表示してくれるのです。超絶便利です。ポイントは16行目にあるwq_reset_query()より必ず前に書くことです。

    では追加したCSSです。

    .post-categories li{
        margin-top: 0;
        margin-left: 10px;
        list-style-type: none;
    }
    .metabox span{
        float: left;
        color: #8e8e8e;
    }
    .image{
        text-align: center;
    }

    1〜5行目:カテゴリー名の体裁です。ここでリストマーカーを無しにしています。

    6〜9行目:「カテゴリー名:」の文字の体裁です。左にfloatさせています。

    10〜12行目:アイキャッチ画像をセンタリングしています。

    どうでしょう?いともあっさりと投稿タイプトップページができてしまいました。WordPressの本領発揮といったところです。ギャラリーページとダウンロードページも、2行目のタイトルと、3行目のpost_typeを変えてやるだけでこのテンプレートがそのまま使えます。

    では残る2ページから、まずはaboutページ。旧サイトからhtmlだけコピーしてくるとこんな感じです。

    w057

    そうでしたここでは表組みを使っていたのでした。罫線くらい入れてあげましょう。

    #Contents #Main th{
        text-align: center;
        width: 150px;
    }
    #Contents #Main td{
        padding-left: 5px;
        width: 300px;
    }
    #Contents #Main td, #Contents #Main th{
        border-left: 1px #000 solid;
        border-bottom: 1px #000 solid;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    #Contents #Main table{
        border-right: 1px #000 solid;
        border-top: 1px #000 solid;
        margin-top: 10px;
    }

    1〜8行目:項目名称をセンタリング、内容を左寄せでパディングを設定します。

    9〜14行目:表の各セルに対し、左と下だけ罫線を入れます。

    15〜19行目:テーブル全体に対し、上と右に罫線を入れます。これでちょっとエンボスチックな罫線の出来上がりです。出来上がりはこちら。

    w058

    最後にリンクページ。当初はこちら。

    w059

    リンクの行頭記号がなんだか左にはみ出しているし、ゆるキャラペパクラインデックスの「enter」は小さすぎて入口に見えません。CSSでやっつけちゃいましょう。

    #Contents #Main .txt li{
        margin-left:20px;
        list-style-type: none;
    }
    #Contents #Main .enter a{
        display: block;
        width: 683px;
        text-align: center;
        font-size: 48pt;
        padding: 5px 0px 5px 0px;
        border: 1px #77543a solid;
        background: #bb987e;
    }

    1〜4行目:リンクのリストから行頭文字を消し、少し右に寄せました。

    5〜13行目:「enter」の文字をクリックしやすいようにブロック要素とし、大きい文字のセンタリングにします。幅はコンテンツ幅ーボーダー幅合計です。出来上がりはこちら。

    w060

    今回はここまで。次回はカテゴリー/タクソノミーページを作ります。


    コメント
    コメントする








       

    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

    楽天ブックス

    楽天