全記事一覧をカテゴリー別に表示させる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テーマSTINGER3カスタマイズ

STINGER3のSNS追尾ボタンを削除

 STINGER3のSNS追尾ボタン(ツイッターとかのボタン)を削除しよう。  ページに浮き上がっ

記事を読む

wordpressテーマSTINGER3カスタマイズ

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

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

記事を読む

wordpressカスタマイズ

カテゴリーを一覧表示するページを作ろう

 WordPressのカテゴリー一覧を表示するページを作ってみよう。  以前のWindowsの

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3サイドバーのリンクボタン化

 スマートフォンでのカテゴリー一覧のをリンクボタン化してタップしやすくしよう。  STINGER3

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3の固定ページにもSNSボタンを設置

 SNSボタン(ツイッターとかのボタン)を追加しよう。  STINGER3の固定ページにもSN

記事を読む

リンクボタン

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

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

記事を読む

wordpressテーマSTINGER3カスタマイズ

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

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

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3(wordpressテーマ)のサイドバーにある検索ボックスを消そう

 STINGER3(wordpressテーマ)のサイドバーにある検索ボックスを消そう。  word

記事を読む

wordpressカスタマイズ

WordPressのパーマリンクを連番にする方法

 Wordpressのパーマリンクを連番にすると良いかもしれない。  「Wordpressのパ

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3の「もっと見る」のアンカーテキストにブログタイトルを含める

 STINGER3サイドバーの「もっと見る」をブログネームを含んだ文字にSEO対策をかねて変えてみよ

記事を読む

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 ↑