勉強メモ、Wordpressの記事ループ

ナデガタ


PHPよくわかんねえけど動画見ながら適当に作ってみた

<?php 
if ( have_posts() ) {
while ( have_posts() ) {
the_post(); 
?>
        <h2>
        　<a href="<?php the_permalink(); ?>" 
        　　　title="<?php the_title_attribute(); ?>">
        　　<?php the_title(); ?>
        　</a>
        </h2>
        
        <p>
        　カテゴリー：<?php the_category( ' / ' ); ?>
        </p>
        
        <?php the_content(); ?>
        
        <?php the_tags( '<br /><br />関連タグ: ', ' • ', '<br />' ); ?>
<?php   
} // end while
} // end if
?>

↑参考にした講座

PHPを把握してからWordpressを弄ろうとするといつまでたってもサイト制作に舵をとれなさそうだったのでWordpressをとりあえずやってみて必要な部分を覚えていこうというスタンス。

そのまんまだとイマイチ求めてる感じにならないので調整しつつ内容を把握していく。

そもそもループとはなんぞや。
データベースにある記事を取得する仕組み、これでindex.phpなどに記事が表示できる。ということらしい。

記事をいくつ、どのように取得するかは、PHPファイルでなくダッシュボード上で操作する。→コードは同じでOK。

以下はindex.phpに挿入するループのコード。これで記事タイトルなり本文が出現する。

<?php　
 if ( have_posts() ) {
  while ( have_posts() ) {
   the_post();
?>

<h1><?php the_title();?></h1>
<span><?php the_date();?></span>
<div><?php the_content();?></div>

<?php 
 }//end while
   }//end if
?>

これを、自分が求める形に変えていく。

上の講座はハウツーPHP的な部分は薄いので別途調べて補完する。

while ( have_posts() ){the_post…
→have_posts() （残りの投稿があるかを判定する）という条件を満たしている間は、the_post()（最初のデータを取り出して、そのデータを削除）という処理をする。

例えば
→記事A~Eがある場合、have_posts()でAを把握→the_post()でAを取り出して削除
→残りはB~Eで、have_posts()でBを把握→the_post()でBを取り出して削除
のループ。
Eが取り出されたら残りがないので終了。
（while(have_posts())でデータ見つからず→faleになるのでループ終了） 

以上が<?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?>の一連の流れ。

・the_post()した時、
　the_title()があればその時取り出した記事のタイトルを表示、
　the_content()があればその記事の本文を表示、
　the_category()でカテゴリーを表示、
　the_tags()でタグを表示

OKここまでは理解した。

そうやって作ったループを確認すると、それぞれの表示で不満点あるな。
調整するぞ。

・the_date()→日付、とりあえずいらないかな。(今回の場合「リンク先の投稿時間」を情報として入れたいので紛らわしくなる)

・the_title()、パーマリンクほしいな。
→the_title()をaタグで囲む
　href="<?php the_permalink();?>でその記事のパーマリンクがへリンクがつく。
　title="<?php the_title_attribute(); ?>"はリンク先のタイトル。カーソル合わせると出てくるやつ。
ここでは不要なHTML情報を削除して単なる文字列を表示するため、という理解でいいのだろうか。

投稿のタイトルをリンクテキストとしてパーマリンクを作成します。投稿のタイトルに使う一般的な方法です。」とあったのでよく理解せずそのまま挿入したのでこの記事にて確認している。

なにはともあれWordPressCodex読めということらしい。

カテゴリーほしいな。→<p><?php the_category( ' / ' ); ?></p>。

(()内の' / 'は「複数カテゴリーがある際は/で区切る」という意味なのだとか。

カテゴリーだけ表示されても何の意味があるかわかりづらそうなので、pタグの中phpタグの外に「カテゴリー:」と表記。これで「カテゴリー:」の右にカテゴリーが表示される。


php the_tags( )でタグを表示。
本文と間をあけて、下部にタグを表示したい、複数のタブは中点で区切りたいので、()内にそれぞれ「<br /><br />関連タグ:」「・」「<br />」と入力。

これで一応は狙った形になった。

しかし<?php><?>とif(){}が入れ子になってて複雑怪奇ですね。その間にthe_title()その他が入っているのがミソということなんでしょう。ここら辺ボチボチ把握していきます。
独学者の行き当たりばったりな学習の進め方の典型を今自分が歩んでいる。

そんなこんなで作成したのがこんなページ。

↑のページの意図は以下の通り。

ざくざくアクターズというゲームの作者が、自身のブログで登場キャラたちのショートショートを多数書いている。
それのリンク集を作り、簡単な概要と登場人物のタグをつけることで、「あの話はどの記事で書かれていたかな」や「あのキャラの話はないのかな」などの、ファンの検索リティ（検索リティ？）（サーチャビリティ？）に貢献できないかな、という狙い。

本文記事とカテゴリー/タグに差異をつけてもうちょっとメリハリのある記述にしたいんだけど、そこがPHPでできるかもしれないけど多分CSSの領域なので、とりあえずおいおいやっていく。

いやほんと、世に出回っているWordpressテーマの見目麗しいことよ。素人が適当に作るとまぁ芋っぽくなる。今回、上の講座で配布されテンプレを元に自分なりに弄ってて、それは「一から作るとクソダサ不可避だけど人のテンプレそのまま使ったら練習にはならんので、自由に使える見本を元に手を加える」という半端な形をとっている。
とりあえずカテゴリーを右に寄せてタグを小さくしてみるかぁ。

サイトが形になるのはいつになることやら。

以上です。ざくざくアクターズ無料。いますぐやりましょう。


この記事が気に入ったらサポートをしてみませんか？