全記事一覧をカテゴリー別に表示させる1

 1ページにカテゴリー別に分けた全記事一覧を作ってみたいと思う。

 ポイントは「ブログのすべての記事を表示する」「それぞれの記事をカテゴリー分けする」の2点。

 プラグインを使って実装することもできるが、今回もプラグインを使わないで何とかしたい。

スポンサーリンク

カテゴリー別全記事一覧の参考になりそうなサイトを見つけた

 インターネットを検索していたらカテゴリー別に振り分けた全記事一覧の作成に参考になりそうなサイトを見つけた。

 ということで、まずは勉強がてらその際とで公開されていたコードを分析することにする。

公開されていたカテゴリー別全記事一覧コード

<?php if (is_page(‘sitemap_by_category’)) { ?>
<div id=”sitemap”>
<?php
  $args=array(
    ’orderby’ => ‘name’,
    ’order’ => ‘ASC’
  );
  $categories=get_categories($args);
?>
<?php foreach($categories as $category) { ?>
    <h3>カテゴリ:<?= $category->name ?>(<?= $category->count ?> 記事)</h3>
<ul>
    <?php
      global $post;
      $myposts = get_posts(‘category=’.$category->term_id.”&orderby=post_date&order=DESC”);
      foreach($myposts as $post) : setup_postdata($post);
    ?>
        <li>
          <div class=”thumbnail”>
            <a href=”<?php the_permalink(); ?>”>
              <?php get_thumbnail($post->ID, ‘thumbnail’, ‘alt=”‘ . $post->post_title . ‘”‘); ?>
            </a>
          </div>
<a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>
<p class=”postmeta”>Posted by <?php the_author_posts_link(); ?> on <?php the_date(‘Y年m月d日’); ?>
          </p><div class=”clear”></div>
<div class=”excerpt”><?php the_excerpt(); ?></div>
<div class=”tag”>
            <?php the_tags(‘Tags: ‘, ‘, ‘, ‘ ‘); ?>
            <?php edit_post_link(‘Edit’, ‘[ ', ' ]‘); ?>
          </div>
</li><br />
      <?php endforeach; ?>
    </ul><div class=”clear”></div>
<?php }; ?>
</div><!-- end of #sitemap -->

<?php
  } else {
    the_content(); // 元々のタグ
  }
?>

テンプレートタグを分析してみよう

is_page(‘sitemap_by_category’)

 ページの条件分岐。

 is_page()で固定ページ。

 この場合、sitemap_by_categoryという名前のページのばあい表示するくらいの意味だと思う。

’orderby’ => ‘name’,

 アルファベット順で名前を呼び出す。

 ここではカテゴリー名を呼び出してるんだと思う。

’order’ => ‘ASC’

 呼び出す順番。

 ASCは昇順、DESC は 降順。

$categories=get_categories($args);

 カテゴリーを呼び出す。

 基本的な使い方は↓

 <?php
  $categories=get_categories();
?>

<?php foreach($categories as $category) { ?>

 カテゴリーの収得を繰り返す。

$category->count

 カテゴリーの記事数を収得する。

<?php the_permalink(); ?>

 パーマリンクの収得。

thumbnail

 アイキャッチ画像

<?php the_title(); ?>

 記事などのタイトル。

<?php the_author_posts_link(); ?>

 ユーザーネーム?

<?php the_date(‘Y年m月d日’); ?>

 公開日。

<?php the_excerpt(); ?>

 現在の投稿の抜粋を、文末に [...](角括弧+三点リーダー)をつけて表示。

 HTMLや画像は表示しない。

<?php the_tags(‘Tags: ‘, ‘, ‘, ‘ ‘); ?>

 現在の記事に付けられたタグを表示。

 各タグは、そのタグのアーカイブページへリンクする。

*参考リンク:テンプレートタグ/the tags

<?php edit_post_link(‘Edit’, ‘[ ', ' ]‘); ?>

 ?

課題

 どうも、アイキャッチ画像とかあまり必要の無い要素もありそうな感じ。

 また、参考サイトでは本来の固定ページテンプレートに直接上のコードを書き込んでいるようだ。

 でも、固定ページテンプレートに直接書き込むと、ほかの用途に固定ページテンプレートが使えない。

 ここは、オリジナル固定ページテンプレートを新しく作ってコードを入れてみよう。

 ということで固定ページテンプレートを複製して、上の記述を入れてみたもののどうもうまく表示されない。

 テーマとの相性の問題かな。

もひとつ参考になりそうなカテゴリー別全記事一覧のサイトを見つけた

 カテゴリー別全記事一覧のコードを公開しているサイトを見つけた。

 こちらのサイトのコードはそれなりに表示される。

 ただし、表示設定で指定した記事分しか表示されないようだ。

 ということで、今度はこちらのサイトさんのコードで悪戦苦闘してみようと思う。

  • にほんブログ村 ブログブログ ブログノウハウへ
    にほんブログ村
  • FC2ブログランキング
  • このエントリーをはてなブックマークに追加

関連記事

wordpressカスタマイズ

wordpress全記事一覧アレンジメント

 プラグインを利用しない全記事リストのコードを少しアレンジしてみた。  STINGER3の「P

記事を読む

wordpressカスタマイズ

記事一覧を更新順位に並べ替えるカスタマイズ

 プラグインを使わない記事一覧シリーズ。  前回のコードでは更新日順に記事一覧を並べることがで

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3のフッターに「月間アーカイブ」、「最新のコメント」、「メタ情報」を表示

 STINGER3のフッターに「月間アーカイブ」、「最新のコメント」、「メタ情報」を表示してみよう。

記事を読む

wordpressテーマSTINGER3カスタマイズ

記事のh2見出しのスタイルシートを編集してみた

 サイトの表示を高速化するプラグインをいろいろ入れたら、記事内のh3などの見出しタグの装飾が崩れ

記事を読む

wordpressテーマSTINGER3カスタマイズ

wordpressのナビゲーションバーに項目を追加

 wordpressのナビゲーションバーに項目を追加しよう。  タイトルやキャッチフレーズの下に追

記事を読む

wordpressカスタマイズ

記事一覧を更新日順に表示する方法

 記事一覧を更新日順に並べる方法。  すごく簡単に記事一覧を更新日順に並べ替えて表示することが

記事を読む

wordpressカスタマイズ

特定のカテゴリーだけをリスト表示する

 wordpressの親子カテゴリーがなんだか使いにくいので、親子カテゴリーを使わずに特定カテゴ

記事を読む

wordpressカスタマイズ

ウィジェットを使わずカテゴリー一覧を表示させる

 ウィジェットを使わずにカテゴリー一覧を作ってみる。  ウィジェットを使わないほうが表示が速く

記事を読む

wordpress条件分岐

wordpressのページによって表示を変える条件分岐タグ

 wordpressの条件分岐を覚えておくと便利だ。  条件分岐というのは「○○のなら××を表

記事を読む

wordpressカスタマイズ

Windowsのメモ帳でwordpressのphpファイルを新しく作ろう

 Windows付属のメモ帳はwordpressのphpファイルの作成には向いてない。  けど

記事を読む

Message

メールアドレスが公開されることはありません。


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)


follow us in feedly

応援してね⇒にほんブログ村 ブログブログ ブログノウハウへにほんブログ村

ワードプレスのテキストとビジュアルのタブの切り替えができない

 しばらくぶりにブログを更新しようと思ってみたら、ワードプレスの更新や

プラグインを使わずにソースコードを表示させる方法

 ソースコードを表示させるのに便利なのはプラグインの利用。  で

ソースコードの解説にCrayon Syntax Highlighter

 Webサイト上でHTML/CSSやプログラミングのコードを解説す

ウィジェットが豊富で使いやすいWordPressテーマSimplicity

 SimplicityというWordpressテーマを使ってみた。

お客様のホームページがアップロードされていない状態です

 Wordpressの手動インストールで無事インストールできたのに

WordPressテーマGush2のTOPページアーカイブページに要約を表示する

 Wordpressの無料テンプレート(テーマ)Gush2はすっき

FC2ブログとWordPressのURLの構造法則と変数

 記事数の多いFC2ブログを変数を使ってWordpressに引越し

記事数の多いFC2ブログの引越しは変数で作業時間短縮

 FC2ブログからWordpressへの引越し第二段。  FC2

プラグインの内容をメモできるWordPressプラグイン

 Wordpressのプラグインは便利だが、説明文が英語のせいで中

WordPressのカテゴリーの管理画面にIDを表示できるようにするカスタマイズ

 Wordpressのカテゴリーの管理画面に記事のIDを表示できる

海外スパムをシャットアウト「Throws SPAM Away」日本産プラグイン

 Wordpressでブログを運営していると英語のスパムコメントが

→wordpress初心者・STINGER3カスタマイズ中の記事をもっと見る

Googleでブログを作ろう 
 Googleの無料ブログサービスBloggerで作っているブログ。
 Bloggerの設定やカスタマイズ方法などを載せている。

使える無料ソフト&無料サービス
 高いパソコンに入ってるようなソフトは必要ない!をコンセプトに無料ソフトや無料のWEBサービスをご紹介。

  • コメントテスト

  • PAGE TOP ↑