ホームページを作ろう!WordPress編(12)フロントページを作る(2)

0

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

    w048

    さて今回はこの、最近の投稿サマリ表示を作っていきます。参考書はいつものこちら。

    では早速勧めていきましょう。まずこの投稿サマリの仕様はこんなところ。

    • 最大4つの記事のアイキャッチ画像、タイトル、記事サマリを表示。
    • 画像又は記事タイトルをクリックすると、記事個別ページが開く。
    • 記事サマリは冒頭50文字。これを超えるときは「…」を付ける。
    • 記事サマリは表示・非表示を選択できる。

    これを実現するために、WordPressで記事を表示するときの基本パターンである「メッセージループ」を勉強します。メッセージループとは、データベースから一連の記事を取り出して表示させるときのループ構造のことを言います。基本形はこうなります。

    <?php if(have_posts()): while(have_posts()): the_post(); ?>
        <!-- 記事を表示する -->
    <?php endwhile; endif; ?>

    have_posts()は、指定された条件に合致する投稿があるとtrueになるテンプレートタグです。trueになるとif():〜endif;で囲まれた部分が実行されます。そのif分のすぐ内側には、while():〜endwhile;文が書かれています。ここが実際のループです。条件にあった投稿がある限り、この間の処理が繰り返し行われます。

    このwhile文の中には、まず冒頭にthe_post()というテンプレートタグが呼ばれています。このテンプレートタグは、次の投稿を取得してそれを「現在の投稿」としてセットし、ループを次に進めるという動作をします。あとは、the_permalink()でURLを、the_title()で記事のタイトルを、the_post_thumbnail()でアイキャッチ画像を、そしてthe_content()で記事の内容を取得し、HTMLと一緒に吐き出すと、それらが画面に表示されるという寸法です。今回この部分をモジュール化してitems.phpというファイルを作りました。実際のitems.phpの内容を見てみましょう。

    <?php if(have_posts()): while(have_posts()): the_post(); ?>
    	<li>
    		<div class="image"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></div>
    		<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    		<?php 
    		global $single;
    		if(!$single) { 
    			echo '<div class="post_body">';
    			echo mb_substr(strip_tags($post->post_content),0,50);
    			if (mb_strlen(strip_tags($post->post_content))>50) {echo '...';}
    			echo '</div>';
       		}
       		?>
    	</li>
    <?php endwhile; endif; ?>

    1行目と15行目:先ほどのメッセージループです。

    2行目と14行目:メッセージサマリを並べて表示するため、リストアイテム要素としてマークアップしています。

    3行目:the_post_thumbnail()でアイキャッチ画像を取得します。画像は<img>タグが自動的について書き出されますので、自分で<img>タグを書く必要はありません。取得したアイキャッチ画像を、the_permalink()で取得したパーマリンクを書き込んだ<a>タグで囲っています。

    4行目:the_title()で取得した記事のタイトルを書き出し、同じく<a>タグでリンクを貼っています。タイトル全体は<h3>タグでマークアップしています。

    6行目:グローバル変数$singleを定義しています。$single=1のときは画像とタイトルのみで、記事は表示しない、という使い方をします。

    7行目:$singleが1でない場合、記事本文の出力を実行します。

    8行目と11行目:div要素で記事を囲っています。

    9行目:記事本文を表示する部分です。$postというのが現在の投稿が入っている変数で、その中の実際の記事は$post->post_contentという形で呼び出します。strip_tags()は、記事に含まれるHTMLタグをすべて削除します。そしてmb_substr()で部分的な文字列を抜き出します。0は開始位置(先頭)、50は抜き出す文字数です。これで記事の先頭から、タグ類は除いた中身の文字数で50文字分が抜き出されます。なおmb_substrのmb_はマルチバイトを意味しています。日本語のように2バイト以上で1文字を表している文字用の関数なので、ちゃんと日本語としての文字数でカウントされるようになっています。

    10行目:mb_strlen()で記事の文字数を取得しています。元の本文の文字数が50文字を超えていた場合、50文字で切ってしまっていますので、後ろに”...”を付けて、まだ続きがありますよということを表示します。

    では、出来上がったこのitems.phpを呼び出して、記事を表示してみましょう。事前にダミーで記事を投稿しておいてください。アイキャッチ画像は投稿画面の右下に登録するボタンがあります。

    さて、このitems.phpの呼び出しかたはこうなります。

    <h2>ブログ</h2>
    <ul class="menu blog-menu parallel">
    	<?php
    	query_posts('post_type=post&posts_per_page=4');
    	get_template_part('items');
    	wp_reset_query();
    	?>
    </ul>

    1行目:<h2>タグで囲ったのは投稿タイプ名です。この後「ギャラリー」と「ダウンロード」も同様にして作ります。

    2行目、8行目:先ほど個別の記事を<li>でマークアップしましたので、ここで全体を<ul>で囲っておきます。この<li>要素はfloatして横へ積み上げていきますので、classにparallelを呼び出しています。これで以前ご説明したCLEARFIXが適用されます。

    4行目:query_post()は投稿を検索する条件を設定するテンプレートタグです。ここでは2つの条件を指定しています。まずpost_typeで投稿タイプ(通常の投稿ならpost、カスタム投稿タイプならそのタイプ名)を指定します。そしてposts_per_page()で1回に取得する投稿の数を指定しています。

    5行目:get_template_part()でテンプレート部品であるitems.phpを呼び出しています。items.phpがここで実行されます。

    6行目:wp_reset_query()で、query_posts()で設定した検索条件をリセットします。これを忘れるとあらぬところで思いもかけぬ挙動をすることがありますので、query_posts()を使ったらメッセージループが終わったところで確実にリセットしてください。

    ではまずここまでをindex.phpに書いて、表示を見てみましょう。位置はheader_imageの後ろです。

    w054

    CSSを設定していないので、縦に並んでしまっていますが、画像、記事タイトル、記事の内容が書き出されていることがわかると思います。では次にこの部分のCSSを調整していきましょう。

    ではまたまた結果からどうぞ。

    html,body {
        text-align: center;
        margin: 0 auto;
        color: #666;
        font-size: 12px;
    }
    #Contents #Main h2 {
        font-size: 18pt;
        margin: 10px 0;
        padding: 10px 0 10px 15px;
        color: #FFF;
        background: #77543a;
        background: -webkit-gradient(linear, center top, center bottom, from(#77543a),to(#362111));
        background: -moz-linear-gradient(top, #77543a,#362111);
    }
    #Contents #Main h3 {
        font-size: 16px;
        margin: 10px 0;
        padding: 5px 0 5px 10px;
        color: #77543a;
        border-left: 10px #77543a solid;
        border-bottom: 1px #77543a solid;
    }
    #Contents #Main ul.menu {
        list-style: none;
        margin-right: -10px;
    }
    #Contents #Main ul.menu li {
        float: left;
        display: block;
        width: 150px;
        margin: 0 10px 15px 0;
    }
    #Contents #Main ul.menu li h3 {
        font-size: 12px;
    }
    #Contents #Main ul.menu li p {
        padding: 5px 0;
        height: 4em;
    }

    まず、4,5行目を追加します。記事本文の文字色と字の大きさです。

    7〜15行目:「ブログ」の文字の<h2>タグは、<h1>の次に目立つようにしたいので、濃い色のバーに白い文字で表示しようと思います。バーの背景色はグローバルメニューの背景色と同じ茶色のグラデーションとして統一感を出します。マージンとパディングで文字の位置とバーの幅を調整しています。

    16〜23行目:<h3>タグは記事のタイトルに使ったタグですが、他のページでは小見出しとして使いたいタグです。まず見出しとしての設定をしておき、トップページ用には34〜36行目で文字のサイズを少し小さくしました。見出しとしての<h3>は<h2>より少しフォントも小さくし、背景も塗りつぶしではなく、下線と左の少し太めのバーでアクセントをつけるくらいにします。

    24〜27行目:.menuが最新記事4件につけてあるタグです。なぜ.menuなのかといえば、参考高所ではこれがカフェのホームページの例で、並べて表示されるのがドリンクやフードのメニューだからなんですね。意味のあるものに変えるのが筋でしょうが、ここは勘弁してください。まずは<ul>にたいしてリストの先頭記号を無しにしています。

    28〜33行目:<li>要素に対し、floatのブロック要素として、左から積み上げます。幅は画像の幅に合わせています。

    37〜40行目:記事本文の整形です。

    これで表示を見てみると、こうなります。

    w055

    うまくいったら、ギャラリーとダウンロードも同様に書いてやってください。

    以上でフロントページは一旦終了です。後ほどサイドバーのチューニングに戻ってきます。次回は各投稿タイプ毎のトップページを作ります。


    コメント
    コメントする








       

    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

    楽天ブックス

    楽天