WordPressの記事一覧をHTMLページに表示

今回やりたい事

WordPressで作った記事の一覧をHTMLの静的ページに出力したい!
フィードは即時更新されない事が多々あるので、jQueryを使って動的にHTMLページに表示しよう!と、張り切ってやってみたらIE8で表示されませんでした。
理由は読み出したい部分をショートコードで引っ張っていたせいでした。
IE8でも表示されるようにしたい。いややらねばならない。
ショートコードを使わずに一覧を作成するにはテンプレートに直書きです。

最初作っていたやり方(IE8でダメだった)

  1. WordPressテンプレートのfunctions.phpにこれを書いて固定ページ側ではショートコード[alllist]で読みだしていました。(※投稿の記事8件をリスト表示)
    function getlist($atts, $content = null) {
     global $post;
     $oldpost = $post;
     $myposts = query_posts(
    array(
     'posts_per_page' => '8',
     'post_type' => 'post',
     'order'=>'DESC',
     'orderby'=>'post_date'
     ) );
     if(have_posts()):
     while ( have_posts() ) : the_post();
     $retHtml='<div id="listbox"><ul>';
     foreach($myposts as $post) :
     setup_postdata($post);
     $retHtml.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>';
    
     endforeach;
     $retHtml.='</ul></div>';
    
     wp_reset_query();
     $post = $oldpost;
     return $retHtml;
     endwhile;
     endif;
    }
    add_shortcode("alllist", "getlist");
  2.  WordPressの固定ページで記事一覧ページを作り、外部のHTMLページに紐づけたい部分をidかclass名を付けて囲む。
  3. HTMLページにjQueryのコードを書く。
    コードの詳細はこちらのサイトを参考に。

    参考:jQuery日本語リファレンス

    load( url, data, callback )
    http://semooh.jp/jquery/api/ajax/load/+url,+data,+callback+/

    ※jQueryのライブラリーは 2.X系はIE8で使えなかったりするので1.X系を使う。

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $(function(){
    $("#readbox").load("/sample/ #listbox", function(data) {
    if(data == null){
    $("#readbox").append("一覧を取得できませんでした。"); 
    }
    });
    });
    </script>

    ↑これをHTML側に書いたら、「/sample/」ページの<div id=”listbox”></div>内の内容を、このページにある<div id=”readbox”></div>の中に書きだしますという内容になります。
    読みこめなかった場合「一覧を取得できませんでした。」と表示されます。

でもこの方法だとchrome、firefox、IE9~11が許してくれてもIE8は無反応だったので色々検証した結果、ショートコードが悪いっぽかったので外す事に。

page-○○.phpの様なテンプレートファイルを作って、こんな中身にしました。
よく考えたらこっちのやり方の方が単純ですよね。

<div id="listbox"><ul>
 <?php query_posts( 'posts_per_page=10&post_type=post' ); if (have_posts()) : while (have_posts()) : the_post(); ?>
 <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
 <?php endwhile; ?></ul></div>
 <?php endif; ?> 
 <?php wp_reset_query(); ?>
 </div>

テンプレートのget_headerの所をこう書いて

<?php get_header();  /*Template Name:記事リスト*/ ?>

テンプレート「記事リスト」を固定ページに適用しました。
これだけで、IE8でもちゃんと表示されました!

もう切り捨てたい・はよ消えてIE8・・・!!

この記事にコメントを残す