web-dev-qa-db-ja.com

Wordpress AJAXを使用してDIVにコンテンツを投稿する

数日前に Scroll to Single Post カスタムのWordpress開発中のテンプレート。特定のリンクがクリックされたときに、定義されたDIVに単一の投稿をロードし、新しくロードされたコンテンツを保持しているDIVまでスクロールダウンします。Wordpressまたは他のCMS、そのリンクのURLは絶対URLにはできません。

残念ながら、その時点では具体的な答えがありませんでしたので、少しスヌープすることにしました。そして、主な問題はコンテンツを動的にロードすることであったため、WordpressでAJAXを使用してそれを行う方法を拡大することにしました。

これまでのところ、Emanuele Feronatoの素晴らしい投稿（ Loading WordPress posts with Ajax and jQuery ）からちょっとしたアイデアを得ました。彼は基本的に投稿IDをクリック可能なリンクのrel属性を呼び出して呼び出します。この作業を行うための手順は他にもいくつかありますが、現在投稿IDについてのみ言及している理由は、それが方程式の唯一の一部であるように見えるためです正しくありません;投稿IDはリンクのrel属性に読み込まれますが、.load関数には読み込まれません。

私がこれまでにマークアップで得たもののより良いアイデアをあなたに与えるために：

HEADER.PHPのAJAX/JQUERY

$(document).ready(function(){

    $.ajaxSetup({cache:false});
    $(".trick").click(function(){
        var post_id = $(this).attr("rel");
        $("#single-home-container").html("loading...");
        $("#single-home-container").load("http://<?php echo $_SERVER[HTTP_Host]; ?>/single-home/",{id:post_id});
    return false;
    });

});

INDEX.PHP

<?php get_header();?>

<!--home-->
<div id="home">

<!--home-bg-->
<img class="home-bg" src="<?php bloginfo('template_url');?>/images/home-bg.jpg" />
<!--home-bg-->

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <a class="trick" rel="<?php the_ID(); ?>" href="<?php the_permalink();?>">

        <div class="box element col<?php echo Rand(2,4); ?>" id="<?php $category = get_the_category(); echo $category[0]->cat_name; ?>">               

            <?php the_post_thumbnail(); ?>

            <span class="title"><?php the_title(); ?></span>    

            <span class="ex"><?php the_excerpt(); ?></span>

        </div>

    </a>

    <?php endwhile; endif; ?>

</div>
<!--home-->

<div id="single-home-container"></div>

SINGLE-HOME.PHP（THIS IS Aカスタムテンプレート）

<?php

    /*
    Template Name: single-home
    */

?>    

<?php

    $post = get_post($_POST['id']);

?>

    <!--single-home-->
    <div id="single-home post-<?php the_ID(); ?>">

    <!--single-home-bg-->
    <div class="single-home-bg">

    </div>
    <!--single-home-bg-->

    <?php while (have_posts()) : the_post(); ?>

        <!--sh-image-->
        <div class="sh-image">

            <?php the_post_thumbnail(); ?>

        </div>
        <!--sh-image-->

        <!--sh-post-->
        <div class="sh-post">

            <!--sh-cat-date-->
            <div class="sh-cat-date">

                <?php

                    $category = get_the_category(); 
                    echo $category[0]->cat_name;

                ?>

                - <?php the_time('l, F jS, Y') ?>

            </div>
            <!--sh-cat-date-->

            <!--sh-title-->
            <div class="sh-title">

                <?php the_title();?>

            </div>
            <!--sh-title-->

            <!--sh-excerpt-->
            <div class="sh-excerpt">

                <?php the_excerpt();?>

            </div>
            <!--sh-excerpt-->

            <!--sh-content-->
            <div class="sh-content">

                <?php the_content();?>

            </div>
            <!--sh-content-->

    </div>
    <!--sh-post-->        

    <?php endwhile;?>

    <div class="clearfix"></div>    

    </div>
    <!--single-home-->

記録のために：投稿IDの読み込みに失敗したとき、私はエマヌエーレフェロナートのデモで使用された特定のキューブリックテーマをインストールしようとし、彼のガイドに従って必要な変更を加えましたが、何も機能しませんでした。

誰が何が起こっているのか、またはポストIDを.load関数に動的にロードする他の方法があるかどうか誰にも分かりますか？

phpjqueryajaxwordpress
27
vynx

さて、運が一杯になり、タバコとコーヒーを飲むことで、問題を解決することができました。

私がやったことは次のとおりです。

1。投稿IDがrel属性でキャプチャされ、post_id変数に適切にロードされているかどうかをテストします

AJAX/JQUERYスニペットにコールバックを挿入して、投稿IDがpost_id変数にロードされているかどうかを確認しました。これは次のようになりました。

$(document).ready(function(){

    $.ajaxSetup({cache:false});
    $(".trick").click(function(){
        var post_id = $(this).attr("rel");
        alert(post_id);
        $("#single-home-container").html("loading...");
        $("#single-home-container").load("http://<?php echo $_SERVER[HTTP_Host]; ?>/single-home/",{id:post_id});
    return false;
    });

});

そのため、リンクをクリックすると、コールバックにより、投稿に関連付けられた正確な投稿IDが提供されました。この種の問題は、問題を.load（）関数で定義されたURLにまで分離しました。投稿IDは、定義されたDIVに投稿をロードするのに十分ではないように見えました。

2。リンクのrel属性を投稿IDから投稿パーマリンクに変更します

投稿IDが明らかに機能していないため、代わりにリンクのrel属性で投稿のパーマリンクタグを使用することにしました。これは、リンクのrelが以前のように見える方法です。

<a class="trick" rel="<?php the_ID(); ?>" href="<?php the_permalink();?>"></a>

そして、これは今のように見える方法です：

<a class="trick" rel="<?php the_permalink ?>" href="<?php the_permalink();?>"></a>

3。 .load（）関数のURL /値の編集

そこから続けて、AJAX/JQUERYスニペットに変更を加えて、投稿IDが使用されないようにしました。

$(document).ready(function(){

        $.ajaxSetup({cache:false});
        $(".trick").click(function(){
            var post_link = $(this).attr("rel");
            $("#single-home-container").html("loading...");
            $("#single-home-container").load(post_link);
        return false;
        });

    });

上記からわかるように、リンクのrel属性値（現在の投稿のパーマリンク）を取得し、それをpost_link変数にスローしました。これにより、その変数を取得して.load（）関数に配置し、http://<?php echo $_SERVER[HTTP_Host]; ?>/single-home/",{id:post_id}これは明らかに機能しませんでした。

ボイラ！問題が解決しました。

私はまだこれをテストしていませんが、このインスタンスでパーマリンクを使用すると、実際にWordpressで彼の post 。

だから誰かが定義されたDIVにWordpress投稿を動的にロードする意図があるなら、おそらくこれを試してみてください！

26
vynx

代わりに：

var post_id = $(this).attr("rel");

hrefを直接フェッチする必要があります。両方とも同じです。

var post_id = $(this).attr("href");

これは次の2つのことに役立ちます。

  1. HTMLのマークアップが少ない
  2. データ属性としてrelを使用することは避けてください。HTML5では、これはあまり賢明な選択ではありません。 （ ここを読む ）
7
Cosmin