WordPressのログイン時のツールバー

WordPress

WordPressで最新記事の一覧をプラグインを使わないで表示させるやり方

WordPressで最新記事の一覧をウィジェットやプラグインを使わないで表示させるやり方です。functions.phpに関数として記述して、サイドバーなどからそれを呼び出すようにします。引数には表示する記事数を渡せるようにしていおくと何かあった時に変更なんかもしやすくなりそうですね。

[ads_center]

最新記事一覧を表示させる

以下のコードをfunctions.phpに記述します。

// 最新記事
function new_post_list($show_num) {
    query_posts('showposts=' . $show_num . '"');
    if(have_posts()) {
        while(have_posts()) {
            the_post();
            echo '<li><a href="';
            the_permalink();
            echo '">';
            the_title();
            echo '</a><span>(';
            the_time('Y年m月d日');
            echo ')</span></li>';
        }
    }
    wp_reset_query();
}

これで、サイドバーなど表示させたい場所で先程の関数を呼び出します。引数に5と指定すると5件の記事が表示されます。ここの値を変えることで表示件数を変更することができます。

<ul>
    <?php new_post_list(5); ?>
</ul>

これで表示させてみるとこんな感じで表示されます。

サンプルテキスト01(2012年04月01日)
サンプルテキスト02(2012年04月02日)
サンプルテキスト03(2012年04月03日)
サンプルテキスト04(2012年04月04日)
サンプルテキスト05(2012年04月05日)

表示されるHTMLは必要に応じて変更しちゃって下さい。ちなみに各記事のアイキャッチのサムネイルも一緒に表示させたいって場合は以下のようにthe_post_thumbnailを使えば表示させることができます。

// 最新記事
function new_post_list($show_num) {
    query_posts('showposts=' . $show_num . '"');
    if(have_posts()) {
        while(have_posts()) {
            the_post();
            echo '<li>';
            the_post_thumbnail(array(50,50), array('class' => '好きなクラス名'));
            echo '<a href="';
            the_permalink();
            echo '">';
            the_title();
            echo '</a><span>(';
            the_time('Y年m月d日');
            echo ')</span></li>';
        }
    }
    wp_reset_query();
}

レイアウトに関しては自分のサイトデザインに合うようにCSSで調整してあげて下さい。

とまあこんな感じで簡単に表示させることができちゃいます。プラグインやウィジェットを使えば別にこんなことしなくてもいいんですが、もっと自由にデザインや表示形式をカスタマイズしたいって場合は難しくなっちゃうかもしれません。

なので、こういったやり方も1つの手段として覚えておきたいですね。

参考サイト

JavaScriptのlocation.searchでクエリ情報を取得してみる前のページ

JavaScriptでセレクトボックスから項目を選択したらリンク先にジャンプさせるやり方次のページ

関連記事

  1. WordPressのログイン時のツールバー

    WordPress

    WordPressでタグ一覧ページの作り方

    WordPressでタグ一覧ページを作るやり方をご紹介します。サイトで…

  2. WordPressにPocketボタンを設置

    WordPress

    WordPressにPocketボタンを設置するやり方

    そういえばPocketのボタンをまだ設置していなかったので、このたび設…

  3. WordPress

    WordPressでシェアする為のプラグインベスト10

    WordPressでソーシャルサービスなんかにシェアする為のボタンをさ…

  4. WordPressのログイン時のツールバー

    WordPress

    WordPress投稿画面からTwitterの好きなツイートを簡単に埋め込むことができるやり方

    WordPressの投稿画面でTwitterのツイートを簡単に埋め込む…

  5. Hemingway

    WordPress

    レスポンシブ対応の2カラムWordPressテーマ「Hemingway」

    レスポンシブに対応した2カラムのお洒落なWordPressテーマを発見…

  6. WordPress

    editor-style.cssを使えばビジュアルエディタを実際の記事と同じようにスタイリングできる…

    あんまりビジュアルエディタを使ってないのであれですが、新規の記事を書い…

コメント

  1. この記事へのコメントはありません。

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP