全記事一覧をカテゴリー別に表示させる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ブログランキング
  • このエントリーをはてなブックマークに追加

関連記事

ファビコンの見本

Favoriteを設置しよう

 wordpressにファビコンを設置してみよう。  ファビコンはブラウザのタブに表示されるア

記事を読む

wordpressカスタマイズ

表示設定の設定記事数を超えてもカテゴリー別全記事一覧が表示されるコード

 表示設定の設定記事数を超えてもカテゴリー別全記事一覧が表示されるコードを発見。  コードその

記事を読む

wordpressテーマSTINGER3カスタマイズ

スマートフォン表示の【NEW ENTRY】のアイキャッチ画像を非表示にする

 wordpressテーマSTINGER3のスマートフォン表示のサイドバー【NEW ENTRY】をの

記事を読む

リンクボタン

フィードリーダーfeedlyの登録ボタンをブログに付けてみた

 Rss(フィード)は使ってる人には便利な機能らしい。  RSSを利用するといろいろなサイトの

記事を読む

タグ関数wordpress

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

 Wordpressの無料テンプレート(テーマ)Gush2はすっきりしたデザインで管理人の好みの

記事を読む

wordpressカスタマイズ

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

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

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3のスマートフォン表示のパンくずリストをスタイルシートでリンクボタン化

 wordpressテーマSTINGER3のスマートフォン表示のパンくずリストをスタイルシートで

記事を読む

wordpressカスタマイズ

プラグインを使わない記事一覧

 プラグインなしの記事一覧をあきらめ切れなかったので、今度はこんな風にしてみた。  更新日時順

記事を読む

wordpressカスタマイズ

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

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

記事を読む

wordpressテーマSTINGER3カスタマイズ

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

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

記事を読む

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 ↑