静的ページでWordPressの情報を取り込む
前提
サーバーがhtmlもphpとして扱ってくれるように設定してあることが必要。
.htaccessファイルに
AddType application/x-httpd-php .html
を書き込むことで機能することが多い。php.iniの編集を必要とする場合もある（XAMPPなどローカルサーバーの場合）
ディレクトリ構造
index.html
-/blog/wordpress
-/other/index.html
といった構成で、
index.htmlでは、<!DOCTYPE html>の前に
<?php require(dirname(__FILE__).'/blog/wp-load.php'); ?>
を、
/other/index.htmlでは、
<?php require(dirname(__FILE__).'/../blog/wp-load.php'); ?>
を書き込む。（後者は検証してない。兄弟フォルダのphpファイルを出力させるときは include(dirname(__FILE__).'/../include/[ファイル名].php'); でうまくいったのので大丈夫だと思うけど…）
静的ページでLazy loadを読み込ませる
<head>内
jQueryを読み込ませる。
jQueryのダウンロードはjQueryから。
<script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/migratemute.js"></script>
ページ末端
</body>タグの前に
<script type="text/javascript" src="/js/jquery.lazyload.min.js"></script> <script> $('.lazy').lazyload({ effect : 'fadeIn', effect_speed: 2000 }); </script>
てな感じでjsファイルを読み込ませる。上記は/js/フォルダ内にlazyload.min.jsファイルを入れている場合の書き方。
Lazy loadは、GitHub - tuupola/lazyload: Vanilla JavaScript plugin for lazyloading imagesからダウンロードする。
ダウンロードしたファイルのうち、使うのはlazyload.min.jsファイルと、imgフォルダ内の置換前のダミー画像。
遅延読み込みを実行する画像の指定
ここが嵌ったポイントで、公式サイトの通りにやってもダメ。解説のほうは全くメンテナンスしてないっぽい。
使い方はこんな感じで
<img src="/img/white.gif" data-original="/img/kv.jpg" width="1020" height="516" class="lazy">
ポイントは、
- imgのsrcはダミー画像を指定する。
- data-original= で遅延読み込みする画像のuriを指定する。
- CSSで幅高さを指定するか、width="" height="" を明記する。
- class名にlazyを入れる。
以上4点。どれが欠けてもうまくいかない。
WordPressとの組み合わせ
で、ブログの新着記事（ニュースカテゴリ）を静的ページであるトップページにサムネイル付きで、それも遅延読み込みで使いたい、という面倒くさい条件だとこうなる。
なお、以下の例で読み込ませるカテゴリのスラッグはnewsである。
<?php $news = new WP_Query( array( 'category_name' => 'news', 'posts_per_page'=> 6, )); ?> <?php if ($news -> have_posts()): ?> <?php while ( $news -> have_posts() ) : $news -> the_post(); ?> <?php if(has_post_thumbnail()): $img_id = get_post_thumbnail_id(); $img_url = wp_get_attachment_image_src($img_id, 'medium') ?> <a href="<?php the_permalink();?>"><img src="/img/white.gif" data-original="<?php echo $img_url[0];?>" class="lazy"></a> <?php else: ?> <?php endif; ?> <?php endwhile; ?> <?php endif; wp_reset_postdata(); ?>
