前回から引き続き、今回はテキスト周りの設定。まずページの上部にドンと居座ることになる「仮タイトル」について。これはカテゴリ(category)扱いにするので、WordPress上でその仮タイトル名でカテゴリを作成することになります。今回はその仮タイトルを引き続き『Night Head』とします。
そこで、サンプル用の投稿が「うそだぴょ〜ん」というのは、さすがに読者の受ける印象がマズくなると思ったので、従来のサンプルテキストからの抜粋を新規投稿に入力。タイトルも「Waldorf Microwaveは唯一無二のユニークなシンセ」にしておきます。しかし「○○だぴょ〜ん」って元ネタは何でしたっけ?いつからか自然に使うようになっていたのですが、気になりますな。
それはともかく、ダッシュボードから新規カテゴリとして「Night Head」を追加します。
カテゴリ名の取得 ー the_category( );
さて、作業中ページの<section id=”code_name”>エリア内にその記事が属しているカテゴリ名を表示させるのですが、使用するテンプレートタグは次になります。
the_category( );
これで、予めそのURLへのリンク設定が施されたカテゴリ名が自動表示されます(a hrefと事前に書かなくてもOK)。ただし、これをそのまま適応部分に挿入すると、何と「リストタグ(liやul)」も一緒に出現してしまうのです!なんだそれは。要するに、一つの投稿記事は複数のカテゴリに属することが可能なので、それらを全てリスト表示させるのがデフォルト仕様なんですね…すっかり忘れてました。
そこでulやliを出現させないようにするには、()内のパラメータに「,(カンマ)」を入れます。文字列なので「’(シングルクォート)」で囲みます(パラメータが数値の場合は「’」は不要)。これで生成時にリスト関連のタグは解除されます。
the_category(‘,’);
仮タイトルをカテゴリ名で表示する
<body> <header></header> <section id="code_name"> <h1><?php the_category(','); ?></h1> </section> <article> <section id="post">
Safariでの表示。とりあえず現時点で、この部分は<h1>で括ることにします。CSSの方はまだ未設定。
トップページには通常のサイト名を表示したい(ifで条件分岐のはなし)
上の図はトップページにアクセスした際の表示ですが、トップページは仮タイトル「Night Head」ではなく、例えば通常のサイト名にしたい場合、if文で分岐させます。トップページ(ホームページ)の場合(is_home())は「○○」を表示して、条件に合わない場合(else:)は「●●」を表示、という場合はコレ↓。
if(is_home()): ○○ else: ●● endif;
仮タイトルをカテゴリ名で表示する
<body> <header></header> <section id="code_name"> <h1> <?php if(is_home()): ?><?php bloginfo('name'); ?> <?php else: ?><?php the_category(','); ?> <?php endif; ?> </h1> </section> <article> <section id="post">
6行目:bloginfo( ‘name‘ ); ブログのタイトルを出力。
7行目:the_category(‘,’ ); カテゴリ名を出力。
それにしてもしかし、「:コロン」と「;セミコロン」の使い分けが全く覚えられませんな…。
全く関係無いけど「コロンの使い方とセミコロンの違い ー ネイティブの説明」Lukeさんの記事、勉強になる。
それでは表示結果を見てみます。
トップページ(http://localhost:8888)にアクセスした場合、ちゃんとWordPressの設定ページで入力したタイトルが表示されています。リンクは貼られていませんね。
「Waldorf Microwave〜」の記事タイトルをクリックして、その投稿記事ページへ飛んだ場合の表示。仮タイトル『Night Head』が表示されます。
ちなみに何のカテゴリ設定もしていない記事をクリックしてみたら「未分類」と表示され、それをクリックしたら、未分類記事がまとめてリストされました。しかし、ちゃんと日本語で未分類と区別されるとは…それは知らなかった。つづく。
もう覚えなくても大丈夫!?WordPressの条件分岐タグの使い方まとめ(OXY NOTES)
WordPressをカスタマイズするなら絶対覚えておきたい条件分岐やカスタム投稿タイプなどいろいろ(Web Design RECIPES)
次回も引き続き、本文テキスト周りのCSS設定を予定。
2014-06-01 > VPS&WordPress引っ越しメモ