皆様の事業に貢献します

前回の記事でWordPressループの仕組みと簡単なphpコードによる実例をご紹介しました。今回の記事では条件を指定して記事を表示させる方法をご紹介します。

記事の特性を調べるテンプレートタグ

条件を指定するためには記事の特性が解らなければなりません。記事がどんな特性を持っているか調べるためのテンプレートタグのうち”in_category()”を例としてご紹介します。

“in_category()”は投稿のカテゴリーを調べる

“in_category()”で投稿のカテゴリーがわかります。カテゴリーごとにWebの体裁を変えたい時などに使います。

カテゴリーを登録する

in_category()の働きを調べるために、カテゴリーを登録します。例として”blog”と”news”というカテゴリーを登録します。

WordPressの管理画面をWebMatrixから呼び出して“投稿”>”カテゴリー”メニューに進みます。

カテゴリー画面では「名前」と「スラッグ」を入力します。「名前」には”ブログ”、「スラッグ」には”blog”と入力し「新規カテゴリー追加」ボタンを押します。続いて「名前」に”おしらせ”、「スラッグ」に”news”を登録します。これで2つのカテゴリーが登録されました。

ダミー投稿をポスト

テスト用のダミー投稿をポストします。「投稿」>「新規追加」画面に進みます。「新規追加」画面から投稿のタイトルと、本文を入力して、カテゴリーを選択し、「公開」ボタンを押します。例としてタイトルも本文も”blog”と”news”にします。

“category.php”を編集

“category.php”はカテゴリー毎に投稿を表示させるテンプレートです。投稿を表示させるためにcategory.phpを作ります。WebMatrixで”page.php”をファイルコピーし”category.php”にファイル名を変更して下さい。次にWebMatrixで”category.php”を編集します。

					<div class="obj">
                    <?php
                        	if ( have_posts() ) {
                        		while ( have_posts() ) {
                            			the_post();
                    ?>
                                      	<p><?php the_content(); ?></p>

を、以下の様に変更します。

					<h3><?php the_title(); ?></h3>

                    <?php
                        	if ( have_posts() ) {
                        		while ( have_posts() ) {
                                    if( in_category('blog') ){ ?>
                                          <div class="obj">                                      
                                    <?php}else{?>
                                          <div class="news">
                                                <?php } ?>
                            			        <?php the_post();
                    ?>
                                      	<p><?php the_content(); ?></p>

変更後の6行目

if( in_category(‘blog’) )

の部分でカテゴリーがblogかどうか調べています。もしカテゴリーがblogだったら7行目でobjセレクタが指定され、blogでなかったら9行目でnewsセレクタが指定されます。

newsセレクタはスタイルシートで設定してないので、次はnewsセレクタを設定します。

スタイルシートを編集

WebMatrixから”base.css”を編集します。newsセレクタを以下の様に宣言します。例としてnewsセレクタが指定されたら文字が青色になるようにします。”base.css”に以下の記述を追加します。

.news{
	margin:0 6px 0 6px;
}
.news p {
    line-height: 160%;
    margin: 0 0 12px 0;
    color: #0e35f0;
}

ヘッダーメニューに”ブログ”と”おしらせ”を追加

以前の記事でカスタムメニュー機能を使ってヘッダーにナビゲーションメニューを表示させました。今回はメニューに”ブログ”と”おしらせ”へのリンクを追加します。

管理画面から「外観」>「メニュー」を選択し、メニュー画面でカテゴリーの”ブログ”と”おしらせ”を選択しヘッダーメニューに追加します。最後にメニューを保存します。

これで、ヘッダーメニューに”ブログ”と”おしらせ”が表示されるようになりました。ヘッダーメニューをクリックすると”ブログ”と”おしらせ”カテゴリーに属する投稿表示するページにナビゲーションできるようになりました。

“category.php”テンプレートの表示

カスタムメニューでカテゴリーを追加すると該当カテゴリーのアーカイブへリンクします。先に”category.php”を編集しましたが、これはカテゴリーを表示させるテンプレートでメニューをクリックすると”category.php”テンプレートが適用されます。

実際の表示で確かめてみます。”ブログ”をクリックすると文字が青色に表示され、”おしらせ”をクリックすると文字が黒色で表示されます。

今回の例ではカテゴリー毎に色を変えましたが、スタイルシートを設定することで体裁を変える事もできます。体裁だけでなくカテゴリー毎に紹介文を切り替えたりすることもできます。

また記事の特性を調べるテンプレートタグは他にも沢山あります。他のテンプレートタグを利用することで、バリエーションに富んだWebを作ることができます。詳細はこちらのページをご参照下さい。

春日渡辺会計事務所ではWeb制作を承ります

春日渡辺会計事務所では、WordPressによる格安Webサイト制作サービスをご提供しております。詳細はこちらをご覧下さい。ご依頼、お問い合わせはお問い合わせからお知らせ下さい。

春日渡辺会計事務所は文京区の会計士・税理士事務所です。皆様の事業を全力でサポートいたします。

資金調達・創業計画策定支援業務開始
生産性向上設備投資促進税制解説セミナー
previous arrow
next arrow
Slider
ページのトップへ戻る