The Designium

合同勉強会 vol.1～ WordPress テーマ作成フォローアップ～

The Designium

Wordpress テーマ作成のキー「ループ」

The Designium

・同じ形式の HTML を複数回だす仕組みです。

・更新履歴や記事一覧ページで使用します。

・次スライド以降で具体例を説明します。

　例として使うのは勉強会でもお借りした

　 http://www.noguchihideyo.or.jp

　のサイトです。

ループってなに？

The Designium

ループってなに？

ここは「 <li> 」を複数回出している

※ソースを見るとわかりやすいですよ。

The Designium

ループってなに？

タイトル、日付、本文抜粋、続きリンク

という固まりを複数回出している

noguchihideyo.or.jp/category/topics/

The Designium

・どういう部分で使うかわかりましたか？

・では、実際にソースとしてはどう使うかを説明します。

ループってなに？

The Designium

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

//※1

<?php endwhile; ?>

<?php endif; ?>

・これがループを使う時の基本的なソースです。

・ループさせたい内容を※１部分に書くことで動作します。

・具体的にソースを入れてみましょう。

ループってなに？

The Designium

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div>

<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

<div class="entry-meta">

<span class="entry-date"><?php the_time('Y 年 n 月 j 日 (D)') ?></span>

</div>

<div><?php the_excerpt(); ?><a href="<?php the_permalink(); ?>"> 続きを読む </span></a></div>

</div>

<?php endwhile; ?>

<?php endif; ?>

・赤字部分を追加してみました。「 the_ 」で始まるものは全て wordpess タグな

ので

　わからないものがあったら、調べてみてください。

・このソースを書いたファイルにブラウザからアクセスすると次スライドのよう

に

　なります。

ループってなに？

The Designium

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div>

<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

<div class="entry-meta">

<span class="entry-date"><?php the_time('Y 年 n 月 j 日 (D)') ?></span>

</div>

<div><?php the_excerpt(); ?><a href="<?php the_permalink(); ?>"> 続きを読む </span></a></div>

</div>

<?php endwhile; ?>

<?php endif; ?>

・赤字部分を追加してみました。「 the_ 」で始まるものは全て wordpess タグな

ので

　わからないものがあったら、調べてみてください。

ループってなに？

The Designium

<div>

<h2 class="entry-title"><a href="http://www.noguchihideyo.or.jp/topics/1850/"> アフリカ関連イベント情報 </a></h2>

<div class="entry-meta"><span class="entry-date">2013 年 5 月 13 日 </span></div>

<div> 野口英世アフリカ賞受賞記念講演会…

<a href="http://www.noguchihideyo.or.jp/topics/1850/"> 続きを読む <span class="meta-nav">&rarr;</span></a></div>

</div>

・前ページのソースを書いたファイルにブラウザからアクセスするとこのような

　 html が複数回 ( 記事数分 ) 出力されます。

・なのでループさせる html を出したい部分に前ページのソースを貼り付けること

で

　ループの処理が完了します。

・まずは記事一覧ページの作成をしてみると良いです。

ループってなに？

The Designium

・簡単にループについて説明しましたが疑問が浮かびませんか？

・そう、さきほどのソースには「ループの条件」がどこにも書いてありません。

・実は記事一覧ページなどは自動的に「ループの条件」が組み込まれています。

・ただ、ループの条件をカスタマイズしたいということがあると思います。

→ 例えば「 A というカテゴリの新着情報だけ TOP ページに掲載したい」というよ

うな

　場合です。

・その辺りについては、長くなってしまうので参考 URL の紹介をしておきます。

http://hijiriworld.com/web/wordpress-loop/

http://memo-tan.com/wp/query_posts_20120120.html

ループってなに？

The Designium

その他役立つ情報はhttp://nute.jp/wp/

に少しずつ掲載していきます。