WordPressの記事をAjaxで追加読み込みしたときの話

Feb 06, 2014

Wordpressの記事をAjaxで追加読み込みしたときの話

2016年6月15日に下記の修正を行いました。

追加読み込みをAjaxを使って表示させたいなと、思いまして
いろいろ探してましたらいいのがありましたので今回はそのやり方を詳しく紹介したいと思います。※プラグインは使ってません。

参考にさせていただいたサイトは
WordPress ページングはやめてAjaxローディングにする
です。では始めたいと思います。

もし、急ぎで知りたい方はページの一番下のまとめのところをご覧下さい。

主要ファイル

今回使用するファイルは以下の3ファイルです。(ファイル名は任意で大丈夫です。)

  • ・index.php(追加読み込みしたい箇所があるファイル)
  • ・style.js(「more.php」で生成したHTMLを「index.php」に反映するファイル)
  • ・more.php(データベースから値を持ってきてHTMLの基礎を生成するファイル

では、index.phpから順番に説明していきたいと思います。

index.php

//タイトルの取得

YouTubeをミュートで埋め込んだったよ。

//投稿時間の取得

Jan 09, 2017

//抜粋記事の取得

YouTubeをミュートで表示した際のメモ YouTubeの動画ってYouTubeのサイトから簡単にiframeでサイトに埋め込んだりできるけど、ミュートってできないんだよね。そこで今回はjavascriptを使っ

Read More

//タイトルの取得

ビデオ会議サービス「appear.in」を試してみたら結構よかった

//投稿時間の取得

Oct 23, 2016

//抜粋記事の取得

こんにちは!唐突ですが、みなさんはビデオ会議したりしますか? 僕は最近遠距離のプロジェクトに関わっていて、ビデオ会議をしています。今までは「Skype」や「hangout」などを使ってしてましたが今回、ggったら「

Read More

//タイトルの取得

npm-check-updatesでpackage.jsonを初めて更新したときのやり方

//投稿時間の取得

Oct 17, 2016

//抜粋記事の取得

知り合い方の勉強会があったときにGreenkeeperがいいよー!勝手にプルリクしてくれるし!って言われて僕もやりたいなと思ったら、Bitbucketには対応してなかった。。 このときのスペック ・B

Read More

//タイトルの取得

[まとめ]ターミナルなどで使うLinuxのコマンド 〜随時更新〜

//投稿時間の取得

Jul 03, 2016

//抜粋記事の取得

こんにちは。ターミナルとかを使ってLinuxってこれからのフロントエンドの人たちにとって必須だとヒシヒシと感じているのでちょっとずつ覚えた・見たコマンドをかなりの素人目線で載っけていこうかなと思います。 ls

Read More

もっと表示する

WordPressをいじったことのある方ならわかると思いますが、記事をループして一覧表示するところのソースはですね。3行目のところですが、

ここで記事の表示数のことを決めて下さい。今だと6件表示するということになります。
ちなみに僕のサイトも始めは6件表示です。
今回は投稿タイトルと投稿時間、投稿記事の抜粋テキスト、この3つを表示したいと思います。

//タイトルの取得

WordPressの記事をAjaxで追加読み込みしたときの話

//投稿時間の取得

Feb 06, 2014

//抜粋記事の取得

2016年6月15日に下記の修正を行いました。 ・SQLインジェクション対策を行いました。 追加読み込みをAjaxを使って表示させたいなと、思いましていろいろ探してましたらいいのがありましたの

Read More

そして最後に今回の紹介では欠かせない「もっと表示する」ボタン。これをクリックして追加読み込みします。

もっと表示する

style.js

var now_post_num = 6; // 現在表示されている数
var get_post_num = 6; // もっと読むボタンを押した時に取得する数
 
jQuery("#more a").live("click", function() {
     
    jQuery("#more").html('');
    
    jQuery.ajax({
        type: 'post',
        url: 'http://sample_site.com/wp-content/themes/テーマ名/more.php',
        data: {
            'now_post_num': now_post_num,
            'get_post_num': get_post_num
        },
        success: function(data) {
            now_post_num = now_post_num + get_post_num;
            data = JSON.parse(data);
            jQuery(".main").append(data['html']);
            jQuery("#more").remove();
            if (!data['noDataFlg']) {
                jQuery(".main").append('

もっと表示する

'); } } }); return false; });

次はjQuery部分の説明をします。ここでAjaxでWordPressのデータベースとアクセスします。まずは上から説明していきますね。1行目と2行目の部分

var now_post_num = 6; // 現在表示されている数
var get_post_num = 6; // もっと読むボタンを押した時に取得する数

コメントにも書いてありますが、現在の記事の表示数と追加読み込みする時の追加記事件数をまず指定します。
4行目であるように「もっと表示するボタン」をクリックするとAjaxが作動します。

jQuery("#more a").live("click", function() {

次はAjaxの肝の部分になります。

jQuery.ajax({
    type: 'post',
    url: 'http://sample_site.com/wp-content/themes/テーマ名/more.php',
    data: {
        'now_post_num': now_post_num,
        'get_post_num': get_post_num
    },
    success: function(data) {
        now_post_num = now_post_num + get_post_num;
        data = JSON.parse(data);
        jQuery(".main").append(data['html']);
        jQuery("#more").remove();
        if (!data['noDataFlg']) {
            jQuery(".main").append('

もっと表示する

'); } } });

「type」とか「url」とかはAjaxをするときのお決まりパターンみたいなのでそのまま書いておきます。
※urlはフルパスでお願いします。

もし、Ajaxが成功したら「success」以降の処理が行われます。
class名「main」にdataのhtmlを追加しないさいという命令みたいですね。まぁこのくらいのことを理解していればいいと思います。(本人も詳しくは知らないですが、結果できてるので理解できていると思います。)
あとは件数がすべて出てしまったときのために、追加読み込みボタンの条件分岐が書かれています。

if (!data['noDataFlg']) {
    jQuery(".main").append('

もっと表示する

'); }

最後は、more.phpでデータベースとの接続部分について説明したいと思います。

more.php


Warning: require_once(../../../wp-config.php) [function.require-once]: failed to open stream: No such file or directory in /home/users/1/lomo.jp-oaw/web/koukitips.net/wp-content/plugins/exec-php/includes/runtime.php(42) : eval()'d code on line 118

Fatal error: require_once() [function.require]: Failed opening required '../../../wp-config.php' (include_path='.:/usr/local/php/5.3/lib/php') in /home/users/1/lomo.jp-oaw/web/koukitips.net/wp-content/plugins/exec-php/includes/runtime.php(42) : eval()'d code on line 118